WordPressの画像をwebpに自動変換できるConverter for Mediaを導入した

WP webp ConverterforMedia 1

WordPressブログのwebp対応に最適なプラグインがあったので乗り換え。

Converter for Media」というプラグインで、無料でもwebp変換ができて、有料ならAVIFの変換もできる。変換後は自動的に記事の画像ファイルがwebp(ファイルの拡張子はjpgのまま)に変更されるので、ほとんど何もしなくても良い。

続きを読む →

[CSS] 動画の貼り付けコードをレスポンシブに最適化させる

YouTubeをはじめ様々な動画サイトの貼り付けコードは、そのまま貼り付けるとサイズ調整されずに、レスポンシブレイアウトが壊れてしまう場合があります。レスポンシブサイトに最適化させるには、cssでコンテナを作りwidthをピクセル指定からパーセント指定にしてやります。

以前紹介したFitVids.JSを使う方法(とコンテナを使う方法)では、実質、YouTubeの貼り付けコードのみに対応していましたが、iframe以外にobjectembedにも対応させることで、幅広い貼り付けコードをレスポンシブサイトの表示を崩さずに貼り付けることができます。

続きを読む →

[CSS/JS] ウィンドウサイズでフォントサイズを最適化するJS

ウィンドウの横幅(width)によって、font-size と line-height を変更して表示するという、レスポンシブレイアウトでは有効なJS。

最大フォントサイズと最小フォントサイズを指定できるので、これをキッチリと見やすいサイズで指定しておけば、小さくて文字が読めないといった問題は起きません。

[ FlowType.JS ]