雑記ブログ卒業

生活に役立つ雑記ブログ

画像を真ん中に配置できるコードが素晴らしい

 

こんにちは。「ざっきぶろぐ」です。

 

少し前に、ブログの記事内の画像を真ん中に持ってくるコードを発見して良いなぁと思っていました。

 

いざやってみると、凄くお洒落というか意外と大事だなぁと思ったので記事にします。

 

f:id:zakkiblog:20160920140531j:plain

 

 

画像の中央寄せとは?

画像の中央寄せをするとどうなるのか?

 

ずばりお洒落になります。(笑)

それ以外にはあまり思い付きません。SEOに有利とかGoogleの評価が上がるとかがあれば良いんですけどね。ともかくデザインが少し一新されるイメージです。このブログでのbeforeはこんな感じです。

 

f:id:zakkiblog:20160920112635p:plain

 

オレンジのグラフの画像が左に寄っています。画像を真ん中に配置した場合のafterはこれです。

 

f:id:zakkiblog:20160920112643p:plain

 

全然違います。

よりバランスの整った記事になる気がします。まるでビフォーアフターですね。

 

(ナレーション)

「左に傾いていた画像は、誰もが見やすい真ん中へと移動。

両サイドにバランスのある広々とした空間が現れました。

見映えの悪かった画像は真ん中に配置することでより綺麗な画像に生まれ変わりました。」

 

まさにこんな感じです。(笑)

 

コピペのコード

コピペのコードを誰かが作っていたのをコピペしたのですが、探しても見つかりません。見つかり次第、引用文を載せたいのですが見つからないのでしょうがないですね。

 

画像を中央に配置するコピペのコードは以下の通りです。

 

<div style="text-align: center;">
画像のリンク
</div>

 

この「画像のリンク」の部分に画像のコードを入れます。リンクをコードでサンドイッチするイメージですね。そしてプレビューを見るとあっという間に画像が中央に来ますよ。

 

でもやって見て分かったのですが、いちいち画像を貼るたびにこのコードをコピペするのって結構面倒なんです。もっと楽な方法がないかな?と思っていたら見つけました。

 

ブログ内の全ての画像を一気に中央配置にする方法

このコードの場合はデザインCSSにコピペするだけでブログ内の全ての画像が中央配置になります。

 

【はてなブログ】画像を中央揃えにする方法【CSS】 - うりだよ。

 

私も使わせて頂きましたがこれはとっても便利です。ただコピペすれば良いだけです。勝手に全ての画像が中央にきてくれます。

 

でもアフィリエイト記事も書いている方は広告も貼っていると思います。私も確認しましたが”広告”は中央にきませんでした。あくまでも画像だけが中央にくるようです。

 

広告も中央に配置したい場合は先程の一番最初のコードを手動で書き加えるしかないようです。

 

まとめ

やっぱり真ん中に画像がドンッとあるブログはインパクトがありますよね。

 

バランスが良いに越したことはありません。もし画像を中央に配置したいと考えている方がいましたら、参考にしてみて下さい。

 

おしまい。