前回のまとめ以降に施した約2ヶ月分の主なカスタマイズや変更点のまとめです。
単独の記事にするほどでもない小ネタ集的な感じ?
ここ最近は JetTheme を参考にした(ていうかほぼパクった)カスタマイズが多いです。
CONTENTS
アーカイブウィジェット(プルダウンメニュー)を 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にできました!
その他、自分でもよく覚えてない(笑)ような細かい変更が多数あり。
コメントを投稿
別ページに移動します5 件のコメント (新着順)
ふじやん
こちらこそご報告頂いてありがとうございます。
上手くいったようで、私も安心しました。
今回は Twitter のフォロワーさんに iPhone や Mac で検証に協力して貰って大変助かりました。
BINUBALL
消えた。 迅速な対応ありがとうございます。
ふじやん
いろいろ調べてこんな記事にたどり着いて対処してみたんですが、これでどうですかね?
https://terkel.jp/archives/2010/08/reset-input-type-search-style/
input[type="search"]::-webkit-search-decoration {
display: none;
}
たぶん input type="text" にしても不要なアイコンは消えるのかも?
ふじやん
BINUBALLさん、検索アイコンの重複バグ、知らせていただいてありがとうございます。
Chrome のデベロッパーツールでは問題ないのですが、iOS だけでの現象なんでしょうか?
だとすると、私の環境での対処は難しいですね。
もし BINUBALL さんの方で対処法が分かったら教えていただけると幸いです。
BINUBALL
このブログでiOS 試験をしている時見つけました。
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLhyvyBhaWM5W0P9HwZjh6dCEQCXSm7OEIfUi6aSo0wafrY6emM4g-FsPMXCrBpK-ssRQnGYtqmK-ZNfGoTi7EWkj-pUZcezD1YaOiho0aQOnCxQUhW288eIHZChmJzHsad6rVqmI7fS5qPhMqW-AAvNksSA561VQ-BkkNZKHDkyU8Xt03HBX-q4-Tfg/s1600/IMG_0737.jpeg
検索箱に検索アイコンが重複されます。自分の他のブログでもこの現象が現われて処理する方法を思っています。