TCDテーマには、調整用(margin、padding、font-size、color etc…)のCSSクラスが設定されています。「ちょっとここを調整したいな」という時に、いちいちCSSのclassを新設してスタイルシート(カスタムCSS、追加CSS)に追記という作業を行わなくても調整が可能です。他種類のパーツ間の空き調整や、そのページにだけ存在するパーツ、ここだけ少し調整を加えたいなど自由な要素に対しては調整用クラスを使用するなど、あなたのサイト運営が少しでも楽になるようにご活用いただけると嬉しいです。

font-size – フォントサイズ

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

WordPress Theme TCD
WordPress Theme TCD
WordPress Theme TCD
WordPress Theme TCD
WordPress Theme TCD
WordPress Theme TCD
WordPress Theme TCD
WordPress Theme TCD
WordPress Theme TCD
WordPress Theme TCD
WordPress Theme TCD
WordPress Theme TCD
WordPress Theme TCD
WordPress Theme TCD
WordPress Theme TCD
WordPress Theme TCD
  • <span class=”text220″>WordPress Theme TCD</span>
  • <span class=”text210″>WordPress Theme TCD</span>
  • <span class=”text200″>WordPress Theme TCD</span>
  • <span class=”text190″>WordPress Theme TCD</span>
  • <span class=”text180″>WordPress Theme TCD</span>
  • <span class=”text170″>WordPress Theme TCD</span>
  • <span class=”text160″>WordPress Theme TCD</span>
  • <span class=”text150″>WordPress Theme TCD</span>
  • <span class=”text140″>WordPress Theme TCD</span>
  • <span class=”text130″>WordPress Theme TCD</span>
  • <span class=”text120″>WordPress Theme TCD</span>
  • <span class=”text110″>WordPress Theme TCD</span>
  • <span class=”text100″>WordPress Theme TCD</span>
  • <span class=”text90″>WordPress Theme TCD</span>
  • <span class=”text80″>WordPress Theme TCD</span>
  • <span class=”text70″>WordPress Theme TCD</span>

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

text-decoration – 文字装飾

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

太字 WordPress Theme TCD
下線 WordPress Theme TCD
打消し線 WordPress Theme TCD
  • <span class=”b”>WordPress Theme TCD</span>
  • <span class=”u”>WordPress Theme TCD</span>
  • <span class=”del”>WordPress Theme TCD</span>

フォントサイズを大きくしたりするとデザインが崩れることがありますが、文章の中で、少し目立たせたい時や注意を引きたい時に重宝するCSSプロパティだと思います。忘れないように覚えていただいて、使っていただけたらと思います。

font-color – 文字色

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

レッド WordPress Theme TCD
ブルー WordPress Theme TCD
グリーン WordPress Theme TCD
オレンジ WordPress Theme TCD
イエロー WordPress Theme TCD
ピンク WordPress Theme TCD
グレー WordPress Theme TCD
  • <span class=”red”>WordPress Theme TCD</span>
  • <span class=”blue”>WordPress Theme TCD</span>
  • <span class=”green”>WordPress Theme TCD</span>
  • <span class=”orange”>WordPress Theme TCD</span>
  • <span class=”yellow”>WordPress Theme TCD</span>
  • <span class=”pink”>WordPress Theme TCD</span>
  • <span class=”gray”>WordPress Theme TCD</span>

background-color – 背景色

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

WordPress Theme TCD
WordPress Theme TCD
WordPress Theme TCD
  • <span class=”bg-blue”>WordPress Theme TCD</span>
  • <span class=”bg-red”>WordPress Theme TCD</span>
  • <span class=”bg-yellow”>WordPress Theme TCD</span>

text-align – 配置

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

→中央寄せ←

→右寄せ→

←左寄せ←

  • <p class=”align1″>→中央寄せ←</p>
  • <p class=”align2″>→右寄せ→</p>
  • <p class=”align3″>←左寄せ←</p>

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

ブロックレベル要素
<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テーマ

  • WordPress theme TCD
  • <span class=”att”>※TCD:テンプレートの領域をはるかに超越した美しいデザインのWordPressテーマ</span>

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

<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>があります。

  • <img src=”画像URL” alt=”代替テキスト” width=”要素の横幅” height=”要素の高さ” class=”r-flo” />
    <p>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>があります。</p>

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

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

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

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

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

  • <img src=”画像URL” alt=”代替テキスト” width=”要素の横幅” height=”要素の高さ” class=”r-flo” /><p class=”f-clear”>ブロックボックスは幅に関係なく、上から下へ縦方向に配置されます。floatを利用する場合、注意点しなくてはいけないことがあります。floatを指定するブロックには必ずwidth(幅)も指定すること。幅の指定単位はpxでもemでも%でもよいが、すべて同じ単位で指定しなければ表示が乱れる原因になります。また、%で指定するとIEでは表示が乱れる場合(数値が割り切れない場合の処理)があります。また、必ず回り込みの解除(clear)を指定することも大切です。floatを指定した次のブロックに、floatもclearを指定していない場合は、widthを指定しないようにしましょう。</p>

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

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

指定なし

class=”fade” 指定あり

まとめ

この記事で取り上げたような汎用的に使うことを想定して準備されたCSSクラスを、一般的にはUtility Classes、汎用クラスと呼んでいます。これまでTCDテーマに組み込んでいる汎用的に使えるCSSクラスについて、使い方も交えて説明させていただきました。汎用的に使用できるCSSクラスを利用してデザインを微調整していくと、HTMLのclass属性値を変更するだけで素早くデザインの変更が可能になります。

しかし、汎用クラスをあちこちに使ったWebデザインは、そのサイトのメンテナンス性を低下させることになりえる。ということも理解しなくてはいけません。もし、他人が作った汎用クラスに溢れたWEBサイトをリニューアルするとなると…考えてみたくもありませんよね。汎用クラスには単一的に機能的な命名はされているけれども、それ以上の情報はありません。その使用意図などをあとから読み取ることができないですし、このクラスはいるのか?なんで使われているのか?というのは実際に作った人ですら忘れてしまうこともあります。

TCDテーマからTCDテーマに乗り換えていただくような場合は、特に問題もないのですが、色々なテーマを渡り歩くような使い方をしている場合、汎用クラスを多用していたが故にサイトが崩れる。ということも起こる可能性があることは理解しておかないといけないと思います。

なお、CSSとは別にクイックタグもTCDテーマには用意されています。どんなクイックタグが用意されているかに関してはこちらの記事を参照してください。