TCDテーマ独自機能「カスタムCSS」の使用方法

2015

12.16

TCD CustomCSS

TCDテーマの独自機能のひとつに、テーマファイルを直接編集することなくテーマに任意のスタイルシートを追加できるカスタムCSS機能があります。(一部対応していないテーマもあります)
ここでは、カスタムCSS機能の基本的な使用方法と設定サンプルをご紹介します。

カスタムCSS機能とは?

op1_4
テーマを使用する中で「ここだけカスタマイズしたい!」と思う箇所が出てきたりしますよね。
かといって、テーマのCSSファイルを直接編集するのはちょっと怖い…そんな時はTCDテーマ独自機能「カスタムCSS」が便利です。

カスタムCSSに任意のCSSを登録することで、HTML上の~タグ内(テーマで利用しているCSSファイルよりも後)に読み込まれます。これにより、テーマファイルを直接編集することなく安全かつ手軽にカスタマイズを行って頂けます。

カスタムCSSの使用例

例1:アイキャッチ画像を角丸で表示する

記事詳細ページのアイキャッチ画像に角丸のスタイルを指定する場合のサンプルです。

設定サンプル

op1_4_2_2

上記のカスタムCSSを登録することで、サイト上では下図のように追加したCSSが反映されます。

表示サンプル

op1_4_3_2

例2:H3見出しのデザインを変更する

投稿記事本文のH3見出しスタイル用のクラスを追加する場合のサンプルです。

設定サンプル

op1_4_2
上記のカスタムCSSを登録し、投稿画面でH3タグに先ほど追加した「midashi」クラスを設定することで、
op1_4_4

サイト上では下図のように追加したCSSが反映されます。

表示サンプル

op1_4_31

詳細記事カスタムCSS機能について

ここまでは“テーマオプションのカスタムCSS機能”についてご紹介してきましたが、同じように“投稿画面下部のカスタムCSS設定欄”に任意のCSSを登録することで特定の記事のみにCSSを適用させることができます。

詳細記事カスタムCSSの設定箇所

post_css1

CSSに関する知識が前提となります。CSSの追加により生じた不具合に関してはサポート対象外となります。あらかじめご了承ください。サイトのデザインやレイアウトが崩れた場合は追加したCSSを削除してください。

元々のテーマで利用しているCSSに上書きする仕様のため、追加するCSS定義によってはうまく反映されない場合があります。

このように、テーマファイルに手を加えることなく、デザインをカスタマイズしたいサイト内の特定の要素のみ、または特定の記事のみに任意のCSSを適用させることができます。

さらに、テーマファイルを直接編集した場合とは違い、テーマ更新を行ってもここで設定したCSSはそのまま継承されます。目的に合わせてぜひご活用下さい。

テーマで使用されているid名やclass名の特定方法

デザインを変更したい要素のid名やclass名の特定にはFirefoxアドオン「Firebug」が便利です。
下記の記事で使用方法をご紹介していますのでご参考下さい。
サイトのカスタマイズが劇的に捗るFirefoxアドオン「Firebug」

関連記事

デザインプラス採用サイト
Wordpress使い方大全集

過去アーカイブ