漫画とアニメ記事を→”新サイト”へ移行中

WordPressでCSSを使わず画像を横並びにする方法【最大9カラム】

WordPress画像横並びにする方法

昨日読者さんからこんな質問を頂いたので回答します。

読者からの質問

ストークカスタマイズの記事とても参考になりました!ありがとうございます。

スマホで2カラム表示する方法なのですが、サイトで3カラム表示もしたいのですがどうしてもできないので、カスタマイズ方法を教えていただけますと嬉しいです!

よろしくお願いいたします。

スマホでも画像を3カラムにしたいということで、多分こんな感じですよね。

実はこれカスタマイズは一切不要です。

WordPressの標準機能で簡単にできてしまいます。

しかも最大9カラム!!!!(実用的ではない)

2020-06-24追記
グーテンベルクになってから、デフォルトのギャラリー作成した画像にグレーの枠線と余白(margin)が追加されたみたいなので、以下のコードを追記すると枠線と余白が消え、キレイに横に並びます。

style.css
/* ギャラリーカスタム */ .gallery-item { margin-right:0; margin-top: 0!important; } .gallery-icon img { border: none!important; }

※タイトルはCSSなしだったのに申し訳ないです。

他にもこんな風に使えばあっという間にプロっぽく。

では、早速いきましょう。

WordPressの画像横並びはギャラリー作成でできる

メディアを追加ギャラリーを作成

記事作成画面の左上にあるメディアを追加」をクリック。

ギャラリーを作成」をクリック

ギャラリーを選択

並べたい画像をクリックします。

ギャラリーを作成」をクリック

ギャラリーの挿入

ギャラリーの設定」をしたら「ギャラリーを挿入」をクリック

設定項目選択肢
リンク先※メディアファイル
カラム(1〜9)の中から選択
ランダムページを表示する度に画像がランダムに並ぶ
サイズ※フルサイズ
順序を逆にする左右の画像を入れ替えて挿入する(ドラッグでも可)
この画像のキャプション画像の下にテキストを挿入

たったこれだけで自由なカラム表示が可能です。

冒頭で紹介した画像を9枚パネルのようにするには、画像を9枚選択後に3カラムを選択してください。

※リンク先を「メディアファイル」へ、サイズを「フルサイズ」に指定したのは、下記で紹介するプラグインを使用することが前提です。

WordPressの画像横並びはEasy FancyBoxと組み合わせると最強

上記の指定だけでカラム表示はOKです。

でもスマホで3カラム以上並べると小さくて非常に見えにくくなります。

そこで「Easy FancyBox」プラグインと組み合わせると画像をクリックすると、元のサイズで拡大表示してくれます。

↓クリックで画像拡大↓

その際、上記のように「クリックすると画像を拡大できる」ことを読者に知らせてあげると親切ですね。

プラグイン設定はこちらの記事が分かりやすかったです。

WordPressの画像横並び番外編【PCで4つ並びスマホで2つ並びを2段にする方法】

2018年7月7日追記

再度読者の方から質問が来たのでお答えします。

メール相談内容

カゲオ様

お世話になっております。

前回スマホのカラム表示でご相談させていただいたものです。

カラム表示についてご質問がありご連絡させていただきました。

質問内容

1カラムに画像を2つ設定したいのですがこちらはどうすればよろしいでしょうか。

下記のように表示をしたく考えております。

pcでは、2カラム横並びに4枚表示

spでは、2カラム上下に2枚ずつ表示

もし可能でございましたら教えていただきたいです!よろしくお願いいたします。

なかなかマニアックな質問です。笑

この読者さんは「WordPressテーマ「ストーク」」をお使いなので「2カラム」のショートコードがある前提で上記のことを行ってみようと思います。

多分こんな感じでしょうか。

補足
テーマを「SANGO」に変更したら画像の並びがズレたので、その場合は以下のコードで挿入してください。
WordPress画像補正

style.css
.gallery-item{ vertical-align: initial; }

完成コードは以下のようになります。

HTML
[colwrap] [col2] [gallery columns="2" size="full" link="file" ids="〇〇,〇〇"] [/col2] [col2] [gallery columns="2" link="file" size="full" ids="〇〇,〇〇"] [/col2] [/colwrap]

2カラムショートコードの間に「前半で解説した」ギャラリーを作成の2カラム画像を2つ挟めば、PCでは4つ並び、スマホでは2つ並びが2段になります。

チェック
※他のテーマの方はテーマ専用の2カラムコードに置き換えてください。
「SANGO」ならこれ[yoko2 responsive][cell][/cell][cell][/cell][/yoko2]

テーマに2カラムショートコードがない方は……申し訳ないCSSを勉強してください。

WordPressの画像横並び【まとめ】

こんな機能が標準で使えるWordPressはやっぱ最高のツールですね。

最近はカスタマイズが苦手な方でも使いやすいようかなり改善されています。

4 COMMENTS

アバター りんこ

返答ありがとうございます。
この記事に書いたある通りにやっても、
スマホでは、横2枚になってしまいます。

diverというテンプレートを使っているからなのでしょうか?

コメントを投稿する
カゲオ カゲオ

りんこ様

送っていただいたページに関しては、私の環境(iPhone)で確認した所、5つ並んでおりました。
またテーマによって、独自のコードが割当られている場合もありますので、その可能性もあります。

よろしくお願い致します。

アバター りんこ

はじめまして。
スマホで画像を横並びに表示させる方法を知りたくて、ここにたどりつきました。

このサイトの画像で表示されているように、
パソコンでみてもスマホでみても、画像が5枚程度横に並べられる形にしたいのですが、
いろいろ試しても、パソコンよりも、横の枚数が減ってしまいます。

なにか方法を知っていますでしょうか?

コメントを投稿する
カゲオ カゲオ

りんこ様

確認しました所、スマホでも5枚並んでいます。

よろしくお願い致します。

コメントはお気軽にどうぞ

※日本語が含まれていないコメントは投稿できません。(スパム対策)

\最強のSEO対策ツール・Rank Trackerを解説/