汎用クラス｜スタイルを微調整できるCSSクラス

TCDテーマにはサイト内の細かいレイアウト調整に役立つCSSが組み込まれています。

記事やコンテンツを作成していて、以下のような場面はありませんか？

• このスペースを少しだけ広げたい（狭めたい）。
• スマホではこの部分から改行させたい。
• PCとスマホで別の内容を表示したい。

クラスを指定するだけで調整できます。→クラスを指定するって何？

下記にすべての汎用クラスをまとめています。

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

TCDテーマには、調整用のCSS（汎用クラス）が内蔵されています。あらかじめスタイルが指定されているため、そのクラスを指定するだけで微調整や装飾が可能です。

この記事では、特に利用頻度が高そうな汎用クラスをご紹介します。

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

「is-sp」をテキストや画像（imgタグ）といった要素に指定することで、その要素をスマホでのみ表示させる（＝PCでは非表示にする）ことができます。
スマホでだけ見て欲しい短いテキストや、広告バナーなどに活用できます。

<img class="is-sp" src="example.jpg"/>

例えば、↓のロゴ画像はPCでは表示されていませんが、スマホで閲覧すると表示されます。

「is-pc」（PCのみ表示）というクラスもあります。この二つのクラスを使うとPCとスマホで別々の内容を表示できます。

a_break｜改行位置の調整

「スマホで閲覧時はここから改行させたい。」という場面で活躍します。

以下の2つをスマホで閲覧して比較してみてください。前者は、スマホのサイズによって中途半端な位置で改行されますが、後者は必ず同じ位置で改行されます。

後者は、改行後の文章をa_breakを指定したspanタグで囲んでいます。

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

小さなデバイスでも綺麗に改行させたいときにご活用ください。

このような細部の微調整に役立つ汎用クラスを豊富に用意しています。

他の汎用クラスをみてみる