Web制作 on AIによる技術記事備忘録

WordPressで特定記事の最終更新日を表示するショートコードを作る

Mon, 20 Oct 2025 10:34:50 +0900

WordPressで「特定の記事の最終更新日」をトップページや固定ページに表示したい場面は多い。
しかしテンプレートファイルを直接編集するのは手間がかかるうえ、テーマアップデートで上書きされる危険もある。
この問題は、ショートコードを自作してfunctions.phpに登録することで簡潔に解決できる。

環境と前提

本稿の内容はWordPress 6.x系を前提としている。
テーマは任意だが、functions.php にコードを追記できる環境であることが条件である。
子テーマを使っている場合は、子テーマ側に記述することで親テーマの更新にも耐えられる。

ショートコードの実装

最終更新日を出力するショートコード [updated] を以下のように定義する。

// [updated id="123" format="Y-m-d"]
function shortcode_post_updated( $atts ) {
 $atts = shortcode_atts(
 array(
 'id' => null,
 'format' => 'Y-m-d',
 ),
 $atts,
 'updated'
 );

 if ( ! $atts['id'] ) {
 return ''; // id未指定なら出力なし
 }

 $updated = get_the_modified_time( $atts['format'], $atts['id'] );

 if ( ! $updated ) {
 return '';
 }

 return esc_html( $updated );
}
add_shortcode( 'updated', 'shortcode_post_updated' );

このコードを functions.php に追加すれば、ショートコード [updated id="123"] で記事ID 123 の最終更新日を表示できる。
format 属性を指定すれば日付フォーマットを自由に変更できる。

例：

[updated id="123" format="Y年n月j日"]

出力結果：2025年10月19日

タイトル付きの拡張版

記事タイトルと更新日を併記したい場合は、次のようにショートコードを拡張できる。

// [updated_with_title id="123" format="Y-m-d"]
function shortcode_post_updated_with_title( $atts ) {
 $atts = shortcode_atts(
 array(
 'id' => null,
 'format' => 'Y-m-d',
 ),
 $atts,
 'updated_with_title'
 );

 if ( ! $atts['id'] ) {
 return '';
 }

 $post = get_post( $atts['id'] );
 if ( ! $post ) {
 return '';
 }

 $title = get_the_title( $post );
 $updated = get_the_modified_time( $atts['format'], $atts['id'] );

 return esc_html( $title . '（更新日: ' . $updated . '）' );
}
add_shortcode( 'updated_with_title', 'shortcode_post_updated_with_title' );

これにより、

[updated_with_title id="45" format="Y/m/d"]

と書くだけで
「記事タイトル（更新日: 2025/10/19）」
という形式で表示できる。

実運用上の注意点

このショートコードはループ外で動作するため、トップページや固定ページの任意の位置に埋め込める。
ただし、キャッシュ系プラグイン（WP Super Cache、LiteSpeed Cacheなど）を使用している場合は、更新後にキャッシュを手動削除しないと表示が反映されない場合がある。
また、日付の取得には get_the_modified_time() を使用しているため、テーマによってはタイムゾーン設定が影響することがある。必要に応じて get_post_modified_time() に置き換えてもよい。

まとめ

ショートコード化することで、テンプレート編集を避けながら任意の場所に更新日を表示できるようになった。
WordPressの柔軟性を保ったまま、メンテナンス性を高めるシンプルな実装例として有用である。

WordPressのカスタムフィールドをREST APIで取得する方法

Thu, 11 Sep 2025 01:56:35 +0900

WordPressで作成したカスタムフィールドは、デフォルトではREST APIのレスポンスに含まれない。しかし、register_rest_field()関数を使用することで、カスタムフィールドをREST APIのレスポンスに追加できる。本記事では、カスタムフィールドをREST APIで取得する手順を具体的に解説する。

前提環境

WordPress 5.0以上
対象カスタムフィールドが既に投稿に設定済み
functions.phpまたはプラグインファイルへの編集権限

カスタムフィールドをREST APIに追加する手順

コードの実装

以下のコードをテーマのfunctions.phpまたはプラグインファイルに追加する。

add_action('rest_api_init', function() {
 register_rest_field('post', 'custom_field_name', array(
 'get_callback' => function($post) {
 return get_post_meta($post['id'], 'custom_field_name', true);
 },
 'schema' => array(
 'description' => 'Custom field description',
 'type' => 'string'
 )
 ));
});

このコードの各パラメータについて詳しく説明する。

パラメータの説明

register_rest_field()関数の第1引数では、対象となる投稿タイプを指定する。投稿の場合は'post'、固定ページの場合は'page'、カスタム投稿タイプの場合はその投稿タイプ名を指定する。

第2引数では、REST APIのレスポンスに表示されるフィールド名を指定する。この名前は実際のカスタムフィールド名と異なっても構わないが、わかりやすさのため同じ名前にすることが多い。

第3引数の配列では、以下の設定を行う。get_callbackは、フィールドの値を取得するための関数を定義する。ここでget_post_meta()関数を使用してカスタムフィールドの値を取得している。第3引数にtrueを指定することで、配列ではなく単一の値として取得される。

schemaでは、API仕様書に表示されるフィールドの説明とデータ型を定義する。データ型にはstring、integer、booleanなどが指定できる。

実際の使用例

たとえば、記事の閲覧数を記録するpage_viewsというカスタムフィールドがある場合、以下のように実装する。

add_action('rest_api_init', function() {
 register_rest_field('post', 'page_views', array(
 'get_callback' => function($post) {
 return get_post_meta($post['id'], 'page_views', true);
 },
 'schema' => array(
 'description' => 'Page view count',
 'type' => 'integer'
 )
 ));
});

この設定を行うと、REST APIのレスポンスは以下のようになる。

{
 "id": 123,
 "title": {
 "rendered": "サンプル記事"
 },
 "content": {
 "rendered": "記事の内容..."
 },
 "page_views": 1500,
 "meta": {...}
}

カスタムフィールドpage_viewsが、投稿データと同じレベル（トップレベル）に配置されていることがわかる。

動作確認の方法

curlコマンドでの確認

コマンドラインからcurlを使用して確認する。

curl https://example.com/wp-json/wp/v2/posts/123

レスポンスのJSONデータの中に、設定したカスタムフィールド名とその値が含まれていれば実装成功である。

複数のカスタムフィールドを追加する場合

複数のカスタムフィールドをREST APIに追加したい場合は、register_rest_field()を複数回呼び出す。

add_action('rest_api_init', function() {
 // 閲覧数フィールド
 register_rest_field('post', 'page_views', array(
 'get_callback' => function($post) {
 return get_post_meta($post['id'], 'page_views', true);
 },
 'schema' => array(
 'description' => 'Page view count',
 'type' => 'integer'
 )
 ));
 
 // 評価フィールド
 register_rest_field('post', 'rating', array(
 'get_callback' => function($post) {
 return get_post_meta($post['id'], 'rating', true);
 },
 'schema' => array(
 'description' => 'Post rating',
 'type' => 'number'
 )
 ));
});

この方法により、単一のアクションフック内で複数のカスタムフィールドをまとめて追加できる。

注意点とトラブルシューティング

カスタムフィールドの値が表示されない場合

カスタムフィールドがREST APIに表示されない場合、以下を確認する必要がある。まず、対象の投稿に実際にカスタムフィールドの値が設定されているかをWordPress管理画面で確認する。値が設定されていない場合、APIのレスポンスには空の値またはnullが返される。

次に、get_post_meta()関数の第1引数で正しい投稿IDが取得できているかを確認する。デバッグのため、一時的にerror_log()関数を使用して投稿IDやカスタムフィールドの値をログに出力して確認することも有効である。

テーマ間での互換性

現在の実装方法では、テーマを変更するとfunctions.phpも変更されるため、新しいテーマでも同じコードを追加する必要がある。テーマに依存しない実装を行いたい場合は、専用のプラグインを作成することを推奨する。

プラグインとして実装する場合は、以下のようなファイル構造で作成する。

<?php
/*
Plugin Name: Custom Fields REST API
Description: Adds custom fields to REST API
Version: 1.0
*/

add_action('rest_api_init', function() {
 register_rest_field('post', 'page_views', array(
 'get_callback' => function($post) {
 return get_post_meta($post['id'], 'page_views', true);
 },
 'schema' => array(
 'description' => 'Page view count',
 'type' => 'integer'
 )
 ));
});

このファイルをプラグインディレクトリに配置することで、テーマに依存しない実装が可能になる。

まとめ

WordPressのカスタムフィールドをREST APIで取得するには、register_rest_field()関数を使用する方法が最も確実である。この方法により、フロントエンドのJavaScriptアプリケーションやモバイルアプリケーションから、カスタムフィールドの値に簡単にアクセスできるようになる。実装時は、データ型の指定とエラーハンドリングに注意し、動作確認を十分に行うことが重要である。

WordPressでURLを自動的にハイパーリンクにする実装方法

Fri, 01 Aug 2025 05:46:44 +0900

WordPressでブログを運営していると、投稿内にURLを記載することがよくある。しかし、毎回手動でリンクタグを書くのは面倒で、特に長いURLの場合は可読性も下がってしまう。本記事では、httpやhttpsで始まるURLを自動的にハイパーリンクに変換する方法を紹介する。

実装環境はWordPress 6.0以降を想定している。PHPの基本的な知識があれば十分理解できる内容である。

WordPress標準のmake_clickable()関数を使った実装

WordPressにはmake_clickable()という標準関数が用意されており、これを使うのが最もシンプルで確実な方法である。この関数は、テキスト内のURLやメールアドレスを自動的に検出し、適切なHTMLリンクに変換してくれる。

実装方法は、アクティブなテーマのfunctions.phpファイルに以下のコードを追加するだけである。

function auto_link_urls($content) {
 return make_clickable($content);
}
add_filter('the_content', 'auto_link_urls');
add_filter('comment_text', 'auto_link_urls');

この実装により、投稿本文（the_content）とコメント（comment_text）の両方で自動リンク化が有効になる。例えば、投稿内に「詳細はhttps://example.com/documentを参照してください」と書けば、自動的に「詳細は<a href=“https://example.com/document">https://example.com/document</a>を参照してください」という形でHTMLが生成される。

make_clickable()関数の優れた点は、既存のHTMLタグ内のURLには影響しないことである。つまり、手動で設定したリンクや画像のsrc属性などは変更されず、プレーンテキストのURLのみが対象となる。また、メールアドレスも同様にmailto:リンクに変換されるため、非常に実用的である。

より詳細な制御が必要な場合の正規表現による実装

標準のmake_clickable()関数では制御しきれない場合もある。例えば、リンクに特定のCSSクラスを付与したい、target属性を設定したい、特定のドメインのみ対象にしたいといった要求がある場合である。

このような場合は、正規表現を使ったカスタム関数を作成する方法がある。

function custom_auto_link($content) {
 $pattern = '/(?<!href=")(?<!src=")(https?:\/\/[^\s<>"\']+)/i';
 $replacement = '<a href="$1" target="_blank" rel="noopener">$1</a>';
 return preg_replace($pattern, $replacement, $content);
}
add_filter('the_content', 'custom_auto_link');

この正規表現パターンでは、(?<!href=")と(?<!src=")という後読み否定アサーションを使用している。これにより、既存のhref属性やsrc属性内のURLは除外され、プレーンテキストのURLのみが対象となる。また、target="_blank"属性を付けることで、リンクを新しいタブで開くように設定し、rel="noopener"でセキュリティ上の問題も回避している。

ただし、この方法はmake_clickable()関数ほど洗練されていないため、エッジケースでの動作に注意が必要である。特に、複雑なHTMLが混在する場合や、URLに特殊文字が含まれる場合などでは、予期しない結果になる可能性がある。

特定のフィルターのみに適用する方法

すべてのコンテンツに自動リンク化を適用したくない場合もある。例えば、投稿本文には適用したいが、コメントには適用したくない場合や、特定のカスタムフィールドにのみ適用したい場合である。

コメントのみに適用したい場合は、以下のように書く。

add_filter('comment_text', 'make_clickable');

カスタムフィールドの値に適用したい場合は、表示時に関数を通すようにする。

function auto_link_custom_field($value) {
 return make_clickable($value);
}

// テンプレートファイルでの使用例
echo auto_link_custom_field(get_field('url_field'));

このように、WordPressのフィルターシステムを活用することで、必要な場所にのみ機能を適用できる。フィルターの優先度も指定可能で、他のプラグインとの競合を避けたい場合は優先度を調整すればよい。

実装時の注意点と推奨される書き方

基本的な実装は前述のシンプルなコードで十分だが、より堅牢なシステムを構築したい場合は、いくつかの考慮点がある。

管理画面やRSSフィード生成時には自動リンク化を無効にしたい場合がある。これは、編集画面でのプレビューに影響したり、フィード内でのリンク表示に問題が生じたりする可能性があるためである。

function my_theme_auto_link_urls($content) {
 if (is_admin() || is_feed()) {
 return $content;
 }
 return make_clickable($content);
}
add_filter('the_content', 'my_theme_auto_link_urls', 10);
add_filter('comment_text', 'my_theme_auto_link_urls', 10);

また、関数名には必ずプレフィックスを付けることが推奨される。これは、他のテーマやプラグインとの名前衝突を避けるためである。my_theme_のような形でテーマ名を含めたプレフィックスを使用すれば、問題を回避できる。

しかし、個人サイトや小規模なプロジェクトであれば、最初に紹介したシンプルなコードで十分である。過度な抽象化や将来の拡張性を考慮した実装は、実際には使われないことが多く、コードの可読性を下げる結果になりがちである。動作するシンプルなコードこそが、最良の解決策と言える。

まとめ

WordPressでURLを自動的にハイパーリンクにする方法として、make_clickable()関数を使った実装を紹介した。この方法は、WordPressの標準機能を活用するため安全性が高く、実装も非常にシンプルである。

最も基本的な実装は、functions.phpに数行のコードを追加するだけで完了する。より詳細な制御が必要な場合は正規表現を使った方法もあるが、一般的な用途では標準関数で十分である。

実際の運用では、シンプルで理解しやすいコードを維持することが重要である。複雑な実装よりも、動作が確実で保守しやすいコードの方が、長期的には価値が高い。

WordPress 6.8.2完全ガイド

Wed, 16 Jul 2025 03:51:21 +0900

WordPress 6.8.2は2025年7月15日にリリースされた重要なメンテナンスリリースです。この更新は新機能の追加ではなく、20のコア修正と15のブロックエディター改善に焦点を当てた安定性向上のリリースとなっています。

