カスタマイズ

JavaScriptのclassList.toggleで切り替えたclassをWeb Storage の sessionStorageで維持

toggle で切り替えた class を sessionStorage で維持する方法

サイト全体

WordPressテーマCocoonの一覧リストのカードが表示されると動くアニメーション

Cocoon の一覧リストに心地よいスクロールアニメーション

サイト全体

Intersection observerを使い可視範囲に入った要素にアニメーション

ブラウザにやさしくスクロールで画面に入った要素にアニメーション

サイト全体

GooglebotにCSS変数を適用する方法

CSS 変数に未対応の Google クローラに PHP で対策

サイト全体

AMPのmedia属性を使い画面幅に最適なサイズのGoogle AdSenseにする方法

AMP のアドセンス広告を最適化!画面幅に合わせてサイズを変更

サイト全体

画像が際立つCSSアニメーションのサンプル

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

デザイン

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

印象に残るグラデーションの見出しサンプル 10 個

デザイン

ホバーで背景色をグラデーションにする方法

背景色が単色からグラデーションへ変化するホバーエフェクト

デザイン

Infinite Scrollで無限スクロールを実装する方法

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

サイト全体

インフィード広告を関連記事リストに設置するカスタマイズ

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

サイト全体

エラーを出さずSimplicityのAMPページでウィジェットを使用

Simplicity の AMP でウィジェットを使う方法

サイト全体

ページトップへ戻るボタンをAMPに設置するやり方

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

サイト全体

loadCSSを使いCSSを非同期で読み込み

全ブラウザ対応!preload で CSS を非同期で読み込み高速化

サイト全体

WordPressにPWAのホーム画面への追加を導入

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

サイト全体

WordPressのユーザー名を隠す方法

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

サイト全体

Autoptimizeプラグインを使いCSSをインライン化

コピペだけで高速に! CSS のインライン化

高速化

ボーダーにグラデーションを指定するCSS

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

デザイン

2つ以上のGoogle Fontsを1つのlinkタグで読み込む正しい方法

HTML エラーなしで複数の Google Fonts を 1つの link タグで読み込み

フォント

WordPressでvideoタグをamp-videoに変換

WordPress で video タグを AMP に対応

デザイン

高速でNoto Sans日本語を使う方法

高速で Noto Sans 日本語を使う方法

フォント

WordPressにreCAPTCHAを設置

WordPress に reCAPTCHA をプラグインなしで導入

コメント欄

サムネイル画像付きSNSフォローボタンをAMPページに設置するカスタマイズ

AMP にサムネイル画像付きの SNS フォローボタンを設置

SNS

サムネイル画像付きSNSフォローボタン

プラグインなしでサムネイル画像付きの SNS フォローボタンを設置

SNS

画像をスマホの画面幅いっぱいに表示

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

デザイン

これ以上は記事がありません

読み込むページがありません