【Bloggerカスタマイズ】投稿記事の画像に勝手にはいる余白をなくす方法

Bloggerの画像に関連するカスタマイズについて。

Bloggerのサイト上における記事投稿エディターから、記事本文に画像を貼り付けると、

1. 左右に勝手に余白が入る
2. 中央寄せになる

という特徴があります。なぜ勝手にこんなことをするのか、その理由はわかりません。

勝手に中央寄せになったり余白が入ったりする原因

サイト上で記事を作成するためには2種類の方法があります。エディター画面、左上に［作成］と［HTML］というボタンがあり、

1．作成モード
文字の大きさや色など、実際の投稿の状態に近い状態で記事の作成をするモード

2．HTMLモード
<div>や<br />などHTMLとよばれるウェブサイトを作成するための言語をつかって記事を作成するモード

このふたつの記事作成モードが用意されています。

記事作成時、画像に余白が入るのは「作成」モードの時だけ。「作成」で画像を貼り付け「HTML」モードに切り替えると、

• <div class="separator" style="clear: both; text-align: center;">
• style="margin-left: 1em; margin-right: 1em;"

勝手にこの表記が付け加えられてしまいます。画像に勝手に中央寄せになったり、余白が入ってしまうのは、この記述が原因です。

これを投稿エディター上で回避する方法は、画像を添付する時だけ「HTML」モードに切り替えて添付すれば、添付画像の配置箇所を選ぶことができ余白も入りません。

しかし、HTML表記になれていない人にはなんだか敷居が高く、画像を添付するたびに記述モードを切り替えるのは面倒です。

個別記事に添付した画像の余白をなくし横幅いっぱいにする方法

HTMLモードで記事を作成したり、毎回記述モードを切り替えるのは、正直、いやです。HTMLよくわかんないし、切り替えるのも面倒です。

そういうぼくみたいな人に朗報です。

1．次のCSSをコピーする

まず、次に記述する文字列をコピーします。これはCSSと呼ばれていて、文字の大きさや色、画像の大きさの他、ブログやサイトのさまざまな要素を装飾するための言語です。

.separator a{clear:none!important;float:none!important;margin-left:0!important;margin-right:0!important}

このCSSコードは、勝手に入れられた余白の指示を、強制的になしにするためのコードです。

2．コピーしたCSSコードを「Bloggerテーマデザイナー>上級者向け>CSSの追加」にペーストして保存する

上の記述をコピーしたら、

1. Bloggerのダッシュボードへ行き、
2. 画面左［テーマ］をクリックし、Bloggerテーマデザイナーを呼び出す
3. テーマデザイナーの画面左［上級者向け］をクリック
4. 上級者向けの右にある［CSSを追加］クリック
5. 右側のスペースにコピーしたCSSコードをペースト（貼り付け）
6. 貼り付けたら一度、Enterキーを押し、画面右上の［保存］をクリック

以上となります。

注意点としては、使っているテンプレートによってテーマデザイナーが使えない可能性があること。それと、CSSの追加にペーストするだけでは保存ができないということです。

ペーストした後はコードを消さないようなキー、例えば、Enterキーや矢印キーなどを押すことで、保存できるようになるので、その点は注意してください。

さいごに

このブログで採用しているテンプレート「Clean」に関しては、はじめから画像の余白が勝手に入らないようにいます。また、画像のサイズを画面幅より大きいサイズにしても、自動的に画面幅におさまるように調整してくれます。

ド素人のぼくにやさしいテンプレートです。

• 　参考：Clean Minimal – Live Preview

Bloggerは海外製のおしゃれなテンプレートが豊富で、無料ブログの中では、カスタマイズの自由度も高いブログシステムとなっています。それぞれが使っているテンプレートによって画像の処理方法は違います。

Bloggerのテンプレートを決める際は、画像の処理方法も含め、しっかりと確認することをおすすめします。

ではでは。

追記

※2020年2月現在、海外製テンプレート「evonne」をカスタマイズして利用しています。