Web 制作リファレンス / Web Design Leaves

Web 制作リファレンス（＋α）

Web 制作に関する参考資料です。どなたかのご参考になれば何よりです。

更新情報

New CSS clip-path の使い方: 2021年01月18日; CSS clip-path の基本的な使い方について。基本シェイプを使った切り抜きや clip-source で SVG の clipPath 要素の定義を参照してクリッピングする方法、CSS clip-path ジェネレーター（Clippy）の使い方、geometry-box などについての覚書です。

New HTML SVG の基本的な使い方: 2020年12月24日; SVG の基本的な使い方に関する覚書。HTML ファイルに直接 svg 要素を記述するインライン SVG の使い方（viewBox の説明や動作確認サンプル、基本図形要素、fill と stroke、スタイルの設定、グループ化を行う g 要素や再利用可能な部品の定義に使う defs 要素、図形などのひな形を定義するための symbol 要素など）や SVG ファイルの最適化などの基本的な事項について。

New CSS Grid（display:grid）の使い方: 2020年12月04日; CSS Grid（display:grid）の基本的な使い方。グリッドの作成（コンテナーやトラックの定義、アイテムの配置）や関連する grid-template や grid-column、grid-row などのプロパティや repeat()、minmax() 関数、新しく導入された fr 単位、暗黙的及び明示的なグリッド、自動配置アルゴリズムなどについての覚書です。

New Webpack を使って Bootstrap 5 をインストール: 2020年11月14日; Webpack を使って Bootstrap 5 をインストールする方法の覚書（メモ）です。現時点（2020年11月14日）では Bootstrap 5 は alpha 版です。Bootstrap 5 を使うのに必要なモジュールやローダー（主に Sass 関連）のインストール、webpack.config.js の設定、package.json への npm script の追加、スタイルのカスタマイズや jQery の使い方、webpack-dev-server を使った開発サーバの設定方法などについて。

New webpack を使って Sass をコンパイルする方法: 2020年11月09日; webpack を使って Sass をコンパイルする方法の覚書です。css-loader、sass-loader、sass（Dart Sass）と MiniCssExtractPlugin を使った基本的なコンパイルの方法やソースマップの出力の制御、clean-webpack-plugin、file-loader や postCSS の Autoprefixer の使い方、webpack-dev-server を使った開発サーバの設定方法などについて。

New WordPress Code-Prettify でシンタックスハイライトするブロックの作成: 2020年11月02日; WordPress のブロックエディタ Gutenberg で記述したコードを Code-Prettify を使ってシンタックスハイライトするブロックを作成する方法の覚書です。

New WordPress スライダーでアイキャッチ画像を表示するブロックを作成: 2020年10月14日; WordPress のブロックエディタ Gutenberg でアイキャッチ画像をスライダーで表示するブロックを作成する方法についての覚書です。ブロックはダイナミックブロックで作成します。この例では withSelect と getEntityRecords を使って全てのカテゴリーを取得してそのリストを表示し、ユーザーが選択したカテゴリーの投稿のアイキャッチ画像を表示します。

New WordPress スライダーを表示するブロックの作成: 2020年10月11日; WordPress のブロックエディタ Gutenberg でスライダーのプラグイン Swiper を使ってスライダーを表示するカスタムブロックの作り方についての覚書です。

New WordPress カスタムブロック MediaUpload で複数の画像を挿入: 2020年10月10日; WordPress の Gutenberg で MediaUpload コンポーネントを使って画像を挿入するブロックを作成する際に、複数の画像を挿入する方法の覚書です。MediaUpload コンポーネントの multiple プロパティを true にして複数の画像を挿入して表示し、gallery プロパティを設定して画像の並び替えなどができるようにします。

New WordPress カスタムカードブロックの作り方: 2020年10月08日; WordPress のブロックエディタ Gutenberg で MediaUpload コンポーネントを使って画像とタイトル及びテキストを表示するカスタムカードブロックを作成する方法の覚書です。カスタムカードのタイトルはインスペクターでセレクトメニューを表示してタグを選択するようにすることもできます。

