はてなブログ

とりあえずはメモりつつ作業。

まず作ってみる

テーマ

Favicon

設定→基本設定→ブログアイコンでFaviconを設定。

OPGイメージ

設定→詳細設定→アイキャッチ画像でOPGイメージを設定。
ちゃんと設定されているか、Facebookシェアデバッガーで確認。

その他

カスタマイズ CSS編

CSSだけでできるカスタマイズ集。
デザイン→→デザインCSSに追加していきます。

Amazon紹介リンク

参照・はてなブログの Amazon 商品紹介をちょっぴり改善するカスタマイズ
Innocentには最初から右下のアイコンが設定されています。

デフォルトだとこんな感じ1。 Amazon Link default

リンクの色はオレンジに、右下にAmazonアイコンが表示され、こういう感じに。 Amazon link

記事の下にあるIDと日付を非表示に

指定した年の記事はアーカイブから除外

固定記事を過去日付や未来日付にしているときに便利。

指定した年の記事は投稿日時を表示しない

当方は固定記事の日付を2000年と2100年の1月1日にしているが、どうやら時差の関係で前年カウントされているらしい。

カスタマイズ がっつり編

事前準備

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Font Awesomeも追加。

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

Get Startedからさくっと埋め込みコードを入手。
設定→詳細設定→検索エンジン最適化→headに要素を追加に追加。

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

5.0からいろいろ変更になりました。Fonts（当サイト記事）も参考にどうぞ。

トップに戻る

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

<p id="page-top"><a href="#wrap"><i class="fas fa-angle-double-up fa-3x"></i></a></p>

デザイン→→デザイン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の記述はなかったけど、当方の環境では必須っぽい。
デザイン→→フッタに追加。

Innocent限定のカスタマイズ

Innocentをカスタマイズ。

ナビゲーションバー

参照・はてなブログテーマ「Innocent」のカスタマイズ（ナビゲーションバー編）

JQueryを追加。すでに追加している場合は、次の工程に。

次に、デザイン→→フッタにスクリプトを追加。

ヘッダもスクリプト追加を。
デザイン→→ヘッダ→タイトル下。