雑記ブログ卒業

生活に役立つ雑記ブログ

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

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

 

少し前に、ブログの記事内の画像を真ん中に持ってくるコードを発見して良いなぁと思っていました。いざやってみると、凄くお洒落というか意外と大事だなぁと思ったので記事にします。

 

今回の記事では、ブログやサイトの写真を中央に配置したい人、難しいことは抜きにして、コピペだけでできるやり方を知りたい人向けです。

f:id:zakkiblog:20160920140531j:plain

画像の中央寄せとは?

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

ずばりお洒落になります。

 

SEOに有利とかGoogleの評価が上がるとかがあれば良いんですけど、残念ながらそういった情報はありません。

 

画像を中央に持ってくることでGoogleの評価が変わったり、検索順位が大きく下がったりする情報は今のところないので、特に気にせずカスタマイズしてOKです。

 

ですが、メリットとしてサイトやブログのデザイン面での向上が挙げられます。サイトとしてのバランスが良くなるので、閲覧者が長く留まってくれれば、そのサイトの価値の向上に繋がります。

 

たとえば1つ、例を挙げてみますね。下の画像は、適当に作ったサイトの一画面です。登山について書いていますが、よく見ると写真が左側に寄っているのが分かります。

f:id:zakkiblog:20200207231940j:plain

www.zakkiblog.net

これを中央に持ってくるだけでだいぶ印象が変わるんです。

画像を中央に持ってくると...

f:id:zakkiblog:20200207231922j:plain

www.zakkiblog.net

どうでしょうか?少し印象が変わりました。何気なく作った文章ですが、より登山の専門家のような、しっかりとしたサイトの雰囲気を感じませんか?

 

こういった小さなデザインなのですが、細かなディティールに気を配ることで、自然と説得力を増すことができます。

 

逆に「みんな楽しく適当に読んでもらいたい」というブログであれば、わざわざ画像を中央に持ってくる必要はありませんよね。(サイトのコンセプトによって違います。)

 

では、早速画像を中央に持ってくるためのコードをご紹介します。

 

方法は2つあります。1つは、1記事1記事のHTMLにコードを追加する方法、2つ目はサイト全体の画像を全て中央に持ってくるコードです。

1記事1記事のHTMLにコードを追加する方法

f:id:zakkiblog:20200207224613j:plain

www.zakkiblog.net

 

はてなブログにはHTML編集という編集方法があります。

 

上の画像を見ると分かりやすいです。普段は「編集見たまま」の記法を使っていると思いますが、画像を中央にするためには、HTML編集を使用します。

 

ここをクリックすると、何やら細かい数字や文章が出てくるかと思います。よく見るとその中に自分の貼り付けた画像のコードが載せられているのに気が付くでしょうか。

 

その画像のコードを、以下のコードで挟みます。

 

 <div style="text-align: center;">

「画像のコード」

</div>

 

「画像を中央に配置しますよ」という意味のコードで画像をサンドイッチする形です。

 

挟んだら、元の編集画面に戻って確認してみてください。画像が中央に配置されていたら大成功です。

 

少し深い話になりますが、このコードは文章にも使えます。つまり、このコードを文頭と文末に置いて、その中に文章や画像を打ち込めば、全てが真ん中になった記事が完成するという訳なんです。

 

以上ここまでが、1記事1記事のHTMLにコードを追加する方法でした。

 

しかし、いちいち画像を貼るたびにこのコードをコピペするのって結構面倒ですよね。もっと楽な方法はないかな?と思っている方は2つ目の方法をご紹介します。 

サイト全体の画像を全て中央に持ってくるコード

このやり方を行うと、サイト内のすべての画像を中央に持ってくることが出来ます。たくさん記事数があるサイトやブログにおすすめの方法です。

 

まず、サイトの管理画面(ダッシュボード)を開き、デザイン>カスタマイズ>デザインCSSと進みます。分からない方は以下の画像のところです。

f:id:zakkiblog:20200207225730j:plain

www.zakkiblog.net

このデザインCSSとは、ホームページのデザインを決める部分です。この部分が間違っていると、サイトのレイアウトが崩れてしまいます。

 

逆を言えば、デザイン面に関することなら、ここに記述すれば反映されるという仕組みになっています。今回の画像を中央に持ってくるコードも、デザインCSSに記述します。

 

デザインCSSをクリックし、以下のコードを貼り付けます。

 

/*写真を中央に表示*/
.hatena-fotolife, .http-image {
display: block;
margin: 0px auto;
}

/*写真を中央に表示 終わり*/

 

コードを貼り付けたら「保存する」をクリックし、サイトを確認してみてください。全ての画像が中央に来ていたら大成功です。

 

※注意点

アフィリエイトを行っている場合は広告を貼っている人も多いと思います。広告の場合は中央には来ません。

それで、1つ目で紹介した個別に画像をサンドイッチするコードで中央に配置してください。

まとめ

f:id:zakkiblog:20200207231458j:plain

いかがだったでしょうか?

 

今回の記事では、画像を真ん中に配置するコードについてご紹介しました。細かな部分なので、気にしない方も多いかと思います。

 

でも、こうした小さな部分にこだわっていれば、見栄えも良くなりますしお洒落なサイトに仕上がっていきます。

 

何よりも中央に配置することで全体的にバランスの良いサイトに見えるようになります。

 

閲覧者がより読みやすいような工夫をすることで、長く滞在してもらえます。滞在率が高いサイトになれば、Googleからの評価も上がっていきます。検索結果で上位に表示されるようになります。

 

こう考えると、意外とこうした細かな部分も大事なんだなと感じますね。それでは今回の記事はここまでになります。最後までお読みいただきありがとうございました。

 

当サイト「雑記ブログ卒業」は、ブログカスタマイズに関する他の記事も書いていますので是非ご覧ください。それでは。