SWELLのキャッチフレーズの設定方法！表示されない・非表示にできない時の解決法も

ブログのヘッダーに出てくる短い一言を変えたいのに、どこで設定すればいいのか分からない…と感じていませんか。SWELLでキャッチフレーズを表示したい、あるいは表示位置や見た目をきれいに整えたい、という相談は本当によく聞きます。

この記事で分かる事

キャッチフレーズの設定場所と、表示される場所の違い
SWELLで選べるキャッチフレーズ表示パターンと使い分け
キャッチフレーズが表示されない・崩れるときの原因と対処法
SEOと相性のいいキャッチフレーズの考え方

ひと言でまとめると、「どこでテキストを入力して、どこに表示させるか」を整理してあげれば、SWELLのキャッチフレーズはデザインもSEOも両方いい状態にできる、というのがこの記事の結論です。

SWELLのキャッチフレーズ表示・設定の前に知っておきたいこと
SWELLでキャッチフレーズを設定する具体的な手順
SWELLキャッチフレーズの表示パターンとデザインのコツ
SEO目線でのSWELLキャッチフレーズ設定のポイント
SWELLキャッチフレーズ表示をCSSで微調整する方法
SWELLのキャッチフレーズに関するよくある質問
SWELLキャッチフレーズ設定と表示のまとめ

SWELLのキャッチフレーズ表示・設定の前に知っておきたいこと

ごとう

まずは、SWELLでキャッチフレーズを設定するときに「何がどこに表示されているのか」をざっくり整理しておきましょう。ここをふわっとしたまま触ると、あとで「あれ？さっき変えたのに反映されてない…」という混乱が起きがちです。

SWELLのキャッチフレーズとは？どこに表示されるか

SWELLでいうキャッチフレーズは、サイト名だけでは伝わりにくい「このサイトは何をしている場所なのか」を補足する一文です。WordPress標準の機能として用意されていて、SWELLはそれをいろいろな場所に活用しています。

代表的な表示場所を整理すると、こんなイメージです。

場所	説明
ヘッダーバーのキャッチフレーズ	ページ最上部の細いバーの中に表示される一文
ロゴの近くのキャッチフレーズ	ロゴの右横や下に、小さめの文字で表示される説明文
ブラウザタブのタイトル	ブラウザのタブに出るタイトル文字列の一部として使われる場合がある
検索結果のタイトル	「サイト名｜キャッチフレーズ」のような形で検索結果に表示されることがある部分

キャッチフレーズは、単なる飾りというより「サイトの名札」を補強する役割に近いです。検索結果のタイトルやクリック率にも関わってくるので、SWELLでのキャッチフレーズ表示をきちんと整えておく価値は大きいです。

SWELLでキャッチフレーズを設定するときの基本ルール

SWELLのキャッチフレーズは、ざっくり次の2段階で考えると分かりやすくなります。

どのテキストを「キャッチフレーズ」として使うか（WordPress側の設定）
そのキャッチフレーズを、画面のどこに表示するか（SWELL側の設定）

もう少し具体的に言うと、こういう仕組みです。

「設定」→「一般」で入力したキャッチフレーズが、サイト全体の基本データになる
「外観」→「カスタマイズ」→「ヘッダー」で、ヘッダーバーやロゴ付近など表示位置を選ぶ

この2つが頭の中でごちゃっと混ざっていると、「ちゃんと入力したのに出てこない」「非表示にしたつもりが別の場所に残っている」といったモヤモヤにつながりやすいです。ここから先は、実際の操作を順番に見ながら整理していきます。

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

稼げる広告
稼げるキーワード
稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ

SWELLでキャッチフレーズを設定する具体的な手順

ごとう

ここからは、キャッチフレーズの入力から、SWELL側での表示設定、よくあるつまずきポイントまでをステップごとに見ていきます。順番にやっていけば難しい作業ではないので、管理画面を開きながら一緒に進めてみてください。

WordPress一般設定でキャッチフレーズを入力する

最初のステップは、WordPress本体側で「キャッチフレーズの中身」を決めることです。ここで入力した文章が、SWELLでも基本として使われます。