リリース概要と重要な変更点

WordPress 6.8.2はショートサイクルメンテナンスリリースとして位置づけられ、WordPress 6.8で導入された機能の不具合修正と性能向上を目的としています。リリースは@audrasjb、@estelaris、@zunaid321によって主導されました。

このバージョンで最も重要な変更は、WordPress 4.1-4.6のセキュリティサポート終了と、bcryptパスワードハッシュ化の継続的な改善です。日本のWordPress開発者コミュニティでは、特にbcryptへの移行による下位互換性の問題について活発な議論が行われています。

主な修正内容と改善点

コア修正（20項目）

テーマ関連の重要な修正：

Twenty Twenty-Five：エディタースタイルが読み込まれない問題を修正
Twenty Sixteen：引用ブロックのプレーンスタイルでエディターに枠線が表示される問題を解決
Twenty Fourteen：最新コメントブロックのリンク色がコンテンツサイドバーに適用される問題を修正
Twenty Twenty-One：メニュートグルが「load」イベント後まで反応しない問題を解決

メディア処理の改善：

Mac スクリーンショットアップロード問題：ファイル名にクエスチョンマークが挿入され画像が破損する問題を修正
oEmbed プロバイダー変更：app.screencast.com の削除と HTTP から HTTPS への移行

開発環境の強化：

ブロックエディタースタイルの開発モード導入
Twemoji v16.0.1への更新
TinyMCE キャッシュキーの更新によるパフォーマンス向上

ブロックエディター改善（15項目）

ナビゲーションブロック：パフォーマンス最適化と有効性チェック改善
クエリループ：‘query.inherit’ 属性値の上書き防止
画像ブロック：ライブラリから同じ画像を再選択時の古いURL問題を修正
詳細ブロック：すべての非インタラクティブフォーマットを有効化し、キーボードアクセシビリティを改善
メディアプレースホルダー：ローカルURLパスを許可するメディアURL入力タイプの回帰を修正

システム要件

WordPress 6.8.2はWordPress 6.8と同じシステム要件を維持しています：

最小要件

PHP: バージョン7.4以上
MySQL: バージョン5.7以上または MariaDB: バージョン10.4以上
HTTPS: サポート必須
ウェブサーバー: Apache または Nginx（推奨）

推奨要件

PHP: バージョン8.0以上（最適なパフォーマンスのため）
MySQL: バージョン8.0以上または MariaDB: バージョン10.6以上
RAM: 最小512MB（大規模サイトには8GB推奨）

日本のホスティングプロバイダーであるKUSANAGIチームは、PHP 8.xとの互換性について詳細な技術分析を提供しており、パフォーマンス向上のためのPHP 8.0以上の使用を強く推奨しています。

インストールとアップデート方法

自動更新（推奨）

WordPressダッシュボードにログイン
「ダッシュボード」＞「更新」に移動
「今すぐ更新」ボタンをクリック
WordPressが自動的に6.8.2をダウンロード・インストール

手動更新

https://wordpress.org/download/release-archive/ からWordPress 6.8.2をダウンロード
FTPまたはホスティングコントロールパネルでファイルをアップロード
標準的なWordPressアップグレード手順に従う

WP-CLI使用

wp core update https://wordpress.org/wordpress-6.8.2.zip

既知の問題と注意点

重要な互換性問題

マルチサイト環境での問題：一部のユーザーでマルチサイトインストールでドメインマッピングに関する問題が報告されています。

パスワードハッシュ化の変更：日本の開発者コミュニティ（特にSWELLテーマ開発者）は、WordPress 6.8でのbcryptパスワードハッシュ化について警告しています。「6.8にアップデート後にダウングレードすると、bcrypt/MD5の非互換性によりパスワード認証が失敗する可能性がある」とされています。

SEOプラグインとの競合：Yoast SEOなど一部のSEOプラグインで投稿エディターのレイアウト問題が報告されています。

パフォーマンスへの影響

メモリリーク修正：do_blocks()関数でのメモリリークが修正され、サイトパフォーマンスが向上しました。

キャッシュ改善：TinyMCEキャッシュキーの更新により、エディターの読み込み速度が改善されています。

日本語コミュニティからの反応

翻訳と地域化の状況

翻訳チームの活動：日本のWordPress翻訳チームは積極的に活動しており、すべてのWordPress 6.8.2ドキュメントが日本語に翻訳されています。WordPress 6.5で導入された改良された翻訳システム（gettextからPHPベースの翻訳ファイルへの移行）により、パフォーマンスが向上しています。

コミュニティエンゲージメント：WordCamp Japan コミュニティはWordPress 6.8の変更について活発に議論しており、日本全国の25のWordPress Meetupグループがボランティアメンバーによって管理されています。

開発者とテーマ制作者の対応

主要な日本のプラグイン開発者：不動産プラグインシリーズなどの主要な日本のプラグイン開発者がWordPress 6.8対応版をリリースしています。

テーマ開発者の分析：Vektor Inc.（Lightningテーマ開発者）やTCDテーマ開発者は、WordPress 6.8の変更点と日本のユーザーへの影響について包括的なガイドを提供しています。

前バージョンからの変更点

WordPress 6.8.1からの変更

追加の20のコア修正（6.8.1では15の修正）
15のブロックエディター改善（6.8.1と同様の範囲）
同梱テーマ固有の修正
メディア処理の改善
開発環境の強化

WordPress 6.8.0からの主な違い

新機能なし - 純粋にメンテナンス重視
既存のWordPress 6.8機能の安定性向上
6.8.0リリース後に発見された問題の修正
ブロックエディターとコア機能のパフォーマンス最適化

今後の展望と推奨事項

ウェブサイト所有者への推奨

即座にアップデートしてバグ修正と改善の恩恵を受ける
カスタムテーマやプラグインで徹底的にテスト
アップデート前にサイトをバックアップ
プラグインのWordPress 6.8.2互換性を確認

開発者への推奨

ブロックエディターAPIの技術的変更を確認
カスタムブロックとテーマの互換性をテスト
影響を受けるWordPress関数を使用している場合はプラグインコードを更新
将来の開発で非推奨機能を考慮

まとめ

WordPress 6.8.2は、35の総修正（20のコア + 15のブロックエディター）により、WordPress 6.8の全体的な安定性を向上させる堅実なメンテナンスリリースです。新機能は導入されていませんが、ユーザーエクスペリエンスに影響を与える重要な問題を修正しており、すべてのWordPress 6.8ユーザーにとって価値のあるアップデートとなっています。

WordPress 4.1-4.6のセキュリティアップデート終了は、WordPressの進化における重要な節目を示しており、セキュリティとパフォーマンスの利点のためにより新しいバージョンを維持することの重要性を強調しています。

日本のWordPressコミュニティは引き続き活発で、翻訳・地域化の取り組みが強力に続いており、グローバルなWordPressエコシステムの変化にもかかわらず、技術的な分析とユーザーガイダンスを提供し続けています。

WordPress REST APIで記事を投稿しカスタムフィールドを設定する方法

Tue, 07 Jan 2025 18:45:53 +0900

WordPress REST APIを使用して記事を投稿すると同時に、カスタムフィールドを設定することができます。本記事では、Pythonを使用してREST API経由で記事を作成し、カスタムフィールドを設定または更新する手順を紹介します。

準備

アプリパスワードを取得します。

Pythonで記事を投稿しカスタムフィールドを設定する

以下は、Pythonを使用してWordPressのREST APIで記事を作成し、カスタムフィールドを設定するコードです。

コード例

import requests
from requests.auth import HTTPBasicAuth

# WordPressの設定
WORDPRESS_URL = "https://your-wordpress-site.com/wp-json/wp/v2/posts"
USERNAME = "your-username"
APP_PASSWORD = "your-app-password"

def create_post(title, content, custom_fields):
 """
 WordPress REST APIを使用して記事を作成し、カスタムフィールドを設定
 """
 headers = {"Content-Type": "application/json"}
 data = {
 "title": title,
 "content": content,
 "status": "publish",
 "meta": custom_fields, # カスタムフィールド
 }

 response = requests.post(
 WORDPRESS_URL,
 json=data,
 auth=HTTPBasicAuth(USERNAME, APP_PASSWORD),
 headers=headers,
 )

 if response.status_code == 201:
 print(f"投稿が成功しました: {title}")
 print(response.json()) # 応答データを表示
 else:
 print(f"投稿に失敗しました: {response.status_code}")
 print(response.text)

# サンプルデータ
posts = [
 {
 "title": "サンプル投稿 1",
 "content": "<p>この投稿はREST APIで作成されました。</p>",
 "custom_fields": {
 "custom_field_key_1": "サンプル値1",
 "custom_field_key_2": 100,
 },
 },
 {
 "title": "サンプル投稿 2",
 "content": "<p>こちらもREST APIで作成されました。</p>",
 "custom_fields": {
 "custom_field_key_1": "サンプル値2",
 "custom_field_key_2": 200,
 },
 },
]

# 投稿をループして作成
for post in posts:
 create_post(post["title"], post["content"], post["custom_fields"])

詳細な解説

カスタムフィールドの設定

上記コードの custom_fields は、REST APIの meta に渡されます。
WordPressに登録されているカスタムフィールド（functions.php で登録）だけが受け付けられます。
未登録のカスタムフィールドを送信するとエラーになります。

既存記事のカスタムフィールドを更新する

既存の記事のカスタムフィールドを更新するには、PATCH メソッドを使用します。

コード例

def update_post(post_id, custom_fields):
 """
 WordPress REST APIを使用して既存記事のカスタムフィールドを更新
 """
 url = f"{WORDPRESS_URL}/{post_id}"
 headers = {"Content-Type": "application/json"}
 data = {
 "meta": custom_fields, # 更新するカスタムフィールド
 }

 response = requests.patch(
 url,
 json=data,
 auth=HTTPBasicAuth(USERNAME, APP_PASSWORD),
 headers=headers,
 )

 if response.status_code == 200:
 print(f"投稿 (ID: {post_id}) が更新されました。")
 print(response.json())
 else:
 print(f"更新に失敗しました: {response.status_code}")
 print(response.text)

# サンプル更新データ
update_post(123, {
 "custom_field_key_1": "更新された値",
 "custom_field_key_2": 300,
})

エラーハンドリング

認証エラー

正しい認証情報（ユーザー名とアプリパスワード）が必要です。
エラー例: { "code": "rest_cannot_create", "message": "Sorry, you are not allowed to create posts as this user.", "data": { "status": 403 } }

カスタムフィールド未登録エラー

カスタムフィールドが register_post_meta で登録されていない場合はエラーになります。
エラー例: { "code": "rest_invalid_param", "message": "Invalid parameter(s): meta", "data": { "status": 400 } }

まとめ

カスタムフィールドの登録

functions.php に register_post_meta を記述してREST APIで操作可能にする。

記事の作成

POST メソッドで記事を作成し、同時にカスタムフィールドを設定。

記事の更新

PATCH メソッドでカスタムフィールドを更新可能。

上記の方法で、REST APIを通じてWordPressの記事とカスタムフィールドを簡単に操作できます。

WordPress REST APIですべての記事を削除するPythonコード

Tue, 07 Jan 2025 18:07:34 +0900

実行するとすべての記事が削除されますので、注意してください。

コード

import os
import requests
from requests.auth import HTTPBasicAuth

# WordPressの設定
WORDPRESS_URL = "https://example.com/wp-json/wp/v2/posts"
USERNAME = os.environ["WORDPRESS_USERNAME"]
APP_PASSWORD = os.environ["WORDPRESS_APP_PASSWORD"]

def fetch_posts(base_url, auth, per_page=100):
 """
 すべての投稿を取得する
 """
 posts = []
 page = 1

 while True:
 url = f"{base_url}?per_page={per_page}&page={page}"
 response = requests.get(url, auth=auth)

 if response.status_code != 200:
 print(f"Error fetching posts (page {page}): {response.status_code}")
 break

 data = response.json()
 posts.extend(data)

 if len(data) < per_page: # 最後のページに到達
 break

 page += 1

 return posts

def delete_post(base_url, auth, post_id):
 """
 指定された投稿を削除する
 """
 url = f"{base_url}/{post_id}"
 response = requests.delete(url, auth=auth)

 if response.status_code == 200:
 print(f"投稿 (ID: {post_id}) を削除しました。")
 else:
 print(f"投稿 (ID: {post_id}) の削除に失敗しました:", response.text)

def delete_all_posts(base_url, auth):
 """
 すべての投稿を削除する
 """
 posts = fetch_posts(base_url, auth)

 if not posts:
 print("削除する投稿はありません。")
 return

 for post in posts:
 delete_post(base_url, auth, post['id'])

if __name__ == "__main__":
 # 認証情報の設定
 auth = HTTPBasicAuth(USERNAME, APP_PASSWORD)

 # すべての投稿を削除
 delete_all_posts(WORDPRESS_URL, auth)

使い方

スクリプトをファイルとして保存し、実行する。requestsライブラリのインストールが事前に必要。

また、以下を環境変数として登録している（テストするだけならハードコーディングでもよい）

WORDPRESS_USERNAME
WORDPRESS_APP_PASSWORD

アプリパスワードについては以下の記事を参照。

WordPressでChart.jsでチャート表示するモック

Tue, 07 Jan 2025 16:37:55 +0900

以下に、外部APIからデータを取得し、WordPressに統合してチャートを表示する方法を詳しく説明します。

手順

ステップ 1: Chart.jsのスクリプトを読み込む

functions.php に以下を追加します：

