はてなブログのカスタマイズまとめ

hatenaロゴ

このブログで今までやってきたはてなブログのカスタマイズを厳選してまとめました。
※ このブログのテーマはMinimalismなので、他のテーマで表示できないかもしれません。

上に戻るボタン

コピペするだけで簡単に、はてなブログに上に戻るボタン(ページトップへ戻るボタン)を設置できる。今までの上に戻るボタンに関する記事を整理、応用して書き直しました。

「前のページ」ボタン

はてなブログのトップページにJavaScriptjQuery)で「前のページ」ボタンを設置する。
上に戻るボタン(ページトップへ戻るボタン)ではありません。

カスタマイズのポイント

はてなブログを高速化するための4つポイントをまとめた記事。
特に画像の最適化(圧縮)と使わない機能を無効にすることが大事。

リストの黒ポチをはてな純正アイコン(チェックマーク)に変更したのをきっかけに、記事にするほどでもないが忘れないように残しておきたい、ブログカスタマイズの小ネタ記事。

ヘッダとフッタ

はてなブログのグローバルヘッダーが重いので、オリジナルでグローバルヘッダーもどきを作って設置した。

はてなブログ標準のフッタを消して、自分でフッタを作って設置した。
また、フッタを横幅いっぱいに表示するようにCSSで見た目を調整した。

ブログタイトル

ブログタイトルや記事タイトルで使われている<h1>タグをJavaScriptで書き換える。
個別記事ページでは、ブログタイトルの<h1>タグを<div>タグに、トップページでは記事タイトルの<h1>タグを<h2>タグにそれぞれ書き換える。

個別記事ページの記事タイトル下、カテゴリー名の右端に1記事あたりの文字数を表示する(preタグに囲まれている部分の文字数及びスペースや改行は文字カウントに含めない)。

<pre>タグ、引用デザイン

HTMLやCSSJavaScriptソースコードを<pre>タグで囲んで表示し、その左上にタイトル(言語名)をわかりやすく表示する。

はてなの純正の引用符アイコンを回転させたり、アイコンの背景を丸くしたりして、引用のデザインをカスタマイズする。

関連記事

個別記事ページの下に表示されるはてな公式の関連記事をカスタマイズしてシンプルに表示した。また、個別記事下のページャをCSSで非表示にした。

サイドバー

JavaScriptでサイドバーの最新記事の新着記事(投稿日時が今日から~日以内の記事)へのリンクにNEWマークを表示する。

CSSの「float: left;」を使って、サイドバーにオリジナルの記事一覧を表示する。

サイドバーのカテゴリーをタグクラウドっぽくボタン風(タグ風)に表示する。

サイドバーのHTMLモジュールで、読者になるボタンをはてな公式のものとは別に、CSSやHTMLの「<input type="button">」タグで表示した。

カレンダー(月別アーカイブ

サイドバーのカレンダー(月別アーカイブ)の見た目をCSSでカスタマイズした。
また、サイドバーのHTMLモジュールで月別アーカイブのリストも表示した。

サイドバーのカレンダー(月別アーカイブ)の表示で、個別記事ページのURLと同じカレンダーの投稿日をJavaScriptで色を変えて目立たせるようにした。

広告(広告バナー)

はてなブログ標準のAmazon楽天の商品を紹介する商品カードの右下にそれぞれのアイコンを表示する。

JavaScriptで個別記事の下に広告を横に2つ並べて、記事のページが表示されるたびに、ランダムに広告を表示させる方法。