メインコンテンツまで移動する

Web Creator's Blog.

Wrangler を使い Cloudflare Pages に直接アップロード

  • JavaScript

静的サイトを Cloudflare Pages で公開する時に Wrangler を使って成果物を直接アップロードする方法です。

Nunjucks で作る JSON で末尾以外にカンマを出力する方法

  • JavaScript

JSON では末尾のカンマは許容されていないため、末尾以外にカンマを出力しなければなりません。Nunjucks では、主に 3 つの方法で末尾以外にカンマを出力できます。

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

  • JavaScript

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

Nunjucks での文字列と配列の変換

  • JavaScript

JavaScript テンプレートエンジン Nunjucks で文字列と配列を変換する split と join の紹介です。

WordPress に reCAPTCHA v3 をプラグインを使わず実装

  • WordPress

WordPress のコメントフォームとログインフォーム、パスワードリセット手順のリクエストフォームに reCAPTCHA v3 を実装するカスタマイズです。

Twitter と Instagram の遅延読み込みで WordPress を高速化

  • WordPress
  • 高速化

WordPress の表示を速くするカスタマイズです。Intersection Observer API を使い、Twitter と Instagram の埋め込みを遅延で読み込みます。

Eleventy での Sass の使用と CSS の軽量化

  • JavaScript

静的サイトジェネレーター Eleventy で Sass 環境を構築する方法です。また、未使用の CSS の削除と CSS の縮小も行います。

Eleventy の collections を Nunjucks で dump する

  • JavaScript

静的サイトジェネレーターの Eleventy の collections に Nunjucks の dump を使うとエラーが出ました。その対処法です。

Sass と clamp() で作る可変のフォントサイズ

  • CSS

CSS の clamp() を使えば、ビューポートに応じて大きさが変わるフォントサイズを指定できます。その clamp() を生成する Sass の独自関数です。

amp-script で button タグの属性の変更が HTML に反映されない

  • AMP

class や aria-* などの属性を amp-script で追加や更新、削除をする場合、button タグの HTML に変更が反映されません。

CSS で作るぼかした円のアクセント

  • CSS

サイトのアクセントとしてよく見かける円をぼかす CSS の紹介です。

CSS で円をぼかして作るグラデーション

  • CSS

CSS の filter: blur() を使い、円をぼかして作るグラデーションの紹介です。contrast() などで色の調整もできます。

アクティブなメニューの外側の角を丸くする CSS

  • CSS

「アクティブなメニューやタブ」と「その他の部分」の境界の角を丸くする CSS の紹介です。box-shadow を使い、湾曲を表現します。

Google アナリティクスのデータを使い WordPress で人気ランキングを作る

  • WordPress

アナリティクス Reporting API v4 を使用し、Google アナリティクスの計測結果に基づいた人気ランキングを WordPress で作成する方法。

WordPress プラグインの AMP のコメントフォームで reCAPTCHA を使用する

  • AMP

WordPress プラグインの AMP を使用しているサイトのコメントフォームに reCAPTCHA v3 を導入する方法の紹介です。

マテリアルデザインにおける alt テキスト

  • HTML

画像の特徴を示す情報を文脈に沿ってキーワードを含めながら 125 文字以内で説明するように推奨されています。また、画像を説明するキャプションや本文がある場合は省略できます。

CSS と JavaScript の縮小化 PHP ライブラリ「Minify」

  • 高速化

PHP ライブラリ Minify を使えば、CSS と JavaScript を簡単に縮小できます。 縮小化と同時に複数のファイルの結合も可能です。

さらなる高速表示のための AMP ページの最適化

  • AMP

AMP ページは、必ずしも AMP キャッシュで表示されるわけではありません。しかし、最適化により常に高速な表示が可能です。

AMP に最適な PWA を 1 行で実装する AMP Service Worker の使い方

  • AMP

AMP ページで簡単に Service Worker を利用できる AMP Service Worker の紹介です。AMP ランタイムや HTML などをキャッシュできます。

ナビゲーションの構造化データ SiteNavigationElement の書き方

  • HTML

Schema.org の SiteNavigationElement のマークアップ方法の解説です。「ナビゲーションセクションが対象」「ナビゲーションリンクは WebPage もしくは WebPage のサブタイプを使う」など。

