プラグイン

テーマ編集不要!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を使ってページャーのデザインをカスタマイズする方法

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

 

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

〜自由なライフスタイルを実現させたいアナタへ〜  

COMMENT

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