New WordPress ダイナミックブロックの作り方: 2020年10月03日; WordPress のブロックエディタ Gutenberg でダイナミックブロックを作成する方法についての覚書です。render_callback を使って PHP 側でレンダリングする方法、ServerSideRender コンポーネントの使い方、withSelect を使って投稿を取得する方法（Selector や getEntityRecords）などについて。

New WordPress JSX を使った Gutenberg ブロックの作り方: 2020年09月25日; WordPress のブロックエディタ Gutenberg で JSX を使って独自のブロックを作成する方法について。基本的なブロックの作成方法、JSX の基本的な使い方、WordPress のコンポーネントの使い方、インスペクター、ツールバーの設定方法、webpack.config.js を使った環境のカスタマイズ（複数のエントリーポイントの設定方法）などについての覚書です。

New WordPress Gutenberg ブロック開発の環境構築: 2020年09月08日; Gutenberg のブロック開発のための JavaScript 環境を @wordpress/scripts（wp-script）と @wordpress/create-block を使って構築する方法についての覚書です。

New WordPress Gutenberg ブロックの作成: 2020年09月03日; WordPress のブロックエディター Gutenberg での基本的なブロックの作成方法についての覚書です。単純な静的なブロックから RichText コンポーネントを使った編集可能なブロックの作成方法や registerBlockType の attributes プロパティの使い方や source プロパティなどについて。

React Hooks の基本的な使い方: 2020年08月10日; 基本的な React Hooks（useState、useEffect、useContext、useReducer）の使い方に関する覚書です。

React 要素、React コンポーネント、インスタンス: 2020年08月02日; ブラウザに描画されるものを指す「React 要素」や「コンポーネント」、「インスタンス」の違いについて React 公式ページの Blog に掲載されている記事「React Components, Elements, and Instances」を基にまとめた覚書です（ほぼそのままを意訳したような内容になっています）。

React を使ってみる（基本的な使い方）: 2020年07月15日; React の基本的な使い方を公式ページの「一段階ずつ学べるガイド」を基に個人的にまとめた覚書です。Create React App、React で使う import、JSX、コンポーネント、リストと key、フォームなどの基本的な使い方について。

React の環境構築（セットアップ）: 2020年06月23日; React を使うための環境を構築する方法についての覚書です。CDN を参照して React を使う方法や Create React App を使った環境構築、独自に Bable と webpack を使って環境を構築する方法など。

Promise の使い方 / 非同期処理 Async Function /Fetch: 2020年06月17日; fetch() の使い方を追加しました（7月22日）。JavaScript ES6（ECMAScript 2015）で導入された Promise や Async Function（async/await）の基本的な使い方についての覚書です。

webpack の基本的な使い方: 2020年06月08日; webpack のインストール方法や webpack.config.js、Loaders ローダー、Plugins プラグイン、splitChunks などの基本的な使い方についての覚書です。

Node.js の exports と module.exports: 2020年05月27日; Node.js を使ったモジュールのエクスポートとインポート、require、exports、module.exports の使い方についての覚書です。

npm の基本的な使い方: 2020年05月24日; npm（Node Package Manager）の基本的な使い方について覚書です。パッケージのインストール、アンインストール、検索、アップデートなどの基本的な使い方や package.json、package-lock.json を使ったバージョン管理、npm-check-updates を使った更新方法などについて。

Node.js を Mac にインストール（nodebrew の使い方）: 2020年05月11日; Node.js のバージョン管理ツール nodebrew を使って Mac に Node.js をインストールする方法と nodebrew の基本的な使い方についての覚書です。

JavaScript ES6（ECMAScript 2015）で追加された機能: 2020年05月06日; ES6（ECMAScript 2015）で追加された機能（let、const、テンプレートリテラル、デフォルト引数、Rest パラメータ、スプレッド構文、分割代入、for..of、Array.from()、アロー関数、モジュール、Symbol）の基本的な使い方についての覚書です。

Font Awesome の使い方（ver5.9以降）: 2020年04月23日; Font Awesome のバージョン 5.9 以降を利用するにはメールアドレスを登録してアカウントを作成するようになっていました。また、従来の CDN やダウンロードして使う方法に加えて Kit Code を読み込んで使用する方法が追加されています。アイコンの表示方法は以前のバージョンとほとんど同じです。現在の新しいバージョンでの使用法についての解説（覚書）です。

