てがろぐの隠す機能は内容が畳まれてボタンのみになる為、展開すると後続の文字の位置がズレる。
文章中の伏せ字として使えるように、要素のサイズは確保して塗り潰しで隠すタイプを追加した。
機能
- 文章中の一部を塗り潰しで隠す
- マウスホバー(モバイルではタップ)で内容を表示する
- 内容はOGPとRSSに出力しない
- 標準のボタンで畳むタイプと使い分ける
CSSと自由装飾で実装する。
続きを読む てがろぐに塗り潰しで隠す機能を追加てがろぐの隠す機能は内容が畳まれてボタンのみになる為、展開すると後続の文字の位置がズレる。
文章中の伏せ字として使えるように、要素のサイズは確保して塗り潰しで隠すタイプを追加した。
CSSと自由装飾で実装する。
続きを読む てがろぐに塗り潰しで隠す機能を追加編集画面は専用のedit.cssとedit.jsが必要で、インラインCSSも書き込まれているので打消しが面倒。
インラインCSSを削除してCSSを一本化した。
edit.js
に以下を追加document.addEventListener('DOMContentLoaded', () => {
document.head.querySelectorAll('style').forEach((style) => {
style.remove();
});
});
edit.css
を以下のインポート文のみにするか、メインCSSをedit.cssにする@import "tegalog.css"
てがろぐに導入したFancybox v5をWordPressにも導入。
(共にPhotoSwipeからの移行)
プラグインのFancyBox for WordPressはVerが古く更新も無いので自分で実装した。
劣化が目立つ赤い画像を綺麗に圧縮したい。
よりよい軽量化の模索。
本家のWebアプリはCLI用パラメータが取得出来なくなっている為、フォークを使う。
続きを読む AVIFとMozJpegで赤を圧縮PhotoSwipeとてがろぐの相性が悪く、Fancyboxに変更した。
(PhotoSwipeは独自の画像サイズ指定タグが必要だが、ページ読み込み後にJSで付与する場合は処理が遅れる場合がある。てがろぐ本体に処理を追加する場合は更新の度に手動マージが必要で、AVIFやWebPのサイズは取得出来ない)
PhotoSwipeと比較して、
てがろぐ公式の実装サンプルはFancybox v3用の解説だった為、v5設置の覚書。
続きを読む てがろぐでFancybox v5を使うノンバーDPを楽しく踏めるLv8~12の曲リスト
Squoosh-CLIで画像圧縮 (MozJpeg)の時点ではブラウザ対応状況が芳しくなく見送ったが、EdgeもWordPress6.5も対応したのでAVIF移行の機運。
本家Squoosh-CLI(開発終了)はAVIF変換時にエラーが出た為、フォークに移行した。
https://www.npmjs.com/package/@frostoven/squoosh-cli
Calckeyからリブランド後、主要開発者がプロジェクト放棄してしまったFirefish。
まだ適当な移行先が見付からず、残されたメンバーでセキュリティ関連等の更新はされている為、アプデ手順の覚書。
移行や更新前にRustのバージョンアップやPGroongaのインストールが必要になる。