きたかぐらのブログのWebデザインにボックスナビを追加導入してみました

きたかぐらのボックスナビIT・WEB系

一応ミニマム・シンプルを提唱しているブログですので、シンプルなWebデザインにしておりますが、ところどころ直したいところもあります。

先日、ブロガーさんの勉強会で色々な情報交換をし、Webデザインの様々なカスタマイズについて掲載しているサイトを教えてもらいました。

その中から、ボックス分けされたナビケーション(ボックスナビ)を、早速このブログに取り入れました。

今回はブログのWebデザインをどのように変わったかについて、その過程を簡単にまとめました。

この記事では実際の見た目がどのように変わったかの説明がメインで、実際にHTMLとCSSをどう追記したのかまでについては言及しておりません。見た目がすっきりしたというのが伝われば幸いです。

 

スポンサーリンク

きたかぐらのブログのWebデザインにボックスナビを追加しました

この「きたかぐらのブログ」はWordpressで作っており、様々なテーマを経て、現在はCocoonを利用しております。

Webデザインも今まで色々いじってきましたが、ようやくブログのコンセプトに合ったシンプルなものに作り上げることができました。

しかし、一部のユーザーインターフェース(いわゆる操作性)については不満があり、何か良い方法はないかと模索しておりました。

そんな時にボックス分けされたナビゲーションメニューをCocoonに設定するやり方を教えてもらいました。

 

具体的には、次のように変更しました。

変更前Cocoonにボックスナビ追加3
変更後Cocoonにボックスナビ追加5

(※画像をクリックすると拡大します)

 

これはWebサイトのとある個別記事ページの一部を切り取りしたものです。

サイドメニュー部分をご覧ください。

変更前の画面ではカテゴリーの箇所に文字がずらっと並んでおり、すごく見づらい印象を与えてしまいます。

でも、変更後の画面ではカテゴリーを集約し四角く区切り、さらにアイコンも入れてわかりやすくしました。

これでだいぶまとめられて、ブログをご覧いただいている方にもわかりやすく誘導できるようになりました。

 

モバイル画面でもこの通り。

Cocoonにボックスナビ追加1

このブログでは、カテゴリーを大別すると5つに集約できるので、このような形にすることで、好きなところへ飛んでもらえるようしました。

細かく見たい場合は、上のプルダウンをクリックしてもらえてれば、さらに細かく表示されますので、使いやすい方を選んでもらえればと思います。

スポンサーリンク

 

きたかぐらのブログにボックスナビを設定する際に参考にしたサイト

本来であれば、ブログのテーマ「Cocoon」にボックスナビが設定できる項目があれば理想的なのですが、流石に無料で提供してくださるものに、そこまで求めるのは酷です。

ですが、Cocoonのページで今回のボックスナビを始め、様々なカスタマイズ方法を紹介している方が書いているブログを紹介しております。

 

この中で紹介されていた1つが「ぽんひろ.com」というブログです。

このブログでは数多くのWebデザインのカスタマイズ方法についてわかりやすく説明されており、HTMLとCSSの知識が少しあれば簡単に作ることができます。

今回私がカスタマイズしたCocoonでのボックスナビの設定方法については以下の記事で紹介されております。

具体的なやり方については、ここで書くよりも上記の記事をご覧いただいた方が間違い無いでしょう。

他にも当ブログで取り入れたいカスタマイズがあり、折を見て取り入れる予定です。

スポンサーリンク

 

きたかぐらのブログで一度設定したもののボツにしたボックスナビデザイン

以上、当ブログのWebデザインにボックスナビを追加した件についてまとめました。

もし、ブログを運営されていて、多少はHTMLやCSSの操作ができるというのであれば試してみるのもいいかもしれません。

知識がなくても、ぽんひろさんのブログをじっくりと読めば結構できてしまうかもしれません。

 

実は一度別の箇所にもボックスナビを設定したのですが、いかがでしょう?

Cocoonにボックスナビ追加4

トップページのロゴの下部分にボックスナビを設定してみました。

しかし、これだと逆にボックスが目立ちすぎてデザインがスッキリしません。

 

Cocoonにボックスナビ追加2

結局、文字だけのカテゴリー表示に戻しました。

こちらの方がスッキリした印象を与えるような気がします。

ユーザーの操作性を重視すればボックスナビがあった方は良いのかもしれないのですが、やはりミニマム&シンプルなデザインにこだわりました。

どちらの方が良いでしょうかね?

今回はサイドメニューだけで様子を見ることにします。