ブログの記事を書いていると、様々な画像や広告を使用することがあるかと思います。
例えば自分の写真をアップしたり、広告を画像で表示させたり。
記事にそれらの画像を挿入して、いざプレビューで実際の見え方を確認すると
「なぜか画像が左に寄ってる…」
「なぜか画像が中央にない…」
などと頭を悩まされた方も多数いるのではないでしょうか？？
今回はそんな問題をなんちゃってHTMLで解決させたいと思います。
※スマホで当記事を見ている方には配置の違いが分かりにくいかもしれませんので悪しからず。
はてなブログで画像や広告が中央に配置されていない例
言葉で説明してもいまいち想像しにくいところもあるかもしれないので、見本をお示しします。
何気なくライオンの将棋の駒の画像を載せてみました。
左に寄ってますよね？？
私的には画面の中央に配置したいのですが、はてなブログで何も考えずに画像を貼り付けるとこのように左側へ寄ってしまうことがあります。
このような時の解決方法を次から紹介します。
はてなブログで画像を中央に配置する方法
実はこの方法はめちゃくちゃ簡単です(笑)
<div align="center">●●</div>●●→中央に寄せたいものを入れます(画像URLや、はてなフォトからの貼り付けである場合f:id:△△△:◇◇◇◇j:plain等のコードなど)。
こうするだけで●●が中央に寄ってくれます。
実際に先ほどのライオンの将棋の駒の画像を先ほど紹介したコードで囲んであげると…
しっかりと中央に表示されるようになりました！！
はてなブログで画像を左側、右側に配置する方法
少し番外編になりますが、画像を中央ではなくあえて左側や右側に配置したいこともあるかもしれません。
そのような時に使用できるコードもお伝えします。
右側に配置したい場合↓↓
<div align="right">●●</div>左側に配置したい場合↓↓
<div align="left">●●</div>お気付きかもしれませんが、元々centerと記載してあった箇所をそれぞれleft、rightに変えただけです(笑)
画像だけではなく、広告や文字列の配置も同様に中央へ配置できる
ここまではcenter、right、leftと指定したコードで囲んであげると、囲まれた画像の配置を指定できるというお話をしてきました。
ですが、ここだけで終わるのはもったいない！！
なんと、配置を指定できるのは単なる画像だけではなく広告(アフィリエイトリンク)や文字列も可能です！！
百聞は一見に如かずということで早速例をお示しします。
ただたんにアフィリエイトの広告コードを入力すると下のリンク画像のように左側に寄ってしまいますが、、
<div align="center">アフィリエイト広告コード</div>と入力してあげると、、
ちゃんと中央に寄ってくれます！！
その他にも文章の配置も指定できます。
<div align="center">お試し文章</div>文章もしっかりと中央へ配置されました。
これらを自由自在に使いこなせる日が来れば、人とは少し違ったブログにできるかもしれませんね！