【はてなブログ】タイトル下にかっこいいカテゴリーバーを設置する

こんなカテゴリバーが欲しかった

前からいいなって思ってた。色んなブログで、タイトルの下にカテゴリバーついてるじゃん。私もやりたい～。とおもって探したら、私が使わせてもらってるBrooklynのデザインにやり方が書いてあるではないか！

うっへー、かっこいいなぁー。

さらには、カテゴリにマウスを置くと、プルダウンが～！ナニコレ天才か。Brooklynの作者 SHIROMA さんサイコー。さすが人気投票２位。

では、さっそく。

タイトル下にかっこいいカテゴリーバーを設置する

詳しくは作者さんのブログに載ってます。これに従って設定します。

 私は先日からはてなproユーザーになったので（どうしても広告がうっとうしくて、そこは出費；）、pro用のccsを貼り付けました。無償版の人用のccsもあって親切。

これを、ダッシュボードの デザイン → カスタマイズ（画面上のスパナマーク） → ヘッダ → タイトル下 にペーストします。

ここに貼り付け。

できました！カテゴリが❤　なんかかっこよくない？　え？タイトルのピーターくんが質を下げてるって？

次はせっせこ「ここにメニューの名前」という場所を編集していきます。先ほどのコピペの内容を編集するだけですね。

まずはこんな感じでリンクとタイトルを入れます。いいじゃないですか！

次に、プルダウンを編集します。でも私はサブカテゴリなんて作ってないから（そんなに記事がない；）、とりあえず今回はこれでよし！よってプルダウンはでません。サブカテゴリを作ることになったら追記しますね。

ついでにモノトーンのシェアボタンも設置

なんかこれもかっこいい。もともとシャアボタンをつけてなかったのに、かっこいいというだけでつけることにしました。

まず私は、シェアボタンを付けるところからスタート。

デザイン → カスタマイズ → 記事 → ソーシャルパーツ

片っ端からチェックをいれちゃった。

記事上にコピペ

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!--シェアボタン-->
<div class="share-button">
<div class="share-inner">
<!--はてブ-->
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button "><i class="fa fa-facebook-square lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-button "><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>
<!--ググタス-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button "><i class="fa fa-google-plus"></i><br><span class="small-text">Google</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button common" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>
</div>
</div>

どれどれ～？　あれ、はてなデフォルトのマークも表示されています。

気を利かせた先ほどの前処理がいけなかったのかもしれません。チェックを外します。

いいかんじになりました。これで完成！

このモノクロ感が、おばさんぽくなくて、すごくいいと思うんだよね。一人悦に入っております。