ワードプレスのコンテンツ内に上記のような、画像を横並びにして、下にテキストでリンク先の内容を記載できるような表示をさせたかったので、コードを作成してみました。
スタイルシート
#yokoimg {
width: 550px; /*親ボックスの幅*/
font-size: 8px;
overflow: hidden;
}
#yokoimg ul {
width: 560px;
margin-right: -10px;
font-size: 8px;
}
#yokoimg ul li {
width: 95px;/*子ボックスの幅*/
float: left;
margin-right: 10px;
list-style-type: none;
font-size: 10px;
line-height: 13px;
}
ワードプレスのダッシュボード画面の外観→テーマの編集からスタイルシードに上記のコードを追加します。
コンテンツに記載するコード
<div id="yokoimg">
<ul>
<li> <a href="リンク先URLを入れる">
<img src="画像URLを入れる" alt=""/>
記載したいテキスト文を入れます
</a>
</li>
<li> <a href="リンク先URLを入れる">
<img src="画像URLを入れる" alt=""/>
記載したいテキスト文を入れます
</a>
</li>
<li> <a href="リンク先URLを入れる">
<img src="画像URLを入れる" alt=""/>
記載したいテキスト文を入れます
</a>
</li>
<li> <a href="リンク先URLを入れる">
<img src="画像URLを入れる" alt=""/>
記載したいテキスト文を入れます
</a>
</li>
<li> <a href="リンク先URLを入れる">
<img src="画像URLを入れる" alt=""/>
記載したいテキスト文を入れます
</a>
</li>
</ul>
</div>
記事のコンテンツ内に記載するコードは上記になります。
最後に
以前にも同じようなコードを作成したのですが、テキスト文なしの画像だけだったので、今回再度作成してみました。
以前作ったものはこちら
ワードプレスで画像を横並びに表示して、クリックすると任意のページに移動する方法