WordPressカスタマイズまとめ←クリック

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 仕事の現場でサッと使える!デザイン教科書
★Amazonは現金チャージがお得★

チャージ額に応じてポイントが貯まります。

プライム会員」なら最大2.5%ポイント還元!!貯まったポイントは次回のお買い物から使えます。さらに、今なら初回購入1000ポイントキャンペーン中!!

※キャンペーン条件がやや複雑なので不安な方は下記の手順を確認してください

STEP1

キャンペーンページへ

Amazonギフトポイント付与キャンペーン

STEP2

エントリー完了後、「Amazonギフト券チャージタイプ」をクリック

Amazonギフトポイント付与キャンペーンエントリー

STEP3

キャンペーン条件の5000円以上を選択または自由金額を5000円以上に入力次へをクリック

Amazonギフトチャージタイプ購入

STEP4

Amazonギフトチャージタイプ支払い方法選択PC

「コンビニ・ATM・ネットバンキング払い・電子マネー払い」を選択次に進むをクリック


STEP5

注意×10

特に何もせず注文を確定するをクリック

Amazonギフトチャージタイプ購入PC

以下キャンペーン条件から外れてしまうトラップについて。

  • 支払い方法の「電子マネー」はNG
  • Amazonギフト券・Amazonショッピングカード・クーポンも使用できるようになっていますがNG
  • 2000円以上で200ポイントも初回特典ですが、チャージは対象外なのでこちらを選択すると本来1000ポイントもらえるのに200ポイントになってしまうのでNG

私はAmazonヘビーユーザーですが、このキャンペーンに関してはユーザーを欺くようなUX(導線)でよろしくないなと思いました。


STEP6

Amazonギフトチャージタイプ購入確認メール

Amazonに登録してるメールアドレスに「お支払い番号のお知らせ」メールが届きます。お支払い方法別の手順」のリンクをクリックしてください。


STEP7

Amazonギフトチャージタイプ支払い確定PC

もう一度言っておきますが、ここで「電子マネーでの支払い」を選択しないように注意してください。

それ以外の支払い方法をクリックすると詳細が載っているので、期限である6日以内に支払いを済ませて完了です。

以上がキャンペーンの手順です。注意点に気をつけながらぜひこの機会に1000ポイントGETしてください。

プライム会員」なら最大2.5%ポイント還元!!

※チャージした金額の有効期限は安心の10年間

ご質問・ご感想・受付中

「メールアドレス入力欄」を削除した為「返信通知」は届きません。
確実に返信が必要な場合は「お問い合わせ」または「TwitterのDM」よりご連絡ください。

他の方にも有益になると判断した質問やコメントは記事に引用させて頂く場合がありますのであらかじめご了承下さい。