function enqueue_chartjs_scripts() {
 wp_enqueue_script('chartjs', 'https://cdn.jsdelivr.net/npm/chart.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_chartjs_scripts');

ステップ 2: カスタムREST APIエンドポイントを作成

PHPでREST APIエンドポイントを作成します。これにより、チャート用のデータを提供できます。

function register_chart_data_endpoint() {
 register_rest_route('custom/v1', '/chart-data/(?P<id>\d+)', array(
 'methods' => 'GET',
 'callback' => 'get_chart_data',
 ));
}
add_action('rest_api_init', 'register_chart_data_endpoint');

function get_chart_data($data) {
 $post_id = $data['id'];
 
 // データ取得 (例: カスタムフィールドからJSONを取得)
 $view_history = get_post_meta($post_id, 'view_history', true);

 // サンプルデータ (実際にはカスタムフィールドや外部APIから取得)
 if (!$view_history) {
 $view_history = json_encode([
 '2023-01-01' => 12000,
 '2023-01-02' => 13000,
 '2023-01-03' => 14000,
 ]);
 }
 
 return json_decode($view_history, true);
}

ステップ 3: 記事内でグラフを表示

記事テンプレート（例: single.php）やショートコードで、チャートを表示するHTMLとJavaScriptを追加します。

function render_chart_shortcode($atts) {
 $atts = shortcode_atts(array(
 'post_id' => get_the_ID(), // 投稿IDを取得
 ), $atts);

 ob_start();
 ?>
 <canvas id="lineChart" width="400" height="200"></canvas>
 <script>
 document.addEventListener('DOMContentLoaded', function () {
 fetch('<?php echo esc_url(rest_url("custom/v1/chart-data/" . $atts["post_id"])); ?>')
 .then(response => response.json())
 .then(data => {
 const labels = Object.keys(data); // 日付
 const values = Object.values(data); // 再生数

 const ctx = document.getElementById('lineChart').getContext('2d');
 const chartData = {
 labels: labels,
 datasets: [{
 label: '動画再生数',
 data: values,
 borderColor: 'rgba(75, 192, 192, 1)',
 borderWidth: 2,
 fill: false,
 }]
 };

 new Chart(ctx, {
 type: 'line',
 data: chartData,
 options: {
 responsive: true,
 plugins: {
 legend: {
 display: true,
 position: 'top',
 },
 },
 scales: {
 x: {
 title: {
 display: true,
 text: '日付'
 }
 },
 y: {
 title: {
 display: true,
 text: '再生数'
 },
 beginAtZero: true
 }
 }
 }
 });
 })
 .catch(error => console.error('データ取得エラー:', error));
 });
 </script>
 <?php
 return ob_get_clean();
}
add_shortcode('render_chart', 'render_chart_shortcode');

実際の利用

記事や固定ページ内で以下のショートコードを利用：

[render_chart post_id="123"]

完成した機能

記事内で時系列データを表示する折れ線グラフを実装。
REST APIでデータを動的に取得。
Chart.jsを利用してグラフをレンダリング。

[PHP] WordPress REST APIでアイキャッチ画像を設定する

Wed, 09 Oct 2024 22:20:35 +0900

以下は、WordPress REST API + PHPを使って投稿にアイキャッチ画像（サムネイル）を設定する関数のスニペットです。この技術記事では、APIを通じて画像をアップロードし、投稿にアイキャッチ画像を設定する方法を説明します。

WordPress REST APIでアイキャッチ画像を設定する手順

APIトークンの取得 WordPress REST APIにアクセスするためには、認証が必要です。以下のように、アプリケーションパスワードを使用して認証トークンを生成します。

// ベーシック認証のためのユーザー名とアプリケーションパスワード
$username = 'your-username';
$application_password = 'your-application-password';

// ベーシック認証用ヘッダーの作成
$headers = [
 'Authorization' => 'Basic ' . base64_encode($username . ':' . $application_password),
 'Content-Type' => 'application/json',
];

画像をアップロードする 次に、アップロードしたい画像を/wp-json/wp/v2/mediaエンドポイントにPOSTリクエストで送信します。以下は、PHPのcurlを使用してファイルをアップロードする例です。

$upload_url = 'https://example.com/wp-json/wp/v2/media'; // WordPressサイトのURL
$image_path = '/path/to/your/image.jpg'; // ローカルの画像パス
$image_data = file_get_contents($image_path);

// ファイルアップロード用のcURLリクエスト
$ch = curl_init($upload_url);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, array_merge($headers, [
 'Content-Disposition: attachment; filename="' . basename($image_path) . '"'
]));
curl_setopt($ch, CURLOPT_POSTFIELDS, $image_data);
$response = curl_exec($ch);
curl_close($ch);

// レスポンスをデコードし、画像IDを取得
$media = json_decode($response, true);
$media_id = $media['id'];

投稿にアイキャッチ画像を設定する 画像が正常にアップロードされたら、次にその画像を指定した投稿のアイキャッチ画像として設定します。/wp-json/wp/v2/posts/{post_id}エンドポイントにPOSTリクエストを送信し、featured_mediaにアップロードされた画像のIDを指定します。

$post_id = 123; // アイキャッチ画像を設定する投稿のID
$update_post_url = 'https://example.com/wp-json/wp/v2/posts/' . $post_id;

$post_data = json_encode([
 'featured_media' => $media_id // アップロードされた画像のIDを指定
]);

// 投稿更新用のcURLリクエスト
$ch = curl_init($update_post_url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_POSTFIELDS, $post_data);
$response = curl_exec($ch);
curl_close($ch);

// レスポンス確認
$updated_post = json_decode($response, true);

実際の使用例

このスニペットは、PHPを使用してWordPressのREST APIを呼び出し、アイキャッチ画像を投稿に設定するものです。画像アップロード後に取得したメディアIDを、投稿のfeatured_mediaフィールドに設定して、投稿のアイキャッチ画像として反映されます。

上記のスニペットは、以下のような状況で役立ちます：

画像をプログラム的に投稿に設定する必要がある場合
アイキャッチ画像を定期的に変更するバッチ処理やスクリプトを作成する場合

このスクリプトは非常に柔軟で、特定のWordPressサイトで認証と画像アップロード、アイキャッチ画像設定を自動化するために活用できます。

JavaScriptでのスタイルプロパティの直接割り当て方法

Wed, 09 Oct 2024 19:15:49 +0900

Web開発では、要素のスタイルをJavaScriptから動的に変更する必要が生じることがよくあります。JavaScriptを使って要素のスタイルを変更する最も一般的な方法は、DOM API の style プロパティを利用することです。の記事では、JavaScriptでスタイルを直接割り当てる際のポイントについて解説します。

`element.style` とは？

element.style は、HTML要素のインラインスタイルを設定・取得するためのプロパティです。CSSのプロパティをJavaScriptで変更する場合、element.style に対して直接アクセスします。たとえば、div 要素の背景色を赤にしたい場合、以下のように記述します。

const div = document.querySelector("div");
div.style.backgroundColor = "red";

CSSのプロパティ名との違い

CSSプロパティ名とJavaScriptの style プロパティで使うプロパティ名は少し異なります。CSSではハイフンで区切られるプロパティ名（例：background-color）が、JavaScriptではキャメルケース（例：backgroundColor）に変換されます。これは、JavaScriptのプロパティ名がキャメルケースを使う規則に従っているためです。

例:

CSS: background-color
JavaScript: backgroundColor

const div = document.querySelector("div");
div.style.backgroundColor = "blue";

スタイルの直接割り当てと安全性

次のコードは、要素に複数のスタイルを一度に設定しようとしている例です。

const container = document.querySelector('div#container');
container.style = "text-align: center; background-color: lightgrey;";

このコードは一見正しそうに見えますが、element.style に文字列を代入すると、既存のスタイルがすべて上書きされる可能性があります。また、このように複数のプロパティをまとめて設定するのは推奨されません。

推奨される方法：

スタイルプロパティごとに個別に設定することがベストプラクティスです。

const container = document.querySelector('div#container');
container.style.textAlign = "center";
container.style.backgroundColor = "lightgrey";

この方法なら、他のスタイルが上書きされることなく、新しいスタイルを追加できます。

数値プロパティの扱い

CSSプロパティには数値を持つものが多くあります。たとえば width や height はピクセル単位で指定することが多いですが、数値を直接指定すると正しく動作しません。単位を必ず付与する必要があります。

const img = document.querySelector("img");
img.style.width = "150px"; // 正しい設定

単位を忘れると、ブラウザはデフォルトの単位を適用しないため、思ったような結果が得られません。

複数のスタイルを設定する場合

複数のスタイルを一度に設定したい場合、個別に設定する方法もありますが、Object.assign() を使うと一度にまとめて設定できて便利です。

const img = document.querySelector("img");

Object.assign(img.style, {
 width: "150px",
 borderRadius: "50%",
 border: "1px solid black"
});

これにより、既存のスタイルを保持しながら新しいスタイルをまとめて追加できます。

`classList` を使ったスタイル変更

大量のスタイル変更が必要な場合や、条件に応じてスタイルを切り替えたい場合、element.style ではなく classList を使用することをおすすめします。classList を使うと、あらかじめ定義されたクラスを追加・削除することで、より効率的にスタイルを管理できます。

const container = document.querySelector('div#container');
container.classList.add("centered-container");

// CSS ファイル
// .centered-container {
// text-align: center;
// background-color: lightgrey;
// }

結論

JavaScriptを使ってスタイルを直接変更する際には、以下の点に注意しましょう。

CSSプロパティ名はキャメルケースに変換する。
スタイルプロパティごとに個別に設定し、element.style 全体に文字列を代入しない。
数値プロパティには必ず単位を付ける。
複数のスタイルを設定する際は Object.assign() を利用すると効率的。
多くのスタイル変更が必要な場合は classList を活用して、CSSクラスでスタイルを管理する。

これらのポイントを守れば、スタイルの変更が正しく適用され、コードも読みやすく保てるでしょう。

参考資料

MDN Web Docs: HTMLElement.style

JavaScriptで取得した要素の属性 attributes を更新する方法

Wed, 09 Oct 2024 18:21:22 +0900

JavaScriptでは、DOM要素の属性（attributes）を簡単に取得・更新することができます。attributes は、要素の id、class、src などの様々なプロパティを指し、これらを動的に変更することで、ページの挙動や外観をリアルタイムに操作できます。この記事では、属性の取得と更新方法について解説します。

属性の取得方法

要素の属性を取得するには、JavaScriptの getAttribute() メソッドを使用します。このメソッドは、指定した属性の値を取得します。

基本的な構文

element.getAttribute(attributeName);

例：属性を取得する

<img id="exampleImage" src="image.jpg" alt="サンプル画像">

let imageElement = document.getElementById('exampleImage');
let srcValue = imageElement.getAttribute('src');
console.log(srcValue); // "image.jpg"

このように、getAttribute() を使うことで、指定した要素の属性の値を取得できます。

属性の更新方法

要素の属性を更新するには、setAttribute() メソッドを使用します。これにより、既存の属性を変更したり、新しい属性を追加することができます。

基本的な構文

element.setAttribute(attributeName, value);

例：属性を更新する

<img id="exampleImage" src="image.jpg" alt="サンプル画像">

let imageElement = document.getElementById('exampleImage');

// 画像のsrcを変更
imageElement.setAttribute('src', 'newImage.png');
console.log(imageElement.getAttribute('src')); // "newImage.png"

上記の例では、画像の src 属性を新しい画像ファイルに変更しています。

属性の削除

不要になった属性を削除したい場合は、removeAttribute() メソッドを使います。これにより、指定した属性を完全に削除することができます。

基本的な構文

element.removeAttribute(attributeName);

例：属性を削除する

<img id="exampleImage" src="image.jpg" alt="サンプル画像">

let imageElement = document.getElementById('exampleImage');

// alt属性を削除
imageElement.removeAttribute('alt');
console.log(imageElement.getAttribute('alt')); // null

removeAttribute() を使用することで、指定した属性が完全に削除され、getAttribute() で取得しようとしても null が返されます。

クラス属性の操作

特に class 属性は頻繁に操作されるため、classList プロパティを使用してより簡単に操作できます。これにより、クラスの追加、削除、切り替え（toggle）などが可能です。

クラスを追加する

let element = document.getElementById('example');
element.classList.add('new-class');

クラスを削除する

element.classList.remove('old-class');

クラスを切り替える（toggle）

クラスの有無によって、追加または削除を自動的に切り替えることができます。

element.classList.toggle('active');

データ属性の操作

HTML5で導入された data-* 属性は、カスタムデータを要素に保持させるために使用します。これも、getAttribute() や setAttribute() で操作できますが、dataset プロパティを使うことでより簡単に扱えます。

例：データ属性の取得と設定

<div id="example" data-user-id="123" data-role="admin">ユーザー情報</div>

let element = document.getElementById('example');

// データ属性を取得
let userId = element.dataset.userId;
console.log(userId); // "123"

// データ属性を更新
element.dataset.role = 'user';
console.log(element.dataset.role); // "user"

応用例：フォームの入力フィールドを動的に操作

以下の例では、フォーム内の入力フィールドの required 属性を動的に追加・削除するシンプルな例を紹介します。

<form>
 <label for="email">Email:</label>
 <input type="email" id="email">
 <button type="button" onclick="toggleRequired()">必須切り替え</button>
</form>

function toggleRequired() {
 let emailInput = document.getElementById('email');

 if (emailInput.hasAttribute('required')) {
 emailInput.removeAttribute('required');
 } else {
 emailInput.setAttribute('required', 'required');
 }
}

ボタンをクリックすることで、required 属性が追加されたり、削除されたりします。hasAttribute() を使うことで、属性が既に存在するかどうかを確認し、条件に応じて処理を切り替えています。

結論

JavaScriptを使って、HTML要素の属性を取得・更新・削除する方法を理解することで、動的なWebページの操作が可能になります。setAttribute() や getAttribute() を使用した基本的な操作に加え、classList や dataset を活用することで、効率的にDOMを操作できるようになります。これらのメソッドを適切に使い分けることで、より柔軟でインタラクティブなユーザー体験を実現できるでしょう。

JavaScriptの innerText とその使い方

Wed, 09 Oct 2024 18:08:16 +0900

innerText は、JavaScriptでDOM要素のテキストを操作する際に使われるプロパティです。innerHTML とよく似ていますが、テキストのみを扱いたい場合には innerText を使用するのが適しています。この記事では、innerText の使い方と注意点を説明します。

`innerText` とは？

innerText は、HTML要素の表示されているテキストを取得したり、設定するためのプロパティです。innerText を使うと、タグやHTML構造を無視して、純粋にテキストだけを扱うことができます。

基本的な使い方

テキストの取得

innerText プロパティを使用すると、指定した要素内に含まれているテキストを取得することができます。

例：要素内のテキストを取得

<div id="example">こんにちは、世界！</div>

let element = document.getElementById('example');
console.log(element.innerText); // "こんにちは、世界！"

テキストの設定

innerText を使って、要素内のテキストを変更することもできます。

例：要素内のテキストを変更

<div id="example">こんにちは、世界！</div>

let element = document.getElementById('example');
element.innerText = "新しいテキストです！";
console.log(element.innerText); // "新しいテキストです！"

`innerText` と `innerHTML` の違い

innerText は要素内のテキストのみを扱いますが、innerHTML は要素内のHTML全体（タグを含む）を操作します。例えば、HTML構造を維持したい場合やタグを扱う必要がある場合には、innerHTML を使用します。

