はてブをカスタマイズ がっつり編

デザインなど簡単なものはCSS編に。

JQuery

デザインフッタに追加。 最新はGoogle Hosted Librariesで確認。

Font Awesome

はてなブログ標準でもいろんなアイコンフォントが使えますが、後述のシェアボタンなどのようにFont Awesome前提のカスタマイズも多い。

Get Startedからさくっと登録して埋め込みコードを手に入れるのが楽1

設定詳細設定検索エンジン最適化headに要素を追加に追加。

トップに戻る

上記のJQueryとFont Awesomeを追加し、デザインヘッダに追加。

デザインデザインCSSに追加。デザインはお好みで。

あとはスクリプトをデザインフッタに追加で完了。

シェアボタン

レスポンシブ仕様で追加していきます。
まずは先述のJQueryとFont Awesomeを追加。

次にデザインフッタに追加。

デザインデザインCSSに追加。

最後にデザイン記事記事上または記事下に追加。
各ソーシャルパーツは全部チェックを外しちゃってください。

元ネタにはないシェアボタンも追加してあります。 HateBu Share

CodePenバージョンも載せとく。
FontAwesomeはBootstrapより。追加の仕方も@importにしてあります。
はてブとEvernoteのアイコンは、はてブ用アイコンなので表示されてません。

See the Pen Share button for Hatebu by Laurel (@laurel-treetop) on CodePen.

参考

更新日付も表示

コードは前者、スタイルは後者のほぼ記事通りでできます。

オートページャー

無限スクロールとかInfinity Scrollとか言われてるやつ。
はてなブログの記事一覧を無限スクロールさせる(オートページャー)に少しだけ手を加えて、次のページを表示したら「次へ」的なリンクを削除と言うか隠す。
元ネタではInfinite Scrollの記述はなかったけど、当方の環境では必須っぽい。
デザインフッタに追加。

  1. Fonts(当サイト記事)も参考にどうぞ。 

Leave a Comment

Leave a Comment