すべてのTCDテーマで使える｜便利なCSS・汎用クラスの使い方

TCDテーマには、調整用のCSS（汎用クラス）が内蔵されています。

あらかじめスタイルが指定されているため、そのクラスを指定するだけで微調整や装飾が可能です。

「ちょっとここを調整したいな」という時に、CSSのクラスを新設してスタイルシート（カスタムCSS、追加CSS）に追記という作業は必要はありません。

パーツ間のスペース調整や、そのページにだけ存在するパーツ、ここだけ少し調整したいなど。あなたのサイト運営が少しでも楽になるようにご活用いただけると嬉しいです。

当記事でご紹介している汎用クラスはすべてのTCDテーマでご利用いただけます。

font-size｜フォントサイズ

font-sizeプロパティは、フォントのサイズを指定する際に使用します。TCDテーマでは70%～220%までの10%刻みでサイズを指定できるCSSを組み込んでいます。

ちょっと次の見出しのテキストサイズを大きくしたい、小さくしたいという時に要素のクラスに指定をしましょう。
<h2 class=”text220″>H2のテキストサイズが220％の大きさになります。</h2>
のように記述をします。

text-decoration｜文字装飾

text-decorationプロパティは、テキスト傍線のつけ方・色・スタイルをまとめて指定する際に使用します。TCDテーマではそれぞれ<要素 class=”b”>（太字）、<要素 class=”u”>（下線）と指定することでCSS効果が表示されるように組み込んでいます。

フォントサイズを変えるほどではないが、文章の中で少し目立たせたい時や注意を引きたい時に重宝するCSSプロパティだと思います。

font-color｜文字色

フォントについてよく使われる設定として、文字色（font-color）の指定があると思います。キーワードとなる文字の色を変えることで、内容が分かりやすくなるなど、効果的な文字色の指定は、閲覧者がサイトのイメージを持つ上で重要な役割を担っています。背景色に注意をしてバランスの良い文字色を選択するようにしましょう。

background-color｜背景色

background-colorプロパティは、背景色を指定する際に使用します。背景色を指定する際には、同時に前出の文字色指定にも配慮するようにしてください。 ブラウザの環境で色味が変わることも想定されます。背景色と文字色が近い色になってしまい文字が読みにくくなってしまうことがないようにする方が良いでしょう。

text-align｜配置

text-alignプロパティは、ブロックレベルの要素内の行の揃え位置・均等割付を指定する際に使用します。インラインレベルのコンテンツはこの指定にならって始点、終点の位置が調整されます。TCDテーマでは<ブロック要素 class=”align1″>（中央寄せ）、<ブロック要素 class=”align2″>（右寄せ）、<ブロック要素 class=”align3″>（左寄せ）と指定することで手軽に使うことができます。

ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック（かたまり）として認識されます。 ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入ります。

ブロックレベル要素
<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>

インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。 例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素です。 一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます。

インラインレベル要素
<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>

text-style｜テキストスタイル

フォームなどを組む際にTCDテーマに馴染む汎用クラスのスタイルがあります。

注意書き等で位置を下げたい時にclass=”att”を指定

ちょっとした解説などを付け足すときに<span class=”att”>～</span>と指定することで手軽に使うことができます。

指定なし

WordPress theme TCD
※TCD：テンプレートの領域をはるかに超越した美しいデザインのWordPressテーマ

class=”att” 指定あり

WordPress theme TCD
※TCD：テンプレートの領域をはるかに超越した美しいデザインのWordPressテーマ

テキストボックス用クラス

<span class=”att_box”>～</span>と指定することで手軽に使うことができます。

WordPress theme TCD

margin ＆ padding-style｜余白

マージンは領域間のスペース、パディングは領域内のスペースを調整するプロパティです。

ここでは画像を元に説明をさせていただきますが、要素（widthとheightの値で調整）に背景色を指定しているとき、背景色はpadding部分（黄色のスペース）まで塗られられることになります。marginはborderより外側に対してはたらき、上下（前後）左右の他の要素に対して余白をつくります。

TCDテーマでは、以下のクラス指定で0pxから5px刻みで80pxまで調整可能なCSSをあらかじめ組み込んでいます。

<要素 class=”m（数値）”>（全方向に均等でマージンスペースを指定）
<要素 class=”p（数値）”>（全方向に均等でパディングスペースを指定）
<要素 class=”mt（数値）”>（要素の上にマージンスペースを指定）
<要素 class=”pt（数値）”>（要素の上にパディングスペースを指定）
<要素 class=”mr（数値）”>（要素の右にマージンスペースを指定）
<要素 class=”pr（数値）”>（要素の右にパディングスペースを指定）
<要素 class=”ml（数値）”>（要素の左にマージンスペースを指定）
<要素 class=”pl（数値）”>（要素の左にパディングスペースを指定）
<要素 class=”mb（数値）”>（要素の下にマージンスペースを指定）
<要素 class=”pb（数値）”>（要素の下にパディングスペースを指定）

※マージンパディングをなしにしたい時は数値を0に指定します。
（それぞれ0,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80まで指定可能）
段落の下のスペースを少し調整したい時など<p class=”mb50″>と指定すると段落の下に50pxのマージンを設けることができるといった感じに使うことができます。画像の上下左右のスペースなど調整したいことがあると思いますので覚えておいて損はないかと思います。

