CSS Hero使用チュートリアル：コード不要、初心者でもできるWordPressスタイル変更

苦労してWordPressチュートリアル自分の独立サイトを構築し、テーマをインストールしたのに、テーマのスタイル変更で頭を悩ませていませんか？CSSコードが分からず、サイトのフォント色、ナビゲーションバーのスタイル、ページの余白を調整する方法が分からない？コードを修正して元のテーマを壊し、サイトがクラッシュするのを心配していますか？

今日、Naibaが皆さんに初心者に優しいプラグイン——CSS Heroを紹介します。コードの知識がなくても、クリックするだけでWordPressテーマをリアルタイムにカスタマイズでき、„WordPressのスタイルをどう変えるか“„テーマの色をどう置き換えるか“などの問題を簡単に解決し、初心者でも素早く習得して、独自の高品質なサイトを作成できます。

事前準備

プラグイン紹介

CSS Heroは、WordPressユーザーのために特別に設計されたビジュアルCSSエディターです。その核心的な利点は„コード不要、リアルタイムプレビュー、非破壊編集“であり、専門的なコード知識がなくても、元のテーマファイルを壊す心配はありません。個人ブログ、企業公式サイト、ECサイトを問わず、これを使って素早くスタイルをカスタマイズでき、Astra、Divi、Avadaなどのすべての主要WordPressテーマに完璧に対応し、初心者がテーマスタイルを変更する際のすべての悩みを解決します。

CSS Heroのインストールと有効化

CSS Heroは有料プラグインなので、まず購入してからインストールする必要があります。

公式サイト価格：29ドル/年/1サイト；59ドル/年/5サイト；199ドル/年/999サイト。

購入後、インストールパッケージをダウンロードし、以下の手順に従ってプラグインをインストールしてください。

• ステップ1：WordPress ダッシュボードに移動し、左側の„プラグイン“→„新規追加“をクリックします；
• ステップ2：「プラグインのアップロード」を選択し、先ほどダウンロードしたインストールパッケージをアップロードします；
• ステップ3：インストール完了後、„有効化“をクリックします。有効化後、プラグインのアクティベーション認証ボタンが自動的に表示されるので、クリックして認証・アクティベートします；

インターフェース概要

プラグインが有効化・アクティベートされると、Admin Bar に CSS HERO のエントリーが表示されます。クリックすると編集インターフェースに入ります。

下図は CSS HERO の編集インターフェースです。左側は CSS プロパティパネル、右側はあなたのサイトのフロントエンド効果プレビューエリアです。

スタイルを変更したい任意の場所をクリックし、左側のプロパティパネルで効果を調整できます。

CSS HERO 日本語・英語対照表

CSS HERO は英語のみで、日本語化もサポートしていません。そのため、Naiba はここで CSS プロパティパネルの中英対照表を作成し、後述のアイコンと組み合わせて、何度か使用すれば各項目の役割を覚えられるようにします。

• Background - 背景、要素の背景スタイル（色、画像など）を設定します。
• Typography - タイポグラフィ、テキストのフォント、サイズ、色などのスタイルを制御します。
• Borders - ボーダー、要素のボーダースタイル、幅、色を定義します。
• Border-Radius - ボーダー角丸、ボーダーの角丸の程度を設定します。
• Spacings - 間隔、要素の内側余白（パディング）と外側余白（マージン）を制御します。
• Transform - 変形、要素を回転、拡大縮小、平行移動などの操作を行います。
• Filters - フィルター、要素にぼかし、透明度などの視覚効果を追加します。
• List Styles - リストスタイル、リスト項目のマーカー種類（例：点、数字）を設定します。
• Display - 表示モード、要素のレイアウト方法（例：ブロックレベル、インライン）を決定します。
• Extra - その他のプロパティ、追加の CSS スタイルや設定を指します。
• Measures - 寸法、要素の幅、高さなどのサイズプロパティを制御します。
• Position - 位置、ページ内での要素の配置方法（例：相対、絶対）を設定します

