［当ブログは、アフィリエイトプログラムに参加しています。ページに広告が含まれる場合があります］

2016/02/02

Bloggerのガジェットの余白を詰める方法

ガジェット
サイドバーのガジェットの上下余白が開きすぎてずっと気になっていたんです。

検索で見つかったのはテンプレートでガジェットIDを探し、
【テンプレートデザイナー】→【上級者向け】→【CSSを追加】に
　#HTML6{margin-bottom:-10px;}
　#Followers1{margin-bottom:-15px;}
　#HTML2{margin-bottom:-10px;}
　#HTML4{margin-bottom:-10px;}　
上記のようなコードを入力し追加する。
という方法だったのですが、残念ながら反映されませんでした。
●参考サイト様↓
http://www.sunabox.net/2012/04/blogger_26.html

そこで次に、テンプレートに直接<div>タグを書き足す方法を試してみましたが、
これも上手くいかない。
<b:widget id='HTML6' locked='false' title='' type='HTML'>
    <b:includable id='main'>
     <div style='margin-bottom:-20px;'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div> 
  <b:include name='quickedit'/>
 </div>
</b:includable>
  </b:widget>
赤字になっている所が書き足した部分です。
●参考サイト様↓
http://p--q.blogspot.jp/2013/07/blogger2_11.html

最後に試したのは、Bloggerの【レイアウト】で各ガジェットに直接<div>タグを書き足す方法です。
<div style="margin-bottom: -10px;">
「メモ取り！」は日記兼備忘録ブログです。
</div>
これが上手くいきました！
上下を詰めたい場合は<div style='margin-top:-20px;margin-bottom:-10px;'>　</div>で囲めばOK。

上下左右を詰めたい時は、
<div style="margin: -10px -10px -15px 0;">　</div>で囲みます。
適用箇所は　　　　　　上　　 右　　 下　 左　の順となります。

考えてみれば今までも<div>タグを使っていたので当然といえば当然なのですが、色々試してみるまで全く思いつかなかったんです^^;

ただし、この方法だと【テキスト】ガジェット、【HTML/JavaScript】ガジェットの余白を詰めることはできますが、HTML編集モードがないので【ページ】ガジェットや【ブログアーカイブ】ガジェットなどでは使えません。

それでもいくらか余白を詰めることができたので、間延びした印象がなくなり全体的にスッキリとしたデザインになりました。
CSS追加やテンプレートで変更が反映されない場合は、ぜひお試し下さい。
その際はあらかじめ、テンプレートの保存をお忘れなく！

それでは今回はこの辺で。
最後までお付き合いいただき、ありがとうございます。
Labels: ,