retireSakiの日記

たぶん引退した?ソフトウエアエンジニアのブログ

はてなブログのページのフッタに注目記事を表示するスクリプトの紹介

 今回は「はてなブログ」で、ページのフッタに注目記事を表示するスクリプトを紹介します。

 今回のスクリプトも、H.S.Hige (id:herrscherinnen)さんの作品です。
実は、同じようなものを作ろうかどうか悩んでいたのですが、アナリティクスのレポートの作成もあり、猫の手をかりたいのですが無いので、保留にしていました。
そんな時、H.S.Hige さんが作られていたので、「これ、いいじゃん!」と!

 

 そもそも、「何故、フッタに?」と思われる方が多いと思います。
一般的に、目的の記事を読んだ後に、「他に、どんな記事が?!」「他に面白い記事は?」という具合に探すのですが...そんな時、わざわざサイドバーをスクロールして探すより、下に表示したほうが効率が良く、見つけやすいケースが多々あります。

 サイドバーをスクロールに随従させるものもあります。たしかにカッコよいものですよね!
しかし、真面目に記事に読んでいる時に、チラチラ、しかも広告があった場合、動くものなら尚更邪魔です。人によってウザイと感じる人も多いのです。
ということで、フッタに持ってくるのです。

 実際、海外の有名ブログなどでは、フッターに読んでもらいたい記事のリンクを表示パターンが多いようです。
海外で主流になっているサイドバーが無いデザインの多くは、PC、スマフォなどのデバイスに関係なく、同じデザインで自動調整されるで、国内のようなデバイス差別が少ないケース多いですw

 さて、前置きが長くなりましたが...

肝心のスクリプトを公開している記事が、H.S.Hige さんが運営しているブログ Nekonote の下の記事です。

h-s-hige.hateblo.jp

 今回も特に、大きな修正はしていません。
[デザイン]→[カスタマイズ]→[フッタ]の一番上に、スクリプトを挿入するだけです。

表示件数を変更する場合
 data-count="5"
の"5"を表示したい数字にします。

また、左右の空白バランスが合わない場合
スクリプトの最後の方にある
 padding-left: 30px; padding-right: 30px;
の各数字を変更・調整します。
私は、パーセントで調整しています。

他の調整は、作者の方のページを参照して下さいね。

 このスクリプトも、基本コピペ作業なので簡単です。
デザインの右側の確認画面で表示の確認できますので、気軽に修正ができます。
気になった方は、是非試してみると良いでしょう(^^)/

今回も H.S.Hige (id:herrscherinnen)さんに感謝ですorz

 

 

注目記事

「Amazon.co.jpアソシエイト」または「[乙の名称を挿入]は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。