こんにちは、yujiです！このブログでは、WordPressを使ったブログ運営について詳しくまとめています。
「ヘッダーメニューにタグごとのサブメニューを細かく追加表示して、おしゃれにカスタマイズしたい。」
このように、ブログ内でのカテゴリごとへのアクセスをよくするために必要なのが「ヘッダーメニュー」です。表示場所は以下の通り。
このように、ヘッダー下に表示されるメニューのことです。ここではカテゴリー別にメニューを表示していますが、その下層にさらに細かいタグごとのサブメニューを表示できるようにします。
ということでこの記事では、Cocoonのヘッダーサブメニューの設定方法を解説します。
✔ Amazaonアソシエイトに挑戦中の方にお知らせ。
2020年3月以降、Amazaonアソシエイト審査方法が変更されました。この変更についてはまだネット上に情報が不足しているので、ブログをはじめたてで混乱している方もいると思います。
変更点の詳細とその攻略法を、以下の記事に詳しくまとめました。
【2020年3月最新攻略法】Amazonアソシエイトの審査方法が変わる！アカウント作成から180日以内に少なくとも3つの適格販売が必要に。
ヘッダーメニューを編集します。
ヘッダーメニューのカスタマイズの流れは以下の通りです。
✔ ヘッダーメニューのカスタマイズの流れ
①サブメニューの追加
②カスタマイズ
このようにデザインしていきます。
「まずはサブメニューを追加していきます。」
①サブメニューの追加
まずはヘッダーメニューの下層に、新たにサブメニューを追加します。
実際にカテゴリ「LIFE」にサブメニューを追加してみます。
WordPressメニューの「外観」から「メニュー」を選択します。画面上部の選択欄は「ヘッダーメニュー」に合わせてください。
このような画面です。赤で囲った部分が、現在表示されているヘッダーメニューの中身です。
「メニュー項目を追加」から、サブメニューとして追加したい項目を選びます。僕の場合、タグごとにサブメニュー化したいので「タグ」を選択。
サブメニューとして表示したい項目を選択し「メニューに追加」をクリックします。
これでメニュー構成の一番下に、新しいメニュー2つが追加されました。
追加した項目は、クリックでつかんで自由に上下移動できます。カテゴリ「LIFE」のなかに副項目として「初心者ブログメモ」と「成長のためのメモ」を移動しました。
一段下がって状態で、サブメニューとして表示されています。これで「メニューを保存」をクリック。
これで「LIFE」の下にサブメニューが表示されるようになりました。
「続いてデザインをカスタマイズしていきます。」
②カスタマイズ
メニュー幅を変える。
「Cocoon設定」から「ヘッダー」と進み、一番下に「グローバルナビメニュー幅」という項目があるので「サブメニュー幅」で変更します。
僕の場合、少し幅を縮めたかったので、デフォルトの240pxから180pxに変更します。幅を変えたら、「変更をまとめて保存」をクリック。
このように、デフォルトと比べて少しだけ短く出来ました。
点線でサブメニュー内を区切る。
「外観」の「テーマエディター」から「style.css」を開き、以下のコードをコピペしてください。メモ書きも残しておいたので、参考にしていただけたらと思います。
✔ style.cssにコピペするコード
.sub-menu .caption-wrap {
border-top: dotted #dddddd; /*点線を追加*/
background:#fff; /*背景を白に*/
padding:0 0 0 2em; /*細かい幅の調整*/
margin:0;
}
.navi-in > ul .sub-menu a:hover {
transform: none!important; /*マウスオーバー時の動作をやめる*/
}
コピペができたら「ファイルを更新」をクリック。
点線が表示されるようになりました。
これでサブメニューのカスタマイズは完了です。
この記事が少しでもお役に立てたら幸いです。最後まで読んでいただき、ありがとうございました！
・【スキルなしでもOK！】記事へのアクセスが増えるおしゃれな『アイキャッチ画像』の作り方【canva】
・【その画像の著作権、大丈夫ですか？】僕がおすすめする『安心のフリー素材サイト』9選！
・【Twitterデータ公開してます】14日間でフォロワーを2,000人増やすノウハウ。
・【2020年最新版】キャッシュレス初心者向け、おすすめのQRコード決済4選！
・【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較！
コメント