以下はAnimationsアニメーションインターフェースの中英対照と説明

On Reveal Effect - 表示時効果

• 作用：一般的なインタラクティブアニメーションパターンの一つで、要素がブラウザのビューポート（viewport）にスクロールして入った時に初めてトリガーされて再生されるアニメーション効果を指します。主にページのスクロール体験を向上させ、コンテンツが視界に入った時に動的な方法で表示させるために使用されます。

Offset - トリガーオフセット

• 作用：„表示時効果“をトリガーする正確なタイミングを定義します。通常は0から1の間の値で、要素がビューポートに入る割合を表します。例えば、offset: 0.3は、要素の30%がビューポートに入った時にアニメーションを開始することを意味します。

Delay - 遅延

• 作用：アニメーション開始前の待機時間を設定します。複数のアニメーションの開始時間をずらし、順序立てた登場効果を生み出すために使用します。

Duration - 持続時間

• 作用：アニメーションが開始から終了までにかかる総時間を定義します。持続時間が短いとアニメーションは速く、鋭利に。長いとゆっくり、滑らかになります。

Once - 単回実行

• 作用：アニメーションを一度だけ再生するかどうかを制御するブール値（true/false）。
  • true：アニメーションは要素が初めてビューポートに入った時にのみ再生され、それ以降のスクロールではトリガーされません。
  • falseまたは 未設定：要素がビューポートに入る/出るたびに、アニメーションが再トリガーされる可能性があります。

Easing - イージング関数

• 作用：アニメーション中の速度変化曲線を定義する、アニメーションの„質感“に影響する重要なパラメータです。アニメーションが等速か、速く始まって遅くなるか、遅く始まって速くなるかなどを決定し、生硬な機械的な動きではなく、物理的な直感に合ったものにします。
  • よく使われる値：ease（デフォルト、加速してから減速）、linear（等速）、ease-in（遅から速へ）、ease-out（速から遅へ）、ease-in-out（遅-速-遅）。

コア実践

実践1：コード不要でWordPressフォント色を変更

步骤1：进入CSS HERO编辑界面后，选中我们要修改颜色的字体元素。

注意：如果只想修改这一个地方的字体颜色，就鼠标右键，选择Only This。

步骤2：左侧样式面板选择Typography，然后选择Color调整颜色，右侧可以实时预览效果

如果修改满意了，可以点击右下角的Save按钮做一个保存，后面改错了方便我们从右上角历史记录图标恢复到这一步。

Typography编辑界面其他英文对照：

• Color - 色
• Font-Size - フォントサイズ
• Line-Height - 行の高さ
• Font-Family - フォントファミリー
• Font-Weight - フォントの太さ
• Style - スタイル、normal（通常）とitalic（斜体）から選択可能
• Transform - 文字変換、Cap（先頭大文字）、UP（すべて大文字）、low（すべて小文字）から選択可能
• Stroke Color - ストロークカラー
• Stroke Width - ストローク幅
• Letter-Spacing - 文字間隔、文字（アルファベット、数字、単一の漢字）間の間隔を制御します。
• Word-Spacing - 単語間隔、単語（またはスペースで区切られた語句）間の間隔を制御します。
• Text-Shadow - テキストシャドウ

下のSnippetsは、プラグイン作者が作成した、直接適用できるCSSスニペットです。例えば、Buttonsを選択し、Set Params...をクリックすると、サイトのボタンをスニペットと同じ効果に変更できます。

一番下のAnimationsはアニメーション効果です。要素にアニメーションを設定すると、ブラウザがその要素までスクロールしたときにアニメーションが表示されます。

実践2：WordPressナビゲーションバーのスタイルを変更

ステップ1：CSS Hero編集画面に入り、„要素を選択“をクリックし、ナビゲーションバー（ナビゲーションテキストまたはナビゲーション背景をクリック可能）を選択します；

ステップ2：スタイルパネルが表示され、必要に応じて3つのコア設定を調整できます：

