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

→ サイトを見てみる

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

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

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

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

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

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

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

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

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

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

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

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

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

↓

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

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

↓

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

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

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

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

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

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

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

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

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

↓クリックで画像拡大↓

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

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

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

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

カゲオ様

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

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

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

質問内容

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

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

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

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

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

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

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

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

補足

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

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段になります。

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

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

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

→ サイトを見てみる