昨日読者さんからこんな質問を頂いたので回答します。
ストークカスタマイズの記事とても参考になりました！ありがとうございます。
スマホで2カラム表示する方法なのですが、サイトで3カラム表示もしたいのですがどうしてもできないので、カスタマイズ方法を教えていただけますと嬉しいです！
よろしくお願いいたします。
スマホでも画像を3カラムにしたいということで、多分こんな感じですよね。
実はこれカスタマイズは一切不要です。
WordPressの標準機能で簡単にできてしまいます。
しかも最大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段にする方法】
再度読者の方から質問が来たのでお答えします。
カゲオ様
お世話になっております。
前回スマホのカラム表示でご相談させていただいたものです。
カラム表示についてご質問がありご連絡させていただきました。
質問内容
1カラムに画像を２つ設定したいのですがこちらはどうすればよろしいでしょうか。
下記のように表示をしたく考えております。
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段になります。
[yoko2 responsive][cell][/cell][cell][/cell][/yoko2]テーマに2カラムショートコードがない方は・・・申し訳ないCSSを勉強してください。
まとめ
こんな機能が標準で使えるWordPressはやっぱ最高のツールですね。
最近はカスタマイズが苦手な方でも使いやすいようかなり改善されています。
画像に関するプラグインならこちらもおすすめ
チャージ額に応じてポイントが貯まります。
「プライム会員」なら最大2.5%ポイント還元!!貯まったポイントは次回のお買い物から使えます。さらに、今なら初回購入1000ポイントキャンペーン中!!
※キャンペーン条件がやや複雑なので不安な方は下記の手順を確認してください
STEP1
STEP2
エントリー完了後、「Amazonギフト券チャージタイプ」をクリック
STEP3
キャンペーン条件の5000円以上を選択または自由金額を5000円以上に入力後次へをクリック
STEP4
「コンビニ・ATM・ネットバンキング払い・電子マネー払い」を選択次に進むをクリック
STEP5
特に何もせず注文を確定するをクリック
以下キャンペーン条件から外れてしまうトラップについて。
- 支払い方法の「電子マネー」はNG
- Amazonギフト券・Amazonショッピングカード・クーポンも使用できるようになっていますがNG
- 2000円以上で200ポイントも初回特典ですが、チャージは対象外なのでこちらを選択すると本来1000ポイントもらえるのに200ポイントになってしまうのでNG
私はAmazonヘビーユーザーですが、このキャンペーンに関してはユーザーを欺くようなUX（導線）でよろしくないなと思いました。
STEP6
Amazonに登録してるメールアドレスに「お支払い番号のお知らせ」メールが届きます。「お支払い方法別の手順」のリンクをクリックしてください。
STEP7
もう一度言っておきますが、ここで「電子マネーでの支払い」を選択しないように注意してください。
それ以外の支払い方法をクリックすると詳細が載っているので、期限である６日以内に支払いを済ませて完了です。
以上がキャンペーンの手順です。注意点に気をつけながらぜひこの機会に1000ポイントGETしてください。
※チャージした金額の有効期限は安心の10年間
ご質問・ご感想・受付中