昔からある機能ですが、技術系の記事では今でもかなり便利です。

特にRandom Circuitsみたいに、

管理画面のスクリーンショット。

PCの設定画面。

機材写真。

配線。

細かいUI。

こういう画像が多くなるサイトでは、拡大できた方が圧倒的に見やすい。

今回はSimple Lightboxを導入

Lightbox自体をテーマに直接組み込む方法もあります。

ただ、今回は機能をテーマから分離したかったので、Simple Lightboxを使いました。

テーマを変えても画像の表示機能は残るし、管理も楽です。

画像はメディアファイルへリンク

使い方は簡単。

WordPressの画像ブロックを追加。

リンク先を「メディアファイル」にする。

これだけ。

その画像をクリックするとLightboxで開きます。

全画像をLightboxにする必要はない

個人的には、全部の画像を無条件で拡大できるようにする必要はないと思っています。

装飾用画像や小さいアイコンまでLightboxになると、逆に邪魔。

拡大して見てほしいスクリーンショットや写真だけ、メディアファイルリンクにする。

この運用が一番自然です。

スマホでも便利

PCでは画像をある程度大きく表示できますが、スマホではどうしても縮小されます。

そのときLightboxで拡大できると、設定画面の細かい文字も見やすい。

技術メモ系ブログには、やっぱり相性がいい機能です。

The post WordPressの画像はLightboxにした方がいいのか first appeared on Random Circuits.

今回Random Circuits用に作った画像も、見た目はきれいですが、そのままPNGで置くと結構重い。

そこでWordPress側でWebPを自動配信することにしました。

今回使ったのは Converter for Media。

PNGを消すわけではない

最初に少し分かりにくかったのがここ。

WordPressのHTMLを見ると、画像URLは普通に

image.png

のままです。

なので最初は、

「変換されてない？」

と思いました。

でもChromeの開発者ツールでNetworkを確認すると、Typeは webp。

つまりURLはPNGのままでも、実際にブラウザへ送られているデータはWebPになっていました。

確認はElementsではなくNetwork

確認するときは、

Chromeの開発者ツールを開く。

Networkタブを開く。

Imgだけ表示する。

対象画像を見る。

Typeが webp になっていればOK。

HTML上の拡張子だけを見て判断すると少し混乱します。

設定はかなりシンプル

Random Circuitsでは、

WebPを使用。

/uploads のみ対象。

新規画像の自動変換をON。

既存画像は一括最適化。

この設定で使っています。

テーマやプラグイン内の画像まで全部変換する必要はないので、uploadsだけで十分だと思います。

AI画像とは相性がいい

AI生成画像はPNGで出力されることも多く、サイズが大きくなりがちです。

ブログに何枚も使うなら、そのまま置くよりWebP配信した方がかなり扱いやすい。

元画像を残しながら軽い形式を配信できるので、安全面でも楽です。

The post 画像をPNGのまま置かず、WordPressでWebP配信する first appeared on Random Circuits.