操作の流れは次の通りです。

管理画面のサイドバーから「設定」をクリックする
「一般」を開く
「キャッチフレーズ」という項目に、一文の説明を入力する
ページ下部の「変更を保存」をクリックする

入力するときのイメージは、次のような感じです。

項目	例	ポイント
サイトのタイトル	例：○○ブログ	ブログ名・サイト名・サービス名など、看板になる名前
キャッチフレーズ	例：副業ブログで月数万円を目指す会社員向けの情報サイト	「誰向け」「何のサイトか」が一文で伝わるように意識する
メールアドレスなど	任意入力	キャッチフレーズの表示とは直接関係しない項目

SWELLでは、この「一般設定」で入力したキャッチフレーズが、ヘッダーまわりの表示だけでなく、タイトルタグの一部としても使われます。そのため、ただの飾りではなく、検索で狙いたいキーワードも軽く意識しながら、分かりやすい一文にしておくのがおすすめです。

SWELLカスタマイザーでキャッチフレーズの表示位置を決める

次に、SWELL側で「キャッチフレーズを画面のどこに出すか」を決めます。ここを設定しておかないと、せっかくキャッチフレーズを入力しても、サイト上に表示されないことがあります。

大まかな操作の流れは次の通りです。

管理画面の「外観」→「カスタマイズ」を開く
「ヘッダー」を選ぶ
その中の「キャッチフレーズ設定」を探す
「キャッチフレーズの表示位置」から表示場所を選ぶ

設定画面では、おおむね次のような選択肢が用意されています。

設定項目	主な内容	使いどころ
キャッチフレーズの表示位置	ヘッダーバー / ヘッダーロゴの近く / 表示しない	キャッチフレーズをどの位置に出すかの基本設定
ヘッダーバー設定	ヘッダーバー自体のON/OFF・色など	細いバーそのものを使うかどうかを決めたいとき
SNSアイコンリスト	ヘッダーバー内のSNSアイコンを表示するかどうか	キャッチフレーズとSNSアイコンを並べるかどうかの調整

まずは「ヘッダーバー」か「ヘッダーロゴの近く」か、どちらで見せたいかを決めてみてください。私なら、情報量が多いブログやメディアはヘッダーバー、1枚ものに近いシンプルなサイトはロゴの近く、といった分け方をよくします。

SWELLでキャッチフレーズが表示されないときのチェックリスト

「ちゃんと設定したつもりなのにキャッチフレーズが出てこない」というケースも多いので、原因になりやすいポイントをまとめておきます。ひとつずつ潰していくと、たいていどこかに答えがあります。

チェック項目	よくある状態	対処の方向性
キャッチフレーズの入力	「設定＞一般」のキャッチフレーズが空欄のまま	まずはテキストが入っているかを確認し、一文入力する
表示位置の設定	「キャッチフレーズを表示しない」が選ばれている	ヘッダーバーかヘッダーロゴの近くを選び直す
ヘッダーバーの状態	ヘッダーバー自体がOFFになっている	ヘッダーバーを使いたい場合はONにする
デバイスの違い	スマホ画面だけを見て「表示されていない」と思っている	PC表示でも確認し、仕様や設定で非表示になっていないかを見る
カスタマイズCSS	独自CSSで該当要素にdisplay:none;を指定している	CSSを確認し、不要な非表示指定がないかチェックする

特に多いのが、「スマホでしか確認していない」パターンです。SWELLのバージョンや設定によっては、キャッチフレーズがPC中心の作りになっていることもあるので、PC表示とスマホ表示の両方を見ながら調整していくと安心です。

【ちょっと一息♪】

私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？

⇒今すぐその秘密を見る

SWELLキャッチフレーズの表示パターンとデザインのコツ

ごとう

ここからは、キャッチフレーズを「どこに表示するか」というデザイン寄りの話です。どのパターンを選ぶかで、サイトの雰囲気や情報の伝わり方がかなり変わります。自分のサイトの目的に合わせて、しっくりくる配置を選んでいきましょう。

ヘッダーバーにキャッチフレーズを表示する場合

