読者です 読者をやめる 読者になる 読者になる

どんべーと呼ばれて早幾年

社会に踊らされ続けるゆとり世代から見える日常を自由気ままに書き連ねます。

はてなブログの人気記事を画像サムネイル付きでおしゃれに表示させる方法【サイドバーに画像付きの人気記事・最新記事を表示させる編】

はてなブログ はてなブログ-カスタマイズ

はてなブログのカスタマイズ【サイドバーに画像付きの人気記事・最新記事を表示させる編】

 

 以前、はてなブログの関連記事に関するカスタマイズ方法をご紹介させていただきましたが、今回はそのデザインに近い形で人気記事・最新記事を表示できるようにしましたので、参考までに。

 

ちなみに以前導入した関連記事はこちら▼ 現在も設置しています。

blog.donbe.me

 

どんなデザインですか?

こんな感じです。2つ目の記事のアイキャッチ画像が拾えていないのは申し訳ないですが、基本は正常に動いています。

はてなブログのカスタマイズ【サイドバーに画像付きの人気記事・最新記事を表示させる編】

 

雑誌っぽい見た目と、オンマウス時のアクションが気に入ってます。 

 

ブログパーツ設置の参考記事

画像サムネイル付きのおしゃれなブログパーツの設置にあたり、参考にさせていただいたのはこちらの記事です▼

chiroru.hatenablog.com

 

2013年の記事のようですが、丁寧に説明されていて、カスタマイズも簡単でしたね。

「ちろる」さん、ありがとうございます。

 

カスタマイズ時の注意点

デザインテーマ次第で、人気記事のパーツを設置するときに横幅の調整が必要になると思います。

その際は、こちらのwidthの値を90%にしてみたり、110%にしてみたりと調整をかけてください。

.htbl_popular_entries {
  height: 100%;
  width: 100%;
}

ちなみに、このサイトではアドセンスと同じサイズにしたかったので、110%にしてあります。

はてなブログ/人気記事/関連記事/最新記事/カスタマイズ/カスタム/ブログパーツ/おしゃれ/画像/サムネイル/サイドバー/