TCDテーマには、テーマオプションというメイン機能のほかに、便利な汎用クラスもご用意しています。
汎用クラスとは、スタイル（CSS）があらかじめ指定されているクラスです。適用したいHTML要素にクラスを追加するだけでスタイルが反映されるという仕組みです。
TCDテーマには、調整用（margin、padding、font-size、color etc...）のCSSクラスが設定されています。「ちょっとここを調整したいな」という時に、いちいちCSSのclassを新設してスタイルシート（カスタムCSS、追加CSS）に追記という作業を行わなくても調整が可能で...
TCDテーマに内蔵されている汎用クラス一覧は上記記事にお任せするとして、当記事では新しく追加された汎用クラスをご紹介したいと思います。
新規追加された汎用クラス一覧
コンテンツのちょっとした調整を行う際に、地味だけど便利な汎用クラスを新しく追加しています。
frame（画像に枠をつける）
差し込んだ画像に枠と影をつけるクラスです。
例えば、上記のような白背景の画像を差し込むとしましょう。多くのテーマの背景は白がベースになっているので、背景と画像の境目がわからなくなるんですよね。
そこで、imgタグにframeというクラスを指定するだけで、枠線と影を表示できるようにしたわけです。
<img src="sample.jpg" alt="画像のサンプル" class="frame" />記事やページ内の画像すべてにこのクラスを指定してあげると、統一感が出ていいかもしれません。ちなみに当メディアのブログ記事内の画像にもすべて枠線と影がついています。
is-pc（PCでのみ表示）
「このコンテンツはPC環境のみに表示したい」
そんなケースは意外とあると思います。PCから閲覧しているユーザー向けの広告や、大画面で見てもらいたいコンテンツなどです。
例えば、このTCDテーマのPR動画。PCにしか表示されないようになっています（スマホで閲覧されている方はPCで確認してみてください）。
要素にis-pcというクラスを指定してあげるだけでOKです。PCサイズのデバイスでしか表示されなくなります。画像や動画だけでなくもちろん文章にも適用できます。このような感じで指定して使います。
<p class="is-pc">これはPCサイズでのみ表示したいテキストです。</p>is-sp（スマホでのみ表示）
今度は、先ほどと逆でスマホのみで表示したい際に使えるクラスです。使い方は同じで、対象の要素にis-spというクラスを指定するだけです。スマホでは↓にバナー画像が表示されます。
例えば、画像に指定する場合はこのような感じです。
<img src="sample.jpg" alt="画像のサンプル" class="is-sp" />e_link（外部リンクアイコン）
地味な機能ではありますが、外部リンクであることを示すアイコンを表示できるクラスです。このようにテキストリンクの後ろにアイコンが表示されます。
外部のページやサイトにリンクさせる際にお使いください。別サイトにリンクする旨を視覚的に伝えられます。上記例は、このようにクラスを指定しています。
<a class="e_link" href="https://tcd-theme.com/" target="_blank" rel="noopener noreferrer">ワードプレステーマTCD</a>a_break（改行位置調整）
「テキストの改行位置をスマホでは変更したい」そんなケースに対応できるのが「a_break」です。
例として、以下の2文をスマホから確認してみてください。
前者は改行位置が中途半端で綺麗には見えません。
一方で後者は、区切りのいいところで改行されていますよね。使い方は簡単で、改行したい箇所をタグで囲んで「a_break」を指定すればOKです。後者の例では以下のように指定しています。
100作品以上をリリースし続ける<span class="a_break">WordPressテーマの老舗 TCD</span>汎用クラスを使って効率化しよう
TCDテーマに新しく追加されている汎用クラスをご紹介いたしました。
あらかじめスタイル（CSS）が指定されているため、HTML要素に指定するだけですぐに使えます。CSSを書く必要がないので、コンテンツ作成を効率化できます。ぜひご活用ください。
TCDテーマの独自機能に関する記事
TCDが開発してきたテーマは、通算100作を超えています。 筆者もTCDテーマをいちユーザー（開発メンバーでもある）として使ってきて、「ここの設定、どこでやるんだっけ？」ということがあります。そういう煩わしさはゼロにしたいんですよね。 WordPressテーマによってはアクションが特殊な...
TCDテーマには、テーマファイルを編集することなく、任意のスタイルを追加できる「カスタムCSS機能」が実装されています。 当記事では、カスタムCSSの使い方について紹介していきます。 また、テーマファイルの直接編集を避けるべき理由を下記で解説しておりますので、こちらも合わせてご覧ください...
多くのTCDテーマには、カスタムスクリプト機能が実装されています。 テーマファイルを編集することなく、<head>タグ内に任意のスクリプトを出力可能です。当記事ではカスタムスクリプトの使い方をご紹介いたします。 テーマファイルを触らずにCSSを追加できるカスタムCSS機能につ...
TCDテーマの人気機能のひとつのクイックタグ。「Be（tcd076）」以降のテーマでは、TCDテーマオプションで、オリジナルデザインのクイックタグを登録できるようになっています。 どなたでも非常に使いやすくなっていますので、当記事でその概要をご紹介いたします。 クイックタグ機能とは T...
TCDテーマには、調整用（margin、padding、font-size、color etc...）のCSSクラスが設定されています。「ちょっとここを調整したいな」という時に、いちいちCSSのclassを新設してスタイルシート（カスタムCSS、追加CSS）に追記という作業を行わなくても調整が可能で...
コメント