WordPressプラグイン

テーマ編集不要!CSSを簡単に変更出来るSimple Custom CSS設定方法&カスタムCSSの使い方

WordPressでブログを運営していると必ずぶつかるのが「サイトデザイン問題」。

もともとインターネットやweb業界にいた訳じゃないし、CSSはいじるとエラーになったりサイトが真っ白になったりして怖い・・という苦手意識の強い方や、「いちいちテーマや子テーマを編集するのが面倒」「リスクを負ってまで時間をかけてやりたくない」という方も多いですよね。

今回は直接テーマ編集をせずに、デザインカスタマイズ可能なプラグイン、「Simple Custom CSS」の設定方法&「カスタムCSS」の使い方を解説していきます! 

テーマ編集で直接HTMLコードを編集せずCSS変更できるプラグイン、 Simple Custom CSSの設定方法

Simple Custom CSSを使うケースは、サイトや記事内に置いて、何かしらのデザインを変えたい場合

WordPressダッシュボードの「テーマ編集」や記事内テキストエディタのHTMLコードを編集する必要なく、デザインを一律変更することが出来るるので非常に便利です。

 

本来であればテーマ編集の「base.css」などからコード編集作業が必要になる事がぽ置いかと思いますが、サイトが壊れたりデザインが崩れたりするリスクのあるHTMLの編集作業は初心者にはとても高いハードルですよね。

専用プラグインSimple Custom CSSを導入すれば、CSSデザインを一括管理できます。後々の編集作業も楽ですので、とてもおすすめですよ!

 

まずはダッシュボードからプラグイン「Simple Custom CSS」をインストールし、有効化します。

 参考記事:WordPressにプラグインをインストール&有効化する方法

 

有効化が完了したら、「外観」に「カスタムCSS」が追加されていることを確認します。

カスタムCSSの使い方

カスタムCSSを開いてみると、この様な画面になります。

こちらの入力画面に、デザインしたい内容のコードを入れて「カスタムCSSの更新」をクリックすれば反映されます。

 

内容のHTMLコードは、デザインしたい箇所のトップに、下記キャプチャの様なコードを入力しておけば良いので、どれだけ増えても「どこからどこまでが何のコードなのか」迷子になることもありません。

上記キャプチャコードについて補足すると、「コメントタグ」といい、上記に関しては「ここから下はSNSボタンに関するコード」という内容を示します。

「/*」と「*/」の間に入力された文字はコメントとみなされ、cssの設定に影響が出ません。

 

カスタムCSSはブログを運用していく上で「必ず必須になるプラグイン」という訳ではありませんが、簡単&手軽に出きるならデザインに拘りたい方はおすすめです!

 

ちなみに私が実際にカスタムCSSを使った例はこちらです。

SNSボタンのカスタマイズ方法

ASPアフィリエイトリンクボタンのカスタマイズ方法

Wp Page Naviを使ってページャーのデザインをカスタマイズする方法

よかったら参考にされてみてくださいね^^

 

それでは今回は以上です!

-PC1台で、『生き方』を『働き方』へ-
ABOUT ME
MAI
MAI
webマーケター・コンサルタント。 某マンモス出版社勤務後、フリーのダンサー・ヨガインストラクターとして独立するも「好きな仕事」の現実に直面しゼロから起業。 ブログ収入は累計350万円突破。 週1回以下の作業で月収10万円以上を稼ぎ続ける資産ブログスタートガイドはこちらから。