ブログカスタマイズ：サイドバーのHTMLでBrooklynデザインに近い記事リンクを無理やり作る

サイドバーにTAB切り替えの仕組みを付けてオススメ記事とMy Tweetの2つのTABを切り替えられるようにしたが、オススメ記事リンクがBrooklynデザインと微妙に合っていないので合わせようとしてみた。

現時点でまだ苦戦しており、CSSで書いた内容がブログ記事内には反映されるがサイドバーには反映されないため、苦肉の策としてHTMLでstyleを直接指定する力技を取っている。

この荒技について、忘れないように書き留めておきます。

サイドバーにTAB切り替えの仕組みを入れる方法は以下参照。

以下の赤文字箇所がBrooklynライクにするstyleの指定内容となる。

記事のURL、記事の画像URL、記事タイトルを入れてサイドバーのHTMLに埋め込むと「最新記事」「注目記事」にあるリンクとほぼ同じような見た目のリンクが作れる。

リンクは立て続けに書けば縦に並ぶ、はず（少なくとも自作のTAB切り替えの枠内ではきれいに並んでいる）。

サムネイル付き記事リンクのテンプレート

<div style="display: inline-block; vertical-align: baseline; padding: 8px 0px 8px; border-bottom: 1px solid #ddd;width:100%;text-decoration: none;">
<div style="float: left; width: 100px; height: 100px; overflow: hidden; padding: 0px 10px 10px 0px;">
<a href="記事のURL">
<img style="width: 100%; height: 100%; object-fit: cover;" src="記事の画像URL" />
</a>
</div>
<a style="font-size: 14.96px;text-decoration: none;" href="記事URL">記事タイトル</a>
</div>

タイトルのみ記事リンクのテンプレート

<div style="display: inline-block; vertical-align: baseline; padding: 8px 0px 8px; border-bottom: 1px solid #ddd;width:100%;text-decoration: none;">
<a style="font-size: 14.96px;text-decoration: none;" href="記事URL">記事タイトル</a>
</div>