CSS Hero

商品コード: csshero カテゴリー:

「WordPressでサイトを作成しても、なんだか物足りない。」

「もっとオリジナル感のあるデザインにしたい。」

そうお考えの方も多いのではないでしょうか。

より細かい部分までカスタマイズして、オリジナルのデザインにするためには「CSS」などコードの記述が必須です。

CSS Heroを導入することで、面倒で難しいコードの記述をすることなくサイトのカスタマイズを行うことができます。

サイト上から直感的にデザイン編集

WordPressでは、さまざまなテーマ使用することで簡単にオリジナルのサイトを作成することができます。

テーマを使用したサイトでも細かいデザインの変更をするには「CSS」の記述が必要です。

コードを書き込む必要があるため、慣れない方はよくわからず挫折してしまいがち。

しかし、CSS Heroを導入すれば難しいCSSのコード記述は必要ありません。

サイト上をクリックし、数値の入力や項目の選択だけで直感的にサイトのカスタマイズを行えます。

 

 

 

アニメーションの実装も直感的に

アニメーションで動きをつけたサイトは、かっこよくて憧れますよね。

しかし、自分でアニメーションをつけるのはコードの記述が難しいのでは?と思う方も多いでしょう。

CSS Heroなら、サイトの動きを付けたい部分を選択して簡単にアニメーションを実装できます。

高度なアニメーション付きのサイトを簡単に作ることができるので、試してみてください!

PC/モバイルのプレビュー

サイトを作成している時に、今どのようなデザインになっているのか確認しながら作れたら便利ですよね。

CSS Heroではスマホから、リアルタイムにカスタマイズの効果を確認することができます。

もちろんパソコンでの表示、モバイルでの表示、それぞれを確認できるのでサイト制作がムーズに行えます。

CSS Heroを使用することで、洗練されたワンランク上のサイトが直感的に作れるようになります。

Webデザイナーに頼らなくても、自分で好きなようにサイトのカスタマイズができるのは嬉しいですよね。

難しいコード記述や、面倒な操作もないので誰でも簡単に直感的にサイトのカスタマイズができます。

CSS Heroでワンランク上のサイト制作をしてみませんか?

CSS Heroの使い方

デザイン編集画面

CSS Heroでサイトのデザインを編集する方法を解説します。

  1. WordPressの編集画面にログインした状態で、サイトを表示します。上に出ているメニューバーの [CSS HERO] をクリックします。
  2. デザイン編集画面が開きます。サイトタイトルなど、カスタマイズしたい要素をクリックすると、左にその要素の「プロパティ」が表示されます。
  3. 背景や枠線など、変更したい項目をクリックし、数値や色を指定することでさまざまなカスタマイズが可能です。カスタマイズが終了したら、右下の [保存] をクリックして変更を保存します。

CSSを記述することなく、感覚的に簡単にサイトのカスタマイズができますね。

選択する要素ごとにカスタマイズが可能です。要素とは、タイトルや、サブタイトル、本文、メニューなどサイトを構築しているパーツのことです。

プレビューをデバイスごとに変更したい場合

パソコンでの表示、スマホやタブレットなどデバイスごとのプレビューの表示方法を解説します。

  1. CSS Heroのデザイン編集画面を開いた状態で上のバーにある5つのマークを切り替えることでデバイスごとのプレビューを確認できます。

ボタンは左から、「全て」「タブレット横向き」「タブレット縦向き」「モバイル横向き」「モバイル縦向き」となっています。

 

特定の要素のデザインだけを編集したい場合

CSS Heroでのデザイン変更は、同じ要素全てに適用されてしまいます。ここでは、特定の要素だけに変更を適用させる方法を解説します。

  1. デザイン編集画面で、カスタマイズしたい要素(ここでは「メニュー1」)を右クリックします。[これだけ] をクリックします。
  2. あとはプロパティから変更を加えるだけです。
    これだけをクリックせずにプロパティに変更を加えると、「メニュー1」だけでなく「メニュー2」、「メニュー3」も同じように変わってしまいます。

右クリックをして、「ここだけ」をクリックするだけなので簡単にできます。

 

CSS Heroでは細やかなカスタマイズがとても簡単に直感的にできます。ぜひサイトのカスタマイズに役立ててくださいね!