ColorSample - WordPress Plugin

よく使う色のサンプルを200色表示するWordPressプラグインです。

概要

ColorSampleは、Webデザイナーや開発者が色を選択する際の参考として、200色のカラーサンプルを見やすく表示するプラグインです。各色には16進数カラーコード、日本語名、英語名が付いており、クリックするだけでカラーコードをクリップボードにコピーできます。

主な機能

• 200色のカラーサンプル表示

  • 基本色とグレースケール
  • Web標準色
  • 日本の伝統色（和色）
  • パステルカラー
  • その他デザイン色

• 色情報の表示

  • 16進数カラーコード（例: #FFFFFF）
  • 日本語の色名（存在する場合）
  • 英語の色名（存在する場合）

• 便利な機能

  • ワンクリックでカラーコードをコピー
  • コピー成功時のトースト通知
  • レスポンシブデザイン対応

• レスポンシブ対応

  • PC: 5列グリッド
  • タブレット: 4列グリッド
  • スマートフォン: 2列グリッド

動作要件

• WordPress 5.0 以上
• PHP 7.4 以上

インストール方法

方法1: 手動インストール

1. このプラグインのフォルダを /wp-content/plugins/colorsample/ にアップロードします
2. WordPress管理画面の「プラグイン」メニューからプラグインを有効化します
3. 有効化後、https://example.com/colorsample/ にアクセスして色見本ページを表示できます

方法2: Git Clone

cd /path/to/wordpress/wp-content/plugins/
git clone <repository-url> colorsample

その後、WordPress管理画面からプラグインを有効化してください。

使用方法

1. プラグインを有効化します
2. ブラウザで https://your-site.com/colorsample/ にアクセスします
3. 表示された色見本カードをクリックすると、カラーコードがクリップボードにコピーされます
4. コピー成功時には画面右下にトースト通知が表示されます

ファイル構成

colorsample/
├── colorsample.php            # プラグインメインファイル
├── README.md                  # このファイル
├── doc/
│   └── design.md              # 詳細設計書
├── includes/
│   ├── class-colorsample.php  # メインクラス
│   └── color-data.php         # 200色のデータ定義
├── templates/
│   └── colorsample-page.php   # 色見本表示テンプレート
└── assets/
    ├── css/
    │   └── colorsample.css    # スタイルシート
    └── js/
        └── colorsample.js     # JavaScript

技術仕様

URL構造

プラグインを有効化すると、以下のURLで色見本ページにアクセスできます：

https://your-site.com/colorsample/

データ構造

各色は以下の構造で定義されています：

[
    'code' => '#FFFFFF',    // 16進数カラーコード
    'name_ja' => '白',      // 日本語名（オプション）
    'name_en' => 'White'    // 英語名（オプション）
]

色の分類

200色は以下のカテゴリに分類されています：

1. 基本色とグレースケール (30色)

   • 白、黒、赤、緑、青などの基本色
   • 様々な明度のグレー

2. 赤系統の色 (25色)

   • サーモン、ピンク、深紅など

3. オレンジ・黄色系統 (20色)

   • オレンジ、ゴールド、カーキなど

4. 緑系統の色 (30色)

   • ライム、フォレストグリーン、ティールなど

5. 青系統の色 (30色)

   • スカイブルー、ネイビー、コーンフラワーブルーなど

6. 紫・ピンク系統 (20色)

   • バイオレット、ラベンダー、オーキッドなど

7. 日本の伝統色 (45色)

   • 朱色、抹茶色、瑠璃色、桜色など

カスタマイズ

色の追加・変更

includes/color-data.php ファイルを編集することで、色を追加・変更できます：

return [
    ['code' => '#YOUR_COLOR', 'name_ja' => '日本語名', 'name_en' => 'English Name'],
    // ... more colors
];

スタイルのカスタマイズ

assets/css/colorsample.css ファイルを編集することで、デザインをカスタマイズできます。

よくある質問

Q: プラグインを有効化したのに /colorsample/ にアクセスできません

A: WordPress管理画面の「設定」→「パーマリンク設定」を開き、「変更を保存」をクリックしてパーマリンクをフラッシュしてください。

Q: 色を追加したいのですが？

A: includes/color-data.php ファイルに新しい色を追加してください。

Q: モバイルでは何列表示されますか？

A: スマートフォンでは2列、タブレットでは4列、PCでは5列で表示されます。

開発者向け情報

フック

現在、カスタムフックは提供されていませんが、将来のバージョンで追加予定です。

国際化

プラグインは国際化に対応しており、テキストドメインは colorsample です。

ライセンス

GPL v2 or later

変更履歴

1.0.0 (2025-10-31)

• 初回リリース
• 200色のカラーサンプル表示機能
• クリップボードコピー機能
• レスポンシブデザイン対応

サポート

バグ報告や機能リクエストは、GitHubのIssuesセクションでお願いします。

作者

Your Name

スクリーンショット

（プラグインディレクトリに追加する場合は、スクリーンショットを追加してください）

謝辞

このプラグインは、Web標準色と日本の伝統色を組み合わせて、デザイナーや開発者が色選択を簡単にできるように作成されました。