【WordPress】〔テーマ:Cocoon〕ブログの構成要素(ヘッダー)の編集(変更)方法

ブログの構成要素(ヘッダー)の編集方法

WordPressの管理画面をみてみると、左サイドの管理項目の一覧に「メニュー」や「ウィジェット」などのブログの構成要素の名称がずらっと並んでます。
初心者の私にとって、ブログの各箇所を修正するにあたって、管理画面のどの項目を編集すべきかなども分からなかったので、私自身の備忘録を兼ねて簡単にまとめてみました。

この記事では、私がブログ作成初期に行った「ヘッダー」部分の編集内容を備忘録的に綴っています。

画像に alt 属性が指定されていません。ファイル名: 2020-04-30_13h54_1211-2.png

ヘッダーの編集

⇧はこのブログのヘッダー部分。この場所には以下の3つが含まれています。

①サイトタイトル
②キャッチフレーズ
③メニュー

WordPressの管理画面でこれらの内容を編集するにはどこからできるのか。

詳細は次から順に書いています。

①サイトタイトルと②キャッチフレーズ

①サイトタイトルと②キャッチフレーズは以下の項目(2パターン)から編集可能です。(文字表記のみの編集)

〇WordPress管理画面から
「設定」→「一般設定」

〇ライブプレビュー画面から
(WordPressの管理画面)→「外観」→(ライブプレビュー画面に遷移)→「サイト基本情報」
※こちらの方が、変更内容をすぐにプレビュー画面で確認できるので便利♪

③メニュー(グローバルメニュー)

メニューの編集場所は次のとおり!
でも、そもそも「メニュー」って・・・!?っていうところからなんですが。

メニューは、設定した「カテゴリー」や作成した「固定ページ」「投稿ページ」などを集めたもので、「グローバルメニュー」と呼ばれるものを指します。

※ グローバルメニューとは!?
Webサイトの主要コンテンツへ のリンクが収集されている目次☆
Webサイト内へのショートカッ ト機能を持っている!

ということで、メニューの項目を並べてみるとこんな感じ。

メニュー項目(デフォルト)
  • カテゴリー(例:(このブログでは)子育て、教育、遊び(ゲーム)など)
  • 固定ページ(例:サイトマップ、お問い合わせ、トップページ)
  • 投稿ページ(メニューに設定できるけど、設定するケースは少数)
  • カスタムリンク(メニューに追加したいURLを直接入力してリンクを設定するもの(例:ホーム))

メニューは次のところから編集可能です。

「外観」「カスタマイズ」「ヘッダー」「背景」のどれかを選択すると、直接、ライブプレビューの画面に遷移します。
「ウィジェット」「メニュー」を選択した場合は、画面遷移後にさらに「ライブプレビューで管理」をクリック)

・ライブプレビュー画面で「メニュー」を選択すると、作成済のメニュー名が表示される(※)ので、編集したいメニュー名を選択すると、「メニューのカスタマイズ画面」に遷移します!
※メニューを新規に作成する場合は、「メニューを新規作成」ボタンを押下してください。

編集方法を次の3つに分けて説明します。
1.メニューへの項目追加方法
2.メニューの表示場所を選択する方法
3.メニューの表示内容を入力する方法

メニューへの項目追加方法

「メニューのカスタマイズ画面」で「項目を追加」をクリック➡(右サイドに項目を選択する画面が開く)➡選択したい項目を選択➡選択項目がメニュー一覧に追加

メニューの表示場所を選択する方法

設定したメニューを表示させる場所を選択します。
ヘッダーの次の箇所に表示可能です。

最下部にある①PC②タブレット③スマホの各アイコンをクリックすると、それぞれの端末でのWeb上での表示状態を確認できます!

スマホだと画面が小さいので「カラム」のブロックを使用する時(2列表示などにする時)は確認しましょう!

ヘッダーメニュー(PC用)

画像に alt 属性が指定されていません。ファイル名: 2020-04-29_18h17_391.png
このブログではこれ☆

ヘッダーモバイルメニュー(スマホ用)

画像に alt 属性が指定されていません。ファイル名: 2020-05-01_12h56_31.png
このブログではこれ☆

ヘッダーモバイルボタン(スマホ用)

ヘッダー(サイトタイトル)の左右部分に「メニュー」や「検索」などのボタンを設置するものです。
私はモバイルボタンを使っていませんが、設定方法などは次のサイトに詳しく書かれていますので参考にリンクを掲載します。

メニューの表示内容を入力する方法

設定したメニューの表示内容を入力する方法です。
「メニューのカスタマイズ画面」で各項目の右端に表示されている「▼」マークを押下すると次の2つの記入欄が開きます。

・「ナビゲーションラベル」欄
未記入だと、カテゴリーの名称などが表示されます。(このブログでは「教育」など)
・「概要」欄
入力は任意です。入力した文字は、ナビゲーションラベルの下部に表示されます。(以下の表示では「education」)

ヘッダーモバイルメニューを横スクロールする方法

スマホ画面でのヘッダーメニューが下に大きく広がり、表示スペースを大きく占拠していたので、以下の記事を参考に、1行にまとめるとともに簡単に横スクロールできるようにしました☆

こんな感じになりました☆横スクロール♪

④他の項目

〇WordPress管理画面(Cocoon設定)から
テーマCocoonを使用していると、次の内容も簡単に変更できちゃいます♪

変更できる内容
  1. ヘッダーのレイアウト(ロゴの位置など)
  2. ヘッダーの固定(スクロール時のヘッダー追従)
  3. ヘッダーの高さ(PC・モバイル)
  4. ヘッダーのロゴ選択・ロゴサイズ調整
  5. キャッチフレーズの配置
  6. ヘッダー背景画像選択
  7. ヘッダー全体色
  8. ヘッダーロゴ部の色
  9. メニュー色(背景色・テキスト色)
  10. メニュー幅

    「赤字」は私のブログで変更しているものです☆

変更する場所はこちら⇩⇩⇩

これまでに出てきた内容以外のヘッダー箇所を調整したい場合は、CSSのコードなどを入力する必要があります。
私が追加で入力したCSSのコードなどについては、次のページで紹介しています。

THANKS!

⇧のリンク挿入は、以下のサイトを参考にしました♪

⇒Ikumiさんのサイト「あぁ、ブログ。」

ヘッダーの編集方法については、以上です。

タイトルとURLをコピーしました