Web 制作
Windows で Safari のブラウザテストをする
Playwright を使い、Windows で Safari のブラウザテストをする方法です。WebKit ブラウザをインストールでき、デベロッパーツールも使えます。
Web 制作
Web 制作
Nunjucks での文字列と配列の変換
JavaScript テンプレートエンジン Nunjucks で文字列と配列を変換する split と join の紹介です。
Web 制作
WordPress に reCAPTCHA v3 をプラグインを使わず実装
WordPress のコメントフォームとログインフォーム、パスワードリセット手順のリクエストフォームに reCAPTCHA v3 を実装するカスタマイズです。
Web 制作
Twitter と Instagram の遅延読み込みで WordPress を高速化
WordPress の表示を速くするカスタマイズです。Intersection Observer API を使い、Twitter と Instagram の埋め込みを遅延で読み込みます。
Web 制作
Eleventy での Sass の使用と CSS の軽量化
静的サイトジェネレーター Eleventy で Sass 環境を構築する方法です。また、未使用の CSS の削除と CSS の縮小も行います。
Web 制作
Eleventy の collections を Nunjucks で dump する
静的サイトジェネレーターの Eleventy の collections に Nunjucks の dump を使うとエラーが出ました。その対処法です。
Web 制作
Sass と clamp() で作る可変のフォントサイズ
CSS の clamp() を使えば、ビューポートに応じて大きさが変わるフォントサイズを指定できます。その clamp() を生成する Sass の独自関数です。
Web 制作
amp-script で button タグの属性の変更が HTML に反映されない
class や aria-* などの属性を amp-script で追加や更新、削除をする場合、button タグの HTML に変更が反映されません。
Web 制作
CSS で作るぼかした円のアクセント
サイトのアクセントとしてよく見かける円をぼかす CSS の紹介です。
Web 制作
CSS で円をぼかして作るグラデーション
CSS の filter: blur() を使い、円をぼかして作るグラデーションの紹介です。contrast() などで色の調整もできます。
Web 制作
アクティブなメニューの外側の角を丸くする CSS
「アクティブなメニューやタブ」と「その他の部分」の境界の角を丸くする CSS の紹介です。box-shadow を使い、湾曲を表現します。
Web 制作
Google アナリティクスのデータを使い WordPress で人気ランキングを作る
アナリティクス Reporting API v4 を使用し、Google アナリティクスの計測結果に基づいた人気ランキングを WordPress で作成する方法。
Web 制作
WordPress プラグインの AMP のコメントフォームで reCAPTCHA を使用する
WordPress プラグインの AMP を使用しているサイトのコメントフォームに reCAPTCHA v3 を導入する方法の紹介です。
Web 制作
マテリアルデザインにおける alt テキスト
画像の特徴を示す情報を文脈に沿ってキーワードを含めながら 125 文字以内で説明するように推奨されています。また、画像を説明するキャプションや本文がある場合は省略できます。
Web 制作
CSS と JavaScript の縮小化 PHP ライブラリ「Minify」
PHP ライブラリ「Minify」を使えば、CSS と JavaScript を簡単に縮小できます。 縮小化と同時に複数のファイルの結合も可能です。
Web 制作
さらなる高速表示のための AMP ページの最適化
AMP ページは、必ずしも AMP キャッシュで表示されるわけではありません。しかし、最適化により常に高速な表示が可能です。
Web 制作
AMP に最適な PWA を 1 行で実装する「AMP Service Worker」の使い方
AMP ページで簡単に Service Worker を利用できる AMP Service Worker の紹介です。AMP ランタイムや HTML などをキャッシュできます。
Web 制作
ナビゲーションの構造化データ SiteNavigationElement の書き方
Schema.org の SiteNavigationElement のマークアップ方法の解説です。「ナビゲーションセクションが対象」「ナビゲーションリンクは WebPage もしくは WebPage のサブタイプを使う」など。
Web 制作
WordPress の AMP ページに amp-list の無限スクロールを実装する方法
WordPress の AMP ページにて、amp-list で作る動的なリストの無限スクロールを実装する方法の紹介。関連記事や検索結果ページなどのリストに適しています。
Web 制作
AMP でヘッダーなどを下スクロールで非表示・上スクロールで再表示
AMP ページにて、下スクロールで非表示になり上スクロールで表示するヘッダーやフッターボトムの作り方の紹介。amp-fx-collection を使います。
Web 制作
AMP の第 3 の CSS 指定方法 amp-keyframes
AMP の amp-keyframes 属性を持つ style タグの説明です。@keyframes 専用、CSS サイズ制限の対象外などの特徴があります。