最近のカスタマイズ (2022/05)

前回のまとめ以降に施した約2ヶ月分の主なカスタマイズや変更点のまとめです。

単独の記事にするほどでもない小ネタ集的な感じ？

ここ最近は JetTheme を参考にした(ていうかほぼパクった)カスタマイズが多いです。

アーカイブウィジェット(プルダウンメニュー)を JS なしでも動くようにする

mizusame さんの真似をして、プルダウンのアーカイブウィジェットを <details> <summary> による開閉式にしてみました。これにより JavaScript が無効の状態でも機能するようになります。(※IE は detail summary に非対応で開閉できないなため、常時開きっぱなしになります)

カスタマイズ手順

試される方は必ず予めテーマの XML ファイルのバックアップを取ってから行って下さい。

手順①

まずレイアウト画面でアーカイブウィジェット(プルダウン)を設置してから HTML 編集にて検索で以下のコードを探し、行番号の横の▼を押して折りたたみます。

<b:includable id='menu' var='data'>

手順②

<b:includable id='menu' var='data'> ～ </b:includable> までのコードを下記のコードに置き換えます。

        <b:includable id='menu' var='data'>
  <details class='archive-list'>
   <summary>アーカイブを選択</summary>
    <ul>
     <b:loop values='data:data' var='i'>
      <a expr:href='data:i.url'><li><data:i.name/> (<data:i.post-count/>)</li></a>
     </b:loop>
    </ul>
  </details>
</b:includable>

手順③ CSS でデザインをカスタマイズ

CSS の一例です。普通のプルダウンメニューっぽいデザインを再現してみました。

.archive-list ul {
  max-width: 400px;
  max-height: 300px;
  margin: 0 auto;
  overflow: auto;
  border: 1px solid #ccc!important;
  border-top: none!important;
}
.archive-list ul li {
  line-height: 1.6;
  margin: 0!important;
  list-style: none;
}
.archive-list summary {
  padding: 5px;
  background: #eee;
}
.archive-list summary:hover {
  cursor: pointer;
}
.archive-list a {
  display: block;
  padding-left: .5em;
  color: #000!important;
  text-decoration: none!important;
}
.archive-list a:hover {
  background: dodgerblue!important;
  color: #fff!important;
}

before

after

自動生成目次を IB-Note 版に変更

多くの Blogger ユーザーがお世話になっているであろう、スケ郎さん作の自動目次を当ブログでも長らく使わせていただいてましたが、IB-Note さんがよりシンプルなコードに最適化された自動目次生成スクリプトを公開されましたので、そちらに乗り換えることにしました。コードも軽量で読み込みスピードも相当早くなっています。

ちなみにこちらの自動目次も上記のプルダウンメニューと同じく <details> <summary> で開閉する仕様になっています。

IB-Note

【全見出しタグ対応】高速＆シンプルな自動生成目次 | IB-Note

いろいろな自動生成目次のソースコードを読んで比較検討を重ねた結果、「これだ！」と思う理想の目次を作ることができました。

https://itblogger-note.blogspot.com/2021/12/fast-and-simple-auto-toc.html

実は IB-Note 版を導入している Blogger ブログを最近よく見かけるようになって、うちも使ってみたいなと思ってはいたものの、デザインのカスタマイズ(今のと同じデザインを再現)が億劫だからという単純な理由(笑)で躊躇してたんですが、いざやってみたら意外と簡単に出来てしまいました…もっと早く導入しとけばよかった！

当ブログでの機能的なカスタマイズについて

下記の JavaScript コードの赤文字部分が変更箇所です。

(function(window, document) {
  const selector = document.querySelector('.post-body');
  if (!selector) {
    return
  }

  const toc = document.createElement('details');
  const sum = document.createElement('summary');
  const list = document.createElement('ul');
  toc.id = 'toc';
  toc.open = false; //デフォルトで閉じた状態
  sum.className = 'toc-title';
  sum.innerHTML = '<svg class="svg" style="margin-right:3px"><use href="#svg-list-ul"/></svg>CONTENTS<svg class="svg"><use href="#svg-chevron-right"/></svg>'; //SVG アイコンを使うため textContent を innerHTML に変更
  list.className = 'toc-container';
  toc.appendChild(sum);
  toc.appendChild(list);

  const headings = selector.querySelectorAll('h2, h3, h4');
  if (headings.length < 3) { //見出し3個未満で目次を生成しない
    return
  }
  headings[0].parentNode.insertBefore(toc, headings[0]);
  const order = [];
  const stack = [{level: 1, element: list}];

  // 事前処理
  headings.forEach((heading) => {
    const level = parseInt(heading.tagName.substring(1))
    order.push(level);
  });

  headings.forEach((heading, i) => {
    const level = parseInt(heading.tagName.substring(1));
    const next = order[i + 1];
    const li = document.createElement('li');
    const a = document.createElement('a');
    const id = (i + 1); //リンク id は数字のみ
    const ul = document.createElement('ul');

    // 目次要素の生成
    a.innerHTML = heading.innerHTML; //見出しの SVG アイコンを目次にも表示させるため textContent を innerHTML に変更
    a.href = `#${id}`;
    li.appendChild(a);
    if (level < next) {
      li.appendChild(ul);
    }

    // リンク先の生成
    heading.id = id;

    // 階層構造の生成
    let parent;
    do {
      parent = stack.pop();
    } while (parent.level >= level);
    parent.element.appendChild(li);
    stack.push(parent);
    stack.push({level: level, element: ul});
  });
}(window, document));

