CSS Hero ライブ WordPress テーマエディター

公開: 2023-02-20

WordPress サイトを構築していて、微調整したい要素に出くわしたとします。 答えは、CSS を記述して要素をカスタマイズすることかもしれません。 唯一の問題は、CSS を変更するのに十分な知識がなく、使用する適切なコードを探すのにすでに何時間も費やしていることです。

CSS をゼロから作成する必要がなくなるツールを使用することで、時間を大幅に節約できます。 インスペクタで適切な要素を探すのは忘れてください。 使用する適切な CSS と、それを使用する場所を覚えておく必要はありません。

CSS Hero プラグインは、WordPress サイトをすばやく簡単にカスタマイズするのに役立つ 100% ノーコード ソリューションです。 それをチェックしよう！

CSS Hero でサイトをカスタマイズする

CSS Hero は、サイトの外観を簡単にカスタマイズできる WordPress のプラグインです。 美しくデザインされた直感的なポイント アンド クリック インターフェイスを備えています。

CS Hero ウェブサイトのスクリーンショット

どの WordPress テーマを使用していても、サイトのカスタマイズを完全に制御できます。 サイトの要素をクリックして変更を加え、実際に変更を確認するだけです。 CSS Hero を使用すると、以下を制御できます。

  • 色
  • タイポグラフィとフォント スタイル
  • 対策
  • …もっと！

CSS Hero はネイティブ レスポンシブでもあり、デスクトップとモバイル デバイスの両方でサイトの外観を制御できます。 サイトが壊れる心配もありません。 ライブ プレビュー機能に加えて、CSS Hero には命の恩人デスクトップ機能が含まれているため、変更をデスクトップのみに制限できます。

既存のテーマ ファイルを変更することなく、CSS ヒーロー テーマ エディターで好きなだけ変更を加えることができます。 CSS Hero プラグインを無効にすると、サイトは元の状態に戻ります。

経験豊富な WordPress デザイナーが知っているように、サイトに CSS を追加しすぎると、パフォーマンスが大幅に低下する可能性があります。 ただし、CSS Hero には大量の CSS コードが積み上げられているわけではありません。 むしろ、テーマのスタイルシートをオーバーライドする単一の静的な追加のスタイルシートを生成します。

CSS の記述経験がある場合は、CSS ヒーロー コード エディターで独自のコードを追加することもできます。 ポイント アンド クリック インターフェイスと同じライブ プレビュー機能を提供し、その場でコードの間違いをチェックします。 さらに、独自のメディア クエリを追加できます。 CSS コードをエクスポートして、別の場所で使用することもできます。

CSS Hero は以下とうまく動作します:

  • エレメンター
  • ビーバービルダー
  • GeneratePress
  • ウーコマース
  • グーテンベルク
  • テミフィ
  • TutorLMS
  • bbPress
  • お問い合わせフォーム 7
  • …もっと！

好きなテーマで作業し、サイトの要素をカスタマイズできます.

あなたのサイトで CSS Hero を試してみてください!

CSS Hero を使用してサイトをカスタマイズする方法

CSS Hero の使用は満足のいく直感的なものですが、セットアップとプラグインの主な機能のいくつかの使用方法について説明します.

ステップ 1: CSS Hero プラグインをインストールする

CSS Hero プラグインは Web サイトで見つけることができます。 購入には複数のプランがあり、価格については少し後で説明します。 彼らは30日間の返金保証を提供しているので、試すリスクはありません.

アカウントを作成したら、アカウント ダッシュボードからプラグインの最新バージョンをダウンロードするだけです。

CSS Hero アカウント ダッシュボードのスクリーンショット

.zip ファイルをコンピューターに保存したら、WordPress サイトに移動し、 [プラグイン] → [新規追加]に移動します。 プラグインの zip ファイルを参照し、アップロードしてアクティブ化します。

ステップ 2: アカウントを接続する

すぐに、WordPress 管理ダッシュボードに、ライセンスの有効化を求める通知が表示されます。 大きな青いボタンをクリックし、プロンプトに従ってライセンスをサイトに追加します。

WordPress ダッシュボードのスクリーンショット

これで、上部のメニュー バーに CSS Hero のタブが表示されます。 クリックすると編集環境に入ります。

ステップ 3: サイトを編集する

CSS Hero で編集モードに入ると、カスタマイザーと同様に、現在のページのプレビュー ウィンドウが表示されます。 ただし、今では多くの編集オプションがあります。

編集者

プレビュー ウィンドウ内でカーソルを動かすと、ブラウザーのインスペクターに表示されるのと同じように、ページ要素が呼び出されますが、より詳細で明確になります。

CSS ヒーロー エディターのスクリーンショット

左側のメニューには、選択した要素を変更できる一連の編集ツールがあります。 この例では、単に.site-title要素を選択し、色、font-size、font-weight、letter-spacing を変更し、影を追加しました。 これはすべて、本格的なサイトビルダーのように感じられるスライダーとピッカーを備えた直感的なメニューを使用して行われました. 私のデザインの選択には疑問がありましたが、エディターは非常に使いやすいです。 これは、サイト要素の真のビジュアル編集であり、コードを少し書く必要はありません。

