FirstLayout

Web 制作

Web 制作

Windows で Safari のブラウザテストをする

Playwright を使い、Windows で Safari のブラウザテストをする方法です。WebKit ブラウザをインストールでき、デベロッパーツールも使えます。

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 サイズ制限の対象外などの特徴があります。

メニュー 閉じる 検索 記事を読む Facebook Twitter はてなブックマーク Pocket LINE ダウンロード 全ての記事 Web制作 便利ツール