WordPress

3カラムを使う際、画面の大きさを変えると画像が1列になる時の対処

この記事は 4 分44秒くらいで読めます。

WordPressテーマ「jin」では2カラム・3カラム表示がショートコードで用意されています。
しかし、3カラムで画像を並べた際、ウィンドウサイズを最大にしていないと画像が縦1列に並んでしまいます。
画像をウィンドウサイズに合わせて縮小させ、横に並べる方法をご紹介します。

こんな人に読んでもらいたい
  • WordPressを利用していて、画像や文字を横に並べたい
  • 3カラム表示を使っているが、ウィンドウサイズを変えると縦1列になってこまる
  • 並べた画像が自動縮小されず、ずれるため困っている
  • WordPressでサイトアフィリエイトをしたいけど、メニューがうまく作れない

3カラムを使う際、画面の大きさを変えると画像が1列になる時の対処
ちょっと宣伝:
脱・執筆嫌い!国語が苦手だった私が筆まめになった5冊の本
の記事を書きあげました。
国語が苦手だったわたしが、読んで実践するだけで「変われた」本。
ブロガーとして文章力をアップするチャンス!
文章を書くのが苦手
目を引くタイトルをつけたい
もっと言葉の引き出しを増やしたい
(タイトル決めに利用しまくってるので、ほんとは内緒にしたい)
一部の本は今ならkindleUnlimitedの無料体験利用で、タダで読めます

ワードプレス「jin」で用意されているカラム

jinの2カラム・3カラムの使い方

  1. 「ショートコード」をクリック3カラムを使う際、画面の大きさを変えると画像が1列になる時の対処
  2. 「2カラム・3カラム」を選択する3カラムを使う際、画面の大きさを変えると画像が1列になる時の対処
  3. コードが表示されるのでコードの通りに入力箇所に入力3カラムを使う際、画面の大きさを変えると画像が1列になる時の対処

Jinの2カラム・3カラムの使用例

3カラムを使う際、画面の大きさを変えると画像が1列になる時の対処
それでは実際にカラムを利用して画像を並べてみます
ブサ猫の無料配布アイコン
ブサ猫の無料配布アイコン
ブサ猫の無料配布アイコン
ブサ猫の無料配布アイコン
ブサ猫の無料配布アイコン
3カラムを使う際、画面の大きさを変えると画像が1列になる時の対処
上の画像を表示した状態で、ウィンドウの大きさを変えてみてね!ある一定の大きさを超えると、縦一列に並んでしまうよね

スマホで見た場合は縦一列になります

プラグイン「Shortcodes Ultimate」を利用した場合

ブサ猫の無料配布アイコン
ブサ猫の無料配布アイコン
ブサ猫の無料配布アイコン
3カラムを使う際、画面の大きさを変えると画像が1列になる時の対処
こっちもウィンドウのサイズを小さくしてみてね。画像が自動で縮小されて、横に並んだままになってるよね!これを使ってトップページをサイト型にすると便利だよ

スマホで見た場合は縦一列になります

プラグイン『Shortcodes Ultimate』の使用方法

プラグイン『Shortcodes Ultimate』を使って画像が自動収縮される3カラム表示を作成

  1. 「プラグイン」→「新規追加」→「Shortcodes Ultimate」を検索すして「インストール」→「有効化」3カラムを使う際、画面の大きさを変えると画像が1列になる時の対処
  2. 下記コードをコピーして ●左側● ●中央● ●右側● それぞれに、画像や文字を入力して完成です
    ※最初と最後の[]は1つずつ削除して利用してください
[su_row] [su_column size="1/3"] ●左側● [/su_column][su_column size="1/3"]●中央●[/su_column][su_column size="1/3"]●右側●[/su_column][/su_row]

 

上のコードは改行やスペースを全部取り除いているので見づらいですが、このまま使ってください。
改行やスペースなどちょっとしたことで、画像が斜めに表示されたりずれます。

3カラム以外にも簡単につかえるショートコードが増えている

「Shortcodes Ultimate」をインストールすると、WordPressの編集画面に「ショートコードを挿入」というボタンが増えています。ここから3カラム以外にもいろいろなコードが使えるので、試してみて下さいね!

3カラムを使う際、画面の大きさを変えると画像が1列になる時の対処 3カラムを使う際、画面の大きさを変えると画像が1列になる時の対処

おまけの5カラム

3カラムだけじゃなく5カラムや5カラムなど自由に作成することができます!

3カラムを使う際、画面の大きさを変えると画像が1列になる時の対処
1/3の
ところを
3カラムを使う際、画面の大きさを変えると画像が1列になる時の対処
割りたい数に
変更して
3カラムを使う際、画面の大きさを変えると画像が1列になる時の対処
割りたい数の
回数だけ
3カラムを使う際、画面の大きさを変えると画像が1列になる時の対処
コードを
繰り返す!
3カラムを使う際、画面の大きさを変えると画像が1列になる時の対処
今回は1/5に
してみました