Hike×Hack

ライフハックや日常に役立つガジェットなどを好物とするかけすけ(@kakesuke02)が書くライフハック系ブログ【Hike×Hack(ハイクハック)】

#ChiroruLabさんの素晴らしいツールで、サイドバーに画像つきの人気記事と最新記事を表示させました!

f:id:kakesuke:20140411193449j:plain

こんにちは! Hike×Hackのかけすけです!

昨日は、「はてなブックマークブログパーツ」を使った「サイドバーに人気記事の一覧を表示する方法」についてお伝えしました。

その中で私は、「他にもツールや方法はある」と書きました。とはいえ、「ある」ことを知っているだけで、「どんなものがあるのか」までは把握していなかったのです。

そして今日、昨日の自分の記事を受けて、改めて「別の方法」を探してみました。

すると、びっくり仰天。私がかねてより「今は通常のブログパーツだけど、いずれはこういう表示にしたい!」思っていた表示形式にする方法が見つかったのです

私の気持ちはすぐに決まりました。その時に浸かっていた湯船を放り投げ、さらには今日予定していた記事の下書きをも放り投げて、その方法を試すことにしたのです!

【修正済】コピペで簡単! はてなブログの人気記事を画像付きで表示させる方法。 - #ChiroruLab【修正済】コピペで簡単! はてなブログの人気記事を画像付きで表示させる方法。 - #ChiroruLab

 

すると、もともと「カスタマイズとかめっちゃ大変そうだよなあ」とか思っていたはずが……。

 

バ…バカな…

か…簡単すぎる…

あっけなさすぎる……。

 

なんと、15分もかかりませんでした。

HTMLだけでなくCSSの追加もあるため、昨日紹介した「はてなブログブックマーツ」よりは、ほんのちょびっと手間がかかります。(もちろん、基本的にコピペで工程は完了するので、知識はほとんど必要ありません)

とはいえ。ここで今一度、Hike×Hackのサイドバーをご覧ください。

(追記:今は別のものになっています)

「人気記事」の欄が、とんでもないほど視認しやすくなっています。サムネイル画像も表示されますし、カーソルを合わせるとヒョッというギミックが!

たったの15分ほどでこれが作れてしまうのです!このツールを作ってくださった方は私の寵愛を受けるべきだと思うのです。私は世界の中心で「ありがとう」と叫びたいのです!

今日はその手順をお伝えしたいところですが、いかんせん画像などの準備ができていないというのと、今日中に更新するにはいささか時間が足りません。

……ですが! 私はとにかく、少しでも早く!コンマ1秒でも早く、光よりも速く!この素晴らしきツールの存在を、他でもないあなたにお伝えしたいのです!

後日、改まって簡単な手順をHike×Hackでお伝えするつもりですが、もしあなたがこの記事を見て「うおお、やったる! 今すぐやったる!」と思ったのであれば、ぜひ参考記事へ飛んでみてください!

≪1.人気記事はコレで!≫

はてなブログの人気記事を画像付きで表示させるコードを作るやつ。 - #ChiroruNoteはてなブログの人気記事を画像付きで表示させるコードを作るやつ。 - #ChiroruNote

 

≪2.最新記事はコレだ!≫

はてなブログの「最新記事」を画像付きにするコードを作るやつ。 - #ChiroruNoteはてなブログの「最新記事」を画像付きにするコードを作るやつ。 - #ChiroruNote

 

人気記事のツールと同じ作成者の方のものです。最新記事を表示したい場合は、最新記事用に作られているコチラのツールを使うことをオススメします。

≪まとめ≫

・色んなブログでよくみる「サイドバーの画像つき記事一覧」のやり方。

・最新記事も人気記事も同様に作れるので、デザインに差が生まれない!

・今日は激しい衝動がキッカケの紹介のみ。簡単な導入手順については、改まって記事にする予定。

あとがき

今日の記事一覧デザインの変更もそうですが、ブログのデザインをいじりました。まず、記事一覧のデザインを変更。また、ブログの背景色を緑っぽくしました。

それと、気付きづらい点として、フォントサイズや行間も微調整しました。今まで、「一文が長くなった場合の、”改行”ではない改行」の行間が 通常の改行に比べてだいぶ狭いということに悩んでいました。

結論としては、CSSでpタグのmarginをなくすことで改善。具体的な変更点は、「font-size:15→16」としたことです。font-sizeに関しては15~17でふらふらしているので、今後も微調整が入りそうです。ご了承くださいm(_ _)m

関連記事

あなたのブログの人気記事が知りたい! ブログのサイドバーに、手軽に人気記事を表示する方法。 - Hike×Hack 

参考記事

【修正済】コピペで簡単! はてなブログの人気記事を画像付きで表示させる方法。 - #ChiroruLab

はてなブログの人気記事を画像付きで表示させるコードを作るやつ。 - #ChiroruNote

はてなブログの「最新記事」を画像付きにするコードを作るやつ。 - #ChiroruNote