WordPressの記事中で画像を横に並べる一番簡単な方法

ワードプレスwordpressカスタマイズ

WordPressで記事を書いていると、たまに小さな画像などを横並びで表示したい時があります。

この記事では、そんな時に最も手取り早い方法をご紹介します。

 

スポンサードリンク

画像を横並びにする方法

方法は至ってシンプル、html直書きです。

プラグインを入れたり、CSSを編集したりと色々方法はあると思いますが、この程度であれば、もう書いちゃうのが一番早いです。

何でもかんでもプラグインに頼ってしまうというのは、あまり好きじゃないんですよねー。
プラグインによっては大した機能ではないのに、I/Oが無駄に多くWordPressを重くしてしまう原因になってしまうこともありますから。

ちなみにコードを書くといっても、実際にはエディタをテキストモードにして、ソースをコピペするだけです。

そのソースがこちらです。

「image1」と「image2」のところをそれぞれ、並べたい画像と置き換えるだけです。

並べた画像に隙間を開けたい場合は、marginで調整してください。

これなら一瞬で対応できます!


【こちらの記事もおすすめです!】

これだけでOK!最初に絶対必要なWordPressおすすめプラグイン13選!

2017.06.23

5 件のコメント

  • こんにちは!横並びできました!二つ蓋して4つ並べられました!
    文字を画像のあとに入れると真横に来てしまうのですが、
    真下に入れる方法がもしお分かりでしたらご教授くださいませんか?
    よろしくお願いいたします!

    • マリオさん

      横並び表示ができたようで何よりです(^^)

      文字を下に表示するやり方ですが、こちらの記事でやっておりますが、こんな感じでしょうか?

      ちなみに、こちらがそのコードです。

      ご参考になれば、幸いです。

  • まさに探していました!ありがとうございます;;
    ただ、スマホサイズにした際、自動で縦並びになってくれるのですが2枚目はスマホサイズに適応していて
    1枚目だけサイズが上手く調整かかりません・・
    なにか、styleを追記すれば1枚目もリサイズされますでしょうか・・・
    ご教示いただければ幸いです。なにとぞ、よろしくお願いいたします。

    • とまとさん

      コメントありがとうございます!

      お探しの内容だったとのことで、記事を書いた甲斐がありました^^

      スマホのリサイズは上手くいかないとのことですが、
      普通に画像を縦に並べた場合のスマホの表示は正しくリサイズが
      かかりますでしょうか?

      また、画像をピクセル数やサイズ指定で表示させてみてはいかがでしょうか?

      正確な回答ができず申し訳ございませんが、
      ご参考となれば幸いです。

  • コメントを残す

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