[blogger]もっと詰めて！サイドバーのガジェット上下の余白を詰めて配置する方法。(04/28追記)

bloggerで、色々ガジェットを置いているうちに、どうしてもデザイン的に整えたい部分が出てきました・・・それは・・・

この、サイドバーのガジェットとガジェットの隙間を調整したいっ！

画像では、もう調整して余白を詰めてあるんですが・・・。

この余白、サイドバーのガジェットで「JavaScript」などで、サードパーティ製のソーシャルボタンなどを置こうとした時、どうしても無駄に広く余白が出来る時がありました。

それをずっと調整したいと思ってたんですが、検索の仕方が悪いのか、全然見つからなく・・・。
昨日にようやく、ふとしたところから調整することが出来たので、その報告です・ｗ・

【bloggerでの方法。そして、この方法が正しいかどうかは分かりません。】

準備編（ガジェットのクラス名を調べる）

まず、bloggerのブログ管理画面から、テンプレートタブで「HTMLの編集」を開きます。

「ウィジェットのテンプレートの展開」は、チェックをする必要はありませんので、そのまま下にスクロールして、一番下に固まっているコードの中から、余白の調整をしたいガジェットを探します。

例えば、このブログの右のサイドバーの一番上のソーシャルボタン。
これは、元々は結構余白がありました（下のツイッターガジェットとの間）。

このソーシャルボタンのコードを画像から探してみましょう。

まず、このガジェットには、タイトルを自分で付けていますので、title="Social"になっている状態です。このタイトルは、自分でガジェットを置く時に付けるタイトル名の事ですので、もしも「ソーシャルボタン」と付けていれば、そのとおりにカタカナで表示されるという事になります。

つまり、このガジェットは、テンプレートHTML内の

<b:widget id='HTML1' locked='false' title='Social' type='HTML'/>

という部分のコードが、ガジェットコードにあたる事が分かります。

んでもって、コード内のガジェットID【<b:widget id="ここ".../>】「ここ」の部分、つまり例文では「HTML1」をメモしておきます。
メモは、余白を調整したいガジェットの分のIDを全て書いておいてくださいね(ﾟｰﾟ*)

カスタムCSSに追加する

ガジェットIDのメモがとれましたら、次に、「HTMLの編集」は閉じて、テンプレートタブのカスタマイズを押して、テンプレートデザイナー画面に入ります。
↓
テンプレートデザイナー画面に変わりましたら、左メニューの「アドバンス」をクリック。
↓
左メニューの一番下、「CSSの追加」をクリックして、出てきたフォーム画面に・・・

画像では、未だ解決してない、「コード2重書き」をしているので、少し余計な文が入っていますが。
一回目に書いた時には、問題なく適用されたので、「HTML1」での余白調整用は、

#HTML1{margin-bottom:-35px;}

上記のコードになります。

上側の余白調整は、
#ウィジェットID{margin-top:数値px;}

繋げて、

#HTML1{margin-top:-10px; margin-bottom:-15px;}

などとすることも可能です。

マイナス値にしてるのは、正直、「有り」かどうかわかっていません。
（ありですが、IEなどの表示で反映されない時があるとのことです。）
こうしたら、思ったように出来たって結果なだけですので・・・。

そうじゃなくて、こういうふうに調整するべきなんだよ！
・・・っと、分かる方がいらっしゃれば、是非ご指導下さい・・・。

ともあれ、こういうふうにして、気になっていたガジェット同士の余白を調整することが出来ました。

---

【2012/04/28追記】
本文の

画像では、未だ解決してない、「コード2重書き」をしているので、少し余計な文が入っていますが。

「コード2重書き」という部分、
これは、カスタムCSS画面画像での【#HTML1{}#HTML1{margin-bottom・・省略・・}】
という部分の事なんですが、原因が分かりましたので、備忘録としても追記しておきます。

実に単純な話で、私は、HTML内を編集する時に、追加した部分が分かるように
<!-- コードの説明 -->
という説明文を入れていたんですが、そのコメントアウトの方法をそのままCSSの説明でも使っていました。

カスタムCSSで追加するコードの説明用には、
/* コードの説明 */
としないといけないということで、早速修正したところ、ちゃんと反映してくれました。

すっきりした(≧∇≦)

ふとしたところで見つけた、その説明はこちら・・・
■【/* */ と <!-- --> はどう使い分ける？ - Yahoo!知恵袋】(Click New Tab)

わたしみたいに、HTMLの勉強してるわけでもなく、調べながらいじくる人には、知恵袋も重要なときがあります・・・。


更に、カスタムCSSを使う時の注意点ですが、カスタムCSSにコードを追加した後、「HTMLの編集」から、CSS部分のコードを編集したり、追加したりした場合、「カスタムCSS」フォームの表示は消えてしまいます。

テンプレートHTML側には、しっかり追加していたコードは入っているので、このままでも問題はないのですが、カスタムCSSからの編集を重視したい人は、テンプレートHTML側で、追加されたCSSを切り取って、カスタムCSSフォームに再度貼り付けて下さい。

間違って、カスタムCSSで追加したコード以外のコードまで切り取らないようにしてくださいね。