はてなブログで画像サイズを一括調整するためのCSS設定

　こんにちは、AMFです。今日のエントリははてなブログを持ってる方向けで、多くの皆様にはスルーされること覚悟してます(笑)。

　私はかつては PC-8001で BASICをいじるなど、パソコンとの接触はわりと古い方です。そんなことでせっかくブログを始めたのだから、CSSも多少はいじりたいと思っているのですが、なにしろ難解で手に負えずにいます。例えばこのブログのパソコン表示のヘッダー画像ですが、理想は以下のように画像が左右いっぱいに広がり、上方のマージンはない状態なのですが、いくらやっても設定がうまくできずに、諦めてしまいました。

↓　どうやってもこうなってくれない
f:id:anamileagefreak:20160724001840p:plain

　そんなこんなで画像に関連したCSSと格闘しているのですが、ヘッダー画像とは逆に、記事内の写真については横いっぱいに広がると大きすぎると常々思っています。それで画像を貼り付ける際に大きさを小さく設定するのに四苦八苦していたのですが、この点について多少楽をするためのCSSを何とか書けたので、ご紹介します。

　この研究はもともとは画像に影をつけるところから始めたのですが、これは記憶ではうり様のブログを参考にさせて頂きました。

　さらに画像をセンタリングするために、画像左右の marginを autoと設定しました。これもうり様のブログを参考にさせてもらったと思います。

　画像上部に5pxのマージンを入れて、CSSはこんなふうになりました。

.hatena-fotolife {
display: block;
margin: 5px auto 0px;
box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); /*横方向　下方向　ぼかし　広がり　色 */
}

　基本的にこの設定は全ての画像に適用されればいいのですが、写真等のサイズの最大値小さく設定するには、これだけでは足りません。画像サイズの最大値を指定するには、以下のプロパティを使います。

max-width
max-height

これを先の hatena-fotolifeクラスに設定してしまうと、表などのように大きいままにしたい画像まで小さくなってしまうので、もう一つクラスを設定して必要に応じて画像のタグに追記するのが良いだろうと考えました。

　いろいろググっていると、クラス名は一つのタグに2つ以上指定できるようで、スペースで区切って指定すればいいとのことです。例えば、画像サイズの最大値を制限する画像に smallクラスを指定するとする場合、imgタグ内で

class="hatena-fotolife small"

と指定してやればいいようです。

　それでCSSをどう書くかなんですが、最初は hatena-fotolife とは別に

.small {

max-width: 480px;

max-height: 480px;

}

とでもかけば良いだろうと思ったのですが、うまく行きませんでした。それで試行錯誤すること数時間、以下のように、hatena-fotolefiクラスと smallクラスをドットで繋いで両方書いたらうまく行きました。結局、全部合わせてこうなりました。

.hatena-fotolife {
display: block;
margin: 5px auto 0px;
box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); /*横方向　下方向　ぼかし　広がり　色 */
}

.hatena-fotolife.small{

max-width: 480px;
max-height: 480px;
}

　このコードCSSにコピペしておいて(方法はこの記事の下の方で書きます)、サイズを制限したい画像のタグのクラス指定 <img class="hatena-fotolife"... となっているところに " small"を追記して、<img class="hatena-fotolife small"... (smallの前にスペース) としてやれば、max-widthと max-heigthが適用されました。

　これによってこのブログでは、横長の画像は以下のようになり、

f:id:anamileagefreak:20160727011819j:plain

　縦長の画像は以下のようになります。

f:id:anamileagefreak:20160727012014j:plain

　結局は画像のタグを書き換えないといけないので面倒ではあるのですが、見たまま編集で画像の角をドラッグドロップして大きさを変えたり、widthタグを挿入して毎度毎度数値を入力したりするよりは多少マシかな、と思っています。旅行記のような画像全部が写真のような場合は、一通り記事を書いたあと、HTML編集タブのソースをコピーし、それを「メモ帳」に貼り付け、"hatena-fotolife"　を "hatena-fotolife small" に一括で置換して、それを再びHTML編集タブのソースに貼り付ける、という方法も使っています。

　なお、CSSへのコピペの方法は以下のとおりです。

　まず、ダッシュボードで「デザイン」をクリックします。

f:id:anamileagefreak:20160729000409p:plain