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

はてなブログのサイドバーにオリジナルの記事一覧を表示では、はてなブログ標準（はてなブログで自動的に読み込ませるCSS）のコードを利用して、サイドバーにオリジナルの記事一覧を表示させましたが、今回は、がんばって自分でHTMLを記述してみました。

（デザイン→サイドバー→モジュールを追加→HTMLにコードを入力）

HTML
<div class="topic-box">
    <div class="topic-img"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/simadzu/20181120/20181120140344.png" alt="Chromeロゴ" /></div>
    <div class="topic-url"><a href="https://simadzu.hatenablog.com/entry/Chrome-extensions">Chromeにインストールしている拡張機能</a></div>
    <div class="topic-txt">今まで使っていたFirefoxと同じ使い勝手にするChromeの拡張をまとめてみました。</div>
</div>

<div class="topic-box">～</div>で囲んだ部分でリンク1箇所分です。
赤字は自分のブログに合わせて変更します。

（デザイン→カスタマイズ→「デザインCSS」にコードを入力）

CSS
.topic-box {
    margin: 0 0 10px;
}

.topic-box:after {
    display: block;
    clear: both;
    content: '';
}

.topic-img {
    float: left;
    width: 100px;
    height: 100px;
    padding: 0 10px 0 0;
}

.topic-img img {
    border: 1px solid #ccc;
    border-radius: 6px;
}

.topic-url {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    padding: 3px 0 6px;
}

.topic-txt {
    font-size: 13px;
    line-height: 1.4;
    padding: 0 0 2px;
}

この程度のCSSなら、HTMLのタグの中に直接CSSを書けばいいのかもしれませんが（<div styles="～">～</div>）、記事へのリンクが増えると管理が大変なので、デザインCSSにスタイルを追加しました。

以前、自分でHTMLを書いたときは、スマートフォンで表示が崩れたりして苦労したのですが、今回のでうまく表示されるようになったので、とりあえずは満足しました。