1. Colors & 2. Typography
1. Colors
Light Mode (Default)
#000000
#ffffff
#333333
#d4a347
rgba(50, 50, 50, 0.9)
Dark Mode (OS Auto-Switch)
#121212
#1a1a1a
#222222
#e0e0e0
2. Typography
今日はとても（L:24px）良い天気です。
今日はとても（XL:32px）良い天気です。
3. Utility Instructions
文中の一部分だけサイズを変える方法
WordPressの右メニュー（文字サイズ設定）は「ブロック全体」に適用される仕様です。文中の一部分だけを変えるには、以下の手順を行ってください。
- サイズを変えたいブロックを選択し、ツールバーの「︙」→「HTMLとして編集」をクリック。
- 変えたい文字を
<span class="...">で囲みます。- 中サイズ: 今日は
<span class="u-fz-m">とても</span>良い天気です - 大サイズ: 今日は
<span class="u-fz-l">とても</span>良い天気です - 特大サイズ: 今日は
<span class="u-fz-xl">とても</span>良い天気です
- 中サイズ: 今日は
- 書き換えたら「ビジュアル編集」に戻します。
4. Images & Icons
Core Assets & UI Icons
SNS Icons
5. Components
| Card Size (Grid) | WORKSより一回り大きい（最大4列 / 25%） |
|---|---|
| Card Height | 250px (本文エリア) |
| Text Clamp | Title, Excerpt 共に -webkit-line-clamp: 3 適用 |
| Background | #F2F2F2 (奇数) / #ffffff (偶数) |
| Title (H2) | Noto Sans JP / 700 / 25px / Line: 1.6 / #ffffff |
|---|---|
| Description | Noto Sans JP / 400 / 16px / Line: 1.6 / #eeeeee |
| Overlay BG | rgba(50, 50, 50, 0.9) |
| Width | 640px (PC) |
| Max Width | 1000px .news-container, .page-container |
|---|---|
| Padding Right (PC) | 120px (右側の固定メタ情報との重複回避) |
| Implementation | SVG Mask (Color: #999) / Hover: Accent Color |
|---|---|
| Functionality | window.openによるポップアップ表示 |
| Data Parsing | strip_tags()により送信タイトルから<br>等を完全除去 |
6. Template Files (WordPress Structure)
| File Name | Role & Page Type |
|---|---|
| style.css | Global Styleテーマの必須ファイル。テーマの基本情報と、サイト全体に適用されるすべてのデザイン（CSS）を記述。 |
| functions.php | Theme Logicテーマの頭脳となる必須ファイル。カスタム投稿の登録、セキュリティ設定、フォーム機能、独自ルールの定義などを記述。 |
| header.php | Global Partすべてのページで最初に読み込まれる共通ヘッダー。サイトの左サイドバー（ロゴ、メニュー、SNSなど）の構造を担う。 |
| footer.php | Global Partすべてのページで最後に読み込まれる共通フッター。コピーライトや、グリッドアニメーション（Isotope）などのJavaScriptを記述。 |
| front-page.php | Home (WORKS)サイトの入り口となるトップページ。WORKS（実績）のMasonryグリッド一覧を表示する。 |
| single-works.php | Works Singleメインコンテンツである「WORKS（実績）」の詳細ページ。独自のメタ情報（リンクや補足画像）と本文を表示。 |
| home.php | News Listニュース（お知らせ）の一覧ページ。 |
| single.php | Post Singleニュース（お知らせ）の詳細ページ。SNSシェアボタンや前後の記事へのナビゲーションを実装。 |
| page.php | Page SinglePROFILEやCONTACTなど、通常の「固定ページ」を表示するための汎用テンプレート。 |
| index.php | Fallbackどのテンプレートにも当てはまらない場合に使われる、WordPressシステム上の最終的な予備ファイル。 |
7. Video & Media Instructions
動画のサムネイル（再生される前に表示される画像）設定
動画のサムネイル設定は、コード（CSSやPHP）を書き換える必要はなく、WordPressの投稿（編集）画面から標準機能を使って設定するのが一番綺麗で確実な方法になります。
現在、single-works.php ではメディアエリアに the_content() を使って出力しているため、WordPressの「動画ブロック」の設定がそのまま反映されます。
スマホで動画が真っ黒になってしまったり、再生ボタンだけになってしまうのを防ぐための「2つの解決策」をご案内します。用途に合わせてお選びください。
方法1：静止画のサムネイル（ポスター画像）を設定する
動画が再生されるまで、指定した画像を表示させておく方法です。
- WordPressのWORKS編集画面を開き、配置している「動画ブロック」をクリックして選択します。
- 画面右側の設定パネル（ブロック設定）を見ます。
- 「ポスター画像」という項目があるので、そこからサムネイルにしたい画像を選択して設定します。
- 記事を更新（保存）します。
これで、スマホでアクセスした際も動画の読み込み中は綺麗にサムネイル画像が表示されます。
方法2：GIFアニメのように無音で自動再生させる（おすすめ）
スマホ（特にiPhoneのSafari等）は、データ通信量を節約するために「音が出る動画」の自動再生を強制的にストップして黒い画面にする仕様があります。これを回避して、サイトを開いた瞬間に動画を自動で動かす方法です。
- 同じく編集画面で「動画ブロック」を選択します。
- 画面右側の設定パネルで、以下の4つのスイッチをすべてONにします。
- 自動再生 (Autoplay)
- ループ (Loop)
- ミュート (Muted) ← ★スマホで自動再生させるための必須条件です
- インライン再生 (Playsinline) ← ★iPhoneで全画面になるのを防ぐ必須条件です
- 記事を更新します。
これを行うと、スマホで見た時もサムネイル画像の代わりに「無音の動画が最初からループ再生されている状態（動くサムネイルのような状態）」になり、とてもリッチな見栄えになります！
もし、「動画ブロック」ではなく独自のカスタムフィールドやHTML（<video>タグ）で直接動画を埋め込んでいる場合は、<video poster="サムネイルの画像URL"> のように poster 属性を追記することで実装可能です。
UpdraftPlus（無料版）を使用して、WordPressサイトを別のサーバーへ移行（引越し）する手順を解説します。
無料版では、有料版にある「自動移行機能（Migrator）」が使えないため、**「手動でバックアップファイルをダウンロードし、新しいサーバーで復元する」**という方法をとります。
手順は大きく分けて以下の4ステップです。
- 【移行元】 データをバックアップしてPCにダウンロード
- 【移行先】 新しいWordPressを用意し、ファイルをアップロード
- 【移行先】 データの復元（リストア）
- 【移行先】 データベースのURL置換（ドメインが変わる場合）
前提条件
- 移行元（旧サーバー）： UpdraftPlusがインストールされていること。
- 移行先（新サーバー）： 新規のWordPressがインストールされており、UpdraftPlusがインストールされていること。
ステップ1：【移行元】バックアップとダウンロード
まず、現在のサイトのデータをすべて取得します。
- WordPress管理画面の 「設定」 > 「UpdraftPlus バックアップ」 を開きます。
- 「今すぐバックアップ」 ボタンをクリックします。
- ポップアップが表示されたら、以下の項目にチェックが入っていることを確認して「今すぐバックアップ」を押します。
- [x] データベースをバックアップに含める
- [x] 以下のファイルのバックアップを含める（プラグイン、テーマ、アップロード、その他すべて）
- バックアップが完了すると、「既存のバックアップ」欄に日付が表示されます。
- そこにある5つのボタン（データベース、プラグイン、テーマ、アップロード、その他）をそれぞれクリックします。
- 「お使いのコンピュータにダウンロード」というボタンが表示されるので、5つのファイルすべてをPCへダウンロードしてください。
ステップ2：【移行先】ファイルのアップロード
新しいサーバー側のWordPressにログインして作業します。
- 新しいサイトの 「設定」 > 「UpdraftPlus バックアップ」 を開きます。
- 「バックアップ / 復元」タブの中にある 「バックアップファイルをアップロード」 のリンクをクリックします。
- ファイル選択エリアが表示されるので、先ほどPCにダウンロードした 5つのファイル をすべてドラッグ＆ドロップ（または選択）します。
- アップロードが完了するまで待ちます（ファイルサイズが大きいと時間がかかります）。
ステップ3：【移行先】データの復元（リストア）
アップロードが終わると、「既存のバックアップ」欄にデータが表示されます。
- 「復元」 ボタンをクリックします。
- 「復元するコンポーネントを選択」という画面が出ます。すべて（プラグイン、テーマ、アップロード、その他、データベース）にチェック を入れ、「次へ」をクリックします。
- 【重要】 ここで「データベースの復元」に関する警告が出る場合があります。「検索と置換（Search and replace）」が必要になる可能性がある旨のメッセージですが、無料版ではこの時点では無視して進めるしかないので、そのまま進みます。
- 「復元」 ボタンを押し、処理が完了するのを待ちます。
- 「Restore Successful（復元成功）」と表示されたら、「UpdraftPlus設定に戻る」ボタンを押します。
注意： この時点でサイトにアクセスすると、管理画面からログアウトされることがあります。その場合は、「移行元（旧サイト）」のユーザー名とパスワード で再ログインしてください（データベースが旧サイトのものに書き換わったため）。
ステップ4：【重要】ドメインが変わる場合の処理
もし「old-site.com」から「new-site.com」へドメインが変わった場合、この時点ではサイト内のリンクや画像パスが旧ドメインのままになっています。これを修正します。
※ドメインが変わらない（サーバー移転のみ）場合は、このステップは不要です。
推奨プラグイン「Better Search Replace」を使用する方法：
UpdraftPlusの無料版にはURL置換機能がないため、別の無料プラグインを使います。
- 移行先のプラグイン追加画面で 「Better Search Replace」 を検索してインストール・有効化します。
- 「ツール」 > 「Better Search Replace」 を開きます。
- 以下の設定を行います：
- Search for（検索）:
http://old-site.com（旧ドメイン） - Replace with（置換）:
http://new-site.com（新ドメイン）- ※末尾の
/（スラッシュ）は入れないのが一般的です。
- ※末尾の
- Select tables（テーブル選択）: すべてのテーブルを選択します（CtrlキーまたはCommandキーを押しながらクリックで複数選択、または一番上をクリックしてShift押しながら一番下をクリック）。
- Run as dry run?（テスト実行?）: 最初はチェックを入れて「Run Search/Replace」を押し、いくつ置換箇所があるか確認します。
- Search for（検索）:
- 問題なさそうであれば、「Run as dry run?」のチェックを外して、もう一度実行します。これでデータベース内のURLが書き換わります。
ステップ5：最終仕上げ（パーマリンク設定）
最後に、ページのリンク切れ（404エラー）を防ぐためにパーマリンク設定を更新します。
- 「設定」 > 「パーマリンク」 を開きます。
- 何も変更せずに、画面下の 「変更を保存」 ボタンをクリックします。
- これにより、
.htaccessファイルなどが再生成され、リンク構造が正常化します。
- これにより、
よくあるトラブルと対策
- アップロードが途中で止まる:
- サーバーのアップロードサイズ制限（
upload_max_filesize）に引っかかっている可能性があります。その場合、FTPソフトを使って/wp-content/updraftフォルダに直接バックアップファイルをアップロードし、UpdraftPlusの設定画面で「リモートストレージを再スキャン」をクリックしてください。
- サーバーのアップロードサイズ制限（
- 画面が真っ白になる:
- PHPのバージョンが旧サーバーと新サーバーで大きく異なると起きることがあります。
.htaccessファイルが古いサーバーの設定を引き継いでしまっている場合があるので、FTPでアクセスして.htaccessを一度リネーム（無効化）してみてください。
この手順通りに行えば、無料版でも安全にサーバー移行が可能です。お手伝いできることがあれば教えてください。