simadzu’blog

枝豆ガーリックに一味を入れすぎてピリカラガーリック枝豆になってしまった

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

hatenaロゴ

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

カスタマイズのポイント

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

はてなブログを高速化するための4つのこと
はてなブログを高速化するための大きくわけて4つのことについてまとめました。ブログの表示速度を改善するために一番効果があるのは、画像を最適化(圧縮)することだと思います。あとは、はてなブログの使わない機能を無効にすることくらいでしょうか。

リストの黒ポチをはてなのアイコンフォントに変更したのをきっかけに、記事にするほどでもないが忘れないように残しておきたい、カスタマイズの小ネタ記事。

最近のブログカスタマイズを箇条書き
自分が見たくなるように、ブログを書きたくなるように、モチベーションを高めるため、ブログをカスタマイズしています。記事にするほどでもないカスタマイズの小ネタを過去の分も含めてメモとして箇条書きしてあります。

上に戻るボタン

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

コピペで簡単!はてなブログに上に戻るボタンを設置する
コピペだけで簡単に、はてなブログに上に戻るボタン(ページトップへ戻るボタン)を設置するコードを改めて書いてみました(今さらですが、一度やってみたかったのです)。

画像を使って上に戻るボタンを設置する。ボタンは右端に固定して常時表示する。
(JavaScriptを使ってまで、ボタンをスクロールでふわっと表示させなくてもいいと思う)

はてなブログに画像で上に戻るボタンを設置する
このブログでは、はてなのアイコンフォントを使って「上に戻るボタン」を設置していましたが、少し飽きてしまったのと、コードをシンプルにしたかったので、画像でボタンを設置することにしました。

「前のページ」リンク

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

はてなブログのトップページに「前のページ」リンクを設置した
はてなブログでは、カテゴリーや月別アーカイブには、前のページに戻るリンクがあるのですが、なぜか、トップページには、前に戻るリンクがなく、ブラウザの戻るボタンで戻るしかありません。 そこで、JavaScript(jQuery)で「前のページ」リンクを設置してみることに…

記事タイトル

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

はてなブログの<h1>タグをjQueryで書き換え
はてなブログでは、ブログタイトルと記事タイトルにタグが使われていますが、個人的には、ひとつのページにタグがふたつあるのはおかしい気がしています...。

記事の日付(投稿日)を日めくりカレンダー風にカスタマイズ。カレンダーをfloat:leftで左寄せしてその横に記事タイトルとカテゴリーを回り込ませて表示する。

はてなブログの日付を日めくりカレンダー風にする
はてなブログのカスタマイズはやりつくした感があったのですが、検索ボックスをちょっとだけカスタマイズしてから、もう少しできるんじゃないかと、ネットを調べたり、過去の記事を書き直したり、ブログのCSSを調整したりしていました。

引用デザイン

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

はてなブログの引用デザインをはてなのアイコンフォントで表示
以前に、はてなブログの引用デザインを画像で表示したのですが、はてなのアイコンフォントにある引用符のアイコンをなんとか利用できないかといろいろやってみました。

サイドバー

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

はてなブログのサイドバーの最新記事にNEWマークを表示
このブログでは、サイドバーの最新記事のリンクに、はてなのアイコンフォントを表示させているのですが(はてなブログのサイドバーの最新記事にアイコンを表示)、それでもまださびしい感じがするので、新着記事にNEWマークを表示させてみることにしました。