すぐ使える！wordpressで画像を横並びにする方法
「wordpressで記事を書くときに画像をつかって比較したいな〜
縦より横並びの方が見やすいけど表示の仕方がわからん。なにかカンタンに横並びができる方法を教えて欲しい！」
そういった悩みを解決します
記事コンテンツ
- コードを書かずにWordpressで画像を横並びにする方法
- CSSを用いてwordpressで画像を横並び表示
先日、wordpressで記事を書いているときに画像をつかって比較したいなと思いました。
そのときに、縦よりも横並びで画像を表示したらみやすいかなと。
できるだけプラグインを使わない方法で表示したくて、結果２つの方法にたどりつきました。
なので、今回は画像をwordpressの「ギャラリー」と「コード（CSS）」で横並びする方法を紹介していきます。
コードを書かずにWordpressで画像を横並びにする方法
めちゃカンタンに画像を横並びするには「ギャラリー」を使えますね。
ギャラリーとはwordpressに元々ある機能の一つで、
写真を一覧でまとめて表示することができます。
以下の３つのステップでカンタンに画像の一覧表示が可能。
- 画像を追加
- ギャラリー編集
- ギャラリー追加
では、やっていきましょう！
1.画像を追加
メディア追加で「ギャラリー作成」をクリックして、表示したい画像を追加します。
2.ギャラリー編集
ギャラリー設定で細かい編集が可能。
カラムは表示したい画像の列数を指定できて、
今回はカラム数を３にしたので一列に画像3枚が並んで表示されます。
また、サイズで画像のサイズ変更が可能で、キャプションに文字を入力すると画像の下に入力した文字が出てきます。
「ギャラリーの設定」の一番下にリンクコピーがあり、リンクを挿入すれば画像を押すとリンク先に飛ばすことができます。
3.ギャラリー追加
ギャラリー追加を押せば、記事に画像が一覧で表示されます。
もし、ギャラリーの画像を増やしたい場合、「ギャラリー追加」を押してメディアライブラリから追加できます。
思ったよりカンタンに横並びで画像を表示できますよね！
一覧で画像のサイズがバラバラに表示されたときは、
メディアライブラリの「画像編集」で他の画像と合うようにサイズ変更すれば合わせられます。
CSSを用いてwordpressで画像を横並び表示
次は、CSSを用いて画像を横並びにしていきます。
コードを使うことのメリットとして画像の幅やサイズを細かく設定でき、
柔軟な変更が可能になります。
「Flex」と「inline-block」の2通りで画像の横並びを紹介します。
Flexを使って表示
FlexとはHTMLの親要素(Flexコンテナー)を指定するだけで、
直下の要素(Flexアイテム)を横並びができます。
以下がflexで要素を横並びにするコードです。
HTMLのdivクラスは「ImageLine」にしています。
CSS
.ImageLine {
display: flex;
justify-content:space-around;
}表示した結果が以下です。
画像の間に適度なスペースが必要だったので「justify-content:space-around;」をつかいました。
すると、ちょうどいい感じに画像間の幅をとることができましたね！
inline-blockを使って表示
次にinline-blockを使って画像を横並びにしてみます。
inline-blockはブロック要素とインライン要素を両方もっていて、
要素を横並びで表示しつつ、ブロックの性質をいかすこともできるのです。
つまり、ブロック要素を使えるので、高さや横幅、上下左右の余白を細かく設定が可能。
CSS
.ImageLine div{
display:inline-block;
margin:15px;
}念のためですが、「display:inline-block;」だと若干画像の間に隙間ができます。
今回はマージンで周りに幅をとり、全体のバランスを整えました。
以上、WordPressで画像を横並びにする方法をご紹介しました。
他にもプラグインをつかってオシャレに画像を並べる方法もあります。
ぜひ、レイアウトにあったやり方でチャレンジしてみてください！