イントロダクション
Revifyへようこそ。 本ガイドでは、皆様のWordPress制作ワークフローを劇的に効率化し、納品品質を次なるレベルへと引き上げるための各種リソース（ブロックパターン、カスタムCSS、コードスニペット、および独自ツール）の導入・活用方法を解説します。
Revifyのリソースは、単なるパーツの提供ではありません。プロの制作現場で求められる「堅牢性」と「保守性」を最優先し、独自の防御設計を施した実戦用ツール群です。
⚠️ 導入にあたっての最重要事項（免責事項）
本サービスで提供するリソースは、高度なカスタマイズを伴うプロ向けの仕様となっております。皆様のサイトの安全を確保し、円滑な運用を行っていただくため、以下のルールを必ず遵守してください。
- テスト環境での検証必須：本番環境への適用の前に、必ずローカル環境（Local等）やステージングサイトにて動作確認を行ってください。
- 自力復旧スキルの担保：万が一の干渉やエラーに備え、ファイルマネージャー等から復旧ができる環境・スキルをお持ちであることを前提としています。
- 自己責任原則：提供するコードは二重三重の対策を施し万全を期して設計されていますが、導入によるいかなる損害についても、当事務局では一切の責任を負いかねます。
詳細な規定については、必ず事前の [免責事項ページ] のご確認をお願いいたします。
ブロックパターン：頻出ブロックを即座に構築する
Revifyで提供している「ブロックパターン」「CSS」「コードスニペット」を、ご自身のサイトで活用するためのステップを解説します。
ブロックパターン：コピー＆ペーストで一瞬で構築
ブロックパターン集は、複雑なレイアウトも「コピーして貼るだけ」で完了します。
- STEP 1：デザインをコピーする
- 欲しいパターンの下にある「↑このデザインをコピーする」ボタンをクリックします。これだけでクリップボードに構造が保存されます。
- STEP 2：編集画面で貼り付ける
- ご自身のWordPress編集画面（ブロックエディタ）を開き、挿入したい場所で貼り付け（Ctrl + V / Cmd + V）を行います。
- STEP 3：配置完了！
- 画像のように、瞬時にプロ品質のレイアウトが反映されます。あとは中身のテキストや画像を差し替えるだけです。
この説明では、「リッチカラム」の中に「画像」「見出し」「テキスト」が入っているレイアウトを10秒とかからず構築できました。
この構造、必ずと言っていいほど頻出なんですよね。
これくらいでしたら毎回構築しても大した手間ではない…のですが、手を動かし、構築するための時間的・思考的リソースを、デザインや戦略的な方面に回せる、その積み重ねが中・長期的に大きな差を生みます。
カスタムCSS：デザインを完璧に再現する
Revifyのブロックパターンの中には、より高度なデザインを実現するために専用の「CSSコード」が用意されているものがあります。
これらをセットで使用することで、デモ通りの美しい仕上がりになります。
STEP 1：CSSが必要なパターンか確認する
パターン一覧の中で、コピーボタンの下に「CSSをコピーする」という青いボタンがあるものは、専用CSSが必要なリソースです。
ブロックのコピーと合わせて、このCSSボタンもクリックしてコードをコピーしてください。
💡 ヒント：赤い吹き出しにある通り、このボタンがある場合は「デザイン」と「CSS」をセットで運用します。
STEP 2：専用コードをコピーする
「カスタムCSS & JS」のセクションにある「CSS用コード」を確認します。右上の「CSSをコピーする」ボタンを押すと、コードがクリップボードに保存されます。
STEP 3：WordPressの「追加CSS」に貼り付ける
コピーしたコードを、ご自身のサイトの以下の場所に貼り付けます。
- WordPress管理画面から [外観] ＞ [カスタマイズ] を開きます。
- メニュー内の [追加 CSS] を選択します。
- コピーしたコードを貼り付けて、上部の [公開] ボタンを押せば完了です！
WordPress・SWELLの基本的な使い方が分からない場合は、SWELL講座 初期設定編・初級編にチャレンジしてみてください！
一度『追加CSS』に貼っておけば、そのサイト内で同じブロックパターンを何回使っても、再度CSSを貼る必要はありません。
RevifyのCSSは、特定のクラス名（例：.c-mediaCard）に対してのみ適用されるよう設計されています。
追加CSSに記載してもサイト全体のデザインを壊すことはないのでご安心ください。
（もちろん、「カスタムCSS & JS」への記載でも問題ございません！）
コードスニペット：高度な機能を安全に導入する
Revifyでは、スクロール監視やテキストアニメーションなどのJavaScriptを含む「コードスニペット」を提供しています。
これらは、プラグイン「Code Snippets」を使ってインポートすることで、二重実行などのエラーを防ぎ、安全に導入できます。
STEP 1：ファイルをダウンロードする
スニペット提供エリアにある黄色いボタン「コードスニペットをダウンロード」をクリックし、設定用のファイル（.json）をPCに保存します。
重要：JavaScriptやphpなどは重複して読み込むと不具合の原因になります。Revifyではこの「ダウンロード方式」により、安全な管理を推奨しています。
STEP 2：プラグイン「Code Snippets」を準備する
ご自身のサイトのプラグイン新規追加画面から、「Code Snippets」をインストール・有効化してください。
STEP 3：インポート画面を開く
WordPress管理画面の左メニューに追加された [スニペット] ＞ [インポート] をクリックします。
STEP 4：重複防止の設定とファイルのアップロード
ここが最も重要なステップです。
- 重複チェック： 「Duplicate Snippets」の設定で、一番下の [Do not import any duplicate snippets…] にチェックを入れます。これにより、すでに同じコードがある場合に二重に読み込まれるのを防ぎます。
- アップロード： 先ほどダウンロードしたjsonファイルを、点線の枠内にドラッグ＆ドロップします。
STEP 5：インポートを実行する
ファイルが選択されたことを確認し、[Upload files] ボタンをクリックします。
最後に、取り込みたいスニペットにチェックが入っていることを確認して、[Import Selected] をクリックすればスニペットの導入は完了です！
STEP 6：トグルでONにする
[スニペット] ＞ [すべてのスニペット] 画面を開きます。取り込んだスニペットの左側にあるスイッチ（トグル）をクリックして [ON] に切り替えてください。
- ON： サイトに機能が反映されます。
- OFF： 一時的に機能を止めたい場合はここをオフにするだけです。
functions.phpを書き換えるより安全に管理できます。
💡 なぜ「HTMLタグ」で記載されているのですか？
Revifyのスニペット詳細画面を見ると、JavaScriptやCSSのコードが <script> や <style> というタグで囲まれています。
これは、「プラグインの無料プランをお使いの方でも、制限なくすべての機能をご利用いただけるよう」に設計しているためです。この形式により、特別な設定なしでそのままサイトのフッターなどで安全に動作するようになっています。
その他ツールの詳細ページについて
Revifyが提供する各種ツールは、実務での高度な活用を想定した設計となっております。
そのため、一律のマニュアルではなく、それぞれの特性に最適化した「個別解説ページ」を設けております。
各リソースの導入手順から、プロが推奨する具体的な活用Tipsまで詳しく解説しています。
確実な実装と運用のために、まずは個別ページをご一読ください。
