Blogger の テンプレート を変更したとたん、 LightBox(ライトボックス) が動かなくなってしまいました。。 解決策をいろいろと探し回ったりしたのですが、よく見かけたスクリプトを挿入する方法ではうまくいきませんでした… そこで、頑張ってテンプレートを解析してどうにか直したので、その方法をここへまとめて記載しておきます。
修正手順
おまけ
ライトボックス 設定 の 確認 と 修正
(おそらく、この設定は有効だと思いますが…) この手順は念のための確認です。 そもそものライトボックス設定が無効であっては表示ができないので、ここで確認しておきます。 この設定に問題ない場合、次のステップへ進んでください。
- [ダッシュボード] から [設定] を選択
- [投稿とコメント] を選択
- [ライトボックスで画像をアピール] が "はい" になっていることを確認
なっていなければ "はい" にして [変更を保存] します。
この部分は、他の方も記載されているので、詳細画像は割愛します。。
テンプレート タグ構造 の 確認 と 修正
LightBox(ライトボックス)が使えない原因はタグ構造がおかしくなっていることが原因です。 ここでは、その原因を直接的に解決します。
- [ダッシュボード] から [テンプレート] を選択
- [HTMLの編集] を選択
- 念のため修正前のテンプレートをバックアップ
- エディタエリアを選択し、[Ctrl] + [F] で "data:post.body" を検索
<data:post.body/>
が<div class='post-body'/>
で囲まれるよう修正
(※CSSクラス名post-body
を含む要素にコンテンツが含まれていることが重要です。)
123<
div
class
=
'post-body'
>
<
data:post.body
/>
</
div
>
- [テンプレートを保存] を選択
- 動作確認
自分の場合、この修正で直すことができました。 おそらく、スクリプト挿入で直せない方もこの方法なら修正できると思います。
そもそもの原因って…
まず、Blogger が どのような動作をして LightBox(ライトボックス) を使えるようにしているのか、についてです。 関連する部分を抜粋して動作順序を以下に記載します。
- クライアントからブログが呼び出されたとき、
</body>
直前に以下のようなスクリプトを追加して返信する。123456<script type="text/javascript">
if
(
typeof
(BLOG_attachCsiOnload) !=
'undefined'
&& BLOG_attachCsiOnload !=
null
) { window[
'blogger_templates_experiment_id'
] =
"templatesV1"
;window[
'blogger_blog_id'
] =
'5510997583563012636'
;BLOG_attachCsiOnload(
'item_'
); }_WidgetManager._Init(
'//www.blogger.com/rearrange?blogID\x3d5510997583563012636'
,
'//garafu.blogspot.jp/2015/01/updated-author.html'
,
'5510997583563012636'
);
_WidgetManager._SetDataContext([{
'name'
:
'blog'
,
'data'
: {
'blogId'
:
'5510997583563012636'
,
'bloggerUrl'
:
'https://www.blogger.com'
,
'title'
:
'galife'
,
'pageType'
:
'item'
,
'postId'
:
'5682087462618366631'
,
'url'
:
'https://garafu.blogspot.jp/2015/01/updated-author.html'
,
'canonicalUrl'
:
'https://garafu.blogspot.com/2015/01/updated-author.html'
,
'canonicalHomepageUrl'
:
'https://garafu.blogspot.com/'
,
'homepageUrl'
:
'https://garafu.blogspot.jp/'
,
'blogspotFaviconUrl'
:
'https://garafu.blogspot.jp/favicon.ico'
,
'enabledCommentProfileImages'
:
true
,
'adultContent'
:
false
,
'disableAdSenseWidget'
:
false
,
'analyticsAccountNumber'
:
'UA-40440355-1'
,
'searchLabel'
:
''
,
'searchQuery'
:
''
,
'pageName'
:
'\42updated がありません\42、\42author がありません\42 警告 の 修正方法'
,
'pageTitle'
:
'galife: \42updated がありません\42、\42author がありません\42 警告 の 修正方法'
,
'metaDescription'
:
''
,
'encoding'
:
'UTF-8'
,
'locale'
:
'ja'
,
'localeUnderscoreDelimited'
:
'ja'
,
'isPrivate'
:
false
,
'isMobile'
:
false
,
'isMobileRequest'
:
false
,
'mobileClass'
:
''
,
'isPrivateBlog'
:
false
,
'languageDirection'
:
'ltr'
,
'feedLinks'
:
'\74link rel\75\42alternate\42 type\75\42application/atom+xml\42 title\75\42galife - Atom\42 href\75\42https://garafu.blogspot.com/feeds/posts/default\42 /\76\n\74link rel\75\42alternate\42 type\75\42application/rss+xml\42 title\75\42galife - RSS\42 href\75\42https://garafu.blogspot.com/feeds/posts/default?alt\75rss\42 /\76\n\74link rel\75\42service.post\42 type\75\42application/atom+xml\42 title\75\42galife - Atom\42 href\75\42http://www.blogger.com/feeds/5510997583563012636/posts/default\42 /\76\n\n\74link rel\75\42alternate\42 type\75\42application/atom+xml\42 title\75\42galife - Atom\42 href\75\42https://garafu.blogspot.com/feeds/5682087462618366631/comments/default\42 /\76\n'
,
'meTag'
:
''
,
'openIdOpTag'
:
''
,
'postImageThumbnailUrl'
:
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPImfn3JcaSTLUJe7M-Az8mVZlYE8c3JG3hmXwkWt3zWlNNpqf6smQAmjlYBa7uCsvw8A53ij9ebEkeZ2FALiCNTlPDWZInN4rMSJ5DesQOq5q_9_g2ApAaFk5tYjXq58am0xi-ioYjbI/s72-c/hentry%E3%82%A8%E3%83%A9%E3%83%BC.png'
,
'postImageUrl'
:
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPImfn3JcaSTLUJe7M-Az8mVZlYE8c3JG3hmXwkWt3zWlNNpqf6smQAmjlYBa7uCsvw8A53ij9ebEkeZ2FALiCNTlPDWZInN4rMSJ5DesQOq5q_9_g2ApAaFk5tYjXq58am0xi-ioYjbI/s320/hentry%E3%82%A8%E3%83%A9%E3%83%BC.png'
,
'latencyHeadScript'
:
'\74script type\75\42text/javascript\42\76(function() { var b\75window,f\75\42chrome\42,g\75\42tick\42,k\75\42jstiming\42;(function(){function d(a){this.t\75{};this.tick\75function(a,d,c){var e\75void 0!\75c?c:(new Date).getTime();this.t[a]\75[e,d];if(void 0\75\75c)try{b.console.timeStamp(\42CSI/\42+a)}catch(h){}};this[g](\42start\42,null,a)}var a;b.performance\46\46(a\75b.performance.timing);var n\75a?new d(a.responseStart):new d;b.jstiming\75{Timer:d,load:n};if(a){var c\75a.navigationStart,h\75a.responseStart;0\74c\46\46h\76\75c\46\46(b[k].srt\75h-c)}if(a){var e\75b[k].load;0\74c\46\46h\76\75c\46\46(e[g](\42_wtsrt\42,void 0,c),e[g](\42wtsrt_\42,\42_wtsrt\42,h),e[g](\42tbsd_\42,\42wtsrt_\42))}try{a\75null,\nb[f]\46\46b[f].csi\46\46(a\75Math.floor(b[f].csi().pageT),e\46\0460\74c\46\46(e[g](\42_tbnd\42,void 0,b[f].csi().startE),e[g](\42tbnd_\42,\42_tbnd\42,c))),null\75\75a\46\46b.gtbExternal\46\46(a\75b.gtbExternal.pageT()),null\75\75a\46\46b.external\46\46(a\75b.external.pageT,e\46\0460\74c\46\46(e[g](\42_tbnd\42,void 0,b.external.startE),e[g](\42tbnd_\42,\42_tbnd\42,c))),a\46\46(b[k].pt\75a)}catch(p){}})();b.tickAboveFold\75function(d){var a\0750;if(d.offsetParent){do a+\75d.offsetTop;while(d\75d.offsetParent)}d\75a;750\76\75d\46\46b[k].load[g](\42aft\42)};var l\75!1;function m(){l||(l\75!0,b[k].load[g](\42firstScrollTime\42))}b.addEventListener?b.addEventListener(\42scroll\42,m,!1):b.attachEvent(\42onscroll\42,m);\n })();\74/script\076'
,
'mobileHeadScript'
:
''
,
'view'
:
''
,
'dynamicViewsCommentsSrc'
:
'//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js'
,
'dynamicViewsScriptSrc'
:
'//www.blogblog.com/dynamicviews/76f25a6f2e06af76'
,
'plusOneApiSrc'
:
'https://apis.google.com/js/plusone.js'
,
'sf'
:
'n'
,
'tf'
:
''
}}, {
'name'
:
'skin'
,
'data'
: {
'vars'
: {},
'override'
:
'*/'
}}, {
'name'
:
'view'
,
'data'
: {
'classic'
: {
'name'
:
'classic'
,
'url'
:
'?view\75classic'
},
'flipcard'
: {
'name'
:
'flipcard'
,
'url'
:
'?view\75flipcard'
},
'magazine'
: {
'name'
:
'magazine'
,
'url'
:
'?view\75magazine'
},
'mosaic'
: {
'name'
:
'mosaic'
,
'url'
:
'?view\75mosaic'
},
'sidebar'
: {
'name'
:
'sidebar'
,
'url'
:
'?view\75sidebar'
},
'snapshot'
: {
'name'
:
'snapshot'
,
'url'
:
'?view\75snapshot'
},
'timeslide'
: {
'name'
:
'timeslide'
,
'url'
:
'?view\75timeslide'
}}}]);
_WidgetManager._RegisterWidget(
'_HeaderView'
,
new
_WidgetInfo(
'Header1'
,
'blog-title'
,
null
, document.getElementById(
'Header1'
), {},
'displayModeFull'
));
_WidgetManager._RegisterWidget(
'_BlogView'
,
new
_WidgetInfo(
'Blog1'
,
'main'
,
null
, document.getElementById(
'Blog1'
), {
'cmtInteractionsEnabled'
:
false
,
'lightboxEnabled'
:
true
,
'lightboxModuleUrl'
:
'https://www.blogger.com/static/v1/jsbin/2761285968-lbx__ja.js'
,
'lightboxCssUrl'
:
'https://www.blogger.com/static/v1/v-css/2392111094-lightbox_bundle.css'
},
'displayModeFull'
));
</script>
- クライアント側で読み込みが完了したら、上記コードの5行目が実行される
1
_WidgetManager._RegisterWidget(
'_BlogView'
,
new
_WidgetInfo(
'Blog1'
,
'main'
,
null
, document.getElementById(
'Blog1'
), {
'cmtInteractionsEnabled'
:
false
,
'lightboxEnabled'
:
true
,
'lightboxModuleUrl'
:
'https://www.blogger.com/static/v1/jsbin/2761285968-lbx__ja.js'
,
'lightboxCssUrl'
:
'https://www.blogger.com/static/v1/v-css/2392111094-lightbox_bundle.css'
},
'displayModeFull'
));
- 動作結果として
</body>
の直前に以下のタグが挿入される12<
link
type
=
"text/css"
rel
=
"stylesheet"
href
=
"https://www.blogger.com/static/v1/v-css/2392111094-lightbox_bundle.css"
>
<
script
type
=
"text/javascript"
src
=
"https://www.blogger.com/static/v1/jsbin/2761285968-lbx__ja.js"
></
script
>
- スクリプトが実行されてLightBox(ライトボックス)が有効になる
実は、うまくLightBox(ライトボックス)が動作しない時、上記の3番目から動作していません。
どうもタグ構造が正しく読み取れず、次の動作へ移れていないのが原因のようです。
CSSクラス名 post-body
要素以下にある img
要素をライトボックスで表示する対象としているようで、
そもそも CSSクラス post-body
を含む要素がなかった場合、その先に進まなくなるようです。
1 2 3 4 5 6 7 | < div class = 'widget Blog' id = 'Blog1' > ... < div class = 'post-body' > < data:post.body /> </ div > ... </ div > |
というわけで、この記事のような修正方法にたどり着いた…といった感じです。
参考記事
- クリボウのBloggerTips - Blogger で写真をクリックしたときに LightBox が動かない不具合が発生中
- The Real Blogger Status - The LightBox Image Display Option Stopped Working, Recently
- 24log - bloggerの写真表示機能「Lightbox」が表示されないときの対処法
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね!」または 「Twitter の フォロー」 お願いします!!