法人・個人事業主向けの新サービスAmazonビジネス→【詳細はこちら】

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

WordPress画像横並びにする方法

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

読者からの質問

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

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

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

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

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

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

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

2018-08-10追記
この度テーマを「STORK」から「SANGO」に変更したら、9カラム表示されなかったので、テーマ側で設定してないと9カラムにはならないっぽいです。 その場合以下のコードを追記すると9カラムになります。
style.css
.gallery-item{
width:11%;
}

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

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

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はやっぱ最高のツールですね。

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

コメントを残す

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