僕のサイドバーとかハンバーガーメニューの中に仕込んでいるこれ。
Twitterで「どーやってやるの？」的なつぶやきがあったりなかったりしたので、ちょっとカスタマイズ方法を記事にしておこうかなーと思います。
↑知りたがってた人を改めて見つけるのが困難なため、誰か見つけたらシェアしてあげてくださいｗ
そもそもこれは、WordPressテーマSANGOで「メニュー」として使われていたデザインなんですが、普通にHTMLとCSSだけで実装できるので初心者さんでもコピペで簡単に出来ますよ！
ただ単純に縦にリスト型で表示するだけじゃ物足りない！あるいは、たくさんあるカテゴリーの中から、特に厳選して読者に見せたいカテゴリーがある！って人はぜひ参考にしてくださいませ〜(ﾟ∀ﾟ)
軽く概要
今回は、僕が使用しているはてなブログでのカスタマイズ方法を元にご説明していきますが、別にそれ以外のブログサービスやWordPressでも似たように実装できるはずです。
はてなブログの場合、サイドバーにはすでに「カテゴリー」というモジュールがあります。
が、
それは使いません。
新規に「HTML」を用いて、そこでオリジナルのカテゴリーを作るイメージです。新規で「HTML」を使う理由は、既存のHTMLやCSSに邪魔されないためです。
また、今回は4個タイプのカスタマイズですが、理屈が分かる人なら自由に数も増やせると思います。
または、冒頭で述べたように既存のカテゴリーがたくさんある人なら、それはそのまま置いといて、こちらのオリジナルカテゴリーにはピックアップされた4つを設置するのがオススメです。
それではさっそく、カスタマイズしていきましょう！
CSS
まず、CSSを突っ込んでおきましょう。場所はいつもと同じく
管理画面より、「デザイン」→「カスタマイズ」→「デザインCSS」です。
コードはこちら
| /* サイドバー、カテゴリ */ | |
| .hatena-module { | |
| overflow: hidden; | |
| } | |
| .category-square { | |
| text-align: center; | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .category-square li { | |
| float: left; | |
| width: 49%; | |
| border-bottom: solid 2px #EFEFEF; | |
| font-size: 12px; | |
| vertical-align: middle; | |
| background: #FFF; | |
| list-style-type: none; | |
| padding: 10px 0; | |
| } | |
| /*ここで、マウスを乗せた時のフワッを演出*/ | |
| .category-square li:hover{ | |
| box-shadow: 0 10px 15px -5px rgba(0,0,0,.15),0 0 5px rgba(0,0,0,.1); | |
| transform: translateY(-3px); | |
| transition: 0.3s; | |
| background: rgba(238,238,238,.4); | |
| } | |
| /*リストの中の偶数にだけ指定すること*/ | |
| .category-square li:nth-child(even) { | |
| border-left: solid 2px #EFEFEF; | |
| } | |
| /*リストの中の最後と最後から2番目にだけ指定すること*/ | |
| .category-square li:last-child, .category-square li:nth-last-child(2) { | |
| border-bottom: 0; | |
| } | |
| /*アイコンの大きさ調整*/ | |
| .category-square .fa { | |
| display: block; | |
| font-size: 3em; | |
| } | |
| /*リンクの装飾をなくす*/ | |
| .category-square a { | |
| text-decoration: none; | |
| } |
珍しい記述としては、リストの中の要素を偶数や最後のリストにだけ装飾を適用させる記述があることくらいですかね？
それ以外は至って普通だと思うので、分かる方はどうぞご自由にカスタマイズしてくださいませ！
スポンサーリンク
HTML
次に、肝心なHTMLです。まず場所としては
管理画面より、「デザイン」→「カスタマイズ」→「サイドバー」です。
そして、「モジュールを追加」で「HTML」を選択しましょう。
タイトルは空欄でいいです。
本文に以下をコピペしましょう。
| <div class="hatena-module-title hatena-module-title-category"> | |
| <i class="fa a-map-signs"></i> カテゴリー | |
| </div> | |
| <!--ここまでがタイトル--> | |
| <ul class="category-square"> | |
| <li> | |
| <a href="カテゴリーのURL１"> | |
| <i class="fa fa-wrench" style="color: #ff9191"></i>カテゴリー１ | |
| </a> | |
| </li> | |
| <li> | |
| <a href="カテゴリーのURL2"> | |
| <i class="fa fa-graduation-cap" style="color: #ffb776"></i>カテゴリー２ | |
| </a> | |
| </li> | |
| <li> | |
| <a href="カテゴリーのURL3"> | |
| <i class="fa fa-line-chart" style="color: #92ceff"></i>カテゴリー３ | |
| </a> | |
| </li> | |
| <li> | |
| <a href="カテゴリーのURL4"> | |
| <i class="fa fa-thumbs-up" style="color: #77d477"></i>カテゴリー４ | |
| </a> | |
| </li> | |
| </ul> |
ここでは注意点がいくつかあります。
<i>タグで囲われたところ
ここは「Font Awesome」のアイコンを使用しています。僕のカスタマイズでは頻繁に登場する「Font Awesome」。まだ導入していない方はこちらの記事を参考に。
【アイコン】はてなブログで「Font Awesome」をサクッと使う方法 - オークニズム
当然、コピペしたままだと僕と全く同じアイコンになってしまうので、各自アイコンを変更のうえ、カラーも変更しておきましょう。カラーはstyleで指定しています。
<a>タグの中のURLと名称も変更
各カテゴリーのURLに関しては、既存のカテゴリーがあるならそれをクリックすれば分かりますね！ｗ
これを、実際にテストブログに反映させたものが以下です。
テーマは現在人気１位の「Minimalism」で試しています。
若干、僕のブログとは違って見える理由は、まずブログの背景色とカテゴリーエリアの背景色が同化している点と、見出しにも背景色がなく余白が多く見える点。
最初は若干戸惑いましたが、よくよく見てみると…これはこれで案外イケてるような気が…しますｗ
おそらく、普通のテーマを使っている人の多くがこのような見栄えになるのではないかと思われます！
まとめ
以上、CSSとHTML、それとFont Awesomeでのアイコン変更だけで実装できましたでしょうか？！
今回はカテゴリーをタイル型にするってことにフォーカスしたカスタマイズでしたので、ブログの背景色やサイドバーの見出しデザインに関しては言及しておりません。
もし仮にそれらもひっくるめてオークニズムみたいにしたいって人がいれば、ブクマなりTwitterなりで言及していただければ、追記なり別途記事でご紹介させていただきま〜すm(_ _)m