2021

親要素全体をリンクのクリック範囲とするのはタイルデザインなどのウェブサイトでは多用する技術です。しかしタイルデザイン全体のどこをクリックしてもリンクにつながるようにするには一工夫が必要で、ネットを見てもいくつかの方法があるようです。方法1 当サイトで始めに使っていたのは下記の方法でした。ネット上でも一番よく見られる方法ではないかと

pukiwikiではdescriptionプラグインを使えばmetaタグに記載するdescriptionの中身をスキンに埋め込まれている$head_tagに挿入することができます。しかし全てのページにこのプラグインを使っているわけではないので、このプラグインを使っていないページでは自動的に本文の最初の指定文字数だけをmetaタグにdes

pukiwiki markdown sonotsさんのmarkdownプラグイン（markdown.inc.php）を使えばPukiwikiでもmarkdownを利用することができます。このプラグインでは通常はMarkdown Classicを利用しますが、markdown.phpの代わりにmarkdown Extra.phpを入れるこ

lazyload（画像の遅延読み込み）するためにlazysizes.jsを使うとスペースホルダーによりCLS （Cumulative Layout Shift）が発生する問題に関して記載するページです。このサイトも遅延読み込みのためにlazysizes.jsを使ってスペースホルダーを使うとCLSが発生する問題について長らく悩まされてき

Google Analyticsを設置するとPagespeed Insightのスコアが落ちてしまうので、Google Analyticsのスクリプトを遅延読み込み（lazyload）するようにしてスコア低下を回避します。

pukiwikiのrefプラグイン（ref.inc.php）はページに画像を貼り付ける時に重宝します。このプラグインに少し手を入れることでwebp fallbackを実現したりしていました。しかし、画像のサイズを取得する設定にしているとこのプラグインは若干重いので、ローカルサーバーの画像を表示するときは相対パスに変換することで若干速

Google Webフォントなどを使うとサイトのデザインのカスタマイズ性が向上しますが、どうしてもフォントダウンロードのためのタイムラグが生じてしまい、これによりPagespeed Insightのスコアが低下してしまいます。スコアを落とさないように工夫しながらのWebフォントの利用法を考えます。

pukiwikiのjsonld.inc.phpプラグインは簡単にpukiwikiにJSON-LDの構造化データを追加することができて重宝していましたが、短縮URLプラグインを使っているとパンくずリストのURLが正しく表示できず困っていましたので、ここに改変内容を記載しておきます。jsonld.inc.phpと短縮URLについてはこち