レンダリングを妨げるリソースの除外/CSSを非同期で読み込む: 2020年04月15日; PageSpeed Insights や Chrome の拡張機能 Lighthouse を使ってページをテストすると「レンダリングを妨げるリソースの除外」という項目が表示されることがあります。オンラインツール Critical Path CSS Generator を使って Critical CSS を取得してインライン化し、CSS を非同期で読み込んで CSS の配信を最適化してページの表示速度を改善させる方法と WordPress で CSS を非同期で読み込む方法の覚書です。

XAMPP を Mac にインストール: 2020年04月13日; 通常は MAMP を使用していますが、Apache の 2.4 を使っての確認が必要だったので XAMPP を Mac にインストールしました。Mac OSX 環境への XAMPP（XAMPP for OS X）のインストール方法と基本的な使い方についての覚書です。

ネイティブの JavaScript を使う: 2020年04月10日; JavaScript（ECMAScript 5/ES5）を使った要素の取得や属性の設定など基本的な使い方（要素の操作）についての覚書です。

コンタクトフォーム（お問い合わせページ）の作り方: 2020年03月30日; PHP を使った確認画面のあるコンタクトフォーム（お問い合わせページ）の作成方法についての覚書です。ユーザが入力した値を保持しながらページ間を移動（遷移）するので、セッションを利用します。jQuery を使った入力値の検証や自動返信、PHPMailer を使ったメールの送信（Gmail SMTP サーバ）、reCAPTCHA v3 を使ったスパム対策の実装方法についても掲載しています。

PHP メールフォームの作り方: 2020年03月27日; PHP を使った基本的なコンタクトフォーム（メールフォーム）の作り方について。取り扱っている例は確認画面なしのシンプルなコンタクトフォームで、入力された値の検証は基本的に PHP で行いますが HTML5 の機能や jQuery を使う方法も掲載しています。再読み込みによる二重送信の防止や自動返信の方法、PHPMailer を使ったメールの送信方法、reCAPTCHA v2/v3 を使ったスパム対策の実装方法等。

Google reCAPTCHA の使い方（v2/v3）: 2020年03月22日; Google reCAPTCHA v2 及び v3 の使い方についての覚書です。それぞれのバージョンの基本的な使い方や設定方法（HTML の実装方法や PHP を使った検証方法）の詳細やライブラリを使った検証方法などについて掲載しています。

PHPMailer の使い方: 2020年03月13日; PHPMailer のセットアップ方法や基本的な使い方についての覚書です。Composer を使ったインストールや Gmail の SMTP サーバを使用する方法、また「安全性の低いアプリの許可」を有効にせずに Gmail の SMTP サーバを使用するための SMTP 認証で XOAUTH2 を使う方法などについて。

PHP Composer のインストールと使い方: 2020年03月09日; PHP ライブラリ（パッケージ）をプロジェクト単位に管理するツール Composer の使い方や Mac で Homebrew を使って Composer をインストールする方法の覚書です。

スライダープラグイン Swiper（v5）の使い方: 2020年02月23日; jQuery 不要でレスポンシブ及びタッチデバイス（スマホやタブレット）対応のスライダープラグイン Swiper の基本的な設定方法や使い方についての覚書（解説）です。

サイトの SSL（HTTPS）化の対応（手順）: 2020年02月17日; 既存のサイトを http から https へ移行（SSL化）する際の HTML や WordPress の書き換え（ソースコードの修正）方法の手順などの覚書です。

Mac で MAMP に SSL（https://）を設定: 2020年02月15日; Mac の MAMP で SSL（https://localhost）を使えるようにするための設定方法の覚え書きです。OpenSSL を使った秘密鍵とサーバ証明書の作成方法の基本的なことや MAMP の Apache の設定方法などについて。

WordPress Search Replace DB の使い方: 2020年02月12日; WordPress のサイトの移行作業で、データベースの ULR を置換する際に Search Replace DB を使うとデータベースに保存されたシリアライズされたデータも変換することができます。Search Replace DB の基本的な使い方について。