WordPress の AMP ページに amp-list の無限スクロールを実装する方法

  • WordPress
  • AMP

WordPress の AMP ページにおいて、amp-list で作る動的なリストの無限スクロールを実装する方法の紹介です。関連記事や検索結果ページなどのリストに適しています。

AMP でヘッダーなどを下スクロールで非表示・上スクロールで再表示

  • AMP

AMP ページにて、下スクロールで非表示になり上スクロールで表示するヘッダーやフッターボトムの作り方の紹介。amp-fx-collection を使います。

AMP の第 3 の CSS 指定方法 amp-keyframes

  • AMP

AMP の amp-keyframes 属性を持つ style タグの説明です。@keyframes 専用、CSS サイズ制限の対象外などの特徴があります。

class を追加する Cocoon のフィルターフックのまとめ

  • WordPress

WordPressテーマ Cocoon に用意されている class を追加するフィルターフックのまとめです。全部で 20 以上あります。

Cocoon のフィルターフックでビジュアルエディターをカスタマイズ

  • WordPress

WordPress テーマ Cocoon のフィルターフックを使い、ビジュアルエディターに独自の「スタイル」を追加するカスタマイズの紹介です。

amp-list に構造化データのマークアップはできない

  • AMP

amp-list で出力するデータに schema.org で構造化データをマークアップしようと試みましたが、方法が分かりませんでした。行ったことや検証したことを書き留めます。

Google Fonts を preload で先読みし最適化

  • フォント
  • 高速化

Google Fonts を preload で先読みし、サイト表示を高速化する方法の紹介です。また、コアウェブバイタルの改善ができます。

AMP ページに Google フォームを埋め込む方法

  • AMP

Google フォームを AMP ページに埋め込む方法の紹介。使用するコンポーネントは amp-iframe です。

CSS が柔軟に!AMP が style 属性のインラインスタイルに対応

  • AMP

2018 年 7 月に AMP が style 属性のインラインスタイルに対応しました。style 属性を使用しても AMP エラーは出ません。

2 枚の画像をスライドで比較できる amp-image-slider の使い方

  • AMP

amp-image-slider を使えば、AMP で 2 枚の画像をスライドで比較できます。ビフォーアフター画像などに最適です。

AMP でスムーススクロールを実装できる scrollTo の使い方

  • AMP

要素のレイアウトを指定する AMP の layout 属性に追加された intrinsic の紹介。簡単にレスポンシブ対応が可能です。

AMP の layout 属性に intrinsic が追加

  • AMP

要素のレイアウトを指定する AMP の layout 属性に追加された intrinsic の紹介。簡単にレスポンシブ対応が可能です。

【Cocoon】AMP でスワイプ対応の画像拡大ギャラリーを実装する方法

  • WordPress
  • AMP

WordPress テーマ Cocoon の AMP ページに画像の「拡大表示」「ギャラリー表示」「スワイプ操作によるスライド表示」を実装するカスタマイズの紹介です。

AMP で toggle のように class を切り替える 2 つの方法

  • AMP

JavaScript の classList.toggle() と同じように AMP ページで class を動的に変更する方法です。

WordPress を数分で PWA 化するプラグイン Super Progressive Web Apps

  • WordPress

簡単に PWA を実装できる WordPress プラグイン「Super Progressive Web Apps」(SuperPWA)の設定方法を含めた使い方の紹介です。

【Cocoon】AMP で画像拡大表示のライトボックスを実装する方法

  • WordPress
  • AMP

WordPress テーマ Cocoon の AMP ページに Lightbox と同じような画像拡大表示を実装する方法の紹介です。

下スクロールで消える・上スクロールで現れる JavaScript

  • JavaScript

サイトを可能な限り重くせず、固定ヘッダーなどが「下スクロールで消える」「上スクロールで現れる」アニメーションを実装する方法です。

classList.toggle で切り替えた class を sessionStorage で維持

  • JavaScript

Web Storage API の sessionStorage を使い、classList.toggle で切り替えた class をページを移動しても再読み込みしても維持する方法。

Cocoon の一覧リストにスクロールアニメーションを適用するカスタマイズ

  • WordPress

