Blogger で LightBox が 動かない 不具合 の 修正 方法

2015年1月25日 15:28 0 件のコメント

Blogger の テンプレート を変更したとたん、 LightBox(ライトボックス) が動かなくなってしまいました。。 解決策をいろいろと探し回ったりしたのですが、よく見かけたスクリプトを挿入する方法ではうまくいきませんでした… そこで、頑張ってテンプレートを解析してどうにか直したので、その方法をここへまとめて記載しておきます。

修正手順

  1. ライトボックス 設定 の 確認 と 修正
  2. テンプレート タグ構造 の 確認 と 修正

おまけ

ライトボックス 設定 の 確認 と 修正

（おそらく、この設定は有効だと思いますが…） この手順は念のための確認です。 そもそものライトボックス設定が無効であっては表示ができないので、ここで確認しておきます。 この設定に問題ない場合、次のステップへ進んでください。

  1. [ダッシュボード] から [設定] を選択
  2. [投稿とコメント] を選択
  3. [ライトボックスで画像をアピール] が "はい" になっていることを確認
    なっていなければ "はい" にして [変更を保存] します。

この部分は、他の方も記載されているので、詳細画像は割愛します。。

テンプレート タグ構造 の 確認 と 修正

LightBox(ライトボックス)が使えない原因はタグ構造がおかしくなっていることが原因です。 ここでは、その原因を直接的に解決します。

  1. [ダッシュボード] から [テンプレート] を選択
  2. [HTMLの編集] を選択
  3. 念のため修正前のテンプレートをバックアップ
  4. エディタエリアを選択し、[Ctrl] + [F] で "data:post.body" を検索
  5. <data:post.body/> が <div class='post-body'/> で囲まれるよう修正
    （※CSSクラス名 post-body を含む要素にコンテンツが含まれていることが重要です。）
    <div class='post-body'>
  <data:post.body/>
</div>
  6. [テンプレートを保存] を選択
  7. 動作確認

自分の場合、この修正で直すことができました。 おそらく、スクリプト挿入で直せない方もこの方法なら修正できると思います。

そもそもの原因って…

まず、Blogger が どのような動作をして LightBox(ライトボックス) を使えるようにしているのか、についてです。 関連する部分を抜粋して動作順序を以下に記載します。

  1. クライアントからブログが呼び出されたとき、</body> 直前に以下のようなスクリプトを追加して返信する。 
    <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>
  2. クライアント側で読み込みが完了したら、上記コードの5行目が実行される 
    _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'));
  3. 動作結果として </body> の直前に以下のタグが挿入される 
    <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>
  4. スクリプトが実行されてLightBox(ライトボックス)が有効になる

実は、うまくLightBox(ライトボックス)が動作しない時、上記の3番目から動作していません。 どうもタグ構造が正しく読み取れず、次の動作へ移れていないのが原因のようです。 CSSクラス名 post-body 要素以下にある img 要素をライトボックスで表示する対象としているようで、 そもそも CSSクラス post-body を含む要素がなかった場合、その先に進まなくなるようです。

では、Blogger で LightBox(ライトボックス) を利用としたとき、どのようなタグ構造を保たなければならないのか… いろいろと試した結果、以下に示すような構造が保てていないと LightBox(ライトボックス) は正しく動作しないようです。 

<div class='widget Blog' id='Blog1'>
  ...
  <div class='post-body'>
    <data:post.body/>
  </div>
  ...
</div>

というわけで、この記事のような修正方法にたどり着いた…といった感じです。

参考記事

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！