-じぇねりんく-

「ジェネレーション」を「リンク」する。雑感とまとめ。

はてなブログで画像のサイズとセンタリングを一括指定する。

 

たまに読んでるNIKKEI STYLE。

style.nikkei.com

写真のサイズが揃っていて、記事がとっても見やすいので、真似したいなーと思ったのがきっかけです。

(プロのライターさんが書く記事なんだから読みやすいのは当然なのですが。)

 

少しでもNIKKEISTYLEに近づくために、

・記事内の画像を一括でセンタリングしたい

・記事内の画像のサイズを一括設定したい

この2つを叶えてくれたのがこちらのタグ。

/* 画像のセンタリング*/

.hatena-fotolife, .http-image {
display: block;
margin: 0px auto;

width: 80%;
}

 これを、はてなブログ編集の画面で

デザイン→カスタマイズ→デザインCSS

のところに記入するだけ!!

”80%”のところが横幅の割合なので

数字は適宜、変えてみてください。

 

今までの記事の画像も、これから書く記事の画像も

全部の横幅が整いますー!

(縦幅については、その画像の縦横比そのままにしておいたほうが綺麗かと思い何も設定しておりません。)

 

画像例①・・・横長の写真

f:id:genelink:20170106212813j:plain

 

 

画像例②・・・縦長の写真

f:id:genelink:20170211235852j:plain

 

 

 

画像の横幅が整って満足です♪

 

 

あと不満なことといえば、、、

画像付きの記事を書くことが多いのですが

iPhoneはてなブログアプリで画像をUPすると 

画像タイトルもAlt(画像にカーソルを載せたときに表示されるコメント)も

初期設定の日付になってしまうのが嫌だな。

上記に関しては現状、iPhoneアプリで記事を書いた後、

PCで記事編集してます。