例：`innerText` と `innerHTML` の違い

<div id="example">
 <strong>太字のテキスト</strong>
</div>

let element = document.getElementById('example');

// innerTextはテキストのみ取得
console.log(element.innerText); // "太字のテキスト"

// innerHTMLはHTML構造も含めて取得
console.log(element.innerHTML); // "<strong>太字のテキスト</strong>"

`innerText` の注意点

見えない要素の扱い

innerText は、CSSで display: none; や visibility: hidden; が設定されている要素のテキストを無視します。つまり、表示されているテキストだけが取得対象となります。

改行や空白の扱い

innerText は、要素内のテキストを取得する際に、ブラウザに表示されている通りに改行や空白を維持します。一方、innerHTML ではHTML内の改行や空白がそのまま扱われるため、異なる結果になることがあります。

例：改行の扱い

<div id="example">
 1行目
 <br>
 2行目
</div>

let element = document.getElementById('example');
console.log(element.innerText); // "1行目\n2行目"
console.log(element.innerHTML); // "1行目<br>2行目"

応用例

フォーム入力内容の確認

innerText を使うと、ユーザーが入力したテキストを画面に表示する場合などに便利です。

<input type="text" id="inputText" placeholder="テキストを入力してください">
<button onclick="showText()">表示</button>
<p id="displayText"></p>

function showText() {
 let input = document.getElementById('inputText').value;
 let display = document.getElementById('displayText');
 display.innerText = input;
}

上記の例では、ボタンをクリックすると入力されたテキストが <p> 要素内に表示されます。

結論

innerText は、HTML要素内のテキストを簡単に取得・変更できる便利なプロパティです。テキストのみを操作したい場合に使い、HTML構造を扱う際には innerHTML を選ぶと良いでしょう。表示されているテキストだけを取り扱う場合や、改行や空白をそのまま保持したい場合に特に有効です。

JavaScriptの querySelector とその使い方

Wed, 09 Oct 2024 17:38:17 +0900

JavaScriptの querySelector は、CSSセレクタを使ってHTML要素を取得できる非常に便利なメソッドです。DOM操作の際に頻繁に使われるため、しっかりと理解しておくと、開発効率が向上します。この記事では、基本的な使い方から応用までをまとめて紹介します。

`querySelector` の基本

querySelector は、HTMLドキュメント内で指定したCSSセレクタに一致する最初の要素を返します。これは、CSSセレクタを使ってDOMの特定の要素を簡単に取得できる便利なメソッドです。

基本的な構文：

let element = document.querySelector(selector);

引数 `selector`

querySelector の引数として指定する selector は、CSSセレクタと同じ形式で記述します。例えば、クラス名、ID、タグ名などを指定できます。

クラスを選択する場合：

let element = document.querySelector('.classname');

IDを選択する場合：

let element = document.querySelector('#idname');

タグ名を選択する場合：

let element = document.querySelector('div');

例：特定の要素を取得する

<div id="container">
 <p class="text">最初の段落</p>
 <p class="text">2番目の段落</p>
</div>

// IDが 'container' の要素を取得
let container = document.querySelector('#container');

// クラスが 'text' の最初の段落要素を取得
let firstParagraph = document.querySelector('.text');
console.log(firstParagraph.textContent); // "最初の段落"

このように、 querySelector はCSSのセレクタと同じ形式で指定するため、CSSの知識があれば簡単に理解できます。

応用：複数のセレクタを使用する

querySelector は、複数のCSSセレクタをカンマで区切って指定することもできます。この場合、いずれかのセレクタに一致する最初の要素が返されます。

let element = document.querySelector('p.text, .highlight, #unique');

上記の例では、最初に一致した段落、ハイライトされた要素、またはIDが unique の要素が取得されます。

要素が存在しない場合の処理

querySelector が一致する要素を見つけられない場合、null が返されます。そのため、要素が存在するかどうかを確認するために、null チェックを行う必要があります。

let element = document.querySelector('.not-exist');

if (element) {
 console.log('要素が存在します。');
} else {
 console.log('要素が存在しません。');
}

`querySelectorAll` との違い

querySelector は最初に一致した1つの要素のみを返しますが、複数の要素を取得したい場合は querySelectorAll を使います。querySelectorAll は、指定したセレクタに一致するすべての要素を返し、返り値は NodeList という配列のようなオブジェクトです。

let allParagraphs = document.querySelectorAll('p.text');
allParagraphs.forEach(paragraph => {
 console.log(paragraph.textContent);
});

結論

querySelector は、シンプルでパワフルなDOM要素選択メソッドです。CSSセレクタと同じ構文を使うため、CSSの知識があればスムーズに利用できます。さらに、複数の要素を取得したい場合は、 querySelectorAll を活用することで、効率的にDOM操作を行うことができます。

CSSのremとemの違いと使い分けのポイント

Sun, 15 Sep 2024 15:49:32 +0900

CSS のレイアウト設計で使われる相対的な単位として、rem と em があります。これらは要素のフォントサイズや幅、高さなどを相対的に指定するための便利なツールですが、どちらを使うべきか迷うことがよくあります。本記事では、rem と em の違いと、それぞれの使い分けについて解説します。

`em`とは？

em は、親要素のフォントサイズを基準とした相対単位です。親要素のフォントサイズが変更されると、それに従って em で指定された要素のサイズも変わります。

例:

.parent {
 font-size: 16px;
}

.child {
 font-size: 1.5em; /* 親の 16px × 1.5 = 24px */
}

この場合、.child のフォントサイズは親要素のフォントサイズが基準となるため、24px になります。em の特徴は、ネストされた要素が親要素の影響を受ける点にあります。

`rem`とは？

rem は、ルート要素（html）のフォントサイズを基準とした相対単位です。通常、ブラウザのデフォルトのフォントサイズは 16px なので、特に指定がなければ 1rem は 16px に相当します。

例:

html {
 font-size: 16px;
}

.child {
 font-size: 1.5rem; /* 16px × 1.5 = 24px */
}

rem の大きな利点は、親要素に依存せず、一貫したサイズを保てる点です。これにより、ページ全体のデザインやフォントサイズを統一したい場合に役立ちます。

`em` と `rem` の違い

em : 親要素のフォントサイズを基準にしているため、親要素が異なればサイズも変わります。
rem : 常にルート要素（html）のフォントサイズを基準にしているため、ページ全体で一貫したサイズが得られます。

違いの例

html {
 font-size: 16px;
}

.parent {
 font-size: 20px;
}

.child-em {
 font-size: 2em; /* 20px × 2 = 40px */
}

.child-rem {
 font-size: 2rem; /* 16px × 2 = 32px */
}

この例では、child-em は 40px になり、child-rem は 32px になります。em は親要素の影響を受けるため、サイズが異なります。

使い分けのポイント

1. 一貫したサイズを保ちたい場合は `rem` を使う

レスポンシブデザインや、サイト全体で統一されたフォントサイズを維持したい場合は、rem を使うのが推奨されます。ルート要素のフォントサイズを基準にしているため、ページ全体のバランスが崩れにくいです。

2. コンテキストに応じて柔軟にサイズを変えたい場合は `em` を使う

特定の親要素内で相対的にサイズを変えたい場合は、em が便利です。例えば、カードコンポーネントやボタンのサイズが親要素に応じて拡大・縮小されるようなデザインを実現するのに役立ちます。

3. 入れ子が深くなるときは `em` の注意が必要

em は親要素のサイズに依存するため、要素が入れ子になりすぎると、意図せずサイズが大きくなったり小さくなったりすることがあります。そのため、入れ子が深いデザインには rem の方が扱いやすいことが多いです。

結論：推奨されるのはどっち？

一貫性を重視する場合は rem を推奨 します。特にフォントサイズや幅、高さを全体的に管理したい場合には、rem が適しており、予期しないサイズの変更を避けられます。一方で、特定のコンポーネントごとに柔軟にサイズを変更したい場合には em を使うのが良いでしょう。

HTML 要素に対して奇数回目と偶数回目で異なるスタイルを適用する方法

Fri, 13 Sep 2024 17:08:43 +0900

HTML では、同じクラスを持つ複数の要素に対して、それぞれの要素の表示順に応じたスタイルを適用したい場合があります。たとえば、奇数番目の要素と偶数番目の要素に異なるスタイルを適用する場合、CSS の疑似クラスを使うことで簡単に実現できます。本記事では、その具体的な方法を紹介します。

疑似クラス `:nth-child()` の基本

nth-child() は、要素の表示順に応じてスタイルを適用するための強力な疑似クラスです。nth-child() の引数には数字やキーワードを指定でき、要素の順序に基づいて異なるスタイルを簡単に適用することができます。

`nth-child(odd)` と `nth-child(even)`

最も基本的な使用方法として、奇数番目の要素と偶数番目の要素に対してスタイルを適用する方法があります。

nth-child(odd) は奇数番目の要素にスタイルを適用します。
nth-child(even) は偶数番目の要素にスタイルを適用します。

これにより、例えばリストや段落などの繰り返し要素に、交互に異なる背景色をつけることができます。

実装例

以下は、複数の <div> 要素に対して、奇数回目と偶数回目の要素に異なる背景色を適用する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>奇数と偶数のスタイル適用</title>
 <style>
 /* 奇数番目の要素に適用 */
 .example:nth-child(odd) {
 background-color: lightblue;
 }

 /* 偶数番目の要素に適用 */
 .example:nth-child(even) {
 background-color: lightgreen;
 }

 /* 各要素のサイズとマージンを指定 */
 .example {
 padding: 10px;
 margin: 5px 0;
 }
 </style>
</head>
<body>

 <div class="example">1つ目の要素</div>
 <div class="example">2つ目の要素</div>
 <div class="example">3つ目の要素</div>
 <div class="example">4つ目の要素</div>
 <div class="example">5つ目の要素</div>
 <div class="example">6つ目の要素</div>

</body>
</html>

解説

.example:nth-child(odd)：奇数番目の要素に lightblue の背景色を適用しています。
.example:nth-child(even)：偶数番目の要素に lightgreen の背景色を適用しています。
nth-child() は親要素の中での順序に基づくため、同じクラスを持つ要素であれば、順番通りにスタイルが適用されます。

より柔軟な `nth-child()` の使い方

nth-child() の引数は、奇数や偶数だけでなく、特定のパターンにも対応しています。たとえば、「3番目ごと」や「2つおき」など、柔軟に指定することができます。

`nth-child(n)` の使用

以下は、3つおきにスタイルを適用する例です。

.example:nth-child(3n) {
 background-color: pink;
}

このように、3n を指定すると、3の倍数の順番の要素にスタイルを適用できます。

疑似クラスの注意点

親要素との関係

nth-child() は、要素の親要素内での順番に基づいてスタイルを適用します。そのため、親要素が異なる場合や、他の兄弟要素がある場合は意図しない結果になることがあります。たとえば、次のように他のクラスの要素が間に入ると、その影響を受けます。

<div class="container">
 <div class="example">1つ目</div>
 <div>他の要素</div> <!-- この要素が順序に影響 -->
 <div class="example">2つ目</div>
</div>

この場合、2つ目 の要素は .example:nth-child(even) のスタイルが適用されることはなく、odd 扱いになります。

まとめ

nth-child() を使うことで、HTML の要素に対して奇数番目・偶数番目に異なるスタイルを適用することができます。特にリストや複数の要素が繰り返し表示される場面で、交互に背景色を変えるなどのスタイリングに非常に便利です。また、nth-child() の柔軟な指定方法を活用すれば、さらに複雑なパターンにも対応できるため、Web デザインをより洗練されたものにすることができます。

CSSの基礎: フレックスボックスでのレイアウト

Fri, 29 Mar 2024 23:48:00 +0900

自分がCSS勉強するためにChatGPTにアウトライン作らせて書かせたものの一部です。

フレックスボックスでのレイアウトの概要

フレックスボックス（Flexible Box）レイアウトは、CSS3で導入された強力なレイアウトモデルであり、コンテナ内のアイテム間のスペース分配と強力なアライメント機能を提供します。フレックスボックスを使用することで、さまざまな画面サイズや表示デバイスに対応するレスポンシブなデザインを簡単に実現できます。このセクションでは、フレックスボックスの基本的な使用方法の概要を説明します。

フレックスコンテナの設定

フレックスボックスレイアウトを使用するには、まずフレックスコンテナを定義します。これは、フレックスアイテム（子要素）を含む親要素です。フレックスコンテナにするためには、その要素のdisplayプロパティをflexに設定します。

.flex-container {
 display: flex;
}

主軸と交差軸

フレックスボックスでは、主軸（main axis）と交差軸（cross axis）という二つの軸を考慮します。デフォルトでは、主軸は水平（左から右）、交差軸は垂直（上から下）です。flex-directionプロパティを使用して、主軸の方向を変更することができます。

.flex-container {
 display: flex;
 flex-direction: row; /* row | row-reverse | column | column-reverse */
}

フレックスアイテムの配置

フレックスコンテナ内のアイテム（子要素）は、justify-content、align-items、align-selfなどのプロパティを使って配置を調整できます。

justify-content : 主軸に沿ったアイテムの配置を制御します（例: flex-start、center、space-between）。
align-items : 交差軸に沿ったアイテムの配置を制御します（例: flex-start、center、baseline）。
align-self : 個別のアイテムに対して交差軸の位置を制御します（auto、flex-start、centerなど）。

フレックスアイテムの柔軟性

flexプロパティは、フレックスアイテムがフレックスコンテナ内でどのように伸縮するかを定義します。これにより、アイテムのサイズをフレキシブルに調整できます。

.flex-item {
 flex: 1; /* アイテムがコンテナの利用可能なスペースを等しく分割して占める */
}

フレックスボックスのレイアウト例

以下は、フレックスボックスを使用したナビゲーションバーの簡単な例です。

<div class="flex-container">
 <div class="flex-item">ホーム</div>
 <div class="flex-item">ニュース</div>
 <div class="flex-item">お問い合わせ</div>
</div>

.flex-container {
 display: flex;
 justify-content: space-around;
 align-items: center;
}

.flex-item {
 flex-grow: 1;
 text-align: center;
 padding: 10px;
}

この例では、フレックスアイテムがコンテナの利用可能なスペースを均等に分割し、justify-contentプロパティでアイテム間のスペースを均等に配置し、align-itemsで垂直方向の中央揃えを行っています。

次のセクションより、各見出しの詳細について解説します。

