Blogger Labo：投稿部分に追加したガジェットの不具合対処法

投稿部分（メインセクション）にガジェットを追加したことで不具合が発生したという報告をいくつか頂いています。この報告に対してトラブルシューティングを用意したので、不具合にお困りの方は下記を参考に修正してみてください。


投稿部分の不具合の種類


ガジェットの背景が透明になってしまう


Blogger Labo：投稿部分に追加したガジェットの不具合対処法
変更後

当サイトのテンプレートにはメイン部分（記事の上下）にガジェットのCSSを設定していませんので、ガジェットを設定しても背景が透明になってしまうかと思います。これを回避するにはCSSを設定する必要があります。CSSのコードは以下の通りです。

Hello, world!の場合


/* メインガジェット
---------------------------------------------------------------------------- */

main .title {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
  background: #333; /* タイトルの背景色 */
  color: #fff;
  padding: 6px 15px;
  margin-top: 20px;
}

main .widget-content {
  background: #fff;
  padding: 10px;
  margin-bottom: 20px;
}

Smartの場合


/* メインガジェット
---------------------------------------------------------------------------- */

main .title {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
  background: #0078ba; /* タイトルの背景色 */
  color: #fff;
  padding: 6px 15px;
  margin-top: 20px;
  box-shadow: 1px 0px 2px rgba(0,0,0, .4);
}

main .widget-content {
  background: #fff;
  border-left: solid 1px #ddd;
  padding: 10px;
  margin-bottom: 20px;
  box-shadow: 1px 1px 2px rgba(0,0,0, .4);
}

テーマデザイナーには対応していないので、色に関してはご自身で変更してください。

また、個人的にはメイン部分へのガジェットの挿入は非推奨なので、今後もこの設定をデフォルトの仕様にすることはありません。ご希望の方のみ、ご自身で追加・変更してください。

ガジェットの見出しが目次に含まれてしまう


Bloggerのガジェットタイトルはh3で設定されているため、メイン部分にガジェットを設定すると「自動目次機能」でガジェットタイトルも見出しのリンクとして拾ってしまうようです。

これについてはテンプレート内にある「目次を表示させるコード」を以下のように変更すると回避することができます。

<!-- 目次を表示させるコード -->
<script>
  //<![CDATA[
  $(function () {
    var idcount = 1;
    var toc = '';
    var currentlevel = 0;
    $(".post-body h2, .post-body h3, .post-body h4", this).each(function () {
      this.id = "chapter-" + idcount;
      idcount++;
      var level = 0;
        if (this.nodeName.toLowerCase() == "h2") {
        level = 1;
      } else if (this.nodeName.toLowerCase() == "h3") {
        level = 2;
      } else if (this.nodeName.toLowerCase() == "h4") {
        level = 3;
      }
      while (currentlevel < level) { toc += '<ul class="chapter">'; currentlevel++; } while (currentlevel > level) {
        toc += "</ul>";
        currentlevel--;
      }
      toc += '<li><a href="#' + this.id + '">' + $(this).html() + "</a></li>\n";
    });
    while (currentlevel > 0) {
      toc += "</ul>";
      currentlevel--;
    }
    if ($(".post-body h2")[0]) {
      $("#toc").html(toc);
    }
    else {
      $('#toc').attr('class', 'no-toc');
    }
  });
  //]]>
</script>

具体的な変更点は「.post-content」を「.post-body」に変更しただけです。こうすることで見出しを拾う範囲を記事内のみに絞ることができ、メイン部分の記事外に影響を及ぼすことはなくなります。

余談


Bloggerのデフォルトガジェットについて


Bloggerでレイアウトから追加できるガジェットのタイトルは<h3>タグで設定されているようです。これはBloggerの仕様上の設定ですので、テンプレートの設定やHTML/JavaScriptガジェットなどで変更することはできないと思われます（サーバー側の設定によるもの）。

Bloggerのガジェットは見出しタグなどを自由に設定できないのか？


結論から言えば「できる」と言えます。

例えば、BloggerのHTML/JavaScriptガジェットは、

<b:widget id='HTML1' title='タイトル' type='HTML'>
  <b:includable id='main'>
  <!-- 処理 -->
  </b:includable>
</b:widget>

という形になっています。この<!-- 処理 -->の部分の見出しタグをh2やh4に変更してしまえば、デフォルトの設定を書き換えることができます。この作業はHTMLの編集から行うことができます。

当サイトのテンプレート内にある「最新記事ガジェット」はHTML/JavaScriptガジェットで自作しているので、変更可能な良い例になると思います。しかし、Bloggerのテンプレートをイジってガジェットそのものを変更するのは初心者には難しいと思われますので、安易に変更するのはオススメしません。

また、具体的に変更できるのは「HTML/JavaScript」くらいで、「注目の投稿」なんかはサーバー側で制御されているので、こういったガジェットの見出しタグを変えたりすることはできないようです。