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を使った例はこちらです。
Wp Page Naviを使ってページャーのデザインをカスタマイズする方法
よかったら参考にされてみてくださいね＾＾
それでは今回は以上です！