主軸と交差軸

フレックスボックスレイアウトの理解において、主軸（Main Axis）と交差軸（Cross Axis）の概念は中心的な役割を果たします。これらの軸は、フレックスコンテナ内でフレックスアイテムがどのように配置されるか、そしてどのように伸縮するかを決定する基礎となります。

主軸（Main Axis）

主軸は、フレックスアイテムが配置されるメインの方向を指します。デフォルトでは、主軸は水平方向（左から右）ですが、フレックスコンテナのflex-directionプロパティによって、これを変更することができます。flex-directionの値には以下のものがあります：

row（デフォルト）: 主軸が水平方向で、アイテムがテキストの方向に沿って（通常は左から右へ）配置されます。
row-reverse: 主軸が水平方向で、アイテムがテキストの逆方向に沿って（右から左へ）配置されます。
column: 主軸が垂直方向で、アイテムが上から下へ配置されます。
column-reverse: 主軸が垂直方向で、アイテムが下から上へ配置されます。

主軸に沿ったアイテムの配置は、justify-contentプロパティを使用して細かく調整することが可能です。

交差軸（Cross Axis）

交差軸は、主軸に直交する方向を指します。例えば、もし主軸が水平（左から右）であれば、交差軸は垂直（上から下）になります。交差軸は、主軸に対するアイテムの配置やサイズ調整に影響を与えます。

交差軸に沿ったアイテムの配置やサイズは、align-items（コンテナ内のすべてのアイテムに適用）、align-self（個々のアイテムに適用）、そしてalign-content（複数行のアイテムがある場合の行間のスペース配分）プロパティを通じて制御されます。

例：`flex-direction`による主軸と交差軸の変更

.flex-container {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-around;
}

この例では、flex-direction: column;により、主軸が垂直方向に設定されています。これにより、フレックスアイテムは上から下に配置され、交差軸は水平方向になります。align-items: center;は交差軸（この場合は水平）に沿ってアイテムを中央に配置し、justify-content: space-around;は主軸（この場合は垂直）に沿ってアイテム間に均等なスペースを配分します。

主軸と交差軸の概念を理解することは、フレックスボックスを使ったレイアウト設計の基礎となります。これにより、レスポンシブで柔軟なWebデザインを実現することが可能になります。

フレックスアイテムの配置

フレックスボックスモデルでは、フレックスコンテナ内のアイテムの配置を細かく制御できます。このセクションでは、主軸（Main Axis）と交差軸（Cross Axis）に沿ったフレックスアイテムの配置に焦点を当て、それぞれのプロパティの使用方法と効果について詳しく説明します。

主軸に沿った配置：`justify-content`

justify-contentプロパティは、フレックスアイテムを主軸に沿ってどのように配置するかを定義します。このプロパティは、アイテム間のスペース分配や、アイテムのグループをコンテナ内で揃える方法を指定するために使用されます。

flex-start: アイテムをコンテナの開始端に揃えます。
flex-end: アイテムをコンテナの終了端に揃えます。
center: アイテムをコンテナの中央に揃えます。
space-between: 最初のアイテムを開始端に、最後のアイテムを終了端に配置し、残りのアイテム間に均等なスペースを配分します。
space-around: アイテムの周囲に均等なスペースを配分します。各アイテムの両端のスペースは、アイテム間のスペースの半分になります。
space-evenly: アイテム間だけでなく、コンテナの端とアイテムの間にも均等なスペースを配分します。

交差軸に沿った配置：`align-items`と`align-self`

`align-items`

align-itemsプロパティは、フレックスアイテムを交差軸に沿ってどのように配置するかを定義します。これにより、コンテナ内のすべてのアイテムの垂直方向（デフォルトの主軸が水平の場合）の位置を制御できます。

flex-start: アイテムをコンテナの交差軸開始端に揃えます。
flex-end: アイテムをコンテナの交差軸終了端に揃えます。
center: アイテムを交差軸の中央に揃えます。
baseline: アイテムをテキストのベースラインに揃えます。
stretch（デフォルト）: アイテムをコンテナの高さに合わせて伸ばします（アイテムの高さが指定されていない場合）。

`align-self`

align-selfプロパティは、個々のフレックスアイテムに対してalign-itemsプロパティの値を上書きします。これにより、特定のアイテムだけ異なる方法で交差軸に沿って配置することが可能になります。align-selfはalign-itemsと同じ値を受け取りますが、特定のアイテムに適用される点が異なります。

複数行のフレックスアイテムの配置：`align-content`

align-contentプロパティは、フレックスコンテナに複数行のフレックスアイテムがある場合に、それらの行を交差軸に沿ってどのように配置するかを制御します。このプロパティは、コンテナが追加の空間を持っていて、フレックスアイテムが複数行に渡る場合にのみ影響します。

flex-start: 行をコンテナの交差軸開始端に揃えます。
flex-end: 行をコンテナの交差軸終了端に揃えます。
center: 行をコンテナの交差軸中央に揃えます。
space-between: 最初の行を交差軸開始端に、最後の行を終了端に配置し、残りの行間に均等なスペースを配分します。
space-around: 行の周囲に均等なスペースを配分します。
stretch: 行をコンテナの残りの高さに合わせて伸ばします。

フレックスボックスのアイテム配置機能は、複雑なレイアウトを柔軟に、簡単に実現するための強力なツールです。これらのプロパティを適切に利用することで、さまざまな画面サイズに適応するレスポンシブなデザインを作成することができます。

フレックスアイテムの柔軟性

フレックスボックスレイアウトにおける「柔軟性」は、フレックスアイテムのサイズを動的に調整する能力を指します。この柔軟性により、フレックスアイテムはコンテナ内の利用可能なスペースに応じて、伸縮することができます。主にflex-grow、flex-shrink、flex-basisの3つのプロパティを組み合わせて、アイテムの伸縮を制御します。

`flex-grow`

flex-growプロパティは、フレックスアイテムがフレックスコンテナ内の余剰スペースをどの程度占めるかを定義します。値は非負の数で、デフォルトは0です。この値が大きいほど、他のアイテムに比べてより多くの余剰スペースを占めるようになります。

.flex-item {
 flex-grow: 1; /* 余剰スペースを他のアイテムと等しく分割して占める */
}

`flex-shrink`

flex-shrinkプロパティは、フレックスコンテナ内のスペースが不足している場合に、フレックスアイテムがどの程度縮小するかを定義します。値は非負の数で、デフォルトは1です。この値が大きいほど、他のアイテムに比べてより強く縮小します。

.flex-item {
 flex-shrink: 2; /* スペース不足時に他のアイテムよりも強く縮小する */
}

`flex-basis`

flex-basisプロパティは、フレックスアイテムの初期サイズを定義します。この値は、アイテムが伸縮する前の基本となる幅（主軸が水平の場合）または高さ（主軸が垂直の場合）を指定します。値には具体的な寸法（例えば200px）やauto（コンテンツのサイズに基づく）を設定できます。

.flex-item {
 flex-basis: 150px; /* アイテムの初期サイズを150pxに設定 */
}

`flex` のショートハンド

flex-grow、flex-shrink、flex-basisの3つのプロパティは、flexプロパティを使用して簡潔に記述することができます。これは、フレックスアイテムの柔軟性を一括で指定する便利な方法です。

.flex-item {
 flex: 1 2 150px; /* flex-grow: 1, flex-shrink: 2, flex-basis: 150px */
}

この例では、フレックスアイテムは余剰スペースがあれば伸び、スペースが不足していれば縮小し、その初期サイズは150pxと定義されています。デフォルト値flex: 0 1 auto;は、アイテムが伸びず、必要に応じて縮小し、コンテンツのサイズに基づく初期サイズを持つことを意味します。

フレックスアイテムの柔軟性を適切に設定することで、さまざまな画面サイズや表示条件に対応する、動的でレスポンシブなレイアウトを簡単に実現できます。

HTML: Webページの構造/コンテナ/セクショニング

Fri, 29 Mar 2024 20:11:21 +0900

自分がHTML/CSSの復習するためにChatGPTにアウトライン書かせて記事化したものの一部です。

レイアウトの基本（ブロックレベル要素とインライン要素）

Webページのレイアウトを理解する上で、ブロックレベル要素とインライン要素の違いを把握することは非常に重要です。これらの要素は、HTML文書内でどのように配置され、振る舞うかに大きな影響を与えます。このセクションでは、ブロックレベル要素とインライン要素の基本的な特徴と使い方について解説します。

ブロックレベル要素

ブロックレベル要素は、新しい行から始まり、利用可能な全幅を占める傾向があります。これらの要素は、主に構造を定義するために使用され、セクショニング、ヘッダー、パラグラフなどのコンテンツを含むことができます。ブロックレベル要素の例には、<div>, <p>, <header>, <footer>, <section> などがあります。

<div>
 これはブロックレベル要素です。この要素は新しい行から始まり、幅いっぱいに広がります。
</div>

ブロックレベル要素は、マージンやパディングを通じて周囲の要素との間隔を調整することができます。また、width と height プロパティを使用して、そのサイズを明示的に指定することが可能です。

インライン要素

インライン要素は、ブロックレベル要素内に含まれることが多く、新しい行を始めることなく、コンテンツの流れに沿って配置されます。これらの要素は、テキストや画像などの小さなコンテンツのグループに適しており、テキスト内で使用される<span>, <a>, <img> などが該当します。

<p>これは<span style="color: red;">インライン要素</span>の例です。</p>

インライン要素に対しては、width や height プロパティが効果を持ちません。ただし、margin の左右の値（margin-left, margin-right）や、padding の値は適用されますが、上下の値（margin-top, margin-bottom, padding-top, padding-bottom）はブロックレベル要素と同じようには扱われません。

ブロックレベルとインラインの混在

ブロックレベル要素とインライン要素は、HTML文書で混在して使用されることがあります。インライン要素をブロックレベル要素の中に配置することで、テキストや画像などのコンテンツを適切に配置し、スタイリングすることができます。

コンテナ

Webデザインにおいて、ページの内容を整理し、構造的に意味のある方法で情報を提示することは非常に重要です。この目的のために、「コンテナ」と「セクショニング」の概念が役立ちます。これらの手法を適切に使用することで、コンテンツを論理的にグループ化し、ユーザーにとってナビゲートしやすいページを作成することができます。

コンテナは、Webページ上の他の要素を包含（または包装）するために使用される要素です。これは、特定のセクションやコンテンツのグループを視覚的に区別するため、またはスタイリングの目的で使用されます。最も一般的に使用されるコンテナは<div>タグです。<div>はセマンティックな意味を持たないため、ページの構造を損なうことなく、スタイリングやレイアウトのための「箱」として機能します。

<div class="container">
 <p>これはコンテナ内のテキストです。</p>
</div>

セクショニング

セクショニングはWebページのコンテンツを論理的に整理し、それぞれの部分が持つ意味を明確にするための重要なプロセスです。HTML5では、セクショニングを効果的に行うためのいくつかの要素が導入されており、これらを使用することで、コンテンツをよりアクセシブルで検索エンジンに優しいものにすることができます。

`<header>`: ヘッダーのセクショニング

ヘッダーは、ページまたはセクションの導入部分に使用され、通常、サイトのロゴ、ナビゲーションリンク、検索フォームなどを含みます。

<header>
 <h1>サイトのタイトル</h1>
 <nav>
 <ul>
 <li><a href="#home">ホーム</a></li>
 <li><a href="#about">私たちについて</a></li>
 <li><a href="#contact">お問い合わせ</a></li>
 </ul>
 </nav>
</header>

`<footer>`: フッターのセクショニング

フッターは、ページの末尾に配置され、著作権情報、連絡先情報、サイトマップへのリンクなどを含むことが多いです。

<footer>
 <p>© 2024 サイト名. All rights reserved.</p>
</footer>

`<section>`: 汎用セクションのセクショニング

<section>は、関連するコンテンツをグループ化し、それに意味を付与するために使用されます。それぞれの<section>は独自の見出しを持つことが推奨されます。

<section>
 <h2>サービスの紹介</h2>
 <p>私たちの提供するサービスについての説明。</p>
</section>

`<article>`: 独立したコンテンツのセクショニング

<article>は、再利用可能で独立したコンテンツのブロックを定義します。ブログの投稿やニュース記事などがこれに該当します。

<article>
 <h2>記事のタイトル</h2>
 <p>記事の本文...</p>
</article>

`<nav>`: ナビゲーションのセクショニング

<nav>は、ページ内のナビゲーションリンクのグループを示します。サイトの主要なナビゲーションやページ内リンクの集合に使用されます。

<nav>
 <ul>
 <li><a href="#section1">セクション1</a></li>
 <li><a href="#section2">セクション2</a></li>
 </ul>
</nav>

`<aside>`: 補足情報のセクショニング

<aside>は、メインコンテンツから少し離れた位置で、補足情報を提供します。サイドバーのコンテンツに適しています。

<aside>
 <h2>関連記事</h2>
 <ul>
 <li><a href="#">関連記事1</a></li>
 <li><a href="#">関連記事2</a></li>
 </ul>
</aside>

これらのセクショニング要素を使用することで、Webページのコンテンツを論理的に区分けし、その構造を明確にすることができます。正しく使用することで、ページのアクセシビリティとSEOが向上し、ユーザーにとってもナビゲートしやすいページとなります。

HTML/CSSの基本

Fri, 29 Mar 2024 19:14:15 +0900

自分がHTML/CSSの復習するためにChatGPTにアウトライン書かせて記事化したものの一部です。

HTML文書の構造

HTML（HyperText Markup Language）は、Webページの構造を定義するために使用されるマークアップ言語です。

基本的なHTML文書の構成

全てのHTML文書は、基本的な構成要素から成り立っています。これらの要素を正しく理解し、適切に使用することが、効果的なWebページを構築する鍵となります。

HTML文書は、<!DOCTYPE html>宣言から始まり、<html>タグで全体が囲まれます。<html>タグの内部には、<head>セクションと<body>セクションが含まれます。以下はその基本的な骨格です：

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>ページのタイトル</title>
</head>
<body>
 <!-- ここにコンテンツが入ります -->
</body>
</html>

文書宣言とHTML要素

<!DOCTYPE html>
<html lang="ja">

<!DOCTYPE html>: この宣言は文書がHTML5を使用していることをブラウザに伝えます。HTML文書の最初に記述し、HTML5の標準に従うことを示します。
<html>: HTML文書のルート（または最上位）要素です。lang属性を用いて文書の主言語を指定します。この例では、“ja"が日本語を意味します。

