昨日読者さんからこんな質問を頂いたので回答します。
ストークカスタマイズの記事とても参考になりました!ありがとうございます。
スマホで2カラム表示する方法なのですが、サイトで3カラム表示もしたいのですがどうしてもできないので、カスタマイズ方法を教えていただけますと嬉しいです!
よろしくお願いいたします。
スマホでも画像を3カラムにしたいということで、多分こんな感じですよね。
実はこれカスタマイズは一切不要です。
WordPressの標準機能で簡単にできてしまいます。
しかも最大9カラム!!!!(実用的ではない)
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段にする方法】
再度読者の方から質問が来たのでお答えします。
カゲオ様
お世話になっております。
前回スマホのカラム表示でご相談させていただいたものです。
カラム表示についてご質問がありご連絡させていただきました。
質問内容
1カラムに画像を2つ設定したいのですがこちらはどうすればよろしいでしょうか。
下記のように表示をしたく考えております。
pcでは、2カラム横並びに4枚表示
spでは、2カラム上下に2枚ずつ表示
もし可能でございましたら教えていただきたいです!よろしくお願いいたします。
なかなかマニアックな質問です。笑
この読者さんは「WordPressテーマ「ストーク」」をお使いなので「2カラム」のショートコードがある前提で上記のことを行ってみようと思います。
多分こんな感じでしょうか。

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段になります。
「SANGO」ならこれ
[yoko2 responsive][cell][/cell][cell][/cell][/yoko2]
テーマに2カラムショートコードがない方は……申し訳ないCSSを勉強してください。
WordPressの画像横並び【まとめ】
こんな機能が標準で使えるWordPressはやっぱ最高のツールですね。
最近はカスタマイズが苦手な方でも使いやすいようかなり改善されています。
返答ありがとうございます。
この記事に書いたある通りにやっても、
スマホでは、横2枚になってしまいます。
diverというテンプレートを使っているからなのでしょうか?
りんこ様
送っていただいたページに関しては、私の環境(iPhone)で確認した所、5つ並んでおりました。
またテーマによって、独自のコードが割当られている場合もありますので、その可能性もあります。
よろしくお願い致します。
はじめまして。
スマホで画像を横並びに表示させる方法を知りたくて、ここにたどりつきました。
このサイトの画像で表示されているように、
パソコンでみてもスマホでみても、画像が5枚程度横に並べられる形にしたいのですが、
いろいろ試しても、パソコンよりも、横の枚数が減ってしまいます。
なにか方法を知っていますでしょうか?
りんこ様
確認しました所、スマホでも5枚並んでいます。
よろしくお願い致します。