ビジュアル エディター ウィンドウの下にはコード エディターがあり、要素を変更すると適切な CSS コードが表示されます。 CSS を知っていて、コード自体を微調整するのが好きなら、両方のオプションを楽しむことができます。 CSS を初めて使用する場合は、役立つ学習ツールとして機能します。

CSS ヒーロー エディターのスクリーンショット

コード エディターでコードに直接変更や追加を行うことができ、ビジュアル エディターを使用する場合と同じようにライブ プレビューが表示されます。 CSS Hero は、作業中のコーディング エラーについても警告します。 たとえば、カラー セレクターの引数の 1 つを削除してコンマを残すと、すぐにアラートが表示され、どこで間違いを犯したかが通知されました。

CSS ヒーロー エディターのスクリーンショット

間違いを修正すると、アラートは自動的に消えます。

複数のデバイスのプレビュー

CSS Hero エディターのトップバーには、さまざまなデバイスのアイコンが並んでいます。 デフォルトはデスクトップ モードです。 デバイス アイコンをクリックすると、そのデバイスと向きで表示されるプレビューが表示されます。 さらに、ハンドルを使用するか、下部のボックスにピクセル幅を入力して、プレビュー ウィンドウのサイズを調整できます。

CSS ヒーロー エディターのスクリーンショット

また、トップバーメニューには、編集する要素を選択するのではなく、サイトをナビゲートできるトグルがあります.

元に戻すアイコンとやり直しアイコンをクリックしたり、編集の完全な履歴を表示したりできます。

その他の機能

これらは、CSS Hero インターフェイスの主な機能です。 このエディタでできることは他にもたくさんあります。 トップ メニュー バーの [プロジェクト] ドロップダウンをクリックすると、さらに多くのオプションが表示されます。

変数

CSS Hero で利用できる変数には、LESS 変数と CSS 変数の 2 種類があります。 LESS 変数の下によく使用される変数を追加し、1 つのメニューからそれらを管理できます。 [CSS 変数] で、任意の変数を検索し、名前と値を編集できます。

メディアクエリ設定

このメニューでは、既存のすべてのメディア クエリを 1 か所で管理し、必要に応じてカスタム クエリを追加できます。

チェックポイント

サイトの変更をプレビューしたいが、ライブ サイトを更新する準備がまだ整っていないとします。 ここでチェックポイントが役に立ちます。 必要な変更を加えてから、チェックポイントを作成します。 変更をキャンセルしてライブ サイトに影響を与えないようにすることもできますが、いつでも戻って変更を有効にすることができ、大変な作業をやり直す必要はありません。

カスタム フォント

好きなカスタム フォントを .ttf、otf、woff 形式でアップロードできます。

ビデオの背景

これらの滑らかでコンパクトなビデオループの 1 つを背景として追加したいですか? 驚くべきことに、これをエディターで直接行うことができます。 CSS Hero は、coverr が提供する大量の既製のビデオから選択できます。 要素を選択し、ビデオを選択して調整するだけです。 それはとても簡単です。

CSS ヒーロー エディターのスクリーンショット

CSSヒーローの前と後

現在、必要なすべての CSS をカスタマイザーに追加できます。 WordPress にもプレビューが表示されます。

CSS ヒーロー エディターのスクリーンショット

これで問題なく動作しますが、いくつかの点を考慮してください。

  1. CSS をあまり、またはまったく知らないかもしれません。
  2. 以前にコーディングしたものを検索するには、多くの時間がかかる場合があります。
  3. カスタマイザーのすべての CSS は、サイトを劇的に遅くする可能性があります。

CSS Hero エディターの使用を開始したら、ビジュアル エディターを使用してすばやく変更を加えることができます。コーディングは必要ありません。 要素をクリックすると、変更した内容を簡単に見つけることができます。 CSS コードは、きちんと整理された独自のスタイルシートに含まれているため、サイトの速度が低下することはありません。

価格

CSS Hero は、3 段階の年間料金プランとライフタイム プランを提供します。 先に述べたように、どのプランでも購入後 30 日以内であれば 100% 返金保証があります。 試してみるリスクはほとんどありません。

CSS ヒーロー エディターのスクリーンショット

スターター

このプランは、1 つのサイトのみをカスタマイズする必要がある場合に最適です。 年間わずか 29 ドルで、すべての製品アップデートと基本サポートを利用できます。

個人的

あなたがフリーランサーまたは小規模な代理店を経営している場合は、次の層が最適かもしれません。 CSS Hero を最大 5 つのサイトにインストールでき、すべての製品の更新と基本的なサポートを受けることができます。 価格は年間 59 ドルです。

プロ

聞こえるように、このプランはプロの出版社や大規模な代理店に最適です. 年間 199 ドルで、なんと 999 回のインストールが可能で、WordPress マルチサイトがサポートされています。

生涯プロ

これは、999 回のサイト インストール、優先サポート、ライフタイムの製品アップデートを永久に取得できる 1 回限りのプランです。 599 ドルの 1 回払いで、生涯保証されます。

直感的で簡単な CSS カスタマイズ

WordPress デザイナーにとって、CSS Hero は非常に大きな価値を持っています。 CSS をよく知っていても、CSS Hero エディターを使用すると、サイトの編集が驚くほど効率的になります。

CSS Hero をリスクなしでお試しください!