WordPress

ワードプレス、コンテンツ内に、テキスト付きで画像を横並びに表示する方法

 

10
ワードプレスのコンテンツ内に上記のような、画像を横並びにして、下にテキストでリンク先の内容を記載できるような表示をさせたかったので、コードを作成してみました。

スタイルシート

#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>

記事のコンテンツ内に記載するコードは上記になります。

最後に

以前にも同じようなコードを作成したのですが、テキスト文なしの画像だけだったので、今回再度作成してみました。

以前作ったものはこちら
ワードプレスで画像を横並びに表示して、クリックすると任意のページに移動する方法

ABOUT ME
akira
akira
2006年にうつ病を発症し会社を退職。1年で回復し社会復帰できましたが、2018年1月に人生2回目のうつ病を発症し、その年の6月に会社を退職。現在無職で闘病中です。人生山あり谷あり。早く寛解したいです。

Warning: Use of undefined constant XML - assumed 'XML' (this will throw an Error in a future version of PHP) in /home/harusuki/akira-t.com/public_html/wp-content/plugins/wp-syntaxhighlighter/wp-syntaxhighlighter.php on line 1048