Blogger "レイアウト" "HTMLの編集" "ガジェットを追加" カスタマイズ1
Blogger の HTML の構文は、HTML + CSSです。他のブログを作成したことがある人には、さほど難しくない作業だと思います。ただ、Bloggerは他のブログと違いCSSをHTMLにリンクさせるのではなく、同じページに記述してる点で、他のブログとは違いますので注意してください。
今回のカスタマイズは "ガジェットを追加" を追加することです。そしてCSSとHTMLをある程度理解していることを前提で記述してあります。
上にある画像のように "ガジェットを追加"を特定の 場所に設置する方法を説明します。
- ガジェットを追加 (HTML/JavaScript)
- レイアウト - HTMLの編集 - テンプレートを編集
- ウィジットのテンプレートを展開 のチェックは外しておきます。
- すべて選択をしてバックアップをとっておいてください。
- 挿入したい部分へカーソルを移動します。 (<div id='wrapper'> ~</div> タグので区切らないように注意してください。)
- カーソルが的確な場所に移動できたら次のタグを挿入します。
<div id='abcd1234'>
<b:section class='abcd1234' id='abcd1234' preferred='yes' showaddelement='yes'>
<b:widget id='HTML5' locked='false' title='abcd1234' type='HTML'/>
</b:section>
</div>
補足：abcd1234 はリネームして使用してください。HTML5は使用されていますと表示されたら、使用されていない数字を組み合わせて利用してくださ。後でガジェットを変更(追加してから削除の順番で作業を行ってください。)できます。 - CSSの追加
#abcd1234 {
height: 15px;
width: 960px;
background-color: #FFF;
margin: 0px;
padding: 0px;
補足：自分のサイトに合わせた設定にしてください。 - 設定を保存します。エラーがあれば保存できないので元に戻してやり直してください。
- レイアウト - 要素 ページ要素を追加して並べ替えの画面に反映されていれば完成です。
＊注意："HTML/JavaScript" "ガジェット" が小さすぎて見えない場合や、編集できない場合があります。その時は、height: width: のサイズを一度大きくしてください。徐々に目的のサイズまで狭めていくことで、画面構成が崩れないかなど見ながら進めていけば問題なく表示できます。
