くわばたりえダイエット

最近アメブロは、HTMLの変更がちょっと多いですね^^

 

 

アメブロビズ2(AmebloBiz2)を設置した場合でも、
ちょっとヘン? という箇所を発見しました。

 

 

アメブロで既存のテンプレート以外のテンプレートを使っている方だったら、
どんなテンプレートでも、おんなじ表示になると思います。

 

 

 

 

アメブロビズ2(AmebloBiz2)の場合は、カスタマイズをしなくても、
美しいテンプレートのまま使用できるかと思いますが、
アメブロの本体のHTMLが変更になると、やっぱりそうはいきません。

 

 

ブログの上、大きな広告がある場所なんですが、
これ、あんまり目立たなくなってよかったなーって思っていました。

 

 

でも、ちょっと上の方、テンプレートとブログ本体のレイアウトの間に、
隙間がうまれてませんか?

 

 

 

 

こんな感じね。(私のブログです)

 

アメブロ上の隙間

 

 

気にしない方は、いいかもしれませんし、
最初から、全部自分でカスタマイズをしている方には、あまり問題ないかと思います。

 

 

私も自分で全部カスタマイズしているブログは、問題ありませんでした。

 

 

でも、既存のテンプレート以外のものを使うと(アメブロビズ2(AmebloBiz2)も含め)
上図のように、隙間がちょぴっとあいてしまいます。

 

 

 

この回避の方法は、CSSをちょいっと追加するだけなので、
気になる方は、やってみてくださいね。

 

 

 

ブログ上の隙間を回避する方法

ブログ自体のHTMLの変更に関しては、
アメブロの場合は、HTMLをいじれないのでCSS編集のみで回避していきます。

 

「デザインの変更」より「CSSの変更」から、
CSSの記述表示をみてくださいね。

 

 

 

下図のように、「ホディ」という箇所を探してください。

 

CSSの変更(ボディタグ)

 

※ショートカットキーで「control+Fキー」で検索をかけ
検索窓が開いたら、「ボディ」と入力して検索をかけると、すぐに見つかりますよ^^

 

 

 

デフォルト(アメブロビズ2(AmebloBiz2)のテンプレートCSSテキストを貼りつけた場合)
では、 skinbodyへのコードの記述はありません。

 

 

なので、この .skinbody3{} の下に下記コードを
コピーして追加
してください。

 

 

 

 

※コードを追加すると、こうなります。

 

CSSを追加して保存

 

 

アメブロのレイアウト構造の詳細は、ちょいっと長くなるので省きますが、
bodyとFrameの間に余白が出来ているんですね。

 

 

 

それが、あのちょっとの隙間です。

 

 

その余白を0(ゼロ)にすることによって、上にテンプレートが配置されるということです。

 

 

コードを貼りつけたら、保存をかけます。

 

 

ブログを確認してみてね。

 

 

アメブロ上にぴったりね。

 

はい、上にピッタリくっつきましたよ!!

 

※表示できなかった場合は、F5キーを押下して更新をかけてみてください。

 

 

すっきりきれいなブログになりました。

 

 

そして、アメブロビズ2(AmebloBiz2)だとサイトっぽいから、
作り込まなくても、いい感じですね^^

 

 

ちょっとのCSS変更なら、誰でもできますし簡単ですよね^^

 

 

 

ぜひお試しくださいね。
 

 

 

コメントをどうぞ

次のHTMLタグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

コメントの更新情報

トラックバックURL

サイトを参考にして、
すてきなブログを作成してくださいね♪