ヘッドセクション

<head>
 <meta charset="UTF-8">
 <title>ページのタイトル</title>
</head>

<head>: 文書のメタデータ、スクリプト、スタイルシートへのリンクなど、ページの見た目に直接影響しない情報を含みます。
<meta charset="UTF-8">: 文書の文字エンコーディングをUTF-8として指定します。これにより、世界中のあらゆる文字が正しく表示されるようになります。
<title>: ブラウザのタブに表示されるページのタイトルを指定します。SEO（検索エンジン最適化）においても重要な役割を果たします。

ボディセクション

<body>
 <!-- ここにページのコンテンツが入ります -->
</body>

<body>: ページのコンテンツを含むメイン部分です。テキスト、画像、動画、リンクなど、ユーザーに表示される要素がここに配置されます。

まとめ

HTML文書は、ブラウザがWebページを正しくレンダリングするための指示を提供するために、非常に構造化された形式で書かれています。<!DOCTYPE html>宣言から始まり、<html>、<head>、そして<body>という要素によって構成されています。この基本的な構造を理解し、適切に使用することは、効果的なWebデザインと開発の基礎となります。

基本的なタグとその使い方

HTML文書を構築する際には、さまざまなタグを使用してコンテンツの構造を定義します。このセクションでは、HTML文書において頻繁に使用される基本的なタグとその使い方について詳しく見ていきます。これらのタグを理解し、適切に使用することで、読みやすくアクセスしやすいWebページを作成することができます。

見出しタグ (`<h1>`〜`<h6>`)

見出しタグは、文書の見出しやセクションのタイトルを示すために使用されます。<h1>から<h6>までの6レベルがあり、<h1>が最も重要な見出しを示し、<h6>に向かうにつれて重要度が下がります。一般的に、<h1>はページの主題を示すために1ページに1回だけ使用し、他の見出しタグはサブセクションの見出しとして使用します。

<h1>メインの見出し</h1>
<h2>サブ見出し</h2>
<h3>さらに小さい見出し</h3>

段落タグ (`<p>`)

段落タグ<p>は、テキストの段落を定義するために使用されます。このタグは、テキストを視覚的に区切り、読みやすくするために重要です。

<p>これは段落です。ここにテキストコンテンツが入ります。</p>

リンクタグ (`<a>`)

リンクタグ<a>は、ハイパーリンクを作成するために使用されます。href属性には、リンク先のURLを指定します。リンクを使用することで、ユーザーはクリックするだけで他のページやサイトに簡単に移動できます。

<a href="https://example.com">Example.comへのリンク</a>

リストタグ (`<ul>`, `<ol>`, `<li>`)

リストは情報を整理し、リスト形式で表示するのに役立ちます。順不同リストには<ul>を、順序付きリストには<ol>を使用し、リストアイテムは<li>タグでマークアップします。

<ul>
 <li>リストアイテム1</li>
 <li>リストアイテム2</li>
</ul>

<ol>
 <li>最初のアイテム</li>
 <li>二番目のアイテム</li>
</ol>

画像タグ (`<img>`)

画像タグ<img>は、Webページに画像を埋め込むために使用されます。src属性には画像のURLを指定し、alt属性には画像の代替テキストを提供します。代替テキストは、画像が表示されない場合や視覚障害者のユーザーが使用するスクリーンリーダーによって読み上げられます。

<img src="image.jpg" alt="説明テキスト">

まとめ

このセクションでは、HTML文書における基本的なタグとその使い方について紹介しました。見出し、段落、リンク、リスト、画像のタグは、Webページを構築する際の基礎となります。これらのタグを適切に使用することで、情報を効果的に整理し、ユーザーにとってアクセスしやすいコンテンツを作成することができます。

CSSの基本

CSS（Cascading Style Sheets）は、Webページの見た目とフォーマットを指定するために使用される言語です。HTMLがページの構造を定義するのに対し、CSSはその外見を装飾します。

CSSの適用

CSSをHTML文書に適用する方法は、スタイルをWebページに組み込むための基本的な技術です。主に3つの方法があります：インラインスタイル、内部スタイルシート、そして外部スタイルシート。各方法は特定の用途に適しており、その使用はプロジェクトの要件や開発者の好みによって異なります。重要な観点は以下です。

再利用性: 外部スタイルシートを使用することで、スタイルを再利用し、コンシステントなデザインを保つことができます。
保守性: スタイルを別のファイルに分離することで、コードの保守性が向上します。CSSファイルを更新するだけで、サイト全体の見た目を変更できます。
パフォーマンス: 外部スタイルシートはブラウザにキャッシュされるため、ページの読み込み時間を短縮することができます。

CSSをHTML文書に適用するこれらの方法を適切に使い分けることで、効率的かつ効果的にWebページをスタイリングすることができます。

インラインスタイル

インラインスタイルは、HTML要素に直接CSSスタイルを適用する方法です。style属性を使用して、個々の要素にスタイルルールを指定します。この方法は、小規模な変更には便利ですが、スタイルの再利用ができないため、大規模なWebサイトでは推奨されません。

<p style="color: blue; font-size: 16px;">これはインラインスタイルを使用したテキストです。</p>

内部スタイルシート

内部スタイルシートは、HTML文書内の<style>タグを用いて定義されます。通常、<head>セクション内に配置され、そのHTML文書内でのみ適用されます。ページ固有のスタイルを定義するのに適していますが、複数のページにわたってスタイルを共有する場合は効率的ではありません。

<head>
 <style>
 body {
 background-color: #f0f0f0;
 }
 p {
 color: red;
 }
 </style>
</head>

外部スタイルシート

外部スタイルシートは、スタイル情報を別のファイルに保存し、HTML文書からリンクする方法です。.css拡張子を持つCSSファイルにスタイルルールを記述し、<link>タグを用いてHTML文書の<head>セクション内でそのファイルを参照します。この方法は再利用性とメンテナンスのしやすさから、最も一般的に推奨される方法です。

<head>
 <link rel="stylesheet" href="styles.css">
</head>

styles.cssファイル:

body {
 background-color: #f0f0f0;
}
p {
 color: green;
}

セレクタ

セレクタは、スタイルを適用するHTML要素を指定します。セレクタには様々な種類があり、特定の要素、要素のクラス、ID、またはそれらの組み合わせを指定することができます。

要素セレクタ

要素セレクタは、特定のHTML要素にスタイルを直接適用します。例えば、すべての<p>タグにスタイルを適用したい場合、次のように記述します。

p {
 color: blue;
 font-size: 16px;
}

クラスセレクタ

クラスセレクタは、特定のクラス属性を持つ要素にスタイルを適用します。ピリオド（.）に続けてクラス名を指定します。

.intro {
 font-weight: bold;
}

IDセレクタ

IDセレクタは、特定のID属性を持つ要素にスタイルを適用します。ハッシュ記号（#）に続けてID名を指定します。

#header {
 background-color: gray;
}

プロパティと値

プロパティは、スタイルの種類を指定します（例: 色、フォントサイズ、マージンなど）。値はそのプロパティに設定する具体的な設定値です。プロパティと値はセミコロンで区切られ、プロパティと値の組み合わせはカーリーブレース（{}）で囲みます。

例：テキストの色とフォントサイズを設定

p {
 color: red; /* プロパティ: color, 値: red */
 font-size: 14px; /* プロパティ: font-size, 値: 14px */
}

スタイリングの基本

CSSを用いたスタイリングは、Webページに視覚的魅力を加える重要なプロセスです。色、フォント、レイアウトなど、さまざまな側面を調整することで、ユーザーにとって魅力的かつ読みやすいページを作成することができます。このセクションでは、スタイリングの基本に焦点を当て、効果的なWebデザインのための主要なCSSプロパティについて解説します。

色の指定 color/background-color

Webページの色彩は、ブランドのイメージを伝え、ユーザーの注意を引き、情報の階層を明確にする役割を果たします。CSSでは、テキストの色、背景色、境界線の色などを指定することができます。

テキストの色: color プロパティを使用して、テキストの色を指定します。
背景色: background-color プロパティを用いて、要素の背景色を設定します。

body {
 color: #333; /* テキストの色をダークグレーに設定 */
 background-color: #f8f8f8; /* 背景色をライトグレーに設定 */
}

フォントとテキストスタイル font-family/font-size/text-align

読みやすさはユーザーエクスペリエンスの重要な要素です。CSSを用いてフォントの種類、サイズ、行間、テキストの揃え方を指定することで、テキストコンテンツの視覚的な魅力と読みやすさを向上させることができます。

フォントファミリー: font-family プロパティを使用して、テキストに使用するフォントを指定します。
フォントサイズ: font-size プロパティで、テキストのサイズを指定します。
テキストアラインメント: text-align プロパティを用いて、テキストの揃え方（左、中央、右）を指定します。

p {
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-size: 16px;
 text-align: justify;
}

ボックスモデル margin/border/padding

CSSのボックスモデルは、Webページ上の各要素がどのようにレイアウトされるかを定義する重要な概念です。各要素は、マージン、ボーダー、パディング、そしてコンテンツ自体の4つの部分から成り立っています。

マージン: margin プロパティを用いて、要素の外側の空間を指定します。
ボーダー: border プロパティで、要素の境界線のスタイル、幅、色を設定します。
パディング: padding プロパティによって、要素の内側の空間（コンテンツとボーダーの間）を指定します。

.box {
 margin: 20px;
 border: 2px solid #000;
 padding: 10px;
}

WordPressで使用されていない画像を削除する方法：Media Cleanerプラグインの使い方

Tue, 31 Oct 2023 02:59:51 +0900

WordPressのサイト運営をしていると、不要な画像やメディアファイルが増えてくることがあります。そんな時に役立つのが「Media Cleaner」というプラグインです。この記事では、Media Cleanerのインストールから使用方法までを詳しく解説します。

1. Media Cleanerとは？

Media Cleanerは、WordPressのメディアライブラリやuploadsディレクトリから使用されていないメディアファイルを検出し、削除するためのプラグインです。記事、ページ、カスタムポストタイプ、ウィジェットなど、さまざまな場所でのメディアの使用状況をチェックします。

2. インストールと有効化

WordPressのダッシュボードから「プラグイン」>「新規追加」に移動。
「Media Cleaner」を検索し、インストール後に有効化。

3. 基本設定の方法

ダッシュボードの左側のメニューから「メディア」>「Cleaner」を選択。
「設定」タブに移動し、スキャンの範囲やチェックの対象を設定。例えば、メディアライブラリだけでなく、テーマやウィジェットの中もチェックするかどうかを選べます。

4. 使用されていないメディアの検出

「ダッシュボード」タブに戻り、スキャンを開始。
スキャンが完了すると、使用されていないと検出されたメディアファイルのリストが表示。

5. 不要なメディアの削除方法

表示されたリストを確認し、誤検出がないか手動でチェック。
使用されていないと確認されたメディアを選択し、「削除」ボタンをクリック。
必要に応じて、ゴミ箱から完全に削除するか、元に戻すことができます。

6. まとめ

Media Cleanerを使用することで、不要なメディアファイルを効率的に整理し、サイトの容量を節約することができます。ただし、操作には注意が必要です。特に、使用前には必ずサイトのバックアップを取ることを忘れずに！

WordPressでのシンタックスハイライトの導入

Thu, 27 Jul 2023 09:00:00 +0900

このサイトにはプログラムのコードが多いので、さっさと入れるべきだったのだが、面倒臭くてしていなかった。これまでシンタックスハイライトはjsのライブラリを導入していたが、今となってはそんなことは面倒臭いので、プラグインを入れようと思っていた。しかしシンタックスハイライトのプラグインはたくさんあるので、どれがよいかわからず、手を付けられていなかった。

ChatGPT-4に聞けばいいんだと今更ながら気づき、色々聞いて導入した。まぁとりあえず動いている。以下、記事にまとめさせた。

イントロ

今回は、WordPressにシンタックスハイライトを導入する方法について説明します。シンタックスハイライトは、コードの読みやすさを向上させるための強力なツールです。

WordPressでコードのシンタックスハイライトを実装するには、主に以下の2つの方法があります。

プラグインを使用する
CodeMirrorなどのライブラリを自分で導入する

プラグインを使用する

これは最も簡単で、特別な技術的スキルが必要ない方法です。プラグインをインストールし有効化するだけで、シンタックスハイライトが利用できるようになります。

以下にいくつかの一般的なプラグインを挙げておきます。

Prism.js: 非常に軽量で、多くのプログラミング言語をサポートしています。WordPress用のPrism.jsプラグインは、「WP PrismJS」などがあります。
SyntaxHighlighter Evolved: 古くからあるプラグインで、多くの言語に対応しています。

CodeMirrorなどのライブラリを自分で導入する

もしより細かい制御が必要であれば、自分でJavaScriptライブラリを導入するという選択肢もあります。この方法は、シンタックスハイライトを手動で実装することになりますが、コードの見た目や動作を完全にカスタマイズできる利点があります。

CodeMirrorやHighlight.jsなどのライブラリを導入することで、このタスクを達成できます。ただし、これらのライブラリを使ってシンタックスハイライトを手動で実装するには、JavaScriptとWordPressのテーマのカスタマイズに精通している必要があります。

SyntaxHighlighter Evolvedの導入

Prism.jsやEnlighter - Customizable Syntax Highlighterといった有名なプラグインもありますが、今回は、シンプルさを最優先に考えるため、SyntaxHighlighter Evolvedを導入することにします。

このプラグインはWordPressのコミュニティで長い間利用されてきたものであり、その簡単さと信頼性が評価されています。特に設定を多く行う必要はなく、ショートコードを使用して簡単にブログ記事やページにコードブロックを挿入できます。

多くのプログラミング言語をサポートしており、その使いやすさと直感的な操作性は、シンプルさを追求するユーザーには特に魅力的です。そのため、特に高度なカスタマイズや特殊な機能を必要としないのであれば、SyntaxHighlighter Evolvedは非常に良い選択となります。

インストール

まずはプラグインのインストールから始めましょう。

WordPressの管理ダッシュボードにログインします。
左側のメニューバーから「プラグイン」を選択し、「新規追加」をクリックします。
検索バーに「SyntaxHighlighter Evolved」を入力し、該当するプラグインを見つけます。
「今すぐインストール」をクリックします。
インストールが完了したら、「有効化」をクリックします。

コードブロックの追加

次に、記事にコードブロックを追加してみましょう。以下にその例を示します。

[sourcecode language="css"]
your code here
[/sourcecode]