MAMP エラー Apache が起動しない: 2020年02月11日; MAMP を起動しても Apache が起動せず、Start Servers をクリックすると「Apache couldn't be started. Please check your MAMP installation and configuration.」というエラーが表示されてしまう現象についての覚書です。結果的には MAMP を再インストールしました。

MAMP のインストールと初期設定: 2020年02月10日; Mac で MAMP をダウンロードしてインストールする方法と初期設定や Apache の設定（バーチャルホスト）、httpd.conf の文法エラーをチェックする方法についての覚書です。

WebP 対応・導入: 2020年02月07日; WebP フォーマットの画像をサイトに導入する（対応する）ための覚書です。JPEG や PNG 画像を WebP 画像に変換する方法や WebP 画像の表示方法などについて。

WordPress All-in-One WP Migration を使ってデータを移行: 2020年01月16日; 簡単に WordPress のデータを移行できるプラグイン「All-in-One WP Migration 」の使い方についての覚書です。

PHP でスマホやタブレットなどを判定 Mobile Detect: 2020年01月15日; PHP でスマホやタブレットなどを簡単に判定できる Mobile Detect の使い方についての覚書です。

WordPress Contact Form 7 Conditional Fields: 2019年09月17日; Contact Form 7 でフォームで選択した内容によって次に表示させる内容を変更・決定できる条件分岐機能を追加するプラグイン Contact Form 7 Conditional Fields の使い方について。

Mac ターミナルの基本的な使い方・操作方法（４）: 2020年01月26日; ターミナルを使ったジョブやプロセスの管理やシグナル、ユーザー管理、ソフトウェアのインストール、ネットワークの基本コマンド、などのごく基礎的なことについての覚書です。

Mac ターミナルの基本的な使い方・操作方法（３）シェルスクリプト: 2019年10月08日; シェルの環境設定やパーミッション（アクセス権限）、シェルスクリプト（変数、引数、配列、構文、条件判定、四則演算など）などの基本的なことについての覚書です。

Mac ターミナルの基本的な使い方・操作方法（２）エディタ: 2019年09月02日; macOS ターミナル上で動作するエディタ nano と vim の基本的な使い方や設定、コマンドなどについての覚書です。

Mac ターミナルの基本的な使い方・操作方法（１）: 2019年08月26日; Mac のターミナルを使う方法の覚書です。ターミナルの設定や基本的なコマンド、リダイレクトやパイプの使い方など。

WordPress ブロックエディター Gutenberg に対応: 2019年07月29日; WordPress 5.0 から導入されたブロックエディター（Gutenberg）を使った場合に、作成したテーマを対応させるための覚え書きです。テーマにブロックエディターのスタイルを適用させたり、逆にブロックエディターにテーマのスタイルを適用させる方法などについて。

WordPress パーマリンクリライトルール: 2019年07月22日; パーマリンクやリライトルールの基本的なことやリライトルールを追加する関数 add_rewrite_rule()、add_rewrite_endpoint()、リライトルール関連のフィルター rewrite_rules_array の使い方などについての覚え書きです。

WordPress パンくずリストの作成: 2019年07月04日; プラグインを使わずに functions.php に記述してパンくずリストを表示する方法と JSON-LD で構造化マークアップする方法の覚え書きです。以前ブログに掲載したパンくずリストのコードを更新・修正しました。
2019年07月10日
記事で複数のカテゴリーやタームを選択している場合に、カスタムフィールドを使ってカテゴリーやタームを選択できるようにしました。その他、いくつかコードの修正をしました。

WordPress ページネーションページャー: 2019年06月25日; 前後の投稿や一覧ページ、分割されたページへのリンクを出力するページャやページネーションの使い方や設定方法について。基本的な関数の使い方から前後の投稿へのリンクを表示する際にアイキャッチ画像を表示したり、ページネーションでの出力を Bootstrap の形式に変換する方法、the_post_navigation() などで自動的に出力されるナビゲーションマークアップのカスタマイズ方法なども掲載しています。

Google Code-Prettify シンタックスハイライト: 2019年06月15日; プログラムのコードをキーワードや構文などにより色分けして表示する機能（シンタックスハイライト）を簡単に実装できる Google Code-Prettify の設定方法や基本的な使い方、WordPress でのショートコードの作成方法について。

