HTMLだけでwebPやAVIFを読み込む
別の記事でJavaScriptを使ってwebPを読み込むスクリプトを書きましたが、Webサイトの規模が大きく画像も沢山あると、HTMLも修正しなければいけない…
CLSの改善 : imgタグにはwidthとheightを必ず付ける
当たり前の話ですが、画像サイズを可変にしたいときなどは、ついwidth="100%"と付けてheightを指定しないといった方法を取る人が…
JavaScript : 画像をwebPにしてウェブサイトの読み込みを早くする
ウェブサイトを作成する時にはページの読み込み速度にも気を使います。画像形式はjpgやpng,gifが主流ですが、webPにすることでファイルサイズを軽量化する…
JavaScript : テキストを順番に表示するスクリプト
キャッチコピーなど少ない文字を一文字ずつ表示したい時に使うスクリプトです。 単に順番に表示するだけでなく、下からスッと出現するようなサンプルです。 CSSでは…
WordPress: 記事を読む目安時間を表示する
Wordpressのブログ記事で本文をどれくらいの時間で読めるかの目安を表示するスクリプトです。 この記事の上に表示されている部分です。 レビューブログやニュ…
Google Apps Script : 住所を分割するスクリプト
住所を入力するときは１つのセルで書くほうが楽なのですが、集計するときはセルが分割されていると便利。 ということで、困っている人がいたのでGoogle Apps…
JavaScript & PHP: 郵便番号から住所を自動入力する
問い合わせフォームなどでユーザーに住所を入力してもらうときには、郵便番号から他のフィールドに自動入力させることでユーザビリティが向上します。 zipcloud…
JavaScript: 画像の遅延読み込み
スクロールされた時に画像を読み込むJavaScriptです。 jQueryなどを使ったほうがスクリプト自体は簡単に組めますが、jQueryのライブラリの読み込…
PHP:ディレクトリにある画像をランダムに表示する
画像をランダムに表示するスクリプトです。 画像の数が少なくて更新頻度も少なければもっと別の書き方もありますが、画像の差し替え頻度が多い場合など、別の人に画像の…
WordPress: カスタムポストの一覧に使用しているテンプレートファイル名を表示する
仕事でとにかく大量のテンプレートを作成する羽目になって、後からテンプレートこれをあれ、あれをこれ、などと訳のわからないことをやらされていて、ページ数は大量でど…