① ナビゲーション背景色：„背景色“を見つけ、適切な色を選択します。例えば、領航テーマのナビゲーション背景を白に変更しました；

② ナビゲーションテキストスタイル：フォント、フォントサイズ、文字間隔、および hover（マウスホバー）時の文字色を調整；

③ ナビゲーション間隔：„間隔設定“（Spacing）で、ナビゲーション項目間のパディング、マージンを調整し、レイアウトを最適化；

実践3：WordPressページの余白を調整

例えば、2つのセクション間の空白領域（本文段落、画像、モジュール間など）を調整したい場合、以下の手順で設定できます。

手順1：CSS Hero編集画面に入り、„要素を選択“をクリックし、間隔を調整する領域（本文段落、画像、モジュール間など）を選択；

手順2：スタイルパネルで„間隔設定“（Spacing）を見つける；

手順3：数値スライダーをドラッグするか、直接数値を入力し、間隔効果をリアルタイムでプレビューし、広すぎたり狭すぎたりしないようにする；

間隔用語の説明：

間隔調整は内側の間隔（パディング）と外側の間隔（マージン）に分けられます。下図の青い枠を中心に：

① パディング（Padding）：要素内部の間隔（段落のテキストと枠線の距離など）；

② マージン（Margin）：要素と他の要素との間の間隔（2つの段落間の距離など）；

実践4：レスポンシブスタイル調整

手順1：CSS Hero編集画面に入り、上部の„レスポンシブビュー“（Responsive View）をクリック；

手順2：ビューモード（PC、タブレット、スマートフォン）を切り替えると、異なるデバイスのスタイルがリアルタイムで表示される；

手順3：スマートフォン向けに、特に3点を調整する：フォントサイズ（小さすぎて見えないのを避ける）、ナビゲーションバーのスタイル（スマートフォン画面に合わせ、ドロップダウンメニューを設定可能）、間隔（要素が混雑しないように）；

手順4：異なるビューに切り替え、スタイルの適応効果を逐一確認し、すべてのデバイスで正常に表示されることを確認する；

実践5：CSS HEROで変更したスタイルを適用

CSS HERO編集画面でスタイル調整を行い、Saveボタンをクリックして保存した後、サイトのフロントエンドに戻ると、まだ有効になっていないことがわかります。これは、変更したスタイルコードをテーマに追加していないためです。CSS HEROのコードをロードする方法は複数あります。

手順1：右下のエクスポートボタンをクリックし、調整したCSSコードをコピーします。

手順2：CSS HEROが生成したCSSコードをコピーします。

手順3：サイトの管理画面に戻り、外観メニュー下-カスタマイズに、コピーしたコードを貼り付けます。追加CSSの中。

その他の方法：

子テーマをインストールしている場合は、これらのCSSコードを直接子テーマに貼り付けることもできます。

コード挿入用のプラグインをインストールしている場合は、プラグインに追加することもできますが、比較すると、カスタマイズの追加CSSは初心者ユーザーにとって最も便利な方法です。

よくある質問

まとめ

このチュートリアルを読んだ後、あなたはCSS Heroの核心的な使用方法をマスターしたはずです——コードを一行も書かずに、„WordPressでフォントの色を変更する方法“„ページの間隔を調整する方法“„ナビゲーションバーのスタイルを変更する方法“など、すべてのテーマカスタマイズのニーズを簡単に解決できます。

初心者に優しいWordPressスタイル編集プラグインであるCSS Heroは、操作が簡単で安全かつ非破壊的なだけでなく、全次元のスタイル制御を実現できます。初心者、メディアブロガー、企業運営者、サイト構築従事者を問わず、誰もがこれを使って迅速に個性的で高品質なサイトを作成できます。

もしあなたがまだコードの壁に阻まれていたり、スタイルの変更でサイトが壊れることを心配しているなら、今すぐCSS Heroをインストールし、チュートリアルに従って操作し、WordPressテーマのカスタマイズを簡単に完了させ、あなたのサイトを多くの同種サイトの中から際立たせましょう！