ワードプレスでブログを楽しんでいると、こんな事ありませんか？
はなこ
このサイトデザインめっちゃカッコいい！
と思った時に、よく目にするアイコンマークが入った四角いボックス。
これは何だ？と思って調べてみたら
- サイドバーに作れる
- ボックスメニュー(メニューボックス)
と呼ばれるもののよう。
ぽんひろさんという方はボックスナビと読んでおられるそう。
その方がcssとhtmlを分かりやすく、的確に付け方を紹介して下さっていたので私もやってみました。
ぽんひろさんの解説記事→ボックス分けされたナビを作る！回遊率をアップしよう！
※ワードプレスのテーマはJINを利用しています。
ボックスメニューの作り方
パソコンやタブレットではサイドに表示されてますが、スマホだとサイドバーが記事本文の下の方に出てくるので、私はサイドバーで表示させることにしました。
サイドバーに表示する場合
- ボックスメニューのcssを
- カスタマイズ→追加cssなどに追加
- サイドバーでカスタムhtmlに追加
詳しくはぽんひろさんのサイトを参考にさせて頂きました。
指定の場所にコピペするだけなので、難しい事が出来ない私でも簡単に行うことができました。
自分のブログに応用するにあたり、
- アイコンはJINのもの
- URLは表示させたりカテゴリー
- 名前はなるべく簡潔に
でメモ帳などで適宜自分の好みで調節して、カスタムhtmlを貼り付けました。
アイコン下にメニューの文字も入れたい
アイコンがボックスに入ってるのを見ていたら、せっかくだし文字も下に入れたい！という気持ちに。
いじりやすい方法はJINのマニュアルを見ました。
JINマニュアル→サイドバーメニューの作り方
- サイドバーにテキストを追加
- メニューなどタイトル部分に文字入れ
- ボックスメニューの上にずらして完了ボタン
これで確認すると文字がきちんと入っていました。
コメント