TCDテーマには、テーマファイルを編集することなく、任意のスタイルを追加できる「カスタムCSS機能」が実装されています。
当記事では、カスタムCSSの使い方について紹介していきます。
また、テーマファイルの直接編集を避けるべき理由を下記で解説しておりますので、こちらも合わせてご覧ください。CSSカスタマイズの理解が深まります。
WordPressに慣れてくると、サイトのデザインをCSSでカスタマイズしたくなりますよね。この時最も気をつけておきたいのが、CSSの編集方法です。 特に、テーマのスタイルシートを直接編集するのは避けた方がよいでしょう。 当記事では、WordPressでCSSを編集する方法を4つご紹介し...
カスタムCSSとは
管理画面で入力したCSSをHTMLソース上の<head>タグ内に出力できる機能です。
背景色や文字サイズなど、サイトのスタイルを変更するにはCSSのカスタマイズが必要です。さらに、CSSを追記するには、テーマファイルの編集や子テーマの作成等が必要なため、カスタマイズに慣れていない方にとっては非常に大変です。
カスタムCSS機能を使えば、これらの手間を無くし、管理画面から安全かつ手軽にカスタマイズを行えます。CSSの入力欄は、下記の2箇所ご用意しておりますので、状況に応じて使い分けてください。
<head>タグ内にトラッキングコードやJavaScriptを出力したい場合は、下記記事をご覧ください。
多くのTCDテーマには、カスタムスクリプト機能が実装されています。 テーマファイルを編集することなく、<head>タグ内に任意のスクリプトを出力可能です。当記事ではカスタムスクリプトの使い方をご紹介いたします。 テーマファイルを触らずにCSSを追加できるカスタムCSS機能につ...
テーマオプションのカスタムCSS
TCDテーマオプションの基本設定に存在するカスタムCSS機能です。こちらに記入したCSSは、サイト上の全てのページに反映されるため、一括でスタイルを変更したいときに便利です。
エディタのカスタムCSS
投稿や固定ページのエディタ下部にもカスタムCSSが存在します。こちらに記入したCSSは、特定のページだけに反映できるため、一部のページのみスタイルを編集したいときに便利です。
カスタムCSSを使ってみる
それでは、実際にカスタムCSSを使ってサイトの見た目を変えてみましょう。
今回は、「meets」のデザインコンテンツの背景色を変更するため、下記のCSSをテーマオプションの「カスタムCSS」に記入します。
.design_content { background: lightgray; }デザインコンテンツの背景色を白色からグレーに変更できました。CSSの知識があれば、スタイルの自由度を広げることができますね。
- 変更前
- 変更後
また、上記のようにスタイルを変更する要素を調べるには、ブラウザの開発者ツールを利用します。下記にGoogle Chromeのデベロッパーツールの使い方について解説しておりますので、参考にしてください。
ウェブサイトの構造（HTML）や適用されているスタイル（CSS）を確認するには、デベロッパーツールが便利です。構造がわかれば、一部を編集して簡単にテスト・検証することも可能です。 そこで当記事では、Google Chromeのデベロッパーツールの基本的な使い方を解説いたします。 基本的な...
まとめ
管理画面から手軽にCSSカスタマイズを行える「カスタムCSS」機能についてご紹介しました。TCDテーマのカスタマイズ情報を掲載しているサイト「TCD LABO」もありますので、こちらもご利用ください。
また、カスタマイズにはCSSの知識が必要です。下記に無料でプログラミングを勉強できるサービスをご紹介してますので、学習してもいいですね。
プログラミング、Webデザインなどを無料で学べるウェブサービスをご紹介します。動画で学べたり、ゲーム感覚で実際にコードを書きながら学習できるサイトなど様々です。それぞれに特色があるので、自分の色に合ったサービスを選ぶと良いでしょう。 ドットインストール プログラミングに特化したeラーニン...