ヘッダーバーは、ページ最上部に細く伸びるエリアです。ここにキャッチフレーズを出すと、どのページを開いても、常にサイト全体のコンセプトを見せられます。

ヘッダーバーと相性がいいのは、例えばこんなサイトです。

向いているサイト	理由
情報量が多いブログ	どのカテゴリーの記事にいても、「このブログは何を扱っているか」を一目で伝えられる
企業サイト・店舗サイト	エリアやサービス内容など、会社やお店の特徴を短く示しやすい
キャンペーン訴求をよくするサイト	常に目に入る位置に、オファーやお知らせを表示しやすい

注意したいのは、ヘッダーバーに長すぎる文章を入れると、1行に収まりきらず読みにくくなることです。PCとスマホの両方で見ながら、だいたい全角30〜40文字前後に収めると、すっきり見えるケースが多いと感じています。

ロゴの近くにキャッチフレーズを表示する場合

ロゴの右横や下に、小さめの文字でキャッチフレーズを表示するパターンです。シンプルなヘッダーが好みの人には、この配置がかなり使いやすいと思います。

ロゴの近くにキャッチフレーズを出すメリットは次の通りです。

サイト名とキャッチフレーズをセットで見せられる
ヘッダーバーほど主張が強くないので、ミニマルなデザインと相性がいい
グローバルメニューや検索ボタンの邪魔になりにくい

一方で、ロゴ付近はもともとスペースが限られているので、キャッチフレーズが長すぎると、改行位置によってバランスが崩れることもあります。その場合は、文字数を少し削るか、あとで紹介するCSS調整でフォントサイズを少し小さくするなど、見た目を微調整してあげるときれいに収まります。

キャッチフレーズの文字数と改行バランスの考え方

キャッチフレーズは、内容を伝えようとするとつい長くなりがちですが、長すぎるとヘッダーのデザインを圧迫してしまいます。目安として、表示位置ごとに意識したい文字数を整理してみます。

表示場所	おすすめ文字数の目安	コメント
ヘッダーバー	全角30〜40文字前後	PCでもスマホでも1〜2行に収まる長さを意識すると読みやすい
ロゴ付近	全角20〜30文字前後	サイトタイトルとのバランスを見ながら、欲張りすぎない長さに調整する
タイトルタグ内	重要キーワード＋簡潔な説明	検索結果で途中で切れにくい長さを意識する

もちろん、これはあくまで目安です。実際には、自分のサイトをPCとスマホで表示してみて、「ぱっと見て読みやすいかどうか」を基準に少しずつ調整していくのが一番確実です。

【稼げるキーワード教えます】
▼　　▼　　▼

★ちょっとだけ宣伝させてください★

「ブログで10万」と聞くと、

センスが必要
文章力が要る

と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。

⇒ブログで10万稼ぐ勝ちパターンとは

SEO目線でのSWELLキャッチフレーズ設定のポイント

ごとう

次は、キャッチフレーズを「検索で見つけてもらうための一文」として考えるパートです。SWELLの仕様上、キャッチフレーズがタイトルタグに含まれるケースが多いので、ここを適当に済ませてしまうのはもったいないです。

キャッチフレーズがタイトルタグや検索結果に与える影響

SWELLでは、サイト全体のタイトルタグに「サイトタイトル＋キャッチフレーズ」が組み合わさる形になる設定がよく使われます。その場合、検索結果でも「サイト名｜キャッチフレーズ」のような形で表示される可能性があります。

もし、ここが次のような状態だと、正直かなり損をしてしまいます。

パターン	例	問題点
初期設定のまま	Just another WordPress site	何のサイトか伝わらず、クリックされにくい
ぼんやりしすぎ	日々の暮らしを綴るブログ	誰向けで、どんな情報があるのかイメージしづらい
サイト運営者目線だけ	管理人の好きなことを書いています	読者にとってのメリットやテーマが分かりにくい

一方、SWELLのキャッチフレーズを少し丁寧に考えるだけで、検索結果での印象はかなり変えられます。