WordPress ショートコードの作成: 2019年06月12日; WordPress で独自のショートコードを作成する方法やショートコードを使って Youtube の動画や Googlemap を表示する方法についての覚え書きです。

Bootstrap4 の使い方(4) にライトボックスの実装方法を追加: 2019年05月30日; Bootstrap 4 のモーダルを使ったライトボックスの実装方法（プラグインなし）や WordPress での利用方法を追加しました。

WordPress で Bootstrap 4 のカルーセルを使う: 2019年05月29日; WordPress で Bootstrap 4 のカルーセルを使うと投稿に表示してある画像や images フォルダの画像、一覧ページのアイキャッチ画像をスライドショーのように表示することができます。プラグインなどを使わずに簡単なスライドショー（カルーセル）を表示する方法についての覚え書きです。

WordPress アイキャッチ画像や添付画像: 2019年05月26日; アイキャッチ画像の基本的な使い方や設定方法、自動的に生成されるサムネイル画像の設定や不要なサムネイル画像の制御、アイキャッチ画像や添付画像関連の関数の使い方などに関する覚え書き。

WordPress カスタム投稿タイプカスタム分類: 2019年05月16日; カスタム投稿タイプとカスタム分類の設定方法（register_post_type、register_taxonomy）やカスタム投稿タイプとカスタム分類の表示方法などに関する覚え書き。

WordPress カスタムフィールドの使い方: 2019年05月04日; カスタムフィールドの基本的な使い方や add_meta_box で独自にカスタムフィールドを追加する方法、その際の wp_nonce_field を使った CSRF 対策などについて。

WordPress ループで使うテンプレートタグや関数: 2019年04月16日; ループで良く使うテンプレートタグや関数の使い方などに関しての覚え書き。

WordPress テーマにウィジェット機能を追加: 2019年04月03日; WordPress の作成したテーマでウィジェット機能を追加して利用する方法について。register_sidebar や dynamic_sidebar の使い方など。

WordPress ナビゲーションメニュー（カスタムメニュー）: 2019年03月31日; register_nav_menus() を使った登録方法や wp_nav_menu() を使ったメニューの出力方法、管理画面でのメニューの作成方法などについて。

WordPress のループ: 2019年03月20日; WordPress のループの使い方や仕組み、グローバル変数 $wp_query や WP_Query クラス、ページ読み込み時の WordPress の処理の流れなどを理解するための覚え書きです。

WordPress スラッグ（slug）を取得: 2019年03月15日; WordPressのページのスラッグ（slug）を取得する方法について。ループ内やループ外での取得方法についての解説やスラッグを id や class として出力サンプルなど。

XAMPP の再インストール: 2019年03月03日; PHP 7.3 をローカル環境で試すために、XAMPP を再インストールした際の覚書。

WordPress title タグの出力: 2019年02月08日; WordPress4.4 以降でタイトルタグを出力する仕組みや方法について。

WordPress エスケープ処理: 2019年01月17日; WordPress でデータを無害化 (サニタイズ) する方法について。エスケープ処理の方法など。

WordPress のフック（Hooks）: 2019年01月18日; WordPress のフックについての解説。仕組みや使い方について。

WordPress CSSやJavaScriptファイルの読み込み: 2019年01月18日; WordPress での CSS や JavaScript の推奨される読み込み方法につて。

WordPress のユーザー・一覧表示対策: 2019年01月18日; WordPress のいくつかの機能により、ユーザーのログイン ID などを外部から取得することができるようになっているので、その対策について。

Bootstrap 4 の使い方: 2018年12月28日; Twitter 社が開発した CSS フレームワーク Bootstrap 4 の使い方について。Content編、Components編 1、Components編 2、Components編 3、Utilities編もあります。

AMP の導入と実装（基本的なこと）: 2018年8月23日; AMP（Accelerated Mobile Pages）を導入する際に考慮する点や AMP を使ったページの基本的な作り方について。

Google Maps の使い方・利用方法: 2018年7月25日; 2018年7月16日から「Google Maps Platform」という新しいサービスに統合され、利用方法が少し変更になりました。APIキーの取得方法から各種 API を使った Google Maps の表示、マーカー、情報ウィンドウの表示方法や設定、ジオコーディングやジオロケーション、ルートの表示、周辺検索などについて。基本的な使い方から簡単な応用などの解説です。
※ バージョンの指定方法が変更になったので、更新しました。（2018年8月9日）

