bloggerのヘッダーブロックにWidgetを置く
ンプレートで決められた通りにしかWidgetを配置できません。例えばブログ上部のタイトルはヘッダーWidgetが使われています。この場所にWidgetを追加する事はできないようになっています。
無理やり何かを配置するにはテンプレートのHTML編集で直接書いてやる必要があります。
でもお手軽にWidgetも配置したいのでその方法を書いてみます。
このブログの上の方、タイトルと一緒にGoogle翻訳のWidgetを配置しています。（記事執筆時）
ところでブロガーのブログパーツの呼び方はWidgetなのかガジェットなのかどちらが良いのだろうか？
テンプレートをいじりすぎて何をやったか忘れてしまっているのでメモ書きついでに記事にしておきます。
最近Webを見たり検索をしたりせずスマホアプリしか使わない人が増えてきたとか言われだしています。検索して見てくれる人が少なくなってしまうという事になるかもしれません。
検索と言えばロングテール。世界中の人を意識してブログも書いてみたいです。とはいえBloggerは多言語で記事を書く構造になっていませんし、そんな語学力もありません。そんな時には翻訳ガジェット（Widget）を配置してGoogle先生に任せてしまいましょう。
翻訳ガジェット（Widget）はブログに一つしか設置できません。複数置いても意味は無いですしね。でもちょっとクセのあるWidgetなのが困りものです。他のWidgetとの配置の順番で表示がおかしくなったりします。できるだけページの上に配置する必要があります。
そういう場所はブログの特等席です。翻訳ガジェット（Widget）を置くのももったいない。とは言えページの下の方に置くと表示がおかしかったり、存在を気づかれずガジェットを置く意味が無くなります。
Bloggerでブログはdivブロックで分けられクラス名で区別されています。大きくナビバー、ヘッダー、タブ、サイドバー、センター、そしてフッターという順でブロックがあり、それぞれにWidgetを配置できます。しかし、自由にWidgetを配置できるのはサイドバー、センター、フッターだけとなっています。
ヘッダーのDivブロックは一つだけWidgetを置けます。ブログタイトルの表示用Widgetが配置されているのでWidgetの追加はできません。
タブブロックは2つのブロックからなり、ページ切り替えようのDivブロックと、その直下のDiｖブロックがあります。ページ切り替え用Divブロックには一つのWidgetを置けます。その下のDivブロックはいくつでも置けます。
デザイン的にページ切り替え用DivブロックにはページWigetを配置した方がかっこいいです。
そのため、翻訳Widgetを置くとするとタブブロックがWebページでの一番上になるのですが、デザイン的にとてもカッコが悪いです。
できればタブブロックの上、ブログタイトルの領域に配置したいです。
HTMLを編集してブログタイトルの下にWidgetを配置できるようにする
このブログはBloggerのテンプレートAwesome Inc.を使っています。このテンプレートを基本に説明を書いておきます。他のテンプレートでも同様の構造になっていると思います。ブログタイトルを表示するWidgetが置かれているヘッダーブロックにもう一つWidgetを置けるようにHTMLを修正します。ここを変更しておけば後は好きなガジェットを配置できます。
ブロガーのダッシュボードからテンプレートを表示させHTMLの編集ボタンを押します。するとHTMLのコードが表示され自由に編集できるようになります
HTMLコードが表示されている部分をクリックしてカーソルを置いてください。この状態でCTRL-Fキーを押して検索ダイアログを表示させます。そして次の文を検索してください。
id="header"すると次のようなsection宣言の行が見つかると思います。
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">maxwidgets="1"とあります。これは配置できるWidgetの数です。1とあるのでひとつしか置けません。ヘッダーブロックではブログタイトルを表示するWidgetが置かれています。
これを2とすれば2つ置けることになります。
次のように変更しましょう。
<b:section class="header" id="header" maxwidgets="2" showaddelement="no">ダッシュボードからレイアウトを選んでWidgetを追加してみましょう。ヘッダーの下にもWidgetが置けるようになっていれば成功です。
翻訳Widgetを配置してWidgetのHTMLを編集する
それでは翻訳Widgetを配置してみてください。そしてブログを試しに表示すると少し困った事に気づくと思います。翻訳Widgetが無駄に高さを持っているためブログタイトルの表示が間延びしてしまいます。そしてガジェットタイトルの入力が強制されているため、ガジェットのタイトルが表示されてしまいます。邪魔です。このタイトルを消すためにはまたHTMLの編集し翻訳Widgetを改造しないとなりません。
レイアウトで翻訳Widgetを配置し一度保存します。そして、テンプレートのHTMLボタンを押して編集します。追加された翻訳Widgetの場所を探します。
検索で次の分を探してください。
id="Translate1"そこに次のように書いてあるはずです。
<b:widget id='Translate1' locked='false' title='ｘｘｘｘ' type='Translate'>さらにモバイル端末でも翻訳Widgetが表示されるようにmobile属性を指定します。
つまり次のようにします。
<b:widget id='Translate1' locked='false' title='' type='Translate' mobile='yes'>これで保存すれば翻訳Widgetのタイトルは表示されなくなり、モバイル端末でも表示されるようになります。
ちなみにモバイルテンプレートでカスタムを選択しておかないとモバイル向けの変更は反映されません。
テンプレートに戻ってWidgetの編集をするとタイトルの入力を強制され何か文字が入ってしまうでしょう。その場合はその都度タイトルを空にしましょう。
テンプレートによっては翻訳Widgetの高さが余分にとられ間延びしてしまいます。最後にCSSを設定して翻訳Widgetのマージンを上書きします。
テンプレートのカスタマイズで上級者向けを選びCSSを追加を表示します。そして次のCSSを加えておきます。
/*↓ ヘッダに置いた翻訳ガジェットの高さを狭める */
.Translate {
margin-top: 5px;
text-align: right;
}
/*↑ ヘッダに置いた翻訳ガジェットの高さを狭める */ついでに右寄せも設定していますので好きなように変更しましょう。
-----
コメント
コメントを投稿