2015年10月3日土曜日

Bloggerで画像の後に出来る空白の解消方法

Bloggerで画像を左寄せで侵入した時に、編集画面では画像のすぐ下から次の文字が表示されるが、
プレビューを確認すると画像と文字との間に余計な空間が空いてしまいます。

原因は画像を左寄せにすると、画像の横に文字を書くことが出来るため、
画像の下に文字を書きたい場合は、画像の縦の長さ分、改行するからです。
この余計な空白が入らないようにする方法を紹介します。



編集画面では下の画像のように画像の真下に文字が表示されていますが・・・


保存してブログ記事を確認すると下のように画像と文字の間に隙間が出来てます。


HTMLを確認すると改行コードの<br />が沢山表示されています。


試しに改行コードを消してみると・・・


今度は画像の横に文字が来てしまいました。
これはこれで画像の横に文字を書きたいこともあると思うのでいいのですが、
画像の下に文字を入力したいのに不便です。


では解消手順を書いていきます。

まず、下の画像の赤枠の部分「投稿リストに移動」ボタンをクリック。


次にテンプレートボタンをクリックします。


上級者向けをクリックします。


CSSを追加をクリックして右側に表示される「カスタムCSSを追加」に下の2行をコピペして下さい。
コピペしたら右上のブログに追加ボタンをクリックします。
.clear { clear:both; }  
.clear hr { display:none; }


次に記事を書いた時に、左上のHTMLボタンをクリックします。


最後に画像と次の文字の間に<div class="clear"></div>を入力します。
これで改行を入れずとも画像の下に文字が来るとともに、空白が入ることもありません。
※青枠と緑枠の間に入れてください。









0 件のコメント:

コメントを投稿