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