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

hatenaロゴ

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

上に戻るボタン

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

「前のページ」ボタン

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

カスタマイズのポイント

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

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

ヘッダとフッタ

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

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

ブログタイトル

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

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

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

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

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

関連記事

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

サイドバー

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

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

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

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

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

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

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

広告(広告バナー)

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

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