汎用クラス｜便利なCSSクラスを使ってみよう

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

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

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

これらは、その要素にクラスを指定するだけで調整できます。→クラスを指定するって何？

ブロックエディターでは、ブロックの「高度な設定」の「追加CSSクラス」で指定できます。

下記の記事で、すべての汎用クラスとその使い方を詳しく紹介しています。

すべての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>

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

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

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