Blogger:レイアウト編集(10)ウィジェットのIDを確認する方法

前の関連記事:Blogger:レイアウト編集(9)各投稿の更新日時の表示をする(成功編)


タイトルを入力せずにHTML/JavaScripガジェットを複数使うとレイアウト画面ではすべて「HTML/JavaScrip」と表示されてどれがどのウィジェットかわからなくなってしまいます。

レイアウト画面で「配置を保存」ボタンが動かなくなってしまった


テンプレートのHTMLをいじりすぎたのかレイアウト画面で「配置を保存」ボタンが動かなくなってしまいました。


ページを更新して、もう一度試してください、といわれますが何度試してもダメです。

ということでウィジェットの配置を変えるためにはテンプレートのHTMLで変更しないといけません。

レイアウト画面ではウィジェットのIDがわからない
テンプレートのHTMLではガジェットの中身がわからない


ガジェットの追加はレイアウト画面でしかできないので、新しく追加したガジェットを入れたウィジェットがテンプレートのHTMLではどれになるのかがわからないと編集ができません。


1つしか使っていないガジェットであればtypeで判断できまし、タイトルを設定していればtitleで判別できます。

ところが、HTML/JavaScripガジェットは複数使っている上にタイトルを入力していませんのでテンプレートのHTMLではどれがどれかわかりません。

さらにテンプレートのHTMLではウィジェットの中に入っているガジェットのtypeはわかっても、ガジェットに入力した内容がわからないので、タイトルがなければ何のHTML/JavaScripコードを入っているのかがわかりません。

そのためにガジェットを追加して新しくできたウィジェットがテンプレートのHTMLではどこになるのかなかなかわからず苦労していました。

ウィジェットのIDはHTML1からHTML2、HTML3、、、と番号がつけられており、さらに「ウィジェットへ移動」ボタンから簡単にIDでアクセスできます。

そこでレイアウト画面でウィジェットのIDがわかればいいなあ、と思っていたら、わかる方法を偶然発見しました。

レイアウト画面で「編集」にマウスカーソルを合わすとウィジェットのIDがわかる


レイアウト画面でIDを知りたいウィジェットの「編集」リンクにマウスカーソルを合わせてみます。

ブラウザはChromeを使っています。


画面の下にリンクが表示されます。

この時点ではまだウィジェットのIDはわかりません。

widgetId=HTM・・・

意地の悪いことにちょうどウィジェトのIDの番号の手前で表示が省略されてしまっています。

しかしこのまま3秒ほど待つと全てのリンクが表示されます。


これで全部表示されました。

widgetId=HTML2

ウィジェットのIDがHTML2であることがわかります。

あとはテンプレートのHTMLでid='HTML2'のウィジェットを探せばよいわけです。
PR

0 件のコメント:

コメントを投稿