はてなブログのデザイン「Minimalism」で、記事中の画像サイズを一定のサイズに設定する方法
はてなブログのデザイン「Minimalism」を使用しているこのブログ。
今回は、記事の中に挿入する写真や画像のサイズがいい具合になるようにしたくて、ググって実践してみました。
はてなブログ「Minimalism」の画像サイズについて
ブログで適切な画像サイズって？
Minimalismというデザインをインストールする前も、した後も、特に画像サイズの表示には変更なくて、何だか大きいんですよね。(^^;)
で、そもそもブログの記事中に挿入する画像のサイズって、どれぐらいが適切なのかな？と思って、ググってみると。
横長タイプの画像の場合、横幅が640pxが良さそうだと。
で、はてなブログの記事作成の中で、html編集から横幅を640pxにしてプレビューしてみたんですが、それでもやや大きい？と思って。
何となく640−100＝540pxにしてみたら、私的にはいい感じのサイズ感になったので、横幅540pxで表示されるようにしようと。
縦長の画像のサイズをどうやって調整する？
あともう一つ、画像サイズで気になっていたことは、縦長の画像の表示が、やたら大きいこと。
例えば、スマホを縦にした状態でスクショした画像を記事に載せると、どーんと大きく表示されて、全貌を一発で見ることができない。(^^;)
なので、縦長の画像は、記事の中で一発で見れるぐらい小さく表示させたいな、と。
ということで、今回は以下の2点を叶えるカスタマイズを実践しました。
✳︎ 横長の画像は、いつでも幅が540pxで表示されるようにする
✳︎ 縦長の画像は、記事の中で画像全体が見れるぐらい、小さいサイズに表示されるようにする
参考にさせて頂いた記事
実は私、CSS全く分からないので、「コピペだけでいける設定方法」を探してたのですが。
なかなかこの2つを叶える目的にものに行き当たらなくて。(T-T)
調べては試行錯誤して…を繰り返し、ちゃんと表示されるまで半日かかりました。(^^;)
しかも、CSSのこと分かってないのに色々とコードをいじっていって、最終的になぜちゃんと表示されるようになったのか、よく分かってないままです。（笑）
まず、最初に参考にさせて頂いたのが、こちらの記事↓
はてなブログのテンプレート「Minimalism」をカスタマイズした | moya tech blog〜もやテックブログ〜
この中の「画像を小さくする」という項目です。
その項目にあった、以下のCSSコードをコピーして ↓
.entry-content img {
max-width: 100%;
width: 430px;
padding-bottom: 10px;
padding-top: 5px;
display: block;
}
ブログ編集画面→デザイン→工具マーク→「｛｝デザインCSS」の1番下に貼り付けます。
そして、3行目の「width: 430px;」の数字を540に変更します。
最後に、「変更を保存する」をクリック。
すると、確かに横長の画像サイズがいい感じに小さくなって、文字とのバランスも良くなりました。
でも、これだと縦長の画像サイズの設定が入ってない。
縦長の画像はたまにしか載せないから、個別でhtmlで縦幅指定したらいいのかな…と思ったのですが。
試しに、記事の中で縦長の画像を貼り付けて、html編集のimgタグの中に「height＝“540px”」とかって書き込んでみましたけど、小さくはならず。＿|￣|○
そうなると、横長の画像と縦長の画像の両方を設定するCSSコードを見つけないといけないのね …。
ということ、別のキーワードでググって調べていくことに。
そこで見つけたのが、こちらの記事！ ↓
縦長の写真をレスポンシブ対応にすると、表示サイズがやたら大きくなる問題を解決する方法 - ラボだもんで
これこれ！
私はこれで悩んでいたのです！
この記事を読んで、横長と縦長の画像をバランスよく表示させるコツ（divタグの中に画像を入れて配置よく表示させる）を知りました。
そして、さっそくCSSコードをコピーさせていただき。
自分のはてなブログの編集画面→デザイン→工具マーク→「｛｝デザインCSS」の1番下に貼り付けて、変更を保存してみました。
そして、記事作成画面の中でdivタグをコピペで書き込んでみましたが。
ちゃんと表示されてない！>_<
でも、CSS分からんから、修正できない！(T-T)
…と、諦めて新たにまるっとコピペできるCSSを求めてリサーチし直そうと思ったのですが。
このCSSがいい線まで来てるはずだと思ったので、このCSSの意味を調べながら、修正する方向で試行錯誤していくことに。
とりあえず、最初に貼り付けた、横長だけの画像のサイズ指定のCSSは削除して。
残したCSSコードに書かれているものの意味を調べてみて。
なんやかんやとコードをいじってみたり、コードを削っていったりして、よく分からないまま、うまく表示できるところまできました！
記事内の横長画像のサイズを横幅540pxにして、縦長画像のサイズを小さく表示させる方法
ということで、完成CSSはこちら！ ↓
/* 横長写真用の設定 */
.entry-content img {
width:540px;
height:auto;
}
/* 縦長写真用の設定 */
.entry-content-tate-pic {
margin: 20px 0;
padding-top: 20px;
}
.entry-content-tate-pic img {
height:40%;
width: auto;
}
このコードをブログの編集画面→デザイン→工具マーク→「｛｝デザインCSS」の1番下に貼り付けて、変更を保存します。
これで、横長の画像は、いつでも横幅540pxで表示されます。
次に、縦長の画像を記事内に載せた時だけ、html編集画面で、その画像をdivタグで挟んであげる書き込みをします。
そのためのタグがこれ。↓
<div class="entry-content-tate-pic">
<img （貼り付けた画像のimgタグ）>
</div>
こうすることで、縦長の画像は小さく表示されて、一目で全体が見れるようになります。
サイズのカスタマイズ
横長画像の横幅の設定を変えたい時は、上記のCSSの「横長写真用の設定」のwidthの数値を変更します。
縦長画像の縦の長さの設定を変えたい時は、上記のCSSの「縦長写真用の設定」のheightの数値を（pxや％で）変更します。
縦長の画像を載せるときは、html編集で上記のdivタグを付けてあげることを忘れずに。(^^;)
kayoko＠おうちcafe
はてなブログのデザインテーマ「Minimalism」のインストールからカスタマイズまでの実践集 ↓
