2022年に行ったBlogger(QooQ)のカスタマイズです。
最終更新日を表示する
datetime属性の値を日本標準時（JST）で追加できるようにしました。
[Blogger] 2022年版 最終更新日を表示する [widget version1用]
見出しの数で目次の開閉を調整
ページを開いたとき、見出しの数が多いときは目次を閉じ、少ないと開くようにしました。
【Blogger】見出しの数で目次の開閉を調整できる機能を追加してみました
記事内の特定のコメント（コメントアウト）を取得
JavaScriptでコメントアウトを取得できることを知ったので作ってみました。
具体的な目的なく作りましたが、投稿（記事）をトリガーにしていろいろできるのでは？と考えています。
[Blogger]記事内に特定のコメント（コメントアウト）があったら、なにかをするorしない[JavaScript]
多くなってしまったラベルを隠す
興味のまま雑多なことを書いているとラベルが多くなってしまいました。
サイドバーの情報量が多いと感じたので、一定のラベルを表示、残りはボタンで表示、非表示を切り替えることにしました。
【Blogger】多くなってしまったラベルを隠す【Label widget】
記事中にアドセンスの記事内広告を自動で追加する
JavaScriptの勉強がてら作ってみました。
【Blogger】記事中にアドセンスの記事内広告を自動で追加する
JSON-LDでSiteNavigationElementを追加
貪欲にマークアップしました。
JSON-LDでSiteNavigationElementを追加してみました
Widgetをversion2にする
やってみたかったWidgetのV2化、大きめの変更でした。
【Blogger】QooQのwidgetをversion2にする【準備編】
【Blogger】QooQ widgetをversion2にする【Blog widget編】
【Blogger】QooQ widgetをversion2にする【その他widget編】
【Blogger】QooQ widgetをversion2にする【資料編】
画像本体よりもリンク範囲が広いのでCSSで修正
いくつか修正方法が考えられましたが、CSSのwidth: fit-content;を使いました。
【QooQ】画像本体よりもリンク範囲が広いのでCSSで修正しました
トップページの投稿（記事）サムネイルを遅延読み込み
記事のサムネイルはloading="lazy"を設定して運用していました。
気がつかなかったのですが、PageSpeed Insightsで指摘されていたので、JavaScriptのIntersectionObserverを使って遅延読み込みしてみました。
【QooQ】トップページの投稿（記事）サムネイルを遅延読み込みしてみました【Blogger】
スマートフォンのときにサイドバーを横（左側）から出す
スマートフォンのときのサイドバーの処理（位置）について悩みましたが、ひとまずボタンタップで左側から出すようにしました。
【QooQ】スマートフォンのときにサイドバーを横（左側）から出す【Blogger】
投稿（記事）本文をJavaScriptで読み込む
記事にはしていませんがBloggerの記事／追加ページの投稿画像にloading-lazyを自動的に付けるプログラムの手法を用いて画像にloading="lazy"やdecoding="async"を設定しました。
コメントなし:
コメントを投稿