EDIT

最近のカスタマイズまとめ (2021/12)

｜2023/09/06
アイキャッチ

今回は SVG 関連のネタが多いです。

モバイルデバイス専用の上下スクロールボタン

画面幅 950px 以下では右下のを非表示にして、ナビバー内にを設置してみました。

モバイルジャンプボタン

私は PC でしか見ないため気付かなかったのですが、スマホやタブレット等の幅が狭い画面だと右下のボタンがメインカラム部分に被ってしまい誤タップしてしまう事があるらしい？との話を見かけたもので。この位置ならそういうリスクも無くなるのではと思いますがどうでしょう。以前よりも UI 改善しましたかね？ そもそもジャンプボタンなんかいらない…とか言わないでね(~_~;)私自身は結構多用しますので。

Lazyload スクリプトの導入

以前、ネイティブ Lazyload の導入について書きましたが、IB-Note さんがもっと効率のいい遅延読み込みの JavaScript を作成されたので導入してみました。先日紹介した JPG 圧縮技との合わせ技で PSI の数値的にも体感的にも読込がさらに高速化しています。

ファビコンIB-Note
サムネイル
特定タグのリソースを遅延読み込みさせるスクリプト | IB-Note
img, iframeといったタグのリソースを遅延読み込みさせるスクリプトを作成しました。外部ライブラリを一切使用せず、JavaScriptのみで実現したシンプルな遅延読み込み機能です。
https://itblogger-note.blogspot.com/2021/08/lazyload-script.html

HTML 編集で body 内にスクリプトを設置したら、あとは遅延読み込みさせたいタグの src を data-src に書き換えるだけで手軽に適用できます。

当ブログでは記事一覧ページと関連記事とサムネ付きページャーの画像にだけ適用させましたが、記事内の画像に関しては変更していません。何故かというと、単にタグを書き換えるのが面倒くさいw…というのもありますが、キャプションの入った画像(tableタグ使用)の場合、img に height width が設定してあっても画像読み込み時にレイアウト崩れ(CLS)が発生してしまい、これを上手く回避する方法が思いつかなかったためです。ネイティブ Lazyload だと CLS は発生しません。というわけでとりあえず回避方法が分かるまではこれまで通りネイティブ Lazyload を使用します。

ブログタイトル「ふ」に青丸

ブログタイトルロゴを SVG 化した際に、ちょっと地味なので「ふ」だけ色付きにしてみようかなと書きましたが、結局で囲ってみました。ファビコンと同じデザインで統一感があるのがいいかなと。自分では気に入ってますがどうでしょう(^^; ちなみにプロフィールウィジェットの名前の横のも PNG 画像から SVG に変えました。

デザイン変更はツールは使わず手動でやりました。は <circle> を使って描画して「ふ」に重ねて、の padding の分だけロゴ全体の位置を path の値で調整して右にずらしています。

検索ボックスのカスタマイズ

アイコンを Blogger SVG に変更

これまでは Font Awesome のアイコンを使っていましたが、Blogger 独自の SVG が手軽に使えることを知り、とりあえずだけ Blogger SVG に変えました。

参考記事:
ファビコン些細な日常
サムネイル
Bloggerで利用可能なSVGアイコンのインラインSVGによるマークアップ
BloggerブログにはSVGアイコンのマークアップを掲載したアイコンファイルが生成されている。メニューや検索やメールや共有など、色んなものが使える。インラインSVGで記載してブログに表示する方法について纏めた。
https://www.nagahitoyuki.com/2021/07/markup-with-inline-svg-for-svg-icons-available-on-blogger.html

このカスタマイズ記事のコードのアイコンも Blogger SVG に変更してあります。
→ 【QooQ】ナビゲーションバーの中に検索ボックスを埋め込む

せっかくなのでこれを機に脱 Font Awesome に踏み切ろうかなと思いましたが、種類が少なくて欲しいアイコンがなかったり、あっても微妙にデザインが気に入らないので、他は現状のままにしておきます(^^;

クリアボタンの追加

フォームに文字が入力されている状態でクリアボタン × が表示されるようにしました。やり方は簡単で、検索ウィジェットコードの <input> 要素の type 属性を text → search に変更するだけ。※Firefox は非対応なため表示されません。

クリアボタン

但しデフォルトのボタンは青系でダークモードだと殆ど見えなくなってしまうため、こちらの記事を参考にしてカスタマイズしてみました。当ブログでは SVG を使用しています。

ファビコンUrban Qee
サムネイル
<input type="search">のキャンセルボタン（Ｘマーク） をカスタマイズする - キャンセルボタンの変更、表示位置の変更など -
FORM input search cancel-button 2020.10.14
http://urbanqee.com/html/input/input-seach.html

2022/05/10 追記: Safari 独自仕様対応

先日 BINUBALL さんにコメントでがダブって表示されているとのご指摘を頂きました。

ダブった🔍

BINUBALL さんの別ブログでも同じ状態とのことで、どうやら Safari でのみの現象らしいです。うちみたいに type="search" にして尚且つを独自に付けている環境だと、Safari で見ると同じ様な状態になってるかも？

調べてみたところ下記の CSS を追記すれば消えるようなのでお試しください。

input[type="search"]::-webkit-search-decoration {
  display: none;
}

明暗切り替えアイコンを Font Awesome に戻した

実はほんの一時期アイコンを Feather icon のに変えていたんですが(太陽はこっちの方が好み)、何故か Firefox での方だけ表示されてなかったことが判明😱(見えてないだけで押すことはできる)

検証してみた所、インラインコードだと問題なく表示されるが、use タグで呼び出すと表示されないという謎の現象。何ででしょう？？

<svg style='display:none' xmlns='http://www.w3.org/2000/svg'>
  <symbol id="moon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></symbol>
</svg>
<svg><use href='#moon'/></svg>

← Firefox では見えてないはず。

まあどうしても Feather が使いたいというわけでもないので原因は調べてません。インラインコードで設置し直してもよかったんだけど、複数の記事で use タグでアイコンを使ってて書き直すのが面倒だったので、結局 Font Awesome に戻しました(^^;

追記: 試しに別のテーマに変えてみたところ Firefox でも表示されました。ということは当ブログ独自のカスタマイズに問題あり？ということになりますかね(^^; また気が向いたら検証続けます。

以上です。また小ネタが溜まったら纏めます。