Word Press アフィリエイト広告の貼り方で横並びに並べる方法 | 初心者でも簡単にできておすすめのやり方です!!

アフィリエイトの広告をそのまま貼り付けると左寄せで表示されます。

複数貼り付けると縦に並んでいきます。

横にスペースが空いてもったいないから、横に並べたいなぁと思ったりしますよね。

広告だけでなく画像と文字などを並べる時などには、一般的に“float”を使います。

ここまでは、Word Pressを始める前に少し学習教材を読んでいたので分かっていたのですが、実際やってみると横には並ぶけど左に寄ってしまい中央に揃いませんでした。

1つだけの場合は、ビジュアルエディーターでも指定すれば中央に寄せられるのですが”float”で並べると上手くできません。

並びを中央に指定する“text-align: center;”は一応知ってはいたので、初心者なりに色々試しましたが上手くいきません。

諦めて最初は、縦に並べて中央に表示された方が見やすいだろうと思い縦に並べていました。

少し慣れてきた頃に“table”で並べている人もいる事を知り、やってみたら簡単にできたので初心者の方で悩んでいる方がいらしたら試してみてください。

“table”のコードは表などを作成する時に使用しますので、いつも練習のためにコードエディターで書いていました。

教材などにも表は”table”で横並びは”float”になっているので、多分正解は”float”で中央に寄せるコードもあるとは思いますが、検索していても見つからないので私は”table”で並べています。

初心者の場合は“table”のコードの方が簡単にできるので、今まで”table”のコードを使った事の無い人でも勉強になりますのでやってみてください。

ついでに表も”table”でコードを書いてみると勉強になりますし、少しずつ覚えていくと楽しいと思います。

横並びにするコード

投稿画面の「コードエディター」に切り替えて入力します。

“table”で横並びにするコードはこちらです。

このままコピペすると、このようにちゃんと横に並びます。

コードの「style=”border-style: none;”」は”table”を表示した時に出る線を消すためのものです。

Wode Pressで使用しているテーマによって違いがあると思いますが、私の使っている「Lightning」ですと3ヶ所に入れないとすべての線が消えてくれません。

勉強のために1ヶ所ずつ試して入れてみるといいかもしれません。

このコードで上のようにキチンと中央揃いになると思いますが、「Lightning」のテーマは表を作成する時でも表示がちょっとおかしいケースもあって、テーマのCSSも少し触っています。

それでも表を作成すると、一部分だけ左寄せになっていたりしますのでカスタムCSSで投稿ごとに対応しています。

広告リンクで表示がおかしかった事は無いので大丈夫だと思いますが、もし中央に揃わない場合は、“text-align: center;”で対応してみてください。

カスタムCSSに

td {
text-align: center;
}

これで対応できると思います。

超初心者の場合は、安易にテーマのCSSに書き込まない方がいいです。

バックアップや子テーマの知識がついてからでも遅くはないので、最初は面倒でも投稿ごとにカスタムCSSに書き込むことをおすすめします。

まとめ

私自身も超初心者ですので、超初心者の方に向けて投稿しています。

HTMLとCCSの知識が無くてもWord Pressでは、簡単にブログやサイトの運営ができるのが魅力です。

便利な機能でプラグインがありますので、インストールすれば簡単にできてしまうことも多いです。

ですが以前投稿した目次や今回の表のコードなどは、プラグイン無しでも比較的簡単にできます。

超初心者の方は、特にまずコードを調べて書いてみることが大切です。

そうすることで独学でも少しずつ身についていきますし、検索してコードが反映されない場合に自分なりに対応できるようになったりします。

Word Pressは、使用しているテーマによってコードが反映されないケースもありますので、投稿に装飾を施したい場合に検索したコードが反映されなくて困ってしまう事も多いです。

簡単なものからコードを書く練習をして、HTMLとCSSの基本的なことだけでも覚えていくと対応できたりするようにもなります。

何より少しずつできるようになると楽しいです。

繰り返し作業していれば、自然に身についていきますので是非挑戦してみてください。

初心者にも簡単にできる便利なコード関係の記事