「Blogger」レイアウトのガジェットの位置を動かせるようにしたい

Bloggerのテンプレートによっては、動かせないガジェットがあります。新たに追加したガジェットは動かせるのに、テンプレートに元々追加されているガジェットはなぜうごかせないのでしょうか。

下の画像のように、新たに追加されたガジェットは、左端にグレーの帯が追加されており、クリックしたまま動かすことで、位置を変更することができます。

しかし、元々テンプレートにあるガジェットは、下の画像のように、グレーの帯がなく、動かすことができません。

それでは、上の「不正行為の報告」ガジェットを動かせるようにしたいと思います。

Chromeブラウザでhtmlソースを見る

今回はChromeブラウザで、F12キーを押して、「デベロッパーツール」を起動します。

「不正行為の報告」ガジェットのソースを見つけ出し、Class名を見つけます。

デベロッパーツールの上の方に、矢印キーがあるので、そちらで関連する項目クリックすると、ソースに移動できるので、やってみましょう。

「widget ReportAbuse」と言うClassを見つけることができました。こちらが「不正行為の報告」ガジェットのClass定義になります。

この「widget ReportAbuse」をコピーして、今度はBloggerの管理画面に移動し、「テーマ」でテンプレートのhtmlソースを開きます。

Bloggerの管理画面のテーマをクリックし、テンプレートを変更するページへ移動します。

上の方に「カスタマイズ」のボタンがあるので、そのとなりの「▼」をクリックします。

「▼」をクリックすると、下の画像のようにメニューが表示されるので、「HTMLの編集」をクリックします。

htmlソースが表示されるページに移動しますので、ソース内を一度クリックし、「Ctrl + F」キーを押して、ソース内を検索します。

「Search：」内に、先ほどコピーした「widget ReportAbuse」の「ReportAbuse」を貼り付けて、「Enter」キーを押します。

検索対象がソース内にあれば、黄色くマーキングされ、そのソースを表示してくれます。

上の画像の黄色くマーキングされた「ReportAbuse」のあるソースの1行をよく見てみると、「locked='true'」と言うタグが見つけらるかと思います。

これは「true」となっているので、「ガジェットを固定する」というものになりますので、「false」に書き直し、「ガジェットを固定しない」と言う指示にします。

書き直したら、ページ上の右端にある保存ボタン（フロッピーディスクのアイコン）があるので、クリックし、保存します。

ソースを変更後、レイアウトページへ戻って、先ほどの「不正行為の報告」ガジェットがどのようになっているか確認します。

上の画像のように、左端にグレーの帯が追加され、動かせるようになりました。

動かしたかったガジェットが動かせるようになれば、カスタマイズが捗りますね。