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

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

今日、パパが皆さんに初心者に優しいPluginを紹介します——CSS Hero。コードの知識がなくても、クリックするだけでWordPress Themeをリアルタイムにカスタマイズでき、„WordPressのスタイルをどう変更するか“„Themeの色をどう置き換えるか“などのすべての問題を簡単に解決できます。初心者でもすぐに使い始め、専用の高品質なサイトを作成できます。

事前準備

Plugin紹介

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

CSS Heroのインストールとアクティベーション

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

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

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

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

インターフェースの概要

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

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

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

CSS HERO 英日対訳表

CSS HEROは英語のみで、日本語化もサポートしていません。ここでパパはまずCSSプロパティパネルを皆さんに英日対比で紹介します。後ろのアイコンと組み合わせて、何度か使用すれば各項目の役割を覚えられるでしょう。

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

以下はAnimationsアニメーションインターフェースの日本語と英語の対応および説明

On Reveal Effect - 表示時効果

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

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つのコア設定を調整できます：

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

② ナビゲーションテキストスタイル：フォント、フォントサイズ、文字間隔、および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ボタンをクリックして保存した後、サイトのFrontendに戻ると、まだ有効になっていないことがわかります。これは、変更したスタイルコードをThemeに追加していないためです。CSS HEROのコードをロードする方法は複数あります。

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

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

手順3：サイトのAdmin Dashboardに戻り、外観メニュー下-カスタマイズに移動し、コピーしたコードを追加CSS内部。

その他の方法：

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

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

よくある質問

まとめ

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

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

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