ひでブログ

ウェブに食わせてもらってます。

【はてなブログ】記事の画像が中央寄せ出来ない!を解決する方法【CSS】

f:id:macdaisuki2012:20170616144536j:plain

ブログサービス毎にあまりに使い勝手が違い過ぎることもあり、普段はリッチテキストエディタとかビジュアルエディタとかの類はあんまり使わないんですが。でも、はてなブログの「見たまま」編集はけっこう使いやすげな感じですね。

 

ただ先日、このブログを立ち上げてこの記事を書いた時にちょっとだけ戸惑ったことがあったのでメモを兼ねて少しだけ。記事内の画像を中央寄せする方法、ですね。

 

あれ!? 画像の中央寄せって出来ないの?

「そんなはずは!?」って感じでしばらく管理画面をウロウロしたのですがそういった設定は見つけることが出来ず。画像の配置指定を行なう項目が無いんですよね。つまりは画像をかっこよく真ん中に寄せることが出来ない。

 

一瞬、「見たまま編集」と「HTML編集」を行ったり来たりしながらの記事作成なんてのも想像したのですが。まさかと思いつつも検索を掛けてみると案の定、「中央寄せの方法」なんて記事がズラッと並んでいたわけです。ああ、やっぱりダメなんですね笑

 

あら、簡単!?CSSによる一括指定

せっかくなので色々勉強させてもらおうといくつかの記事をチェックしてみました。拝見させて頂く限り、画像ごとに個別に指定する方法かCSSにて一括で指定する方法のいずれかを解説されていてる記事がほとんどですね。

 

このブログでは出来れば「見たまま」編集だけで更新していきたいので、個別にタグを記載する方法は見送り、一括で対応する方法を選択します。

 

参考にしたのはこちらの記事。

uriuridayo.hatenablog.com

 

画像を左右に寄せたり、回り込み云々といった点はフォローしていませんが、記事画像が一括で中央寄せになるのでいったん設定してしまえばあとは楽ですね。

 

このブログはどうぜイメージ画像の類か解説用の画像しか載せることは無いだろうし問題無いんじゃないかな、と。イレギュラーな記事配置はその都度対応で良いでしょう。

 

あと、上記の方法に「widthプロパティ」を追加することで画像の横幅も一括で揃えてしまうみたいな記事もあったので、そちらもリンクを貼っておこうかなと思ったのですが、もう一度見つけることができませんでした。でも、画像の幅の一括指定もブログによってはありですね。

 

 

という事で、記事に挿入する画像はこんな感じで良いでしょう。ではノシ