Blogger:テンプレートHTMLの編集に紛れ込んだ全角スペースを簡単に見つける方法

テンプレートHTMLの編集はまずテストブログで動作確認したあとこのブログに公開し、その公開したHTMLコードをコピペしてこの公開ブログに適用しています。動かないときによくある原因と対策がわかったので書いておきます。

全角スペースが混じっていると動かないときがある

テンプレートHTMLのコードはBlogger:SyntaxHighlighter(1)ブログにソースコードを綺麗に表示させるで導入したSyntaxHighlighterを使って表示しています。

これにより載せたHTMLコードはそのままコピペして使えるはずです。

HTMLコードは見やすいようにブロックごとに空白でインデントさせています。

しかしその空白が全角スペースで入力してしまうと正しく動かなくなるときがあります。

見つけ次第半角スペースで入力し直すようにしていますが、投稿エディタやSyntaxHighlighterでみても全角スペースが混じっているのか一目ではわかりません。

Blogger:ページナビの横に「上に戻る」ボタンを作るを例にしてみます。

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
     </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
　　<a href="#toko_taitoru">記事タイトルに戻る</a>
</b:if>
<b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>
  </div>
  <div class='clear'/>
</b:includable>

このコードではこんな風なボタンができるはずです。


ところが上のコードを実際にコピペすると変なところに間隔が空いてしまいます。


ペーストするときに「プレーンテキストとして貼り付ける」にしても全角スペースは削除されません。

「テンプレートを保存」してもエラーがでてきません。

上の例ではだいたいどの辺りに全角スペースがあるのか予測がつきます。

「ホーム」の表示は8行目のコードで実行されており、「記事タイトルに戻る」は15行目のコードで実行されています。

なので8行目から15行目の間に全角スペースがあるとわかります。

それでも闇雲にスペースを打ち直すのは気が滅入ります。

HTMLコードに紛れ込んだ全角スペースを簡単に見つける方法

全角スペースが紛れ込んでいるのか、コード自体がおかしいのかわからない状態でテンプレートを保存するのは不本意ですが、「テンプレートを保存」ボタンをクリックします。

次に「戻る」ボタンなどで一旦HTMLの編集画面から出ます。

そして再度HTMLの編集画面に入ってペーストしたコードの部分を見に行きます。

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
     </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
&#12288;&#12288;<a href='#toko_taitoru'>記事タイトルに戻る</a>
</b:if>
<b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>
  </div>
  <div class='clear'/>
</b:includable>

15行目に　が二つ連続していますね。

これが全角スペースです。これを半角スペースで打ち直せば狙い通りの表示になります。

　がBloggerの投稿編集画面のHTMLモードで表示されればよいのですけどね。

上の例ではインデント部分の全角スペースなので実行させたときに空白スペースがでてくるだけでしたが、HTMLタグの中に紛れ込ませてしまうと上記の方法でないとなかなか探し出すのは困難です。