はてなブログでは、標準でサイドバーに関連記事や注目記事の記事一覧を表示できますが、リンクや概要の文字が全体的に大きく、見た目のバランスがあまりよくない気がします。
そこで、サイドバーにHTMLのモジュールを追加し、オリジナルで記事一覧を作成、表示させてみました。
(デザイン→サイドバー→モジュールを追加→HTMLにコードを入力)
HTML <ul class="hatena-urllist urllist-with-thumbnails"> <li> <img class="urllist-image" src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/simadzu/20181105/20181105191410.png" alt="Chromeロゴ" /> <a style="font-size: 14px; font-weight: bold;" href="https://simadzu.hatenablog.com/entry/Chrome-extensions">Chromeにインストールしている拡張機能</a> <div class="urllist-entry-body" style="font-size: 13px;">今まで使っていたFirefoxと同じ使い勝手にするChromeの拡張を追加しました。</div> </li> </ul>
はてなブログ標準のサイドバーの関連記事などで使われているコードを利用しました。
<li>~<li>で囲んだ部分でリンク1箇所分。赤字は自分のブログに合わせて変更します。
なお、class名を削除すると、画像(サムネイル)とテキストが横並びになりません。
以前は、サイドバーにブログカードを表示させて、それを画像にして表示していたのですが、見た目がいまいちだったので、HTMLモジュールにいろいろと自分でHTMLを記述してみたりしたのですが、スマートフォンで表示が崩れたりと、結構苦労しました...。