ブログテーマを「Innocent」に変更!実施したカスタマイズ6つ

f:id:aaafrog:20160505184013p:plain

みなさまごきげんよう!

嗚呼蛙でございます!

 

GWを利用して、念願のブログカスタマイズを行いました!

選んだはてなブログテーマは、カスタマイズがし易いと評判の「Innocent」!

 

ということで今日は、ブログカスタマイズのお話です!

 

 

 

 

 

目次

まずは目次。

これまでは見出しを利用して「目次」と表示していましたが、cssで表示させるように変更しました。

ついでに背景色も変えています。

f:id:aaafrog:20160505185452p:plain

 

参考にしたのはこちらのページ。

www.yukihy.com

 

 

パンくずリスト

続いてパンくずリスト。

SEO上良いらしいので、ずっとやらないとと思っていました。

記事下に表示されるようにしています。

f:id:aaafrog:20160505185920p:plain

  

パンくずリストというのは、上の画像のように「TOP > 親カテゴリー > 子カテゴリー > 記事」記事の階層を表示してくれるものです。

コメントでもいただいてますが、なんのこっちゃって名前ですね。

ブログテーマを「Innocent」に変更!実施したカスタマイズ6つ - 嗚呼、学習の日々

よく思うんですが「パンくずリスト」巧いネーミングのつもりかもですが、知らない人には何のことか想像しづらいので、「階層型カテゴリ表示」(適当)とか何とか名は体を表す名称も一緒に普及してくれないものかと。

2016/05/05 20:00

b.hatena.ne.jp 

 

参考にしたのはこちらのページ。

bulldra.hatenablog.com

 

この設定はやり方を忘れそうなので、メモっときます。

デザイン>カスタマイズ>フッタに

f:id:aaafrog:20160506084713p:plain

 

パンくずリストを動作させるコードと、サイドバーのカテゴリーに子カテゴリーを表示させないコードを、作者さんブログからコピペ。

f:id:aaafrog:20160506084945p:plain

 

デザイン>カスタマイズ>記事>記事上下のカスタマイズ>記事下に

f:id:aaafrog:20160506084511p:plain

 

パンくずリストを表示させるコードを、作者さんブログからコピペします。

f:id:aaafrog:20160506085548p:plain

 

 

パンくずリストの不具合修正

「Innocent」でパンくずリストを設置する場合、一手間かけないと表示がおかしくなるので、そいつを調整。

f:id:aaafrog:20160505190943p:plain

 

参考にしたのはこちらのページ。

moonnote.hateblo.jp

 

 

おしゃれソーシャルボタン

おしゃれソーシャルボタンも設置。

コピペで一発なので簡単でしたね。 

f:id:aaafrog:20160505190546p:plain

 

参考にしたのはこちらのページ。

www.yukihy.com

 

  

ナビゲーションバー

ナビゲーションバーも追加しました。

表示させるのは簡単なんですが、どこへのリンクを載せるかに悩みました。

f:id:aaafrog:20160505191503p:plain

参考にしたのはこちらのページ。

moonnote.hateblo.jp

 

 

おすすめ記事リスト

ナビゲーションバーの上におすすめ記事リストを表示するようにしました。

なんか見た目がかっこ良くなっていいですよね。

f:id:aaafrog:20160505191918p:plain

 

参考にしたのはこちらのページ。

moonnote.hateblo.jp

 

 

まとめ

  • 「Innocent」は確かにいじりやすい
  • コピペだけでも結構色々実装できる

色は前のレスポンシブルーに合わせて変更してみました。目次の見出しがいらなくなったので全記事からそれを消す作業が大変でしたね。丸一日かかってしまいました。

 

 

では、今日のところはこの辺で。

嗚呼蛙でした。