【Cocoon】ヘッダーのタイトルと説明文の位置を入れ替える方法

ヘッダーに表示されるサイトタイトルとキャッチフレーズの上下位置を変えたいと感じる初心者の方は多いのではないでしょうか。

Cocoon では専門的な操作をしなくても、設定画面の項目を変更するだけで上下位置を簡単に入れ替えることができます。

この記事では、その変更手順を迷わず進められるように、必要な画面と操作だけを分かりやすくまとめています。

※当ブログ内で使用している専門用語の意味については、「AI副業でよく使われる用語集（初心者向け）」のページをご参照ください。

表示位置を入れ替える目的

ブログの印象は、最初に表示されるヘッダーエリアによって大きく左右されます。

サイトタイトルとキャッチフレーズの上下関係は、読む人の視線の流れを決める重要な部分です。

デフォルトではタイトルが下、キャッチフレーズが上に配置されていますが、ブログの内容やデザインに合わせて「キャッチフレーズを下にしたい」「タイトルを上にしたい」と感じるケースはよくあることです。

以前は CSS を追加したりカスタマイズ画面で調整したりする必要がありましたが、現在の Cocoon では設定画面だけで簡単に入れ替えができるため、初心者でも安全かつ確実に変更できます。

ここからは、実際にどの項目を変更していけばよいかについて順番に説明していきます。

ここからは、タイトルとキャッチフレーズの表示位置を入れ替える手順について説明します。

まずWordPressの管理画面にログインしたら、左メニューの「Cocoon設定」をクリックします。

以下の画面が開いたら、「ヘッダー」タブをクリックします。

つぎに開いたぺーじを下の方へスクロールしていくと、以下のように「キャッチフレーズの配置」という設定項目があります。

Cocoon の初期状態では「ヘッダートップ（デフォルト）」が選ばれていますので、「ヘッダーボトム」をクリックして変更し、最後にページの最上部または最下部にある「変更をまとめて保存」をクリックします。

「変更をまとめて保存」をクリックした時点で、以下のようにプレビュー画面上でサイトタイトルとキャッチフレーズの上下位置が入れ替わっていることが確認出来ます。

念のため、ブラウザ上でもページを更新して確認してみると、以下のようにちゃんと上下位置が変更されていました。

もし反映されない場合は、ブラウザの再読み込みボタンを押して、再度確認してみてください。

ヘッダーエリアのサイトタイトルとキャッチフレーズの上下位置を入れ替えるカスタマイズは、たったこれだけで完了です。

なお最近ではスマートフォンで見ている方が多くなってきていますので、スマートフォンでの表示も必ずチェックしておくようにしてください。

万が一元に戻したい場合も、同じ画面で選択肢を切り替えるだけで戻せます。

キャッチフレーズをタイトルの下に配置すると視線の流れが自然になります。

特にスマートフォンでは縦読みが中心のため読みやすさが向上します。

ヘッダーはブログ全体の第一印象を決める重要な部分です。

わずかな配置変更でもデザインの印象が大きく変わりますので、一度試してみてください。

ヘッダーエリアのサイトタイトルとキャッチフレーズの位置を入れ替える作業は、Cocoon 設定内の操作だけで完了します。

特別なカスタマイズや CSS を覚える必要がなく、初心者でも迷わず進められる点が大きなメリットです。

実際の操作は「キャッチフレーズの配置」を変更するだけで反映されるため、現在の表示を確認しながら調整できます。

ヘッダー部分はサイトの第一印象を決める重要なエリアですので、今回の手順を使ってあなたのブログに合った見やすい配置に整えてください。