痒い所に手が届くクラスを搭載しています。
- 画像に枠をつける「frame」
- PCのみに表示する「is-pc」
- スマホのみに表示する「is-sp」
- 指定の位置で改行する「a_break」
- 外部リンクアイコンを表示する「e_link」
記事やページを作成する際に、それぞれご活用ください。
細部までこだわってコンテンツをつくっていただけます。
画像に枠をつける「frame」
下記のように画像に枠が表示されます。imgタグに「frame」というクラスを指定してあげるだけです。画像やCSSの編集は不要です。
PCのみに表示する「is-pc」
PC・スマホで表示するコンテンツを分けることは、サイトを美しく見せるための手段の一つです。PCのみに表示したいコンテンツは、このクラスを指定するだけでOKです。
▼下記の画像はPCのみで表示されます。
スマホのみに表示する「is-sp」
逆にスマホでのみ表示したいコンテンツは、このクラス「is-sp」を指定するだけです。
▼下記の画像はスマホのみで表示されます。ぜひスマホで確認してみてください。
このクラスはテキストにも使えるので、スマホで表示される文章量をコンパクトにしたい際に便利です。
指定の位置で改行する「a_break」
このクラスは、小さなデバイスで見た際のテキストを指定の位置で改行するためにあります。
例えば、下記のように記述すると、、
<h2>長い見出しです<span class="a_break">ここから小さいデバイスでは改行</span></h2>次のように表示してくれます。下記画面は、WordPressテーマ「common」の表示例です。
あらゆるデバイスでコンテンツを綺麗に見せるために便利なクラスです。 スマホで改行位置がおかしいなどという問題を解決できます。
外部リンクアイコンを表示する「e_link」
地味ですが、「外部サイト（ページ）に飛びますよ」というアイコンを表示できるクラスです。aタグに「e_link」というクラスを指定して使います。
>>WordPressテーマ「TCD」公式サイト（←このアイコンのことです）
