WordPressの標準カスタマイザーやページビルダーでは実現できないデザインの微調整を行いたいですか？ CSS Heroプラグインを使えば、コードに一切触れることなく、こうした手が届きにくい要素をカスタマイズできます。
特定のデザイン要素（ホバーエフェクト、複雑なスペーシング、微妙なアニメーションなど）を調整する必要がある場合、通常はカスタムCSSが必要ですが、私たちはCSS Heroをよく利用しています。シンプルに見えても、通常はコーディングの知識が必要なこれらの視覚的な調整に最適です。
このCSS Heroレビューでは、CSS Heroを使用してウェブサイトの外観を簡単にカスタマイズする方法を紹介します。ボタンのスタイルを調整する場合でも、複雑なレイアウトを調整する場合でも、このツールは高度なカスタマイズを誰にでも利用できるようにします。
カバーするトピックの概要を以下に示します。
- CSS Heroとは？
- CSS HeroはWordPressのページビルダーですか？
- CSS Heroを使用してWordPressテーマをカスタマイズする方法
- CSS Heroで変更を元に戻す方法
- CSS Hero でモバイルデバイス向けにサイトをカスタマイズする
- CSS Hero はすべての WordPress テーマと互換性がありますか？
- どのプラグインがCSS Heroと互換性がありますか？
CSS Heroとは？
CSS Heroは、HTMLやCSSを一切書かずに（HTMLまたはCSSは不要）独自のWordPressテーマをデザインできるプレミアムWordPressプラグインです。
WordPressのデザインに加えられた変更はすぐに元に戻すことができるため、初心者にとって非常に役立ちます。すべての変更は追加のスタイルシートとして保存されるため、変更を失う心配なくWordPressテーマを更新できます。
デザイナーまたは開発者であれば、CSS Heroも同様に優れていると感じるでしょう。すべての人気のWordPressテーマやフレームワークと連携してうまく機能します。テーマまたは子テーマをすばやく変更し、クライアントのウェブサイトにエクスポートできます。
CSS Hero の使用方法とテスト方法
実際、私たちはすでに多くのWordPressチュートリアルでCSS Heroを使用しています。読者がコーディングなしで特定のデザイン調整を行う必要がある場合の、私たちの定番ソリューションになっています。
いくつかの例を挙げます：
- WordPressウィジェットにカスタムスタイルを追加する方法
- WordPressナビゲーションメニューのスタイル設定方法（更新）
- WordPressで個別のカテゴリを異なる方法でスタイル設定する方法
このレビューのために、私たちはさらに一歩進んで、CSS Hero を新しいテストサイトにインストールしました。すべての機能を調べ、さまざまなカスタマイズを適用しました。この徹底的なテストは、日常の使用で見逃した可能性のある新しい機能や制限を検出するのに役立ちます。
WPBeginnerを信頼する理由 📣
当社は2009年からWordPressカスタマイズツールの追跡を行い、市場に参入するあらゆる主要なソリューションをテストしてきました。利用可能なプラグインが多数あるため、ウェブサイトに最適なものを選択するのがいかに大変か、私たちは理解しています。
私たちのおすすめは、実際のテストと実践的な経験に基づいています。最も重要なのは、WordPressが進化するにつれて、私たちの知識を常に更新していることです。CSS Heroのようなツールが新機能やアップデートをリリースした場合、私たちはそれらを評価し、その結果を皆様と共有します。
詳細については、当社の編集ガイドラインをご確認ください。
CSS HeroはWordPressのページビルダーですか？
いいえ – CSS Heroとページビルダーは異なる目的を果たします。CSS Heroは既存のテーマ要素のスタイル調整に特化していますが、ページビルダーは完全に新しいページレイアウトを作成するためのものです。
CSS Hero をデザインカスタマイズツールと考えてください。コードに触れることなく、配色、スペーシング、タイポグラフィ、その他の視覚要素を微調整できますが、ゼロから新しいページを作成することはできません。
カスタムレイアウト、ランディングページ、またはセールスページを作成するには、SeedProd のような適切なページビルダーが必要です。これは、ドラッグアンドドロップブロック、既製のテンプレート、および強力なデザインコントロールを使用してあらゆる種類のページを構築できる、推奨ソリューションです。
詳細については、SeedProdのレビューをご覧ください。
CSS Heroを使用してWordPressテーマをカスタマイズする方法
まず、CSS Hero プラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
CSS Hero はプレミアム WordPress プラグインであるため、シングルサイトの場合は 29 ドルを支払う必要があります。とはいえ、時間と手間を省けることを考えると、その価格は投資する価値が十分にあると思います。
CSS Hero クーポンコード WPBEGINNER を使用すると、特別割引の 34% オフになります。PRO プランを購入すると、同じコードで 40% の割引が受けられます。
有効化すると、CSS Hero ライセンスキーを取得するためにリダイレクトされます。画面の指示に従うと、数回のクリックでサイトにリダイレクトされます。
CSS Heroは、テーマ編集のためのWYSIWYG（What You See Is What You Get）インターフェースを提供することを目指しています。
ログインした状態でWordPressウェブサイトにアクセスするだけで、WordPress管理バーにCSS Heroボタンが表示されるのがわかります。
ボタンをクリックすると、サイトがライブプレビューに変換されます。
これでCSS Heroエディタが表示されるようになります。上部と下部のツールバー、左側の列、そしてウェブサイトのライブプレビューがあります。
次に、編集したい要素にマウスカーソルを合わせると、CSS Hero がその場所を示してハイライト表示します。
それをクリックすると、その要素が選択され、左側の列にプロパティが表示されます。
これらには、選択した要素の一般的なCSSプロパティが含まれます。たとえば、背景、タイポグラフィ、境界線、スペーシングなどです。
アイテムをクリックして展開し、シンプルなユーザーインターフェースを使用してCSSプロパティを編集できます。
変更を加えると、カスタムCSSが自動的に下に表示されます。
CSSを学習している場合、ライブプレビューで結果とともにさまざまなCSSの変更がどのように適用されるかを確認すると役立つでしょう。
ウェブサイト用のロイヤリティフリーの画像を見つけるのに苦労していますか？
CSS HeroにはUnsplashとの統合機能も組み込まれており、ウェブサイトのデザインに美しい写真を閲覧、検索、使用することができます。
CSS Heroには、ウェブサイトのさまざまな要素に適用できる既製のスニペットもいくつか付属しています。
左側の「スニペット」タブに切り替えると、一般的な要素がリスト表示されます。
要素をクリックして選択すると、CSS Heroがさまざまなスタイルバリエーションを表示します。
「Set Params」ボタンをクリックして好みのスタイルを編集し、「Apply」ボタンをクリックしてテーマに追加します。
CSS Heroのもう1つのクールな機能は、個々の投稿や特定のテンプレートタイプで特定の要素をカスタマイズできることです。これを行うには、画面の左上にある「選択モード」設定に移動します。これにより、カスタマイズがどの程度広範囲に適用されるかが決まります。
- 通常：変更はサイト全体でその要素のすべてのインスタンスに影響します
- これのみ：変更は編集中の特定の要素にのみ適用されます
- テンプレート/アーカイブの種類: 変更は、そのテンプレートを使用しているすべてのページ（カテゴリページなど）に適用されます
この柔軟性により、サイトの他の部分に影響を与えることなく、必要な場所に正確にターゲットを絞ったデザイン変更を行うことができます。
ウェブサイトに変更を加えると、CSS Heroはその変更を自動保存しますが、公開はしません。
これらの変更をライブウェブサイトに適用するには、画面の右下にある「保存して公開」ボタンをクリックしてください。
CSS Heroで変更を元に戻す方法
CSS Heroの最も優れた機能の1つは、行った変更をいつでも元に戻せることです。
CSS Heroは、テーマに加えたすべての変更の履歴を保持します。CSS Heroツールバーの履歴ボタンをクリックするだけで、変更のリストを確認できます。このボタンは小さな時計のように見えます。
日付と時刻をクリックすると、その時点でのサイトの外観を確認できます。その状態に戻したい場合は、その時点から編集を保存または再開してください。
これは、その時点以降に行った変更が失われるという意味ではありません。それらは引き続き保存され、いつでも元に戻すことができます。これ以上簡単なことはありません。
しかし、特定の項目に対して行った変更のみを元に戻したい場合はどうなりますか？
その場合、履歴ツールを使用する必要はありません。以前のバージョンに戻したい要素をクリックし、「リセット」ボタンをクリックします。
これにより、WordPressテーマで定義されたデフォルト設定にアイテムが戻ります。
CSS Hero でモバイルデバイス向けにサイトをカスタマイズする
ウェブデザインで最も難しい側面は、デバイスの互換性です。サイトがすべてのデバイスや画面サイズで同様に印象的に見えるようにする必要があります。
ウェブデザイナーは、ブラウザやデバイスの互換性をテストするためにさまざまなツールを使用します。幸いなことに、CSS Heroには組み込みのプレビューツールが付属しています。
上部ツールバーでモバイル、タブレット、またはデスクトップデバイスを選択します。プレビューエリアがそのデバイスに変わります。また、「編集」モードと「ナビゲート」モードを切り替えて、他のツールバーを非表示にすることもできます。
「編集」モードに切り替えると、モバイルデバイスでプレビューしながらサイトを編集できます。このツールは、モバイルやタブレット向けにテーマのデザインを微調整するのに便利です。
CSS Hero はすべての WordPress テーマと互換性がありますか？
CSS Heroの公式ウェブサイトには、常に増え続ける互換性のあるテーマのリストがあります。このリストには、最高の無料WordPressテーマの多くが含まれています。
また、Divi、CSSIgniter、Themify、StudioPress、Astraなどのショップの最も人気のあるプレミアムテーマも含まれています。
テーマ互換性リストにないテーマについては？
CSS Heroには、ロケットモード自動検出という機能があります。テーマ互換性リストに含まれていないテーマを使用すると、CSS Heroは自動的にロケットモードの使用を開始します。
Rocket Modeは、テーマからCSSセレクターを推測しようとします。これはほとんどの場合完璧に機能します。テーマがWordPressのコーディング標準に従っていれば、ほとんどすべてを編集できます。
テーマ開発者に連絡して、CSS Heroとの互換性を提供するように依頼することもできます。
どのプラグインがCSS Heroと互換性がありますか？
CSS Hero は、互換性のために トップWordPressプラグイン と定期的にテストされています。
これらには、お問い合わせフォームプラグイン、人気のページビルダー、WooCommerceなどが含まれます。
CSS Heroで編集できない出力を生成するWordPressプラグインを使用している場合は、プラグインの作成者に修正を依頼できます。CSS Heroとの互換性を提供するために、それほど多くの作業は必要ありません。
詳細については、WordPressサポートを適切に依頼し、受ける方法に関するガイドをご覧ください。
CSS Hero レビューがお役に立てば幸いです。初心者向けのWordPressの速度とパフォーマンスを向上させる方法に関する究極ガイドや、最高のWordPressテーマビルダーの比較もご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
デニス・ムトミ
このCSS Heroのレビューは非常に包括的で役立ちます！特に、SeedProdのようなページビルダーとどのように異なるかの詳細な説明に感謝しています。過去にCSSのカスタマイズで苦労した経験がある者として、コーディングなしで変更を加え、簡単に元に戻せる機能は画期的です。
内蔵のUnsplash連携機能とデバイス互換性プレビューは、ぜひ試してみたい素晴らしい機能です。
このレビューを読んで、CSS Heroを試してみることにしました。
とても有益でよく構成されたレビューをありがとうございます！
イジー・ヴァネック
これは非常に便利なツールです。以前、ウェブサイトの何かを変更する必要があるとき、Firefoxのインスペクトツールや他のブラウザの開発者ツールを使って調整したいCSSクラスを見つけるのに苦労し、しばしば時間がかかっていました。その後、CSS自体を理解していないため、AI支援のCSS編集に頼る必要がありました。これは、そのような変更のゲームを完全に変え、すべてを大幅に簡素化します。素晴らしいツールです！
THANKGOD JONATHAN
投稿ありがとうございます。このプラグインのおかげで、Wordpressサイトのカスタマイズが非常に簡単になりました。いつかCSS Heroを試してみます。
ラルフ
私は10年以上WordPressで3つのウェブサイトを運営していましたが、CSSに触れたことはありませんでした。テーマビルダーでは解決できない問題を修正する必要があったため試しましたが、うまくいきませんでした。すべてのチュートリアルは非常に複雑で、コーディングに慣れていない人にはあまり役立ちませんでした。
数個の小さなことを修正するためだけに新しいスキルを学ぶことなく、ただやりたいことをやれるように助けてくれる代替手段があることを知って良かった。
WPBeginnerサポート
Glad we could share this plugin with you
管理者
Frank Biganski
WordPress の経験は 10 年近くあり、CSS についてもある程度知識があります。自分で書くことはできませんが、助けがあれば実装できます。
CSS Heroプラグインを購入しましたが、LearnPress LMSプラグインで動作すると記載されていました。しかし、試してみたところ、プラグインはLMSで動作しないことがわかりました。
経験豊富なテーマ開発者 (WPExplorer) に相談したところ、要するに、LearnPress プラグインは複雑でやや不十分に書かれており、CSS Hero プラグインが正常に機能しないだろうとのことでした。
CSS Heroは30日間の返金保証を謳っていますが、2回連絡しても、2週間経ってもCSS Heroの誰からも返事がありません。
保証については注意してください。クレジットカード会社に連絡してキャンセルを試みる必要があるようです。
WPBeginnerサポート
体験談を共有していただきありがとうございます。念のため、相手から送信されたメッセージが迷惑メールフォルダに紛れ込んでいないかご確認ください。
管理者
クレア・スミス
こんにちは。
CSS HeroはSimple Membershipプラグインと連携しますか？ご存知でしたら教えてください。ありがとうございます。
WPBeginnerサポート
現在の競合に関するご質問は、CSS Heroにお問い合わせください。
管理者
Richard
新しいウェブサイトを始めたばかりで、テーマのカスタマイズがあまりできないことに非常にフラストレーションを感じています。多くのコントロールはテーマの購入でロックされていますが、すべてを編集できるかどうかわからないため、テーマを購入するリスクを冒すほど気に入っているかどうかもわかりません。CSS Hero は、無料版を編集するためにテーマの購入を回避させてくれますか？
WPBeginnerサポート
どのようなカスタマイズをご希望かによりますが、CSS Hero は有料テーマを必要とせずにサイトをカスタマイズするのに役立ちます。プラグインができることを確認するために、サイトのデモページをご覧になることをお勧めします。
管理者
マイケル
レビューでこれほど良いとは驚きです。もしかしたら、紹介料を得るために、そこに散りばめられたアフィリエイトリンクと関係があるのかもしれませんね？
プラグインが良くないと言っているわけではありませんが、このようなレビューを真剣に受け止めるのは難しいです。本当に良ければそう言えるはずですが、それを販売して収益を得ようとしているのと同じページで良いと言うのは、このプラグインの非常に大きな有料編集広告のように思えます。
WPBeginnerサポート
Michaelさん、こんにちは。
WPBeginnerでは、実際に使用およびテストした製品のみをお勧めしています。当社がこのウェブサイトで収益を得る方法については、免責事項ページをご覧ください。
管理者
Art
ElementorやDiviのようなテーマビルダーでCSS Heroを使用する理由が、特定の要素に使用されているコードを確認する以外に、私には少し混乱しています。何か見落としていますか？
Jon Seager
こんにちは、最初に質問させてくれてありがとう。メインページでは画像ボックスなしで表示するのにまだ問題がありますが、単一商品ページでは画像を削除し、プレースホルダーを画面左に押し出すことができました。実際には押し出されませんでしたが、テキストがよりまともな開始点から始まるようになりました。
タスクベースの関係で私を雇う余裕のある人と話したいです。日付の範囲を指定できる検索バーの作成と、その他多くの作業を手伝ってくれる人が必要で、タスクを分担して一緒に作業できるパートナーが欲しいです。
サミュエル・リン
こんにちは、私は初心者ですが、wpbeginnerは非常に役立つことがわかりました。
私のマルチサイトの下にあるサブサイトの1つに、非常に気に入っているAffinityテーマがインストールされていました。
しかし、BuddyPressプラグインを追加したところ、BuddyPressのグループ管理者とモデレーターの表示が、特にモバイルで多くのスペースを無駄にしています。
CSS Hero を使用して、Affinity で BP のレイアウトを変更できますか？
よろしくお願いします。
Sam
WPBeginnerサポート
Samuelさん、こんにちは。
定かではありません。BuddyPressやAffinityで試した人がいるかどうか、プラグインの作者にお問い合わせください。
管理者
エリック
こんにちは、
このプラグインはSlider Revolution (5.4) および Visual Composer と互換性がありますか？
場合によっては、他のものよりもこちらの方が作業が速くなる可能性があります。
ご連絡いただけると嬉しいです！
エリック
ルイ
プラグインでCSS HEROが見つかりません
WPBeginnerサポート
ルイさん、
CSS Hero は、独自のウェブサイトから入手できる有料プラグインです。
管理者
AnnaD
こんにちは
このプラグインを購入しましたが、使用できません。CSS Hero がアクティブになっていませんが、どこでアクティブにできるのか見つけられません…
Enn
こんにちは、
非常に良い概要で、プラグイン自体も非常に便利そうです。CSS Heroをダウンロードしましたが、コンピューターで起動できません。このプラグインはMac専用ですか？
よろしくお願いいたします。
Enn
WPBeginnerサポート
Ennさん、こんにちは。
いいえ、これはWordPressプラグインであり、あらゆるWordPressインストールで機能します。
管理者
ジェリー
WPBを最近発見しました。数年間WPサイトのメンテナンスをしてきましたが、あなたのチュートリアルを見るたびに新しいことを学んでいると感じています。ありがとうございます。あなたの努力に感謝します。
WPBeginnerサポート
Jerryさん、こんにちは。
温かいお言葉ありがとうございます。WordPressのヒントやチュートリアルについては、Twitterで私たちに参加することを忘れないでください。
管理者
アル
このプラグインは、Pavillioinテーマ（標準のWordPressテーマの1つ）のメニューを削除しますか？Firebugのようにコードの一部を特定して変更できるようなものだと理解していますが、このプラグインはコードを知らなくても実際に変更できるのですよね？しかし、色や場所などを変更するのではなく、メニューを削除してしまうのでしょうか？
ありがとう
Anthony
こんにちは、
ThemeForestからWordPressテーマを購入し、WordPressビルダーにテーマをアップロードしました。サイトはInMotion Hostingでホストされています。私の質問は、WordPressサイトビルダーを使用してサイトを構築している場合、CSS Heroのプラグインをインストールした後、WordPressウェブビルダーを使用しているときにコンテンツを編集できるように、サイトの右上隅にそのボタンが表示されるかということです。それとも、その機能を持つためにはサイトをホストする必要がありますか？誰かが私のサイトをホストしていても問題ないと思いますか？WordPressビルダーを使用している限り？この点については少し無知で、学びながら進んでいます。ありがとうございます。
WPBeginnerサポート
Anthony様
テーマが標準的なWordPressのコーディングベストプラクティスに従っていれば、CSS Heroを問題なく使用できます。そうでない場合は、テーマのサポートにお問い合わせください。
管理者
デレク
WordPressサイトを更新するために戻ってきましたが、CSSHEROプラグインはページ上に表示されているにもかかわらず機能しません。CSSHeroがアクティブであるように見えても、コンテンツにカーソルを合わせても何も起こりません。プラグインはアクティブ（V 2.1）ですが、現在のバージョンは2.3ですが、更新の通知はありませんでしたか？
WPBeginnerサポート
Derekさん、こんにちは。
プラグインのサポートチームにお問い合わせください。迅速な回避策として、プラグインのzipファイルを手動でアップロードできます。
管理者
VIP
Chrome開発者ツールと同じではありませんか？CDTとCSS Heroの間で顕著な違いは見つかりませんでした…
ところで、クーポンコードは私にも機能しません???
Jitka Hruzova
Yuutaの無料テーマを使っています。現在、ウェブサイトのロゴのサイズを変更できるようにする必要があります（Jetpackの使用はひどく、ロゴは挿入されますが小さく、サイズや何も変更できません）。これは私に役立ちますか？
Phermiki Phawa
ブログをモバイルフレンドリーにするにはどうすればよいですか？
Bhaskar Dhiman
手動でテーマのコーディングを圧縮するにはどうすればよいですか？ Newspaper 7を使用しています。
Darshan Gajara
すごい！本当にヒーローですね。
アンディ・V.
WordPress.com で購入したプレミアムテーマで CSS Hero を使用できますか？
WPBeginnerサポート
いいえ、WordPress.com では使用できません。セルフホスト型 WordPress.org と無料 WordPress.com ブログの違いに関するガイドをご覧ください。
管理者
Juergen | webbeetle
リンクをたどって「料金プラン」のページにたどり着きました…私にとっては大きなNGです！これがビジネスがお金を稼ぐための最も効率的な方法であることは理解していますが、ウェブサイトのホスティング以外に「プラン」を購読する予定はありません（サービスとロード時間が適切でない場合、私は「ロイヤルカスタマー」であることをやめました）。
CSS Hero
自動更新はありません。プラグインの更新が必要な場合は毎年更新できますが、製品は毎年支払うことなく、インストールされた場所で引き続き機能します。
トム
プラグインを購入しましたが、最初に試したWordPressのStella Magazine Themeでは…うまくいきませんでした。
がっかりしています。
どうすればよいでしょうか？
WPBeginnerサポート
CSS Heroサポートにお問い合わせください。
管理者
トム・トルトリチ
例えば h2 のプロパティを変更する場合、1 つのインスタンスまたは 1 つのページのみで変更できますか、それともサイト全体のすべての h2 を変更することしかできませんか？
WPBeginnerサポート
両方行うことができます。たとえば、特定のページでh2タグにカスタムクラスを作成できます。
管理者
ジュリエット
素晴らしい！まさに私が求めていたものです。
DIVIとGENESISで完璧に動作しています！
モニー
こんにちは、割引コードが機能していないようです。
編集スタッフ
I just tried it, and it seems to be loading just fine. Can you please try again
管理者
ルイーズ・フィンレイ
はい。しばらくの間、このようなものを探していました。
Saurabh Chatterjee
無料ですか？もしそうでない場合、これに似た無料のビジュアルCSSエディタはありますか？
編集スタッフ
この記事に記載されているように、無料ではありません。このようなビジュアルエディターは無料では見つかりません。
管理者