float｜配置

floatプロパティは、指定された要素を左または右に寄せて配置する際に使用します。 後に続く内容は、その反対側に回り込みます。TCDテーマでは<ブロック要素 class=”l-flo”>（左配置）、<ブロック要素 class=”r-flo”>（右配置）という指定で使うことができます。また、<ブロック要素 class=”f-clear”>（clearプロパティ）も用意しておりますので、floatプロパティで左寄せ、 または右寄せを指定された要素に対する回り込みを解除する際にもご活用ください。

先のブロックを右にfloatすると後のテキストが左に回り込む

HTMLの要素はどの要素もボックスと呼ばれる四角形の領域を生成します。ボックスは大きく分けて ブロックボックス と インラインボックス の2種類に分けられます。displayプロパティの値がblockやtableなどの要素はブロックボックスを生成します。ブロックレベル要素には主に<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>があります。また、インラインレベル要素には主に<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>があります。

先のブロックを左にfloatすると後のテキストが右に回り込む

ブラウザのデフォルトでブロックボックスを生成する要素にはh1~h6等の見出しのほかp,div,ul,ol,li,tableなどがあります。ブロックボックスは幅に関係なく、上から下へ縦方向に配置されます。ブロックボックスの前後には改行が伴って、1つの段落としてレイアウトされると考えるとイメージがつきやすいかもしれません。ここで説明をしているfloatは浮動化といい、指定したブロックを左または右に寄せ、余白部分にfloatを指定したブロックの下にあるブロックを回り込ませるためのものです。

後のテキスト段落にclear: both;を指定して回り込みを解除

ブロックボックスは幅に関係なく、上から下へ縦方向に配置されます。floatを利用する場合、注意点しなくてはいけないことがあります。floatを指定するブロックには必ずwidth（幅）も指定すること。幅の指定単位はpxでもemでも%でもよいが、すべて同じ単位で指定しなければ表示が乱れる原因になります。また、%で指定するとIEでは表示が乱れる場合（数値が割り切れない場合の処理）があります。また、必ず回り込みの解除（clear）を指定することも大切です。floatを指定した次のブロックに、floatもclearを指定していない場合は、widthを指定しないようにしましょう。

hover｜画像リンクマウスオーバー時の不透明度

リンクにカーソルが乗ったり、クリックされた場合のスタイルを変化させるには、擬似クラスを使用します。擬似クラスに文字色・背景色・下線などを指定することで、リンクテキストにカーソルが乗った際に色を変えるなどの動的な変化をつけることができますが、TCDテーマではリンクを設定した画像に<img class=”fade”>を指定することで透過する効果を加えることができます。ブログ本文の中で何気なく設置したバナーにホバー時の効果を設定したい時など活用いただけたらと思います。

指定なし

class=”fade” 指定あり

新規追加された汎用クラス

当初はWordPressテーマ「common（TCD097）」以降にリリースされた製品に実装されていましたが、2024年現在、すべてのTCDテーマでご利用いただけます。

frame｜画像に枠をつける

<img class=”frame”>と指定するだけで、画像に枠線と影を表示できます。

上記のように白背景の画像を白背景のサイトに設置するときに便利です。

is-pc｜PCでのみ表示

<p class=”is-pc”>と指定したコンテンツは、PCのみで表示されます。対象は文章だけでなく、画像や動画にも使えます。以下に表示されているTCDテーマのPR動画はPCにしか表示されません（スマホで閲覧されている方はPCで確認してみてください）。

is-sp｜スマホでのみ表示

先ほどと逆でスマホのみで表示したい際に使えるクラスです。同じく<p class=”is-sp”>と指定します。↓にスマホ用のバナー広告が表示されます。

e_link｜外部リンクアイコン

外部リンクであることを示すアイコンを表示するクラス。<a class=”e_link” href=”https://tcd-theme.com/”>ワードプレステーマTCD</a>のようにaタグに指定します。地味ですが、次のようにaタグの後ろにアイコンが表示されます。

ワードプレステーマTCD

外部のページやサイトにリンクさせる際にご活用ください。

a_break｜改行位置調整

このクラスを使えば、テキストの改行位置をスマホや小さなデバイスでのみ変更できます。

100作品以上をリリースし続ける<span class=”a_break”>WordPressテーマの老舗 TCD</span>

というように改行したい位置の前にタグを入れ込み、そこにa_breakを指定します。以下をスマホで見比べてみてください。

前者は未指定なので改行位置が中途半端ですが、a_breakを指定した後者は綺麗に改行されます。

汎用クラスを使って効率化しよう

この記事で取り上げたようなCSSを、一般的にはUtility Classes、汎用クラスと呼んでいます。

すべてのTCDテーマに組み込んである汎用クラスについて、使い方も交えてご紹介いたしました。汎用クラスを利用すれば、HTMLのclass属性値を変更するだけで、素早くデザイン調整可能です。

ぜひ汎用クラスを利用して、コンテンツ作成を効率化してみてください。

TCDテーマの独自機能に関する記事