[blogger]タイトルの横が余ってると感じるblogger使いの人に！タイトルの横にガジェットを配置する方法をご紹介。

こんばんは！すなふです。

個人的には、何を配置したらいいのか迷ってる段階なのですが、取り敢えずなんでも置けそうな感じなので、タイトル横のガジェット配置についてご紹介。

順序
タイトルは、標準のテキスト状態でも、自作の画像でも大丈夫な事は一応確認しました。
が、稼働ブログのほうで置くものが決まってないので、取り敢えずテストブログのほうでの確認ですので、何かうまくいかないことがあればご連絡下さい。私のトラブルシューティング的な意味でも（・・

1.) bloggerのヘッダー部分のガジェットを追加出来るようにHTMLを編集する。
2.) レイアウトからガジェットを追加する（今回は忍者おまとめボタンを置いてみました）。
3.) カスタムCSSを使って、配置を調整する。

この様な順序でいきたいと思います。

1.) ヘッダー部分にガジェットを追加できるようにする

大体のテンプレートでは、ヘッダー部分のガジェットは変更出来ないようにロックがかかっていますので、まずはそれを変更します。

管理画面から「テンプレート＞HTMLの編集＞ウィジェットテンプレートの展開をチェック」から、

b:section class='header' id='header'

という文字列を探します。

この箇所です。

画像では、すでに変更済みのものをもってきてしまいましたが、大体は『maxwidgets='1' showaddelement='no'』となっていると思います。

ここは、画像のように

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

と変更してあげます。

『maxwidgets』は、配置できるガジェットの最大数。
『showaddelement』は、レイアウト画面で、「ガジェットを追加する」を表示させるかどうかの選択です。

2.) ガジェットを追加する

出来ましたら、次は管理画面から「レイアウト」を選択して、「ガジェットを追加」で、お好きなガジェットを追加します。

追加をクリックして

↓

このように、ドラッグして位置移動。

3.) カスタムCSSで、配置を調整

ここでの追加コード

#Header1{float:left}
#HTML2{float:right;}
.header.section{height:110px;}

では順番に・・・。
管理画面から「テンプレート＞カスタマイズ＞アドバンス＞CSSの追加」で、カスタムCSSの追加フォームを開きます。

ちなみに、今はこういう状態です。

フォームに、

#Header1{float:left;}

と入力します。『#Header1』が、bloggerのタイトル指定部分です。

もしテンプレートによって違ってくる場合は、宜しければChromeの右クリックからできる「要素の検証」などを使って、IDを確認してみてください。他のブラウザでもあると思いますが、私がChromeなので、それしか詳しく知りません。。。

タイトル部分を右クリックです。

次に、

#HTML2{float:right;}

と入力・・・とはいえ、ここのID名は追加するものによって変わってきます。
今回はHTML２でしたが、例えば「bloggerロゴ」だと『#BloggerButton1』などになっていました。

これも、前述の『要素の検証』を使うか、「HTMLの編集」画面を開いて、ヘッダーセクションのガジェット一覧から、ID名を確認をしてください。

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

一番初めに変更した、この部分の下にガジェット名が並びます。

ここを確認。

最後に、
2つのガジェットをfloatで位置指定すると、何故かヘッダーの高さ指定がおかしくなってしまって、タイトル画像にしても、ガジェットにしてもクリック出来ない状態になりましたので、それを修正します。

.header.section{height:110px;}

このコードで、高さを明示しています。ここも、もしかしたらテンプレートによって名前変わるかもしれませんが、その場合はChromeの（略

数値は、タイトル画像の大きさや、テキストの大きさで変更して下さいね。

備考

このような感じになったでしょうか？

画像では少しタイトル画像が上に行きすぎてますね。
この場合は、

#Header1{float:left;}

を、

#Header1{float:left;margin-top:10px;}

というように、margin値を足して調整してみてください。

また、margin設定をして、タイトル下に変な白線がでたりしたら、

.header.section{height:120px;}

headersectionの高さをmargin分増やしたりすると解消出来ます。

以上、タイトル横にガジェットを追加して配置する方法でした！
bloggerでも、結構簡単にソーシャルボタンだったり、バナーだったり置けそうなので、良ければ試してみて下さい。
私は、ほんとに何を置くか決めかねてますので、決まったら何か置きます・ｗ・