WordPress テーマ Cocoon の一覧リストのカードが、スクロールで画面に入るとふんわりと表示するアニメーションの実装方法の紹介です。

Intersection observer によるスクロールアニメーション

  • JavaScript

Intersection Observer API を使い、スクロールで表示領域に入った要素にブラウザに負荷をかけずアニメーションをつける方法の紹介です。

AMP でのアドセンス広告のサイズを画面幅に応じて変更する方法

  • AMP

amp-ad タグに media 属性を指定し、AMP に設置する Google Adsense のサイズを画面幅に合わせて変更する方法の紹介です。

画像を徐々に表示する CSS アニメーション

  • CSS

「左から徐々に表示」「上下から徐々に表示」など画像を徐々に表示する CSS を使ったアニメーションの紹介です。

グラデーションを使った見出しのサンプル 10 個

  • CSS

グラデーションを使った見出しデザインのサンプル集。CSS を紹介しています。

ホバー時に背景色を単色からグラデーションにする CSS の指定方法

  • CSS

単色の背景色がグラデーションに変化するホバーエフェクトの CSS 指定方法の紹介です。

WordPress に Google 風の無限スクロールを実装

  • WordPress

JavaScript ライブラリ Infinite Scroll を使用し、WordPress に無限スクロールを実装する方法の紹介です。

インフィード広告を Cocoon と Simplicity の関連記事の中に設置

  • WordPress

WordPress テーマ Cocoon と Simplicity の関連記事リストの中間に Google AdSense のインフィード広告を設置するカスタマイズの紹介です。

サイトカラーに最適な色とグラデーションを生成する「ColorSpace」

  • CSS

指定した色と相性の良い色を提案するカラーパレット生成ツール「ColorSpace」の紹介です。グラデーションを生成する機能もあります。

AMP に「ページトップへ戻る」ボタンを設置する方法

  • AMP
  • WordPress

amp-animation と amp-position-observer を使い、AMPページ に「ページトップへ戻る」ボタンを設置する方法の紹介です。

重要ではない CSS を link タグだけで非同期で読み込む方法

  • 高速化

link タグに 2 つの属性を付けるだけでスタイルシートを非同期で読み込むことができます。

WordPress を PWA に!ホーム画面への追加機能を実装

  • WordPress

WordPress に PWA の「ホーム画面への追加」機能を実装する方法の紹介です。サイトをウェブアプリにできます。

WordPress のユーザー名を隠しセキュリティ強化

  • WordPress

WordPress のセキュリティを高める効果があるユーザー名を隠す方法の紹介です。

サイトを高速にする WordPress プラグイン Plugin Load Filter

  • WordPress
  • 高速化

使用中のプラグインの読み込みをページ単位で制御し、サイトを簡単に高速化するWordPress プラグイン Plugin Load Filter の紹介です。

デザイン性の高いメンテナンスページを作る WordPress プラグイン

  • WordPress

簡単におしゃれなメンテナンスページを作成できる「Coming Soon Page & Maintenance Mode by SeedProd」の使い方の解説です。

WordPress プラグインを使い CSS をインライン化する方法

  • WordPress
  • 高速化

Autoptimize などのプラグインを使い、WordPress で CSS をインライン化する方法の紹介です。

border-image でグラデーションのボーダー

  • CSS

グラデーションのボーダーを簡単に指定できる CSS プロパティ border-image の説明です。

Simplicity アップデート専用テーマ「Smooth Update」

  • WordPress

WordPress テーマ Simplicity のアップデート専用の無料テーマ「Smooth Update」の説明ページです。

HTML エラーを出さず複数の Google Fonts を 1 つの link タグで読み込み

  • フォント

16 進数の %7C を使えば、複数の Google Fonts を 1 つの link タグで HTML エラーを出さず読み込めます。

WordPress で video タグの動画を AMP に対応する方法

  • WordPress
  • AMP

amp-video を使い、WordPress のメディアにアップロードした動画を AMP に対応する方法の紹介です。

WordPress に reCAPTCHA v2 をプラグインを使わず導入する方法

  • WordPress

スパムコメントを防ぐ reCAPTCHA v2 を WordPress にプラグインを使わず設置する方法の紹介です。

