TCDテーマをCSS書かずに自由にスタイルする方法 – CSS HEROの使い方

CSS書かずに何でも自由にスタイルする方法 – CSS HEROの使い方

TCDテーマってスタイルのオプションほぼ無いので、変えたい部分がある時はCSS書くしかありませんよね。

でも実はTCDのテーマを簡単にCSSを書かずにスタイルする方法があるんです。

それにはCSS HEROというプラグインを使うとTCDのテーマを自由にスタイルすることができます。

CSS HEROとは

CSS HEROとは?

CSS HEROとはWordPress上に表示出来るものは何でもCSSを直接書くことなくスタイルできるプラグインです。(iframeでロードされたサイトはスタイルできません)

>>CSS HERO公式サイト

TCDのテーマだろうが、Cocoonだろうが、HTML/CSSゴリゴリ書いたオリジナルテーマだろうが、海外プラグインのダサいデザインだろうが、全てCSS HEROでスタイルできます。

CSS HEROのインストールの仕方

少しだけ特殊なので説明します。

まずはCSS HEROのダッシュボードからダウンロードします。

CSS HEROをダウンロード

CSS HEROを他のプラグインと同じようにインストールします。

CSS HEROアップロード

上部にProceed to Product Activationというボタンが出てくるので、クリックします。

Get Licenseというボタンが出てきますのでクリックします。

CSS HEROのライセンスをゲット

これで完了です。Got it, let’s go!というボタンをクリックしましょう。

CSS HEROのアクティベーション完了

CSS HEROの使い方

CSS HEROのボタン

まずは編集したいページに行き、画面の上のCSS HEROというボタンをクリックします。

CSS HERO内にページがロードされる

CSS HERO内にそのペーにがロードされます。

編集したい要素にカーソルを持っていくと青い枠がその要素の周りに出来るのでクリックします。

すると、左に編集するためのパネルが出てきます。

CSS HEROで要素を選択するとパネルが出てくる

ここで左のパネルのメニューをクリックして、自由にCSSのプロパティをUIから編集可能です。

すると、実際にページがアップデートされ、自動でCSSが生成されます。

CSS HEROで要素を選択すると左にパネルが出てきて、そこでCSSの要素をUIから変換できる。

このステップを踏んで、ページのスタイルを変えていきます。

この方法だと時に、複数の要素のスタイルが同時に変わります。
これはCSSのセレクタが複数のものを指す場合があるからです。

特定の要素だけスタイルしたい場合

CSS HEROで特定の要素だけスタイルを変えたい場合

特定の要素のスタイルを変換したい場合は、画面上部の「Normal」と買いてあるところをクリックし、「Only-This」を選択します。
そして同じように要素を選択しスタイルします。
これで特定の要素だけスタイル可能です。

保存する

CSS HEROの変換を保存する

右下のSaveと書いたボタンを押すことで変換を保存できます。
これでこのページはこのスタイルが反映された状態になります。

CSS HEROのスタイルが反映されない場合

スタイルのされ方によっては、いくらCSS HEROでスタイルを設定してもなぜか反映しない場合があります。
そんな時の対処法方を説明します。

まず反映されないスタイルの設定の上にある三つの点のメニューのところにカーソルを持っていきます。

CSS HEROでスタイルを無理やり反映させるためのメニュー

Set !importantと出てきますので選択します。

CSS HEROでスタイルを無理やり反映させるSet !importantのメニュー

!importantと表示されれば完了です。

CSS HEROで!importantでプロパティが設定された

これでスタイルが反映されます。

CSS HEROをアンインストールしてもスタイルをキープする方法

実はCSS HEROはCSSを書いてくれてるだけなので、そのCSSさえサイトにいれることができたら、CSS HEROなしでもそのスタイルをキープできるんです。

CSS HEROのエクスポートボタン

保存ボタンではなく、その左の方にあるエクスポートボタンを押してください。

CSS HEROでCSSをエクスポート

LESS、CSS、MINIFIED、JSとありますが、基本的にはCSSまたはMINIFIEDのコードをコピーして、サイトにそのコードを貼り付けるだけでOKです。

JSのタブの中にコードがある場合は、それもサイト内にいれましょう。

いれたらCSS HEROを停止して、ちゃんとスタイルが反映されるか確認してみてください。

基本的な機能はこんな感じです。

CSS HERO楽しんでください。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

「CSS書かずに何でも自由にスタイルする方法 – CSS HEROの使い方」への2件のフィードバック

  1. Naomiさんの番組を見て、CSS Hero買いました!とっても良いですね。ありがとうございます。最後、コードを貼り付けるのはどこに貼り付けたらいいですか?私は2年前にやはりNaomi さんのYoutubeからDiviを購入しました。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料テンプレートサイト
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通