defer.js を画像や iframe にも適用

コメント欄の改造記事で埋め込みコメントの PSI 対策として defer.js を導入したと書きましたが、せっかくなのでその他の要素も遅延読み込みするようにしてみました。

適用させたのは、埋め込みコメントや YouTube 等の <iframe>、トップページのアイキャッチや各種サムネ画像の <img>、そして 埋め込み Twitter 用の JavaScript です。

<script id='defer-js' src='//cdn.jsdelivr.net/npm/@shinsenter/defer.js@2/dist/defer.min.js'/>
<script>/*<![CDATA[*/
  Defer.dom('img'); //アイキャッチ・サムネ画像
/*]]>*/
<b:if cond='data:view.isSingleItem'>
/*<![CDATA[*/
  Defer.dom('iframe'); //Youtube 等の iframe コンテンツ
  Defer.js('//platform.twitter.com/widgets.js','widgets-js',2000,function(){ //Twitter コンテンツ
    Defer.dom('.twitter-tweet');
});
/*]]>*/
</b:if>
</script>

defer.js を機能させるために…

• Twitter: 埋め込みコードの最後にある外部スクリプトリンクを削除。
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
• <img> と <iframe>
  src → data-src に変更。

モバイル表示時の検索窓の仕様変更

これまではモバイル表示時は≡を押してメニューリストを開かないと検索窓が出てこない仕様でしたが、デスクトップ 表示時と同じく通常の状態で検索可能にしました。逆にメニューリストが出ている時は検索窓を非表示にしました。

設定ページを Stylus で装飾

拡張機能の Stylus で殺風景な Blogger 設定画面をおしゃれ？に装飾してみました(笑)

見た目だけでなく使い勝手も良くなって、自分的には気にってます。

CSS を置いときますので、やってみたい方はどうぞ！

.ElmLkc{
    border:none!important;
}
.cI5zJb {
    padding-left: 1em;
}
.ekpivf {
    background: dodgerblue;
    color: #fff!important;
    padding-left: 5px;
    font-weight: bold!important;
}
.mcBype,
.EDnCLe:not(.OGjyyf) {
    font-weight: bold;
}
.mcBype:hover {
    color: dodgerblue;
}
.lXc0bd {
    width: 90%;
}
@media (min-width: 950px) {
  .AeEqp {
    margin-right: 450px;
    }
}
.x0MWze .cI5zJb .AeEqp,
.Df1djf.cI5zJb .AeEqp,
.PbnGhe div div.cI5zJb .AeEqp {
  margin-right: 0;
}

その他

• Font Awesome の v6 へのアプデにより一部のアイコンデザインが微妙に変わってます。
  例えばこんな感じ。
  →
  →
• モバイルのナビバーアイコンを全体的に細くスッキリと。
  Font Awesome は Free では細いのは使えないので、Feather や Bootstrap 等、FA 以外の SVG を使ってます。(≡ は CSS で描画)
• highlight.js のライトモード用の配色を設定。
  Lighthouse のアクセシビリティでコントラストの悪さを指摘されないように調整。
• 文中の赤文字と青文字をライトとダークでそれぞれ最適(Lighthouse で怒られない)な配色に調整。(とりあえず最近の記事だけ適用)
• CSS の すべての line-height の値から em を外した。(非推奨なので)
  数が多くて一個一個確認しながらやるのも面倒なので、全部一気に消しました。
  行間やレイアウトがおかしくなってるところは気づいたらすぐに修正していますが、まだ見落としてる箇所があるかもしれません。
• JSON-LD でパンくずリスト等の構造化データをマークアップ。
  ちなみにパンくずリストはこちらを参考にしました → 目に見えないパンくずリストを設置(blogger Template Breadcrumb) - きゃんつくばっと
• W3C Markup Validation テストでの HTML エラー箇所を可能な限り修正。
  とりあえずトップページだけはエラー0にできました！

その他、自分でもよく覚えてない(笑)ような細かい変更が多数あり。

過去のカスタマイズまとめ記事

• 【QooQ】最近のカスタマイズまとめ
• 最近のカスタマイズまとめ (2020/12)
• 最近のカスタマイズまとめ (2021/09)
• 最近のカスタマイズまとめ (2021/12)
• 最近のカスタマイズまとめ (2022/03)