Font Awesome 5 の基本的な使い方: 2018年6月28日; バージョンが５になった Font Awesome 5 の基本的な使い方について。

Font Awesome 5 の使い方（SVG と JavaScript 編）: 2018年6月28日; Font Awesome 5 を SVG として使用する場合のオプションについての説明。

Google カスタム検索（サイト内検索）の設置: 2018年4月29日; Google が提供する無料のサイト内検索サービスの設置方法や Google インデックス登録・申請について。

SEO 対策（検索エンジン最適化）: 2018年04月23日; SEO 対策の基本的な方法の解説。主に内部対策や、構造化データマークアップ、XML サイトマップの作成・通知、robots.txt などについて。

レスポンシブ Web デザイン作成資料: 2018年3月3日; レスポンシブ Web デザインを作成する際に、必要な知識や情報、サンプルなどを掲載。（Viewport、Media Queries、レスポンシブイメージ、文字のレスポンシブ対応、テーブルのレスポンシブ対応、開閉式ナビゲーションメニューなど）

更新日：2021年01月18日

2020年9月2日

関連ページ：WordPress Gutenberg ブロックの作成 Gutenberg で編集可能なブロックを作成する際に、例えば、複数の RichText コンポーネントを使う場合、attributes（属性）の source プロパティや selector プロパティ、type プロパティを適切に設定する必要があります。適切に設定されていないと、一見…

解析不能な構造化データ値の型が正しくありません

CATEGORY: HTML/CSS

2020年5月27日

「Search Console により、貴サイトに影響する「解析不能な構造化データ」関連の問題が 1 件検出されました。」というメールが Google Search Console Team より届きました。内容は以下のようなものです。原因は結論から言うと、JSON-LD で構造化マークアップしたパンくずリストの不注意による記述ミス（引用符の片方が削除され…

reCAPTCHA v3 送信時にトークンを取得

CATEGORY: HTML/CSS

2020年3月22日

reCAPTCHA v3 を使う際に、送信時にトークンを取得する方法についての覚書です。 reCAPTCHA v3 のガイドに掲載されている以下の例の場合、ページを読み込んですぐにトークンを取得しているので、2分後にはこのトークンの有効期限が切れてしまいます。 <script src="https://www.google.com/recap…

add_theme_support html5 「The type attribute is unnecessary for JavaScript resources」エラー/警告

CATEGORY: WordPress

2020年1月12日

wp_enqueue_script で JavaScript を読み込むと今までは以下のように HTML5 では不要な script 要素の type 属性が出力されたため、W3C のバリデーションでチェックすると「The type attribute is unnecessary for JavaScript resources」のような警告（Warnin…

Microsoft Remote Desktop 10 を使って Mac から Windows へリモートデスクトップ接続（カスペルスキーインターネットセキュリティ 2019）

CATEGORY: HTML/CSS

2019年8月7日

Microsoft Remote Desktop 10 を使って Mac から Windows へリモートデスクトップ接続する方法の覚書です。また、ウィルス対策ソフト「カスペルスキーインターネットセキュリティ 2019」を使っている場合の設定方法についても記載しています。　目次 Windows 側の確認リモートデスクトップ接続するには、Window…

Web Design Leaves

Web 制作リファレンス （＋α）

更新情報

Personal Web Reference

Blog / Web 制作メモ

Gutenberg ブロック作成 attributes の source と selector プロパティ

解析不能な構造化データ 値の型が正しくありません

reCAPTCHA v3 送信時にトークンを取得

add_theme_support html5 「The type attribute is unnecessary for JavaScript resources」エラー/警告

Microsoft Remote Desktop 10 を使って Mac から Windows へリモートデスクトップ接続（カスペルスキー インターネット セキュリティ 2019）

Web 制作リファレンス（＋α）

解析不能な構造化データ値の型が正しくありません

Microsoft Remote Desktop 10 を使って Mac から Windows へリモートデスクトップ接続（カスペルスキーインターネットセキュリティ 2019）