スタイルを微調整できる汎用クラスを使ってみよう

GRAVITYには、微調整に役立つCSSが組み込まれています。

「このスペースを少しだけ広げたい（狭めたい）。」
「スマホではこの部分から改行させたい。」
「スマホでのみ表示したい。」

など、細部を調整するための汎用クラスが用意されています。CSSは不要で、任意の箇所にクラスを指定するのみで調整できます。

記事やページや完成に近づいたら、当機能で微調整することで、より完成度を高めることができます。

下記記事にすべての汎用クラスをまとめていますので、参考にご覧ください。

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

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

例えば、次のような汎用クラスが使えます。

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

画像（imgタグ）に指定して使う「is-sp」。

次のように指定することで、スマホでだけ見て欲しい短いテキストや、広告バナーなどに活用できます。

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

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

a_break｜改行位置調整

「スマホで閲覧時はここから改行させたい。」という要望にお応えできます。

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

後者は、改行したい位置の前にタグを入れ込み、そこにa_breakを指定しているからです。

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

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

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

他の汎用クラスをチェックする