サイドバーに画像つき手動リンクを設定する1番簡単な方法(画像と文字の縦並びのcss)

プログラミング学習

いろいろと手動リンクのプラグインがでています。
一応、使ってみたいのですが、どれもちょっとした不満やバグがあります。

WordPressのカスタムフィールドで手動の関連記事を表示する方法とマニュアルリンクプラグインの5つを紹介

特集:フリーランスWebエンジニアのための週2からのリモートワーク

サイドバー画像つき手動リンクを設定する1番簡単な方法

そもそもマニュアルで設定するため、普通にウィジェットとcssにコードに書いてしまう方法がありますね。
どのみち手動で設定するのだから、それでも変わらないだろう、と。

実は、これが１番早いのではないか、と。

sidebar.phpに直接書かず、ウィジェットに配置すれば、どこでも好きな場所に置けます。

スポンサーリンク

画像と文字の縦並びリストの作り方

画像と文字の縦並びリストを作り、マニュアルでリンクを設定すればいいわけですね。

ウィジェットの見出しに「厳選おすすめ記事」とでもつけて…

<ul>
<li class="manual-link"><a href="#"><img src="image.jpg" class="manual-link-img"></a>
<a href="">おすすめ記事1</a></li>
<li class="manual-link"><a href="#"><img src="image.jpg" class="manual-link-img"></a>
<a href="">おすすめ記事2</a></li>
</ul>

altとtitleぐらいつけてもいいかもしれません。altは画像が表示できないとき、代替で表示します。
SEO効果はないかもしれませんが、マイナスになることはないでしょう。

<ul>
<li class="manual-link"><a href="#" title="タイトル"><img src="image.jpg" class="manual-link-img" alt="画像代替テキスト"></a>
<a href="">おすすめ記事1</a></li>
<li class="manual-link"><a href="#" title="タイトル">><img src="image.jpg" class="manual-link-img" alt="画像代替テキスト"></a>
<a href="">おすすめ記事2</a></li>
</ul>

画像のリンクは人気記事で使われている画像からurlを拾います。

cssはこんな感じでしょうか。alignは非推奨のようなので、使いません。

/* マニュアルリンク */
.manual-link-img{
	float:left;
}

.manual-link{
	margin:0;
	padding:15px 0;
	line-height:1.5;
	clear:both; /*floatの解除*/
}

数が多くない場合、個人的にはこの方法に落ち着きそうです。1番簡単ですし…。floatの解除方法は、他に、overflow: hidden;とclearfixを使う方法があるようです。

手書きがやっぱ融通がきくし、最強なのでしょうか。

コメント