【Blogger】記事内の画像がサイドバーにはみ出す?! そんなときの解決法

みなさんは、Blogger で記事を書いていて、

画像付きの記事を投稿した際に画像がサイドバーにはみ出す！

てなことはありませんか？

今回は、おさらいがてらに画像のサイズ変換方法を含め、

画像のはみ出しの解決法をお伝えしたいと思います。

1. 記事内の画像サイズの変更方法

まず初めに、画像のサイズの変更方法をお伝えしたいと思います。

「もう知っている」という方は、次の「2．画像のはみ出しを直す方法」まで飛ばしてください。

1-1．画像挿入

まず、記事を書く画面の上のバーにある写真のようなアイコンをクリックして画像を挿入します。

～細かい手順～

アイコンクリック　→　Choose files (ファイルを選択) →　挿入したい画像を選択 →　

Open (開く)　→　Add selected (選択したファイルを追加)

で画像が挿入されます。

1-2．画像のサイズ変更

画像を挿入して、画像をクリックすると、以下のようになります。

そして、

Small-Medium-Large-X-Large-Original size

もしくは、

　

小-中-大-特大-元のサイズ (と表記されているかもしれません。）

の中から、好きなサイズを選び画像のサイズを変更することができます。

※引用元や画像の題などを示したい時は、「Add caption （説明を追加）」からできます。

しかし、ここで問題なのは、画像のサイズをX-Large (特大)にした時です。

1-3．画像をX-Large（特大）にした場合

画像を特大にした場合、

記事を書いている画面では画像が記事内に収まっています。

しかし、実際に記事を見てみると、、、

と、こんな感じで右のサイドバーにはみ出してしまっています。

私のプロフィールが1/3ぐらい画像で隠されていますね。。。

そして、なんとも見栄えが悪い。。。

ちなみに、私はシンプルテンプレートを使用しているので、上の画像のようになっていますが、

他のテンプレートでは、左にサイドバーがあったりともう少し違ったようになっているかもしれません。

いずれにせよ、画像が記事の枠からはみ出すのは美しくないですよね。

2．画像のはみ出しを直す方法

では、画像が記事の枠からはみ出した場合の解決策についてお伝えします。

様々な方法があるかとは思いますが、

私個人的にも一番シンプルで分かりやすい方法をご紹介します。

2-1. Blogger のカスタマイズ画面に行く

まず、Blogger の編集画面に行き、

Theme（テーマ）から念のためテーマのバックアップを取っておきます。




～テーマのバックアップ方法～

①［バックアップ/復元］をクリック

②［テーマのダウンロード］をクリックでバックアップデータのダウンロード完了

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～




バックアップができたら、Customize（カスタマイズ）をクリックします。

2-2. CSSにコードを入力する

カスタマイズを押すと以下のような画面になるかと思います。

そして、左の「Advanced（上級者向け）」をクリックし、

一番下までスクロールし、「Add CSS（CSSを追加）」をクリックします。

このような画面になったら、左の余白の部分に、

.post-body img {

   max-width: 100%;

   height: auto;

}

をコピーして張り付け、右上の「Apply to Blog（ブログに適用）」をクリックし完了です。

まとめ

今回は、画像のサイズの変更方法と、

サイズを特大にした際に記事からはみ出してしまう現象の解決法についてお伝えしました。



今回ご紹介したやり方で画像のはみ出しを解決することができると思いますが、

他に設定を変更している場合などは、できないかもしれません。


一応スマホで見ても画面内に収まるようになっているはずです。

が、万が一機能しないようならお手数ですが、お知らせくださるとありがたいです。




今回ご紹介した方法で画像のはみ出しを解決でき、

皆さんのブログの見栄えがより美しくなることを願っています。



お読みいただきありがとうございました。

それでは、良い一日を！