ジャンル	キャッチフレーズの例
ブログ・アフィリエイト	会社員が副業ブログで収入を増やすための、再現しやすい実践ノウハウをまとめたサイト
店舗サイト	○○駅徒歩3分のプライベートサロン｜一人ひとりの髪の悩みに寄り添う完全予約制ヘアサロン
専門メディア	初心者が挫折しにくいプログラミング学習ロードマップと、現場で役立つ知識を解説するサイト

このように、「誰向けか」「何のサイトか」「どんな良いことがあるか」を一文で表現できると、SWELL キャッチフレーズの設定がそのままSEO面の強みになってくれます。

キーワードを意識したキャッチフレーズの作り方

キャッチフレーズを考えるときは、狙いたいキーワードをぎゅうぎゅうに詰め込むのではなく、「自然な日本語に溶かし込む」イメージが大事です。私がよく使う考え方は次の通りです。

まず、メインで狙いたいキーワードを1〜2個メモする
そのキーワードに興味がありそうな読者像を一人思い浮かべる
その人に口頭でサイトの説明をするとしたら、どう言うかを考える
その説明文の中に、さりげなくキーワードを入れる

例えば、「副業ブログ始め方」というキーワードを意識するなら、こんなキャッチフレーズが考えられます。

会社員の副業ブログの始め方から収益化までを、初心者にも分かりやすく解説するサイト

こんなふうに、自然な文章の中にキーワードを混ぜてあげると、読者にも検索エンジンにも好かれやすいキャッチフレーズになります。

私が実際にやっているキャッチフレーズ見直しのコツ

最後に、私が自分のブログでキャッチフレーズを見直すときの手順も共有しておきます。難しく考えすぎず、ラフに回していくくらいがちょうどいいです。

まず「このサイトは誰の役に立ちたいのか」を一言で書き出す
その相手に向けて、口頭で自己紹介するつもりで一文作る
その一文の中に、狙いたいキーワードが自然な形で入るように微調整する
SWELLのキャッチフレーズ設定に反映し、PCとスマホで見た目を確認する
しばらく運用してみて、「もう少しこう言いたいな」と思ったら、また書き換える

キャッチフレーズは、サイトの方向性の変化に合わせて育てていく部分です。「一度決めたら変えてはいけないもの」ではないので、気負わずに試行錯誤してみてください。

SWELLキャッチフレーズ表示をCSSで微調整する方法

ごとう

ここからは、少しCSSも触ってみたい方に向けて、SWELLのキャッチフレーズ表示を微調整する考え方を紹介します。コードを書くのが苦手な場合は、「こういうこともできるんだな」と眺めるだけでもOKです。

スマホにもキャッチフレーズを表示したい場合の考え方

設定やバージョンによっては、スマホ表示でキャッチフレーズが出ていないように見えるケースがあります。スマホでもキャッチフレーズを表示したいときは、次のような観点で考えると整理しやすいです。

まず、PC表示でキャッチフレーズが正しく出ているかを確認する
スマホ表示で非表示になっているのは仕様か、CSSで隠しているのかを確認する
スマホだけ表示させたい場合は、メディアクエリ内でdisplayを変更する
逆にスマホでは非表示にしたい場合は、スマホだけdisplay:none;にする
スマホで2行になっても読みやすいように、フォントサイズや行間も調整する

実際に書くコードは、サイトの構成や子テーマの有無などによって変わりますが、考え方としては「スマホ用のスタイルでキャッチフレーズ部分の見え方を上書きする」というイメージでOKです。

文字が長すぎて崩れるときの対処アイデア

キャッチフレーズの文字数が多いと、ヘッダーバーやロゴ付近の幅を超えてしまい、改行位置が不自然になったり、見た目が窮屈になったりすることがあります。そんなときに試せるアイデアを整理しておきます。

状態	対処アイデア
1行に収まらず読みにくい	フォントサイズを少し小さくする / paddingを少し減らす
行間が詰まりすぎている	line-heightを少し大きくして読みやすくする
ロゴとキャッチフレーズがぶつかる	ロゴのサイズを少し下げるか、キャッチフレーズの位置を下にずらす
スマホだけ窮屈に見える	スマホ用だけキャッチフレーズを短くするか、思い切って非表示にする