loglog

『おもしろい!』が発見できる個人ブログを。アニメや漫画の話題が中心です。

ブログのカスタマイズについて、最近いじった箇所

どうもどうも。オガサワラです。

前回はてなブログのカスタマイズ記事を書いてからだいぶん空いてしまいました。

その間に、当ブログの仕様もだいぶん変わりましたので、また改めてカスタマイズのことを記事にしたいと思います。

ちなみに前回の記事はこちら。

http://loglog.hatenadiary.jp/entry/blog-customize01loglog.hatenadiary.jp


とりあえず、追加点とか変更点とかまとめていきます。カスタマイズ方法は参考にしたサイトをリンクしていくので詳しい情報はそちらで。

グローバルナビゲーションをドロップダウンにした

PCなどの横幅の広い端末でサイトにアクセスした際、グローバルナビゲーションをドロップダウンするようにしました。挙動はこんな感じ。


こちらのサイトを参考にさせて頂きました。

http://www.yukihy.com/entry/dropdown-toggle-menu

ヘッダをいじった

ヘッダ画像を画面幅いっぱいまで広がるようにしたのと、ブログタイトルはヘッダに直接書き込んで画像の下に表示させています。

これに伴い従来のブログタイトルはdisplay: noneといって読み込まれているんだけど、表示されていないという状態になっています。

display: noneは、SEO的にあまりよくはないという話を聞くのですが、ちょっとした実験です。それに既にグローバルナビゲーションでdisplay: noneを使ってるのでレスポンスにする場合は使わざるを得ないし、まあ良いかと。

こちらのサイトを参考にカスタマイズさせた頂きました。
http://www.tukinasikotonoha.com/entry/hatenablog-header-yohaku

参考にさせて頂いたサイトでは、僕のようにブログタイトルを無理やり表示させずに画像にタイトルも表示させているので、本来はこちらの方が良いと思われます。

僕の場合、ヘッダ画像を気分で変えたいというのがあったので、この仕様にしてみました。とはいえ、実験してみて不都合がありそうならまた変える予定です。

ボタンを作った

こういうマウスをホバーさせるとぷるぷるするボタンを作りました。Amazonをリンクさせる時とか、ただのテキストリンクではつまらないなと思ったので。

下記のサイトを参考にカスタマイズしました。

http://www.hp-stylelink.com/news/2013/07/20130717.php

http://ianlunn.github.io/Hover/

シェアボタンを設置しました

公式のシェアボタンだとカスタマイズを重ねるに連れて重く感じるようになってきたので、カスタマイズでシェアボタンを設置しました。

参考はこちら。

またまた『Yukihy Life』です。いつもお世話になっております。

http://www.yukihy.com/entry/vol2-hatenablog-share-btn-custom

テーマを変更しました

これまで使わせて頂いていた『Simple Gray』も、とても良いテーマで気に入っていたのですが、心機一転で『Brooklyn』に変更しました。

こちらのテーマもシンプルでとても使いやすいです。

http://shiromatakumi.hatenablog.com/entry/2016/02/04/171538

まとめ

あと、細かい部分ではカテゴリを整理したりしましたが、ブログの仕様的に変えたのは上にあげた部分くらいです。たぶん。

前回と今回、とりあげたカスタマイズや、当ブログの仕様でこれどうやってるの? と気になる部分がありましたら僕の分かる範囲で解説しますので、Twitterでもコメントでも気軽に質問を頂けるとありがたいです。

オガサワラ@ogalololog

最後まで読んで頂きましてありがとうございました。