- WordPressでブログを書いている人
- スマホで画像を3カラムに表示したい人
- プラグインではなく追加CSSで対応したい人
WordPressでブログを書いている方なら画像等を記事に載せることは多々あると思います。
画像での表現はイメージが分かりやすくなる半面、多用してしまうと少しごちゃごちゃしてしまいます。
特にスマホ画像等の縦向きの画像の場合が顕著です。
その際、役に立つのが「ギャラリー」や「カラム」です。
複数の画像を横並びに表記（以下参照）することで、見た目を少しスッキリさせます。
しかし、この方法の場合パソコン画面では6～8枚横並びにできるのですが、スマホ画面では2枚が限界なのです。
そこで今回は、スマホでの画像表記を3枚以上（以下の通り）に表示する方法をご紹介します。
「画像は多く使いたいけど、記事の見た目もすっきりさせたい」という方に本記事はおすすめです。
凄く簡単ですので、ぜひ取り入れてみてください。
運営者プロフィール・ Twitter（＠ririmannonline）
目 次
画像を横並びに表示する方法
画像を3枚以上（最大6カラム）横並びにするには「カラムブロック」を使用します。
詳しい手順は以下の３STEPです。
- STEP1追加CSSの入力コードをコピーし、追加CSSに入力する。
- STEP2カラムブロックの選択・設定カラムブロックを選択し「高度な設定」にて追加CSSクラスを入力する
- STEP3画像設定好きな画像を選択し、カラム数を決定する。
各ステップをわかりやすく説明していきます。
追加CSSの入力
以下のコードを追加CSSに入力します。
/*スマホ横並び*/
.ath-colfix{
flex-wrap:nowrap;
}
@media (max-width: 599px){
.ath-colfix .wp-block-column:not(:first-child) {
margin-left: 5px;
}
}コードの入力する場所は「外観」⇒「テーマ」⇒「スタイルシート」で移動できます。
テーマによって違いますが、「外観」⇒「カスタマイズ」⇒「追加CSS」からも入力することが可能です。
どちらの方法でも良いのでお好きな方を選択し、コードを入力してください。
使い慣れてる方で問題ないよ！
僕は「追加CSS」の方でやってます！
カラムブロックの選択・設定
次にカラムブロックを選択し、簡単な設定をします。
まず、Wordpressの記事作成画面の左上にある「＋マーク」をクリックし、デザインの中にある「カラム」を選択します。
カラムを選択すると以下のような表記がされていると思いますので、好きなパターンを選択してください。
カラム数等は後から変更できるので、良く分からない場合は「スキップ」でOKです。
次にカラムブロックを選択した状態で、右側に表示されているブロックタブから「高度な設定」⇒「追加クラスCSS」へ移動し「ath-colfix」を入力します。
以上で設定は完了です。
今回設定したブロックを「再利用ブロック」として登録しておくと、今後使用するのに便利です。
再利用ブロックの使用方法は『再利用ブロックの使い方を徹底解説』にて解説していますので、参考にしてみてください。
再利用ブロックは凄く便利だから是非使いこなしてみてね！！
画像設定
あとは好きな画像を選択するだけです。
カラムの数はカラムブロックを選択し「カラム」にて数値を変更すればOKです。
「＋マーク」をクリックして、挿入したいブロックを選択しましょう。
カラムブロックの便利な使い方
カラムブロックを使う上でいくつか参考になることを紹介していきます。
具体的には以下の通りです。
- 1カラム～6カラムの表示
- 「縦向き画像」と「横向き画像」の併用
- 画像以外の組み合わせ
1つずつ分かりやすく説明していきます。
1カラム～6カラムの表示
スマホで表示可能な1カラムから6カラムまでをサンプルとして表示しておきます。
▼1カラム
▼2カラム
▼3カラム
▼4カラム
▼5カラム
▼6カラム
カラム数を増やし過ぎると画像が小さくなるので、現実的に使えるのは多くて4カラムぐらいかなと思います。
小さい画像をクリック・タップで大きく表示させたい場合は、プラグインで対応するのがおすすめです。
詳しくは「クリックで画像を拡大させる方法」で分かりやすく説明していますので、良ければ見てみてください。
上記の画像の場合、4カラム以上はクリック・タップで大きくなるように設定してみたよ！
「縦向き画像」と「横向き画像」の併用
「縦向き画像」と「横向き画像」を並ばせて表示することも可能です。
意外と重宝する組み合わせなので、ぜひ使ってみてください。
「ギャラリーブロック」でも同様の表現ができます。
ご参考程度に。
ギャラリーの場合、スマホで見た時3カラム以上にならないのでご注意を。
画像以外の組み合わせ
今まで画像についてご紹介してきましたが、カラムは画像以外も使用できます。
例をいくつかあげて紹介します。
「画像＋文章」の組み合わせ
画像と文章を組み合わせることが可能です。
画像と画像の間に文章を挿入することも可能です！！
スマホでの表記の場合画像と画像の間は狭いので、文字数には注意が必要です。
3カラムで使う場面は少ないかもしれませんが、2カラムの場合は画像の説明等で重宝しそうです。
「文章＋文章」の組み合わせ
文章もカラムごとに分けることが可能です。
左の文章。
真ん中の文章。
右の文章。
これに関しては使用する場面が見当たりませんが、一応こんなこともできます。
「ボックス＋文章」
次はボックスと文章の組み合わせです。
- ○○
- ××
- △△
左記で説明している通り○○は△△です。
上記のような使い方も可能です。
これは割と使える場面も多そうですので、ぜひご活用ください。
個人的にはメリット・デメリットを並べるのは見やすいのではないかと思います。
- ○○
- ××
- △△
- ○○
- ××
- △△
組み合わせは無数だから、自分でお気に入りのパターンを作っておくと便利だね！！
「ギャラリー＋ギャラリー」
「カラム数は最大6カラムまで」と冒頭でご紹介しましたが、「ギャラリー」を利用すれば、さらにに画像数を増やすことができます。
つまり、画像を横並びさせる最大枚数は以下の通りです。
▼スマホの場合
『カラムブロック（6カラム）×ギャラリーブロック（2カラム）＝12カラム』
▼PCの場合
『カラムブロック（6カラム）×ギャラリーブロック（8カラム）＝48カラム』
ここでは、画像を並べすぎても見にくくなるだけなので、スマホの限界枚数である12枚を例として記載しておきます。
PCでの限界枚数はみなさんで試してみてください。
使用用途は皆無だと思いますが、方法だけでも知っておくといずれ役に立つかも知れません。
PC版もやってみたけど、小さすぎて画像が認識できなかったよ(笑)
まとめ：カラムブロックの汎用性は無限大
画像を横並びに表示する方法
- STEP1 追加CSSの入力
- STEP2 カラムブロックの選択・設定
- STEP3 画像設定
カラムブロックの便利な使い方
- 1カラム～6カラムの表示
- 「縦向き画像」と「横向き画像」の併用
- 画像以外の組み合わせ
追加CSSを入力するだけなので、誰でも簡単に使用可能になると思います。
合わせてカラムブロックの汎用性の高さに気づかれた方も多いかと思います。
使い方１つで記事の見やすさも大きく変わってくるので、積極的に活用していただければと考えます。
今回のようなブログ関連の内容を『ブログのノウハウ全て公開』という記事でまとめていますので、お時間がある方は見ていただけると嬉しいです。
では、また！！
りりまん