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

2 min 28 views
akira

akira

2006年にうつ病を発症し会社を退職。1年で回復し社会復帰できましたが、2018年1月に人生2回目のうつ病を発症し、その年の6月に会社を退職。現在Youtube、ブログアフィリエイト、バイトと貯金で生活しています。人生山あり谷あり。早く寛解したいです。
>>ブログで収入を得る方法は無料で公開しています

FOLLOW

 

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>

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

最後に

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

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

カテゴリー:
ブログで月5万円収入を得る方法

アルバイトはしていますが、僕は現在定職にはついていません。ブログとYoutubeのアフィリエイト収益で生計をたてています。アフィリエイトでお金を得るのは決して楽なことではありませんが、調子の悪いときは休んで、調子の良い時だけ仕事をするという自分のペースで作業をすることも可能です。以下のリンク先ではブログで収益を得る方法を紹介しています。少しでも興味のある方は読んでみてください

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です