ここで、language="css"の部分は、ハイライトを適用する言語に応じて変更します。たとえば、JavaScriptのコードをハイライトする場合はlanguage="js"とします。

Gutenbergにおいては、ブロックも用意されています。

追加の設定（必要に応じて）

SyntaxHighlighter Evolvedはデフォルトの状態でも非常に良く機能しますが、必要に応じてさまざまな設定を調整することもできます。設定はダッシュボードの左側のメニューバーから「設定」を選択し、「SyntaxHighlighter」をクリックすることで行えます。

既存の記事にシンタックスハイライトを適用する

しかし、既存の記事にシンタックスハイライトを適用するには、各記事を手動で編集してショートコードを追加する必要があります。これは、特に記事数が多い場合、一見大変そうに見えます。

データベースの検索置換ツールを使用すれば、一部の作業を自動化できるかもしれません。しかし、この方法は非常に注意が必要です。誤った操作が行われるとサイトに重大な問題を引き起こす可能性があります。したがって、必ず事前にデータベースのバックアップを取るなど、安全な手順を踏むようにしてください。

まとめ

結局のところ、既存の記事をどのように処理するかはあなた次第です。あなたのサイトはあなた自身のものです。必要に応じて、時間を見つけて徐々に修正するか、あるいは、特定の記事だけ修正することも可能です。

それにより、少なくとも新しい記事については、きれいにシンタックスハイライトされたコードを含むことができます。これは、コードの読みやすさを向上させ、読者にとってより価値のあるコンテンツを提供するための一歩となります。

寸評

プラグインの比較については色々と聞いたのだが、結局試したのはSynataxHighliter Evolvedだけなので、詳細につちえは省いた。まぁ十分ちゃんと動いているのでよしとする。

このサイトは比較的新しいサイトであるので、手動で全部置き換えることができたのだが、本館にあたる「或る阿呆の記 - 見栄を張らない、背伸びをしない。私はただの阿呆です。嘘です。 since 2012.10.17.」で手動による置き換えはさすがにつらい。これについては置換ツール（Better Search Replaceを勧められた）を使えという、まぁそうねという回答がきたのだが、調べたところなぜか<pre><code>と</code></pre>の数が合わないということが判明し、そのまま置き換えられねーというかなんで数あわねーんだぬおおぉぉみたいなことになり、挫けた。まぁどうせ昔の記事なんてほとんどアクセスもされないので、比較的アクセスの多い記事については気が向いた時に置き換えるくらいにしたいと思う。

以下は今回の質問。

WordPressで、コードのシンタックスハイライトをいい感じで簡単に実装したい
特にこだわりはないので、簡単さのほうが大事だから、プラグインが良い。いくつかの有名なプラグインを比較してくれ。
柔軟性や機能の豊富さと簡単さはしばしばトレードオフの関係にある。見た感じこれらのプラグインも例に漏れないようだ。僕は機能の豊富さや柔軟性よりもシンプルさを重視している。その観点では、君は何が良いと思う？
オーケー。SyntaxHighlighter Evolvedの使い方を教えてくれ。
なるほど便利だ。しかし、過去の記事にあるコードにこれを適用しなおすのはたいへんだ。なんとかならないか？
置換する手順を詳細かつ具体的に教えてくれ
ちょっと検索してみたら、なぜか<pre><code>と</code></pre>の数が合わなかったよ……。どうやら過去の記事はぐちゃぐちゃになっているようだ。個人サイトだし、ちょっと調べる気力はないな……。
はぁ、まぁ、とりあえず新しい記事についてはSyntaxHighlighterを使っていくとしよう。ここまでの話をブログの記事としてまとめてくれ。適切に見出しをつけてくれ。
他のプラグインも同様のことが言えるだろう。その中でSyntaxHighlighter Evolvedを選んだのは何故かについて書きたい。

最後のほうの質問については、なんか適当なことを言い始めたので打ち切った。

WordPressのエディタ選択: Gutenbergとクラシックエディタの存在理由と選択ガイド

Fri, 30 Jun 2023 00:45:50 +0900

これは私がクラシックエディタの存在意義についてChatGPT-4に書かせたものである。私自身は複数のブログを運営しており、Gutenbergをメインにしているものもあれば、クラシックエディタをメインにしているものもある。どちらにも良いところと悪いところがあるわけだが、基本的には新しいエディタであるGutenbergが推奨される。というか、Gutenbergが出てもう何年もたっているのに、未だにクラシックエディタは健在である。それはいったいぜんたいどういうことだ、ということについての記事である。

はじめに

WordPressユーザーにとって、記事やページの作成と編集は日々の重要なタスクの一つです。そのため、使用するエディタの選択は、作業の効率性、使いやすさ、そして最終的なコンテンツの品質に大きな影響を与えます。WordPressでは、現在、二つの主要なエディターが提供されています: Gutenbergとクラシックエディタ。しかし、これらの違いとどちらを選ぶべきかは一見すると明確ではありません。ここでは、両者の特性を詳しく見ていき、どちらのエディタがあなたに適しているかを判断するためのガイドを提供します。

Gutenbergとクラシックエディタの違い

まず最初に、それぞれのエディタの特性と機能を理解することが重要です。

Gutenbergは、ブロックベースのエディタで、視覚的なレイアウトとデザインに重点を置いています。それは特に、画像、ビデオ、カラムレイアウトなどを頻繁に使用するユーザーにとって有用です。視覚的なエディタとして、ユーザーは自由にブロックを移動、編集、または削除することができ、より直感的なビジュアル編集体験を提供します。

一方、クラシックエディタはより伝統的なWordPressエディタで、テキストエディタと視覚エディタの間で切り替える選択肢があります。これはテキストベースのコンテンツとHTMLコードを直接編集する能力を必要とする人々にとっては便利な機能かもしれません。

なぜクラシックエディタは依然として存在しているのか

それぞれのエディタには独自の利点があり、WordPressユーザーの間でそれぞれ異なるニーズを満たしています。Gutenbergは多くの点で魅力的なエディタですが、すべてのユーザーや状況に対して最適とは限りません。その一部を以下に挙げます。

テキストヘビーなブログ

Gutenbergは視覚的な要素とレイアウトが多いサイトに最適化されています。しかし、主にテキストベースのコンテンツを提供するブログや、コードスニペットや引用などの特定のテキスト要素を頻繁に使用するウェブサイトでは、クラシックエディタの方がより直感的で使いやすい場合があります。

高度なカスタマイゼーションの必要性

Gutenbergは便利なブロックを提供していますが、それらのブロックのカスタマイゼーションは限定的です。HTMLやCSSのようなウェブ言語に精通していて、独自のカスタマイゼーションを高度に適用したいユーザーにとっては、クラシックエディタの方が直接的なコード編集の能力を提供するため、より魅力的な選択肢となるかもしれません。

特定のプラグインやテーマの依存

一部のプラグインやテーマは、Gutenbergではなくクラシックエディタに最適化されているか、または両方をサポートしていません。したがって、これらのプラグインやテーマに依存している場合、Gutenbergの使用は制限される可能性があります。

ただし、古いプラグインやテーマには、セキュリティなどの観点で別の問題を抱えていることにも留意すべきです。

学習曲線

最後に、長年にわたりWordPressを使用してきたユーザーの中には、クラシックエディタの使いやすさと見覚えのあるインターフェースのほうが好ましいを感じられる人もいるでしょう。新しいシステムを学ぶことなく、すぐに編集作業を開始できることは、継続的にコンテンツを提供するために重要な要素です。

新規参加者にとって、なぜGutenbergがおすすめなのか

これらの理由にもかかわらず、新規のWordPressユーザーに対しては、まずGutenbergを試すことをお勧めします。その理由は、Gutenbergが現在のデフォルトのエディタであり、今後のアップデートと新機能のサポートが続くと考えられるからです。

GutenbergはWordPressの未来のデザインと機能の方向性を示しています。ブロックベースの設計は、編集体験をより直感的で視覚的にするだけでなく、柔軟性と拡張性も提供します。ユーザーは個々のブロックを使ってページを自由に設計し、各ブロックを個別にカスタマイズすることができます。

さらに、新機能や改善はまずGutenbergに導入され、新しいテーマやプラグインはGutenbergとの互換性を保証する傾向があります。これは、Gutenbergを学ぶことが、最新のWordPress機能を活用するための重要なステップであることを示しています。

最終的な選択はユーザーのニーズによる

最終的には、どのエディタを選ぶべきかは、その人が何を求めているか、どのようなスキルや経験を持っているかによります。したがって、最適なエディタを見つけるためには、両方のエディタを試し、自分のニーズと作業フローに最も適しているものを選ぶことをお勧めします。

しかし、今後のことを考えると、新規のWordPressユーザーは、まずGutenbergを試すことを強くお勧めします。現在のデフォルトのエディタとして、そしてWordPressの未来のデザインと機能の方向性を示しているためです。クラシックエディタはまだ有効な選択肢であり続けますが、新しいユーザーはGutenbergに触れ、その機能と可能性を試すことで、最新のWordPress機能を最大限に活用するための基盤を築くことができます。

寸評

僕はクラシックエディタとGutenbergの両方を使っている。このChatGPT-4の回答は、概ね悪くないものだと思う（まぁそのように誘導したとも言えるが…）。

以下のような質問をした。

WordPressのGutenbergはクラシックエディタと比べた時、すべての人にとって推奨されるエディタだと言えるか。
シンプルな編集体験を求めるのは、具体的にどんな人か
私自身、Gutenbergをメインで使っているブログとクラシックエディタをメインで使っているブログに分かれている。テキストベースのブログでクラシックエディタを今も使っており、実際、機能的にもクラシックエディタのほうが優れていると感じることが多い。Gutenbergではタブキーで箇条書きのインデントを下げるといった、通常テキストエディタに期待されるような機能もなかったりする。 2つの形式をサポートするのはWordPressにとっても負荷が大きいと思うが、実際的に両方に向き不向きがあると感じる。Gutenbergに統一されることはあるのだろうか。
これからWordPressを始めようという人に、あえてクラシックエディタを勧める理由はあるだろうか。それとも、たとえテキストベースのブログであったとしても、今後のことを考えると、総合的にGutenbergを勧めるべきか。
ここまでの話を、長くなってもよいのでしっかりとした記事としてまとめてください。特に、今でもクラシックエディタがなくならない理由には必ず触れてください。そのうえでなお、新規参加者はまずGutenbergに触れたほうがよいのは何故かについても書いてください。

ポイントとして、最初の質問で「すべての」という修飾を入れた。普通に聞けばChatGPT-4がGutenbergを勧めるのは明らかだったからだ。しかし、ChatGPTは「すべて」について語ることを避ける。そこで、「すべての人に勧められるか」を聞いて、勧められないパターンについて言及させた感じだ。

まぁ、僕自身もこれから始める人がわざわざクラシックエディタから選ぶ必要はないかなと思う。とはいえ、クラシックエディタで既にサイトを運営していてかつ、テキスト主体のブログの人が、あえてGutenbergに乗り換える理由も薄いだろう。

WordPressにおける画像リサイズの抑制

Wed, 28 Jun 2023 23:57:16 +0900

このサイトはWordPressで構築している。WordPressではメディアをアップロードすると、複数のサイズのものが自動的に生成される。これは主にパフォーマンスのためだ。なのだが、サイトの性質によってはストレージ容量を圧迫するデメリットのほうが大きいと判断される場合もある。

ということで、自動リサイズを抑制するにはどうしたらよいか、ChatGPT-4に聞いた。

イントロ

WordPressでは、画像をアップロードすると自動的に複数のサイズが生成されます。これはテーマやプラグインがそれぞれ異なるサイズの画像を必要とするためであり、また、レスポンシブデザインを適用するためにも必要です。しかし、これらの自動生成される画像は、一部のユーザーにとっては不必要なディスク容量を占有する可能性があります。

抑制する方法

WordPressの画像生成を抑制する方法はいくつかあります：

Media Settingsを調整する: WordPressの「Settings」->「Media」から各画像サイズを0pxに設定すると、WordPressはそのサイズの画像を生成しなくなります。
プラグインを使用する: 「Stop Generating Unnecessary Thumbnails」や「Disable Media Sizes」のようなプラグインを利用すると、自動生成される画像のサイズを制御できます。
functions.phpにコードを追加する: テーマのfunctions.phpファイルに特定のコードを追加すると、特定の画像サイズの生成を停止できます。ただし、これには開発者スキルが必要であり、テーマの更新時に変更が上書きされる可能性もあります。

しかし、これらの手法を適用する際には注意が必要です。特に、現在使用しているテーマやプラグインが特定の画像サイズを必要としている場合や、レスポンシブデザインを適切に機能させるためには、これらの自動生成される画像が必要な場合があります。

特に、WordPress 4.4以降で追加された「medium_large」サイズは、メディア設定からは設定できませんが、これはモバイルやタブレットなどのデバイスでの表示性能を向上させるために重要です。このサイズを無効にすると、一部のデバイスでの読み込み速度が低下する可能性があります。

(未検証) medium_large を生成しない方法

もし「medium_large」サイズの画像も生成しないようにしたい場合は、先ほどご紹介したfunctions.phpへのコード追加の方法を利用すると良いでしょう。以下のコードをあなたのテーマのfunctions.phpファイルに追加すれば、「medium_large」サイズの画像の生成を停止できます。

add_action( 'init', 'remove_plugin_image_sizes' );
function remove_plugin_image_sizes() {
 remove_image_size( 'medium_large' );
}

ただし、これを行うと、一部のレスポンシブデザインの要素がうまく機能しなくなる可能性があるので、注意してください。

WordPressで画像のサイズを確認する方法

WordPressが自動的に生成した画像のサイズを確認するには、主に以下の2つの方法があります。

FTPクライアントまたはcPanelのファイルマネージャを使用する:

FTPクライアント（FileZillaなど）またはcPanelのファイルマネージャを使用して、サーバー上のWordPressインストールフォルダにアクセスします。
wp-content/uploadsディレクトリに移動します。このディレクトリには、アップロードされたすべてのメディアファイルが保存されています。
年と月ごとにフォルダが分けられています。新しく画像をアップロードしたら、対応する年と月のフォルダに移動します。
アップロードした画像のバリエーションを見ることができます。もし設定した通りに特定のサイズの画像が生成されていなければ、それは成功している証拠です。

WordPressのメディアライブラリから確認する:

