ワードプレスで画像を横並びに表示して、クリックすると任意のページに移動する方法

使用例

使用例を載せました。クリックすると設定したページに移動します。以下に方法を記載します。

スタイルートに下記のコードを追加

1
ワードプレスのダッシュボードから外観→「テーマの編集」→「スタイルシート」に下記のコードを追加し保存します。

ul.yokonarabiimageList li{
list-style-type: none;
float: left;
}

.clear {
both: clear;
}

記事のページにコードを入れる

<ul class="yokonarabimageList">
    <li><a href="http://XXXXXXXXXXXXXXXXXXXXX">
      <img src="XXXXXXXXXXXXXXXXXXXXXXXXXX.jpg" alt=""width="130" height="180"/>
      </a>
    </li>

 <li><a href="http://XXXXXXXXXXXXXXXXXXXXX">
      <img src="XXXXXXXXXXXXXXXXXXXXXXXXXX.jpg" alt=""width="130" height="180"/>
      </a>
    </li>

<li><a href="http://XXXXXXXXXXXXXXXXXXXXX">
      <img src="XXXXXXXXXXXXXXXXXXXXXXXXXX.jpg" alt=""width="130" height="180"/>
      </a>
    </li>

</ul>
<div class="clear"></div>

記事のページに入れるコードは上記になります。
a href=後の、ダブルクォーテーションの間に、ジャンプ先のURLを入れます。
img src=後の、ダブルクォーテーションの間に、入れたい画像のURLを入れます。
width=後の、ダブルクォーテーションの間の数字は横幅をpxで指定します。
height=後の、ダブルクォーテーションの間の数字は高さをpxで指定します。

The following two tabs change content below.
AKIRA

AKIRA

上尾市在住の、リサイクルショップで働くサラリーマン。 Twitter・Facebookやってます。 小心者なので、誰か声かけてくれると嬉しいです。
スポンサーリンク
スポンサーリンク
スポンサーリンク

コメントをどうぞ

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