ワードプレス 単一記事の上部に画像やバナーを横並びで表示する方法「テーマはstingerで実践」

今回はワードプレスで作ってあるサイトにの、単一記事(投稿した記事)全部に画像やバナーを横並びで表示する方法を紹介します。
テーマはstinger(スティンガー)で実践します。

tableタグで横並びにする

今回は「table」タグを使用して画像を横並びに表示させます。
下記にコードを記載します。


<table  style="border-style:none;">
<tr>
<td style="border-style:none; margin: 0; padding: 0;">この間にバナーなどリンク先を入れる</td>
<td style="border-style:none; margin: 0; padding: 0;">この間にバナーなどリンク先を入れる</td>
</tr>
</table>

上のコードはタグに直接tableの設定(style)を入れているので、スタイルシートをいじらないでも大丈夫なようになっています。
styleの設定はtabel枠と、バナーなどの横並びにした時の、隙間をなくすようにしてあります。

この設定は「stinger3」で単一記事上部に入れる設定で、その他のテーマの場合は「border-style:none」を入れないでも枠が表示されなかったりします。

単一記事にバナーを表示 stinger3

ワードプレス 単一記事の上部に画像やバナーを横並びで表示する方法「テーマはstingerで実践」
テーマはstingar3の場合で解説します。
まずテーマの編集から、単一記事の投稿 (single.php)を開き、上の画像の部分にコードをいれます。

ワードプレス 単一記事の上部に画像やバナーを横並びで表示する方法「テーマはstingerで実践」
上の画像のように、すべての単一記事の上部に、横並びでバナーを表示させることができます。

単一記事にバナーを表示 stinger5

ワードプレス 単一記事の上部に画像やバナーを横並びで表示する方法「テーマはstingerで実践」
テーマがstingar5の場合でも、コードを入れる場所はほとんど変わりませんが書いておきます。
変更するファイルは同じで、テーマの編集から、単一記事の投稿 (single.php)を開き、上の画像の矢印部分にコードをいれます。

以上、単一記事の上部に画像やバナーを横並びで表示する方法でした。
最後まで読んでいただき、ありがとうございました。

The following two tabs change content below.
AKIRA

AKIRA

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

コメントをどうぞ

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