ぽんひろさんの「ボックスナビ」を付けてみました!SWELLでの注意点は?

2019 11/16
ぽんひろさんの「ボックスナビ」を付けてみました!SWELLでの注意点は?

以前からブログの見やすさ、いわゆるユーザーフレンドリーにするにはどうしたらいいか考えていました。

そこでこの前、TOPページに「主なカテゴリー」のピックアップバナー(SWELLの機能)を追加しました。

あわせて読みたい
[HTML/css/PHP初心者]ブログのトップページに1文追加してみた
[HTML/css/PHP初心者]ブログのトップページに1文追加してみたHTML、css、PHP初心者が、ブログのトップページに見出しを一つ追加するためにやったことをまとめました。親テーマのファイルを子テーマに複製、css追加、php修正など、その手順を紹介しています。

しかし、ピックアップバナーに載せている4つのカテゴリー以外も、サクッとアクセスできるようにしたほうがいいよな、と悩んでおりました。

だってPythonに興味ある人が、「プログラミング」カテゴリの記事一覧に行ってみたら、新着記事はVBAばっかりだった・・・ってなったら不便ですもの。

なんとかしたい・・・!

そんな時に見つけたのが、ぽんひろさんの以下の記事。

ぽんひろ.com
ボックス分けされたナビを作る!回遊率をアップしよう!
ボックス分けされたナビを作る!回遊率をアップしよう!区分けされたナビゲーションをHTMLとCSSで作ります。単純なグローバルナビゲーションよりも視認性が高く、スマホでタップしやすいのでユーザーに優しいインタフェースにな...

一目見て気に入りました、ボックスナビ!

ボックスナビをサイドバーに付ければ各カテゴリーにすぐにアクセスできる!

ブログ内の回遊率Upだ!

と意気込み、早速ボックスナビを導入してみました。

ホントに簡単にできましたので、ご紹介します。

素敵なデザインを無償で公開してくれているぽんひろさんに感謝です!

サイドバーに設置したボックスナビ
サイドバーに設置したボックスナビ 全カテゴリへのリンクとなっている
目次

STEP1:CSSをコピペ

まずはCSSを設定していきます。

基本的にはぽんひろさんの記事に書いてある通りです。

追加CSSにCSSをコピペ
「外観」→「カスタマイズ」→「追加CSS」でCSSをコピペ

「外観」→「カスタマイズ」→「追加CSS」と開き、CSSをコピペします。

ちなみに、私はFontAwesomeは使わないので、88行目の「 /* fontawesome */ 」以降はコピペしませんでした。

また、CSSは場合によっては以下のように少し修正が必要となります。

SWELLでの注意点

ぽんひろさんのブログ記事にも書いてありますが、サイドバーにボックスナビを設定する場合、CSSの変更が必要な場合があるとのこと。

このブログのテーマはSWELLですが、サイドバーにボックスナビを設定してみたところ、デフォルトのままではうまくいきませんでした。

この部分を

に変えたらうまくいきました。

(最近HTML/CSSを勉強しているので、「.」と「#」の違いが分かって嬉しい!)

画像の大きさを調整しよう

デフォルトのままだと、画像の横幅が枠に対して50%となっています。

私の場合、それだと画像が小さすぎて分かりにくかったため、95%に変更しました。

CSSのこの部分です。

画像サイズを変えたい場合はこちらを変更してみてください。

STEP2:HTMLをウィジェットに追加

お次はHTMLを書く作業です。

いきなりウィジェットに追加しようとすると、画像のリンクが分からなくて困ったりするので、まずは投稿ページの下書きでHTMLを書いてみます。

コードエディタに切り替える

記事編集画面の右上の「…」から、「コードエディター」を選択すると、HTMLを書き込めるようになります。

そこでぽんひろさんのページからHTMLをコピペします。

「”リンク先URL”」のところにカテゴリーのページURLを、「画像、もしくはFontAwesome」のところには、アップロードした画像のURLを入れます。
画像URLが分からない場合は、一度ビジュアルエディターで画像を追加しておけば、URLが分かりますよ。

これで一度プレビューをしてみて、画像が表示されているか、リンクはきちんと繋がっているか確認しましょう。(この段階では4列で表示されるハズ)

OKだったら、ウィジェットに追加していきます。
HTMLをコピーしておいてください。

カスタムHTMLをウィジェットに追加
「外観」→「ウィジェット」で「共通サイドバー」に「カスタムHTML」を追加し、HTMLを書く

「外観」→「ウィジェット」で「共通サイドバー」に「カスタムHTML」を追加します。

先ほど記事下書きで書いたHTMLを「カスタムHTML」の「内容」にペーストします。

これだけです。

あとは、しっかりサイドバーに表示されるか確認しましょう。

なお、私はスマホの閉開メニューにもボックスナビを設定してみました。

スマホのメニューにもボックスナビを設定
スマホのメニューにもボックスナビを設定

ボックスナビ、マウスをホバーすると枠がオレンジになったりと、凝ったデザインです。

コピペとちょっとしたリンクの編集だけで、こんなに素敵なナビができちゃうなんて、凄いですね。

まだ設置したばかりなので、回遊率が上がったかは分かりません。
1か月くらいしたらデータを出してみます。

素敵なボックスナビ。ぜひ、あなたも導入してみてください。

んじゃ、また~

関連記事

応援よろしくお願いします☆

コメント

コメントする

目次