はてなブログのページのフッタに注目記事を表示するスクリプトの紹介
今回は「はてなブログ」で、ページのフッタに注目記事を表示するスクリプトを紹介します。
今回のスクリプトも、H.S.Hige (id:herrscherinnen)さんの作品です。
実は、同じようなものを作ろうかどうか悩んでいたのですが、アナリティクスのレポートの作成もあり、猫の手をかりたいのですが無いので、保留にしていました。
そんな時、H.S.Hige さんが作られていたので、「これ、いいじゃん!」と!
そもそも、「何故、フッタに?」と思われる方が多いと思います。
一般的に、目的の記事を読んだ後に、「他に、どんな記事が?!」「他に面白い記事は?」という具合に探すのですが...そんな時、わざわざサイドバーをスクロールして探すより、下に表示したほうが効率が良く、見つけやすいケースが多々あります。
サイドバーをスクロールに随従させるものもあります。たしかにカッコよいものですよね!
しかし、真面目に記事に読んでいる時に、チラチラ、しかも広告があった場合、動くものなら尚更邪魔です。人によってウザイと感じる人も多いのです。
ということで、フッタに持ってくるのです。
実際、海外の有名ブログなどでは、フッターに読んでもらいたい記事のリンクを表示パターンが多いようです。
海外で主流になっているサイドバーが無いデザインの多くは、PC、スマフォなどのデバイスに関係なく、同じデザインで自動調整されるで、国内のようなデバイス差別が少ないケース多いですw
さて、前置きが長くなりましたが...
肝心のスクリプトを公開している記事が、H.S.Hige さんが運営しているブログ Nekonote の下の記事です。
今回も特に、大きな修正はしていません。
[デザイン]→[カスタマイズ]→[フッタ]の一番上に、スクリプトを挿入するだけです。
表示件数を変更する場合
data-count="5"
の"5"を表示したい数字にします。
また、左右の空白バランスが合わない場合、
スクリプトの最後の方にある
padding-left: 30px; padding-right: 30px;
の各数字を変更・調整します。
私は、パーセントで調整しています。
他の調整は、作者の方のページを参照して下さいね。
このスクリプトも、基本コピペ作業なので簡単です。
デザインの右側の確認画面で表示の確認できますので、気軽に修正ができます。
気になった方は、是非試してみると良いでしょう(^^)/
今回も H.S.Hige (id:herrscherinnen)さんに感謝ですorz
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
- 作者: 山田祥寛
- 出版社/メーカー: 技術評論社
- 発売日: 2016/09/30
- メディア: 大型本
- この商品を含むブログを見る