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

hatenaロゴ

はてなブログのサイドバーにオリジナルの記事一覧を表示では、はてなブログ標準(はてなブログで自動的に読み込ませるCSS)のコードを利用して、サイドバーにオリジナルの記事一覧を表示させましたが、今回は、がんばって自分でHTMLを記述してみました。
(デザイン設定→サイドバー→モジュールを追加→HTMLにコードを入力)

chromeロゴ
今まで使っていたFirefoxと同
じ使い勝手にするchromeの
拡張をまとめてみました。
<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にコードを入力)

.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 #ddd;
	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を書いたときは、スマートフォンで表示が崩れたりして苦労したのですが、今回のでうまく表示されるようになったので、とりあえずは満足しました。