こんにちは！ Hike×Hackのかけすけです！
昨日は、「はてなブックマークブログパーツ」を使った「サイドバーに人気記事の一覧を表示する方法」についてお伝えしました。
その中で私は、「他にもツールや方法はある」と書きました。とはいえ、「ある」ことを知っているだけで、「どんなものがあるのか」までは把握していなかったのです。
そして今日、昨日の自分の記事を受けて、改めて「別の方法」を探してみました。
すると、びっくり仰天。私がかねてより「今は通常のブログパーツだけど、いずれはこういう表示にしたい！」と思っていた表示形式にする方法が見つかったのです！
私の気持ちはすぐに決まりました。その時に浸かっていた湯船を放り投げ、さらには今日予定していた記事の下書きをも放り投げて、その方法を試すことにしたのです！
すると、もともと「カスタマイズとかめっちゃ大変そうだよなあ」とか思っていたはずが……。
バ…バカな…
か…簡単すぎる…
あっけなさすぎる……。
なんと、１５分もかかりませんでした。
HTMLだけでなくCSSの追加もあるため、昨日紹介した「はてなブログブックマーツ」よりは、ほんのちょびっと手間がかかります。(もちろん、基本的にコピペで工程は完了するので、知識はほとんど必要ありません)
とはいえ。ここで今一度、Hike×Hackのサイドバーをご覧ください。
（追記：今は別のものになっています）
「人気記事」の欄が、とんでもないほど視認しやすくなっています。サムネイル画像も表示されますし、カーソルを合わせるとヒョッというギミックが！
たったの１５分ほどでこれが作れてしまうのです！このツールを作ってくださった方は私の寵愛を受けるべきだと思うのです。私は世界の中心で「ありがとう」と叫びたいのです！
今日はその手順をお伝えしたいところですが、いかんせん画像などの準備ができていないというのと、今日中に更新するにはいささか時間が足りません。
……ですが！ 私はとにかく、少しでも早く！コンマ１秒でも早く、光よりも速く！この素晴らしきツールの存在を、他でもないあなたにお伝えしたいのです！
後日、改まって簡単な手順をHike×Hackでお伝えするつもりですが、もしあなたがこの記事を見て「うおお、やったる！ 今すぐやったる！」と思ったのであれば、ぜひ参考記事へ飛んでみてください！
≪１．人気記事はコレで！≫
≪２．最新記事はコレだ！≫
人気記事のツールと同じ作成者の方のものです。最新記事を表示したい場合は、最新記事用に作られているコチラのツールを使うことをオススメします。
≪まとめ≫
・色んなブログでよくみる「サイドバーの画像つき記事一覧」のやり方。
・最新記事も人気記事も同様に作れるので、デザインに差が生まれない！
・今日は激しい衝動がキッカケの紹介のみ。簡単な導入手順については、改まって記事にする予定。
あとがき
今日の記事一覧デザインの変更もそうですが、ブログのデザインをいじりました。まず、記事一覧のデザインを変更。また、ブログの背景色を緑っぽくしました。
それと、気付きづらい点として、フォントサイズや行間も微調整しました。今まで、「一文が長くなった場合の、”改行”ではない改行」の行間が 通常の改行に比べてだいぶ狭いということに悩んでいました。
結論としては、CSSでpタグのmarginをなくすことで改善。具体的な変更点は、「font-size:15→16」としたことです。font-sizeに関しては15~17でふらふらしているので、今後も微調整が入りそうです。ご了承くださいm(_ _)m
関連記事
■あなたのブログの人気記事が知りたい！ ブログのサイドバーに、手軽に人気記事を表示する方法。 - Hike×Hack
参考記事
■【修正済】コピペで簡単！ はてなブログの人気記事を画像付きで表示させる方法。 - #ChiroruLab