はてなブログのサイドバーにオリジナルの記事一覧を表示

hatenaロゴ

はてなブログでは、標準でサイドバーに関連記事や注目記事の記事一覧を表示できますが、リンクや概要の文字が全体的に大きく、見た目のバランスがあまりよくない気がします。

そこで、サイドバーに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" width="100" 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: 14px;">今まで使っていたFirefoxと同じ使い勝手にするchromeの拡張を追加しました。</div>
    </li>
</ul>

はてなブログ標準のサイドバーの関連記事などで使われているコードを利用しました。
<li>~<li>で囲んだ部分でリンク1箇所分。赤字は自分のブログに合わせて変更します。
なお、class名を削除すると、画像(サムネイル)とテキストが横並びになりません。

以前は、サイドバーにブログカードを表示させて、それを画像にして表示していたのですが、見た目がいまいちだったので、HTMLモジュールにいろいろと自分でHTMLを記述してみたりしたのですが、スマートフォンで表示が崩れたりと、結構苦労しました...。

- 追記 -
続・はてなブログのサイドバーにオリジナルの記事一覧を表示を書きました。