WordPress

ワードプレス 単一記事の上部に画像やバナーを横並びで表示する方法「テーマは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)を開き、上の画像の矢印部分にコードをいれます。

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

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