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

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

ちょっと宣伝：
脱・執筆嫌い！国語が苦手だった私が筆まめになった5冊の本
の記事を書きあげました。
国語が苦手だったわたしが、読んで実践するだけで「変われた」本。
ブロガーとして文章力をアップするチャンス！
文章を書くのが苦手
目を引くタイトルをつけたい
もっと言葉の引き出しを増やしたい
（タイトル決めに利用しまくってるので、ほんとは内緒にしたい）
一部の本は今ならkindleUnlimitedの無料体験利用で、タダで読めます

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

jinの２カラム・３カラムの使い方

1. 「ショートコード」をクリック
2. 「２カラム・３カラム」を選択する
3. コードが表示されるのでコードの通りに入力箇所に入力

Jinの２カラム・３カラムの使用例

それでは実際にカラムを利用して画像を並べてみます

上の画像を表示した状態で、ウィンドウの大きさを変えてみてね！ある一定の大きさを超えると、縦一列に並んでしまうよね

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

[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]

こっちもウィンドウのサイズを小さくしてみてね。画像が自動で縮小されて、横に並んだままになってるよね！これを使ってトップページをサイト型にすると便利だよ

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

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

1. 「プラグイン」→「新規追加」→「Shortcodes Ultimate」を検索すして「インストール」→「有効化」
2. 下記コードをコピーして　●左側●　●中央●　●右側●　それぞれに、画像や文字を入力して完成です
   ※最初と最後の[]は１つずつ削除して利用してください

[[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]]

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

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

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

おまけの５カラム

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

[su_row] [su_column size=”1/5″]
1/3の
ところを[/su_column][su_column size=”1/5″]
割りたい数に
変更して[/su_column][su_column size=”1/5″]
割りたい数の
回数だけ[/su_column][su_column size=”1/5″]
コードを
繰り返す！[/su_column][su_column size=”1/5″]
今回は1/5に
してみました[/su_column][/su_row]

いちばんやさしいWordPressの教本第4版

posted with ヨメレバ

石川栄和/大串肇 インプレス 2019年08月

楽天ブックス

Amazon

Kindle

7net

WordPressプラグイン＆WebAPI活用ガイドブック

posted with ヨメレバ

星野邦敏/西川伸一 翔泳社 2013年01月

楽天ブックス

Amazon

Kindle

7net