カスタマイズ・Tips ひでほい

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

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

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

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

スポンサードリンク

画像を横並びにする方法

方法は至ってシンプル、html直書きしちゃいましょう。

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

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

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

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

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

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

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

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

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

2017年6月23日

8 件のコメント

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

    返信する

    • マリオさん

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

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

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

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

      返信する

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

    返信する

    • とまとさん

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

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

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

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

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

      返信する

  • こんにちは。
    無事横並びにすることができました！
    有難うございます！

    ただ、スマホで見た場合画像が左詰めになって縦並びに表示されてしまいます。
    スマホで縦並びに表示されるのは良いのですが、これを中央揃えにすることは可能でしょうか？
    テキストでセンタリングのタグ等を挿入しても何故か左詰めになったままです。
    もしかしたら私のタグの入れ方が間違っているのかもしれませんが・・・。
    ご教示いただければ幸いです。

    返信する

  • ひでほい様

    初めまして、超新人のWeb担当者です。
    wordpressで横並び、まさに探している内容で助かりました。記事を書いて頂いてありがとうございます！

    この場合スマホで縦並びになると思うのですが、スマホでもそのまま横並びで全体が縮小して表示されるようなやり方はありますでしょうか…。ピクセル数やサイズ指定で可能なのでしょうか。
    大変お手数ですが、教えていただけるとありがたいです。

    返信する

    • あやりさん

      お役にたてたようでうれしい限りです^^

      スマホでも横並びにしたいのであれば、手取り早い方法としては、
      ・スマホでも横並び可能な画像サイズに調整する
      ・画像を並べて１つの画像を作成する

      あたりがすぐ思いついたのですが、いかがでしょうか？

      javascriptを使えば端末の画面サイズによって、表示方法を分岐したりもできますので
      ご興味があればぜひ調べてみてください！

      返信する

    • コメントを残す

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

    RECOMMENDこちらの記事も人気です。