Simplicity に画像付き SNS フォローエリアを設置するカスタマイズ

  • WordPress
  • AMP

WordPress テーマ Simplicity に画像付きの SNS フォローボタンを設置するカスタマイズの紹介です。AMP にも対応しています。

Simplicity で画像をスマホの画面幅いっぱいに表示する方法

  • WordPress
  • CSS

WordPress テーマ Simplicity で本文中の画像をモバイル端末の画面幅いっぱいに表示するカスタマイズの紹介です。

Simplicity のインデックスリストのサムネイルを左右交互に配置するカスタマイズ

  • WordPress
  • CSS

Simplicity のインデックスリストのサムネイルが、左右交互に並ぶ CSS カスタマイズの紹介です。

Simplicity の AMP に WordPress のコメント欄を設置するカスタマイズ

  • WordPress
  • AMP

Simplicity の AMP ページに、WordPress のコメントリストを表示するカスタマイズの紹介です。

WordPress の AMP ページに検索フォームを設置する方法

  • WordPress
  • AMP

WordPress の AMPページに検索フォームを設置する方法の紹介です。拡張コンポーネント amp-form を使用します。

amp-sidebar で WordPress の AMP にスライドメニューを設置

  • WordPress
  • AMP

WordPress の AMP ページにスライドメニューを実装する方法の紹介です。拡張コンポーネント amp-sidebar を使用します。

画像の CSS ホバーエフェクト

  • CSS

画像に対する CSS のホバーエフェクトの紹介です。

Simplicity のページネーションを使いやすくするカスタマイズ

  • WordPress

Simplicity のページネーションを使いやすくするカスタマイズの紹介です。モバイルでの使いやすさを考慮しました。

AMP ページで Google Fonts を使う 2 つの方法

  • フォント
  • AMP

AMP ページで Google Fonts を使う方法の紹介です。link タグで読み込む方法とサーバーにフォントファイルを設置し preload で読み込む方法の 2 つがあります。

Simplicity の AMP でシェアボタンのアイコンとフォローボタンを表示

  • WordPress
  • AMP

Simplicity の AMP ページで「シェアボタンのアイコン」と「フォローボタン」を表示するカスタマイズの紹介です。

Simplicity の 2 列・3 列の一覧リストの行をそろえる方法

  • WordPress
  • CSS

Simplicity の一覧リストのスタイル「タイル 2列」と「タイル 3列」の行をそろえる CSS のカスタマイズです。

Simplicity の検索機能を強化するカスタマイズ

  • WordPress

Simplicity の検索機能を強化するカスタマイズ。検索フォームや検索結果ページをより使いやすくできます。

WordPress の jQuery を Google の CDN に変更し高速化

  • WordPress
  • 高速化

WordPress に同梱の jQuery を Google Hosted Libraries からの読み込みに変更し、サイト表示速度を高速化する方法です。

Web Font Loader で Google Fonts を非同期で読み込みサイト速度を改善

  • 高速化
  • フォント

サイト表示速度を遅くせず Google Fonts を利用できる Web Font Loader の使い方の説明です。テキストがちらつく FOUT を抑えることもできます。

Simplicity のメニュー下に人気記事を表示するカスタマイズ

  • WordPress

Simplicity のグローバルメニューの下に、WordPress Popular Posts プラグインの人気記事を設置するカスタマイズです。

Simplicity のメニューをカスタマイズ

  • WordPress
  • CSS

Simplicity のメニューのカスタマイズです。「プラグイン使わず Font Awesome アイコンを表示する」などを解説しています。

WordPress のコメントフォームの上のテキストを変更する方法

  • WordPress

WordPress のコメントフォームの上に表示される「メールアドレスが公開されることはありません。 * が付いている欄は必須項目です」を変更するカスタマイズです。

WordPress プラグインの CSS を削除しサイト高速化

  • WordPress
  • 高速化

レンダリングをブロックする WordPress プラグインの CSS を削除するカスタマイズ。わずか 2 ステップで、サイトを高速化できます。

Simplicity のメニュー下にウィジェットエリアを追加

  • WordPress

Simplicity のメニュー下にウィジェットエリアを追加するカスタマイズ。人気記事や画像などを設置すれば、サイトの見た目が大きく変わります。