サイドバーに四角い枠(箱)でアイコン表示されてるボックスメニューを作りたい!【JIN】

ワードプレスでブログを楽しんでいると、このサイトデザインかっこいい！

と思うものの1つ、アイコンマークが入った四角いボックス。

と思った時に、よく目にするアイコンマークが入った四角いボックス。

これは何だ？と思って調べてみたら

• サイドバーに作れる
• ボックスメニュー(メニューボックス)

と呼ばれるもののよう。

ぽんひろさんという方はボックスナビと読んでおられるそう。

その方がcssとhtmlを分かりやすく、的確に付け方を紹介して下さっていたので私もやってみました。

ぽんひろさんの解説記事→ボックス分けされたナビを作る！回遊率をアップしよう！

※ワードプレスのテーマはJINを利用しています。

ボックスメニューの作り方

パソコンやタブレットではサイドに表示されてますが、スマホだとサイドバーが記事本文の下の方に出てくるので、私はサイドバーで表示させることにしました。

サイドバーに表示する場合

1. ボックスメニューのcssを
2. カスタマイズ→追加cssなどに追加
3. サイドバーでカスタムhtmlに追加

詳しくはぽんひろさんのサイトを参考にさせて頂きました。

指定の場所にコピペするだけなので、難しい事が出来ない私でも簡単に行うことができました。

自分のブログに応用するにあたり、

• アイコンはJINのもの
• URLは表示させたりカテゴリー
• 名前はなるべく簡潔に

でメモ帳などで適宜自分の好みで調節して、カスタムhtmlを貼り付けました。

アイコン下にメニューの文字も入れたい

アイコンがボックスに入ってるのを見ていたら、せっかくだし文字も下に入れたい！という気持ちに。

いじりやすい方法はJINのマニュアルを見ました。

JINマニュアル→サイドバーメニューの作り方

文字の入れ方

1. サイドバーにテキストを追加
2. メニューなどタイトル部分に文字入れ
3. ボックスメニューの上にずらして完了ボタン

これで確認すると文字がきちんと入っていました。