こんにちは、ジブリッシュマンブログのエイジです。
今回は、ブログを書いていると写真を載せたり、スクショした画像を載せたりすることがあると思います。
写真を載せる時に写真のサイズが大きかったり、スクショした時の画像が大きかったりで、もっと小さくならないかなと思ったりしたことはありませんか？？？
それに写真をいっぱい載せるとブログ記事を見てもらった時に表示スピードが遅くなってしまい、見てる人が離脱してしまう可能性があるから、できるだけ写真を軽量化したいと思っている人はいませんか？？？
さらに検索していろいろと調べて設定しているのに、画像のサイズが変わってなくて苦労している人などいませんか？？？
そんな方に画像サイズを調整したり、写真の画質を下げて記事の読み込みをより早くする設定を紹介していきたいと思います。
さらに私のブログで他の必要な絶対入れたほうがいいカスタマイズ１６選を下記の記事で紹介しています。
写真やスクショ画像を小さく載せる方法と軽量化『はてなブログ』2022年最新版
ではまずは実際どうなっているかを見てもらいましょう。
こちらが設定なしの状態です。
縦バージョンの写真
設定後の写真になります。
結構小さくなりましたね。
次に横バージョンの写真
設定後の写真になります。
これも少しですが小さくなりました（笑）
携帯で取ったりした写真サイズがやや大きかったのですが小さくなりました。
次にスクショした時の写真でページ全部ではなく、部分だけのスクショの場合
縦バージョン
設定なし
設定後
これはあきらかに違いがありますね（笑）設定なしのデカさ！！！
次に横バージョン
設定なし
設定後
横バージョンも大きさが変わりましたね。大きくて見づらい！！！
という結果になりました。
では、設定にいきましょう。
デザインCSSにコピペ
まずは、コピペ作業を終わらせてで後から他の設定をしていきましょう。
下のコードを『デザイン』➡『カスタマイズ』➡『デザインCSS』に行きコピペしてください。
/* 写真設定横長 */
.entry-content img {
width:600px;
height:auto;
}
/* 写真設定縦長 */
.entry-content-tate-pic {
margin: 20px 0;
padding-top: 20px;
}
.entry-content-tate-pic img {
height:40%;
width: auto;
}
/* 写真設定終わり */
上のコードをコピペしたからと言って自動で変換はされる訳ではありません。
まだやることがあるので次にいきましょう。
HTMLにコードを入れる
下のコードをHTML編集に入れていきましょう。
<div class=”entry-content-tate-pic”>ここに写真のコードを入れる</div>
では詳しく説明していきましょう。
１ 記事作成画面に写真を載せます。
２ 次に写真を載せてHTML編集に行くと写真のコードがこんな感じで書いてあります。（最初の方だけ載せています）
<p><div class=”entry-content-tate-pic”>img class=”hatena-fotolife” ~~~~~~~~~></div></p>
３ そしたらこちらの赤のコードを入れて黒のコードをはさみましょう。
<div class=”entry-content-tate-pic”></div>
こうすることにより、写真がちょうど良いサイズに変わります。
プレビューで確認して見ましょう。
どうですか？出来ましたか？
好みのサイズに変更する方法
こちらのコードの
/* 写真設定横長 */
.entry-content img {
width:600px;
height:auto;
}
/* 写真設定縦長 */
.entry-content-tate-pic {
margin: 20px 0;
padding-top: 20px;
}
.entry-content-tate-pic img {
height:40%;
width: auto;
}
/* 写真設定終わり */
上のコードの赤色の文字の数字を変えることでお好みのサイズに変更することができます。なので、いろいろと変えて自分好みのカスタマイズにしていきましょう。
写真の画像を軽量化する方法
では、次に画像の軽量化してサクサク記事の動きをよくしていきましょう。
動きが重いと見てくれてる人が離脱してしまいますよ。
はてなフォトライフへ
まずは、はてなブログのはてなフォトライフにいきます。
（黒い枠の一番右にHatenaと書いてある２つ左の小さいサイズの正方形が９個ある場所をクリックするとはてなフォトライフが出てきます。）
次に記事に載せてる写真を選びます。そうすると画面にその写真がでてきたら、画像を編集するを押します。
その写真の編集画面の上から３番目のピクセル欄がありそのピクセルの数字を下げていきましょう。
そうすることによって画質の軽量化になります。
そしてその半分の３００ピクセルにしてみましたが、画像が荒くて何書いてあるかわかりませんでした。
ちなみに３００ピクセルの画像です（笑）
で以上になります。
今回、参考にさせていただいたのはこちらの方です。ありがとうございました。
はてなブログのデザイン「Minimalism」で、記事中の画像サイズを一定のサイズに設定する方法 – いちcafe日記
まとめ
今回は、写真の画像を小さくする方法と画像の軽量化について紹介しました。
どうでしたでしょうか？
ブログを書き続けていると最初は気にならなかった画像などの重さとかが、結構気になりだしてきました。どんどんと記事が増えていくことで、容量の軽量化をしないと行けないときがくるので、最初から容量の軽量化をしていくと後々楽になると思います。
コメント