理系夫婦の方程式(りけいふうふのほうていしき)です。2019.11.16以前からブログの見やすさ、いわゆるユーザーフレンドリーにするにはどうしたらいいか考えていました。そこでこの前、TOPページに「主なカテゴリー」のピックアップバナー(SWELLの機能)を追加しました。あわせて読みたい[HTML/css/PHP初心者]ブログのトップページに1文追加してみたHTML、css、PHP初心者が、ブログのトップページに見出しを一つ追加するためにやったことをまとめました。親テーマのファイルを子テーマに複製、css追加、php修正など、その手順を紹介しています。ピックアップバナーに載せている4つのカテゴリー以外も、サクッとアクセスできるようにしたほうがいいよな、と悩んでおりました。Pythonに興味ある人が、「プログラミング」カテゴリの記事一覧に行ってみたら、新着記事はVBAばっかりだった・・・ってなったら不便ですもの。なんとかしたい・・・!そんな時に見つけたのが、ぽんひろさんの以下の記事。ひろ.comボックス分けされたナビを作る!回遊率をアップしよう!区分けされたナビゲーションをHTMLとCSSで作ります。単純なグローバルナビゲーションよりも視認性が高く、スマホでタップしやすいのでユーザーに優しいインタフェースにな...一目見て気に入りました、ボックスナビ!ボックスナビをサイドバーに付ければ各カテゴリーにすぐにアクセスできる!ブログ内の回遊率Upだ!と意気込み、早速ボックスナビを導入してみました。ホントに簡単にできましたので、ご紹介します。全カテゴリへのリンクとなっている目次STEP1:CSSをコピペまずはCSSを設定していきます。基本的にはぽんひろさんの記事に書いてある通りです。「外観」→「カスタマイズ」→「追加CSS」でCSSをコピペ「外観」→「カスタマイズ」→「追加CSS」と開き、CSSをコピペします。」以降はコピペしませんでした。CSSは場合によっては以下のように少し修正が必要となります。SWELLでの注意点ぽんひろさんのブログ記事にも書いてありますが、サイドバーにボックスナビを設定する場合、CSSの変更が必要な場合があるとのこと。このブログのテーマはSWELLですが、サイドバーにボックスナビを設定してみたところ、デフォルトのままではうまくいきませんでした。li{に変えたらうまくいきました。(最近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」の「内容」にペーストします。あとは、しっかりサイドバーに表示されるか確認しましょう。私はスマホの閉開メニューにもボックスナビを設定してみました。スマホのメニューにもボックスナビを設定ボックスナビ、マウスをホバーすると枠がオレンジになったりと、凝ったデザインです。コピペとちょっとしたリンクの編集だけで、こんなに素敵なナビができちゃうなんて、凄いですね。設置したばかりなので、回遊率が上がったかは分かりません。1か月くらいしたらデータを出してみます。あなたも導入してみてください。お願いします☆にほんブログ村ファミリーランキングこの記事を書いた人まゆみ理系夫婦の妻のほうです。大学、大学院(修士)で物理を専攻。2016年に長女を出産。フルタイム勤務ワーママ→休職中。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。SWELL.検索する。