当サイトのコンテンツにはプロモーションが含まれる場合があります
ブログ

ブログで四角い枠?箱?にアイコン表示されてるのは何?→サイドバーのボックスメニューって名前らしい

ワードプレスでブログを楽しんでいると、こんな事ありませんか?

おかめ
おかめ
このサイトデザインめっちゃカッコいい~!

と思った時にそのブログやサイトでよく目にする、このアイコンマークが入った四角いボックス

ブログの四角い枠にアイコン表示されてる奴ってなに?→サイドバーのボックスメニューを作りたい
おかめ
おかめ
これなんだろう??

と思って調べてみたら、

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

と呼ばれるもののよう。

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

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

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

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

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

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

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

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

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

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

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

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

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

サイドバーにメニューの文字も入れたい

ブログの四角い枠にアイコン表示されてる奴ってなに?→サイドバーのボックスメニューを作りたい

ボックスメニューが入ったのを見ていたら、せっかくなので文字も入れたいという気持ちに。

ウィジェットは最近変化があったようで、いじりやすい方法はJINのマニュアルを見ました。

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

プラグインをダウンロードして有効化すると、旧式の状態でいじることができます。

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

でプレビューを確認すると文字がきちんと入っていました。

ブログのデザインをいじれる時間が取れたので、今までやりたい事をやれて満足です。