WordPressのダッシュボードにアクセスして、「メディア」->「ライブラリ」に移動します。
アップロードした画像をクリックし、「編集」を選択します。
「ファイル URL」フィールドを見ると、画像のバリエーションが表示されます。

どちらの方法も手動で確認する方法ですが、直接サーバー上のファイルを調べる方がより確実です。

まとめ

WordPressでの画像サイズ生成は、ディスク容量と表示性能のトレードオフを考慮する必要があります。そのバランスは、サイトの内容、訪問者のデバイスの種類、ホスティング環境などによります。ディスク容量を節約することは重要ですが、それがユーザ体験の悪化を引き起こすならば、ある程度のディスク容量の増加を受け入れることが合理的な選択と言えるでしょう。

寸評

これは僕が実際にChatGPTに相談して、かつその挙動を確認したものだ。したがって内容に嘘はないはず。

結論として、僕はlarge sizeのみ抑制するようにした。というのも、メインであげる画像のsizeがlarge sizeと近かったからである。small sizeとmedium sizeについては、なくても僕の使うテーマでは挙動に問題は見られなかったものの、元画像の1/10程度まで容量が圧縮されるので、たとえ作られても全体の影響はさほどでもないと考えた。一方で、large sizeについては、元画像とあまり変わりがない。なくてもテーマには影響がなかったし、あまり意味がないと考えた。これによって、3割程度の容量を節約できる見込みだ。

ということで、このやりとりはけっこう僕にとって有意義だった。このまとめは、他のユーザにとっても有意義ではなかろうか。以下に質問を書く。

WordPressでは画像を上げると自動的に複数のサイズでリサイズされて保存されますが、それによる容量がもったいないです。抑制することはできますか。
メディアの設定による方法がもっとも簡単そうですね。それを実行するにあたって、注意すべきことはありますか。
複数のサイズが生成されていないことを実際に確認するには、どうしたらいいですか
調べてみたところ、オリジナルサイズ以外に4つのサイズができていたものが、1つまで減っていました。設定画面ではサムネイルサイズ、ミディアムサイズ、ラージサイズの3つについて設定できました。どうやら、メディア画面からは残り1つのサイズについては制御できないようですね。
なるほど。しかしメディア画面で設定できないようにしているのには、理由があるかもしれません。また、functions.phpの改修は、今後のメンテナンスを考えるとできれば避けたいところです。容量が1.5倍ほどになってしまうのは少し痛いですが、これくらいは受容すべきかもしれません。
ここまでの議論を、記事にまとめてください。
確認方法についても、以下にまとめてください。

確認方法をスキップするのは非常によろしくなかったが、指摘すれば書いてくれる。

無料ブログプラットフォームとWordPress: 所有権がもたらす影響とその重要性

Tue, 27 Jun 2023 01:31:32 +0900

デジタル時代において、オンラインでの情報発信は個々人だけでなく、ビジネスにとっても不可欠な要素となりました。そのためにはブログやウェブサイトが重要なツールとなりますが、その運営方法やプラットフォーム選びについて迷うことは少なくありません。この記事では、無料のブログプラットフォームとWordPressの違い、特に「所有権」の観点からその違いがもたらす影響について掘り下げていきます。

無料ブログプラットフォームとは

無料のブログプラットフォーム、例えばBloggerやTumblrなどは、非常に手軽に始めることができるのが大きな特徴です。多くのテンプレートや基本的なカスタマイズオプションが提供されており、技術的な知識がほとんどなくてもブログの運営を始めることができます。一方で、その手軽さの裏には所有権の制限や機能の制約があります。

WordPressとは

WordPressは世界で最も広く使用されているコンテンツ管理システム（CMS）の一つで、特に自己ホストのWordPress.orgは、ユーザーに高度なカスタマイズ性と所有権を提供します。しかし、その一方で、一定の技術的知識や初期設定、メンテナンスが必要となります。

所有権とは

所有権とは、あなたのウェブサイトとそのすべてのコンテンツを完全に制御する能力を指します。これは自分のサイトのデザイン、機能、SEO設定、データの管理など、ウェブサイト全体に対する絶対的な権利を含んでいます。WordPressを使用すれば、これら全てを自由自在にコントロールすることが可能です。

所有権の重要性

所有権は、ウェブサイトの長期的な成功と成長に対する重要な要素です。それはサイトの見た目や機能を自分のニーズに合わせて調整できる自由度、SEOの最適化による訪問者の増加、そしてブランド価値の確立に寄与します。さらに、モネタイズの選択肢を広げることも可能にします。

無料ブログプラットフォームとWordPressの選択

それぞれのプラットフォームにはメリットとデメリットがあります。無料のブログプラットフォームは初心者に優しく、すぐにブログを始めることができます。一方、WordPressは高度なカスタマイズや機能、所有権を提供しますが、そのための一定の技術的知識や運用コスト、メンテナンスが必要です。そのため、どちらを選ぶべきかはあなたのニーズや目標によります。

WordPressへの移行を考えるタイミング

カスタマイズの制限に直面したとき、SEOやマーケティングの必要性を感じたとき、プロフェッショナルなブランドイメージが必要となったとき、モネタイズの選択肢を広げたいときなど、あなたのブログが成長し、より高度な要件を必要とするようになったときに、WordPressへの移行を検討するタイミングかもしれません。

まとめ

無料ブログプラットフォームとWordPress、そのどちらが最適かはあなたのブログの目標とニーズによります。どちらのプラットフォームも一長一短があるため、あなたの状況に最も適した選択を行うことが重要です。

キーワード: ブログプラットフォーム, WordPress, 所有権, カスタマイズ, SEO, ブランドイメージ, モネタイズ, ブログ運営, ウェブサイト運営

寸評

前回「WordPress入門: なぜ今すぐにでもWordPressを使い始めるべきなのか – 或る阿呆とAIと」あまりにもつまらない記事だったのだが、もう少し掘り下げたらもうちょっとマシになるんじゃないかと思えた。そこで、特に「所有権」というそれだけではよくわからないが、しかし重要な概念について掘り下げて聞いてみた。前よりはよくなったんじゃないかと思う。

以下のような質問をした。

無料のブログサービスではなくWordPressを利用する理由として、「所有権」が主な理由になりうるのはなぜでしょうか。
無料のブログでも多くのテンプレートが用意されていたり、独自ドメインを利用したりするオプションがあるのではないでしょうか。
確かにプラットフォームの都合に振り回されるリスクは常に存在しますし、データの移行も難しいケースが多いようです。そうすると、むしろWordPressを選ばない理由はなさそうですが、現実には有料のオプションを使ってもブログプラットフォームを利用するユーザーも多いようです。なぜでしょうか。
スモールスタートではブログプラットフォームも悪くない選択だということですね。しかし、どこかでWordPressに移行を考えるようになる。それはどういうタイミングでしょうか。
所有権の有無によって、出来ることが大きく変わるわけですね。では、ここまでの議論を長めの記事でまとめてください。最初にタイトルをつけてください。適切にH2の見出しをつけてください。最後にキーワードを並べてください。

ただ1パラグラフあたりがあまりにも短い。読み応えがない。やはり出力の仕方はまだまだ工夫の余地がある。

WordPress入門: なぜ今すぐにでもWordPressを使い始めるべきなのか

Mon, 26 Jun 2023 22:09:28 +0900

WordPressとは何か

WordPressは世界中のエンジニアから初心者まで、幅広いユーザーにとって便利で使いやすいツールとされています。このコンテンツ管理システム (CMS) はウェブサイトの構築・管理を容易にする一方で、多少の学習曲線があることも事実です。それでは、なぜWordPressがあなたのブログ作成のパートナーとして最適なのかを考えてみましょう。

初心者にとってのWordPress

無料のブログプラットフォーム（例えばBloggerやTumblrなど）は非常に使いやすく、手軽にブログを開始できます。しかし、その簡単さと引き換えに、カスタマイズの自由度が限られる場合があります。

それに対してWordPressは、より高度なカスタマイズと機能性を提供しますが、その反面、初めての人にとっては少々学習が必要です。特に自分でホスティングを設定したり、テーマやプラグインをインストールしたりするといった工程が含まれます。

WordPressの利点と挑戦

WordPressの最大の利点はその柔軟性と拡張性です。あなたのニーズに合わせてカスタマイズが可能で、何千ものテーマやプラグインが利用可能です。さらに、SEO（検索エンジン最適化）に優れているため、ブログが検索エンジンに見つけやすくなります。

しかしその一方で、WordPressの学習曲線を乗り越えるためには、基本的な機能から学び始め、学ぶリソースを活用し、小さなステップで進めていくことが重要です。そして何よりも、試行錯誤を恐れず、コミュニティの力を借りて問題を解決することが大切です。

なぜあなたはWordPressを使うべきなのか

WordPressを使うことで、ブログの完全なコントロールと所有権を保つことができます。これにより、あなたのサイトの見た目や機能性、モネタイゼーション、SEOなど、全てを自分で決定することができます。

また、大規模で活発なWordPressのコミュニティは、疑問や問題に対するサポートを提供します。そして、何よりもWordPressは成熟しており、世界中で広く使われているため、その開発と改善は継続的に行われています。

以上の理由から、WordPressはあなたがブログを開始するのに最適なプラットフォームであると言えます。最初は少し難しく感じるかもしれませんが、その可能性と柔軟性は、学習時間を投資する価値があります。

まとめ

WordPressを使用することで、あなた自身が自分のウェブサイトやブログを完全に制御し、カスタマイズする能力を持つことができます。最初は少し学習が必要かもしれませんが、その後の利益と成功はその労力に見合うものとなるでしょう。

キーワード: WordPress, ブログ, コンテンツ管理システム, CMS, 学習曲線, プラグイン, テーマ, SEO, コミュニティ, カスタマイズ, 柔軟性, 拡張性, モネタイゼーション, 所有権

質問と寸評

……という記事をChatGPT-4に書かせてみたわけだが、ちょっとこれを読んでWordPressを使おうという気になる人がいるかは甚だ疑問である。話が抽象的過ぎてなんとも言えない。ブログの完全なコントロールと所有権のところをもっと深掘りしたらよかったのだろうか？たとえばうざったい広告を置かなくて済むとか、プラットフォーマーから理不尽な規制をかけられないとか……。アク禁NGも自由にできるとか。

うーん、なるほど、そう考えると、やっぱり質問の仕方に問題があったかな。なお下記のような質問をChatGPT-4にした。

WordPressはエンジニアにとっては便利で手軽なソフトだが、多くの人にとって難しいツールなのだろうか？
そのとおりだと思うが、ネットで実際にブログをやっている人たちの話を見ると、WordPressはどちらかというとチャレンジだと捉えられているように思える。恐らくはいわゆる無料ブログなんかと比べてだと思うが。自分でサイトを運用するということにハードルを感じる人は多いようだ。
ブログをやる限りは是非挑戦してほしいし、その価値があると思うが、難しさをかんじている人にはどう勧めたら良いだろうか。
使い始めた初心者にはそのアドバイスで良いと思うが、これから使うか悩んでいる人には、使うとこんないいことがあるよと、思ってもらえるようなことを言う必要があるだろう。
ここまでの話を長めの記事にまとめてください。
記事には、以下の条件を指定します。
最初にタイトルをつける
適度に見出しをつける
最後にキーワードを並べる

フォーマットだけは遵守しているね。

Web制作 on AIによる技術記事 備忘録

WordPressで特定記事の最終更新日を表示するショートコードを作る

環境と前提

ショートコードの実装

タイトル付きの拡張版

実運用上の注意点

まとめ

WordPressのカスタムフィールドをREST APIで取得する方法

前提環境

カスタムフィールドをREST APIに追加する手順

コードの実装

パラメータの説明

実際の使用例

動作確認の方法

curlコマンドでの確認

複数のカスタムフィールドを追加する場合

注意点とトラブルシューティング

カスタムフィールドの値が表示されない場合

テーマ間での互換性

まとめ

WordPressでURLを自動的にハイパーリンクにする実装方法

WordPress標準のmake_clickable()関数を使った実装

より詳細な制御が必要な場合の正規表現による実装

特定のフィルターのみに適用する方法

実装時の注意点と推奨される書き方

まとめ

WordPress 6.8.2完全ガイド

リリース概要と重要な変更点

主な修正内容と改善点

コア修正（20項目）

ブロックエディター改善（15項目）

システム要件

最小要件

推奨要件

インストールとアップデート方法

自動更新（推奨）

手動更新

WP-CLI使用

既知の問題と注意点

重要な互換性問題

パフォーマンスへの影響

日本語コミュニティからの反応

翻訳と地域化の状況

開発者とテーマ制作者の対応

前バージョンからの変更点

WordPress 6.8.1からの変更

WordPress 6.8.0からの主な違い

今後の展望と推奨事項

ウェブサイト所有者への推奨

開発者への推奨

まとめ

WordPress REST APIで記事を投稿しカスタムフィールドを設定する方法

準備

Pythonで記事を投稿しカスタムフィールドを設定する

コード例

詳細な解説

カスタムフィールドの設定

既存記事のカスタムフィールドを更新する

コード例

エラーハンドリング

まとめ

WordPress REST APIですべての記事を削除するPythonコード

コード

使い方

WordPressでChart.jsでチャート表示するモック

手順

ステップ 1: Chart.jsのスクリプトを読み込む

ステップ 2: カスタムREST APIエンドポイントを作成

ステップ 3: 記事内でグラフを表示

実際の利用

完成した機能

[PHP] WordPress REST APIでアイキャッチ画像を設定する

WordPress REST APIでアイキャッチ画像を設定する手順

実際の使用例

JavaScriptでのスタイルプロパティの直接割り当て方法

element.style とは？

CSSのプロパティ名との違い

スタイルの直接割り当てと安全性

推奨される方法：

数値プロパティの扱い

Web制作 on AIによる技術記事備忘録

`element.style` とは？

`classList` を使ったスタイル変更

`innerText` とは？

`innerText` と `innerHTML` の違い

例：`innerText` と `innerHTML` の違い

`innerText` の注意点

`querySelector` の基本

引数 `selector`

`querySelectorAll` との違い

`em`とは？

`rem`とは？

`em` と `rem` の違い

1. 一貫したサイズを保ちたい場合は `rem` を使う

2. コンテキストに応じて柔軟にサイズを変えたい場合は `em` を使う

3. 入れ子が深くなるときは `em` の注意が必要

疑似クラス `:nth-child()` の基本

`nth-child(odd)` と `nth-child(even)`

より柔軟な `nth-child()` の使い方

`nth-child(n)` の使用