TCDテーマには、テーマファイルを編集することなく、任意のスタイルを追加できる「カスタムCSS機能」が実装されています。

当記事では、カスタムCSSの使い方について紹介していきます。

また、テーマファイルの直接編集を避けるべき理由を下記で解説しておりますので、こちらも合わせてご覧ください。CSSカスタマイズの理解が深まります。

カスタムCSSとは

管理画面で入力したCSSをHTMLソース上の<head>タグ内に出力できる機能です。

背景色や文字サイズなど、サイトのスタイルを変更するにはCSSのカスタマイズが必要です。さらに、CSSを追記するには、テーマファイルの編集や子テーマの作成等が必要なため、カスタマイズに慣れていない方にとっては非常に大変です。

カスタムCSS機能を使えば、これらの手間を無くし、管理画面から安全かつ手軽にカスタマイズを行えます。CSSの入力欄は、下記の2箇所ご用意しておりますので、状況に応じて使い分けてください。

テーマオプションのカスタムCSS

TCDテーマオプションの基本設定に存在するカスタムCSS機能です。こちらに記入したCSSは、サイト上の全てのページに反映されるため、一括でスタイルを変更したいときに便利です。

エディタのカスタムCSS

投稿や固定ページのエディタ下部にもカスタムCSSが存在します。こちらに記入したCSSは、特定のページだけに反映できるため、一部のページのみスタイルを編集したいときに便利です。

カスタムCSSを使ってみる

それでは、実際にカスタムCSSを使ってサイトの見た目を変えてみましょう。

今回は、「meets」のデザインコンテンツの背景色を変更するため、下記のCSSをテーマオプションの「カスタムCSS」に記入します。

.design_content { background: lightgray; }

デザインコンテンツの背景色を白色からグレーに変更できました。CSSの知識があれば、スタイルの自由度を広げることができますね。

  • 変更前
  • 変更後

また、上記のようにスタイルを変更する要素を調べるには、ブラウザの開発者ツールを利用します。下記にGoogle Chromeのデベロッパーツールの使い方について解説しておりますので、参考にしてください。

まとめ

管理画面から手軽にCSSカスタマイズを行える「カスタムCSS」機能についてご紹介しました。TCDテーマのカスタマイズ情報を掲載しているサイト「TCD LABO」もありますので、こちらもご利用ください。

また、カスタマイズにはCSSの知識が必要です。下記に無料でプログラミングを勉強できるサービスをご紹介してますので、学習してもいいですね。