私はBLACKPINKが好きで、BLACKPINKの画像をただひたすら眺めたいと思ってアメブロにアカウントをつくりました。
しかしいざ、画像を貼ると画像は縦に並び、ブログがどんどん長くなってしまう。
画像を横に並べることができればいいのにと思いました。
ネットで検索すればその方法はすぐに見つかると思ったのに、思うように見つけることができませんでした。
いろいろ検索し、画像の幅を調整して並べる方法と、HTMLで並べる方法があるとわかりました。
せっかくなのでブログにまとめてみました。
はじめに
この記事はブログデザイン初心者がネットを検索して、自分のアメブロ記事で試行錯誤したことをまとめたものです。
正しくない情報が含まれている可能性もありますのでご了承ください。
ここで紹介する方法はアメブロを利用し、パソコンでブログを書いていることを前提にしています。
概要
アメブロで画像を横に並べたいときは、
- 二つ目の画像を貼るときに改行しないで貼る
- 記事本文の横幅におさまるように、二つの画像の横幅を調整する
- パソコンとスマホでは記事本文の横幅が違うので、スマホでも画像を並べたいときは画像の横幅をより小さくする必要がある
このことをStep1～Step3で説明しました。
Step1：画像を貼る
まず「デザイン幅で表示」にチェックをいれます。
並べたい画像を記事本文に貼ります。
画像の右側にカーソル（赤い矢印部分）が出ている状態で、並べたい画像を貼ります。
貼り付けた画像のサイズが記事本文の横幅より小さければこの時点で画像は横に並びます。
サイズが大きいと、このように2段になります。
いっけん画像が別の行になってしまったように見えますが、画像のサイズを調整すれば横に並びます。
Step2：画像サイズの調整
記事本文の横幅におさまるように画像の横幅の調整をします。
使っているデザインによって横幅は異なります。
自分が使っているデザインの記事本文の横幅を確認する
1、1枚目に貼った画像の横幅を確認（計算しやすい数字にしておくとわかりやすい）
2、2枚目の画像に適当に数字をいれていく
3、画像が並んだらその時の数字を確認
1枚目の画像の横幅と足し算する。
このブログデザインだと二つの画像の横幅の合計が「608」以下になると画像を二つ並べることができることがわかりました。
他にもいくつかのデザインを試してみたら「720」のものや「620」のものもありました。（2カラムのデザインの場合）
3カラムだと「410」、「440」のものがありました。
もっとスマートな方法がないかとネットで検索しましたが、残念ながら探しきれませんでした。
下書きの時点では画像は下のラインにそって並んでいますが、投稿後は画像の中心に合わせて画像が並んで表示されます。
Step3：スマホで見るときも並べて表示したい場合
Step2では記事本文の横幅いっぱいに画像を並べましたが、これだとスマホでは画像は横には並ばず、縦に並んでしまいます。
こうなります。
↓ プレビュー画面（スマホ）
スマホでも画像を並べたい場合は二つの画像の横幅を合計「328」以下になるようにします。
Step4：その他
左に寄っている画像を真ん中にずらしたい場合
どちらの画像でもいいので1回クリックしてサイズ変更等ができるボックスを呼び出します。
貼り付け位置を中央にするボタン（赤い矢印の部分）をクリック。
真ん中になります。
画像と画像の間に隙間を開けたい場合
HTML画面で作業をします。
さくっと説明すると、画像と画像のコードの間にスペースを入れると隙間があきます。
画像が縦に並んでるときのHTML表示は以下
簡単に書くと、
<p>画像1</p>
<p>画像2</p>
となっています。
この黄色い部分を消して、
<p>画像1画像2</p>
にすると画像を並べることができます。
画像を並べた場合のHTML表示は以下
細かくて見にくいですが、画像のコードは「<a○○></a>」で挟まれている部分です。
その間（赤い縦線の部分）に全角または半角のスペースで余白を調整します。
簡単に書くと、
<p>画像1 画像2</p>
というようにすれば隙間があきます。
上が半角スペース、下が全角スペースで隙間をあけたときの見え方
もともと記事本文やスマホで横幅いっぱいの画像サイズにしている場合、スペースで隙間をあけると横に並んでいた画像が縦になってしまうので注意。
画像が横幅におさまるようにサイズを小さくする必要があります。
終わりに
画像サイズの調整で画像を並べる方法は以上です。
この記事は誰かの役に立つものになったのであろうか。
そして、この記事にたどり着く人はいるのかな、、、
スマホで画像を二つ並べて表示させるようにすると、パソコンで見たときの画像が小さくなってしまいます。
3カラムのデザインだともともとの横幅がせまいので相対的にあまり小さく感じませんが、2カラムだと気になる小ささです。
このことを解決するためにネットを徘徊し、HTMLで解決する方法を見つけました。
それについては別の記事にまとめています。
↓↓↓
