みなさんこんにちわ。ガーちゃんです。
いつもＢＬＯＧを見て頂きありがとうございます。
今回はガーちゃんも使っているＣｏｃｏｏｎでボックスメニューの作り方についてお話ししたいと思います。興味のあるかたはぜひ最後まで見ていってください。
- Cocoonでカスタマイズをしたい
- ボックスメニューを作りたい
- おしゃれなＢＬＯＧにしたい
ボックスメニューとは？
よくＢＬＯＧで見かけるボックスメニューについて今回はおはなしします。
記事数が増えてきたらどんどん過去に書いた記事が探しにくくなってきますよね。
なので簡単に記事を見つけやすくするためにサイドバーにボックスメニューを表示させて読む人が探しやすくなるようにカテゴリー別で見つけやすくなればいいなとおもい追加しました。
Cocoonでは難しい設定なしで簡単に設置できるので初心者の私でもすぐに設置できました。
でわ実際に作成していきたいと思います。
ボックスメニュー作成手順
- step1
「外観」から「メニュー」を選択します
「新しメニューを作成しましょう」をクリックして選択してください。
- step2
メニュー名に「Ｂｏｘメニュー」と入力します。
※メニュー名はわかりやすい名前で大丈夫です。
入力したら「メニューを作成」をクリックします
- step3
画面右上の「表示オプション」をクリック
- step4
表示オプションが表示されるので
「ＣＳＳクラス」「説明」に✔を入れてください
- step5
ボックスメニューの項目は、少し下にある「メニュー項目を追加」から、「固定ページ」「投稿」「カスタム」に登録してある、お好きな項目を選んでボックスメニューに表示することが出来ます。
今回は、カスタムリンクの「ＨＯＭＥ」「カテゴリー」固定ページの「問い合わせ」の項目からボックスメニューに表示したい項目を選んで進めます。
カテゴリーの「すべて表示」をクリックとすると、カテゴリーに登録してある項目がすべて並びますので、その中からボックスメニューの項目にしたいものにチェックを入れます。
メニューの追加をクリックするとメニュー構造に表示されます。
「メニューの保存」で一度保存します。
- step6
まずＨＯＭＥの矢印を押してもらうと詳しい設定ができます
「ナビゲーションラベル」はボックスメニューで表示される名前です
「css class」は画像になります。
- step7タイトル
- step8
「css class」は
Ｆｏｎｔ Ａｗｅｓｏｍｅ４ のアイコンをお使いください。
homeマークでしたら赤のカッコ内の「fa fa-home」をコピーしてはりつけます。
ほかのアイコンも貼り付けたら保存してください。
- step8
次に「外観」から「ウィジェット」に行きます。
「ボックスメニュー」を選択して「サイドバー」を選択します。
「ウィジェットを追加」をクリックするとサイドバーの項目に追加されます。
- step10
メニュー名に自分が保存した名前を選択します。
私の場合は「Boxメニュー」にしています。
タイトルを表示したい場合はタイトルを入力してください
タイトルなし 
タイトルあり
ここまででボックスメニューができていると思います。
次はボックスメニュのカスタマイズ
「外観」→「カスタマイズ」→ 「追加ＣＳＳ」に追加するか
「テーマファイルエディター」→「cocoon childスタイルシート」
に貼り付けてください。
※ＣＳＳに慣れるまでは必ずバックアップを取るようにしてください。
.box-menu-icon{
color: #ffff00;
}
“#ffff00”は「黄色」のカラーコードです。
この「#6桁」のコードを変更すると色が変わります。
「#6桁」はカラーコード表などで探して下さい。
/*ボックスの背景色を変更*/
.box-menu{
background: #ff0000;
}
“#ff0000”は「赤色」のカラーコードです。
CSSに貼ることで背景が白から赤に変わります。
.box-menu-label{
color: #ff0000;
font-size: 18px;
}
もともとの文字のカラーは”#7777777”で、文字の大きさが14pxの設定だったのを文字カラーを（赤い字の部分）”#ff0000″の赤色で、文字の大きさを（青色の部分）18pxに変更しています。
.box-menu:hover{
box-shadow: inset 2px 2px 0 0 #ff0000,
2px 2px 0 0 #ff0000,
2px 0 0 0 #ff0000,
0 2px 0 0 #ff0000;
}
ボックスメニューにカーソルを置くとカラーの枠が現れます。もともとのアイコンと同じカラーなので赤い字の部分をカラーコードを入れると変更されます。
以上でボックスメニューカスタマイズは終了です。
まとめ
今回はボックスメニューをサイドバーに追加する設定方法についてお話ししました。
初心者の私でも簡単に設定できたので、ぜひチャレンジしてみてください。
最後までお読み頂きありがとうございます。
おわり。。。。。。
コメント