【テーマオプション設定型】新TCDクイックタグの機能紹介

TCDテーマの人気機能のひとつのクイックタグ。「Be（tcd076）」以降のテーマでは、TCDテーマオプションで、オリジナルデザインのクイックタグを登録できるようになっています。

どなたでも非常に使いやすくなっていますので、当記事でその概要をご紹介いたします。

クイックタグ機能とは

TCDテーマオリジナルの記事執筆やコンテンツの作成をサポートする機能です。例えば、見出しやボタンのデザインをあらかじめ登録しておいて、エディター内のボタン一つで投稿や固定ページ内に出力できます。

どの記事やページでも共通のものを簡単に設置できるので、整合性を保ちつつ、コンテンツ作成が捗るわけです。

TCD075（EVERY）以前にリリースされたテーマでは、【テーマ内蔵型】TCDクイックタグが実装されております。TCDクイックタグから出力されるパーツのデザインは固定になります。

販売終了しているTCD029（SWEETY）未満のテーマをお使いの方は、プラグインの導入が必要です。

実装されているテーマ

【テーマオプション設定型】新TCDクイックタグを実装しているテーマの中には、2021年版が実装されているテーマと、2022年版が実装されているテーマがあります。

2021年版のTCDクイックタグ機能が実装されているテーマ

TCDテーマオプション内でデザインの指定ができます。「囲み枠」のデザインの指定できる機能と、コメントアウトのパーツは実装されていません。

2022年版のTCDクイックタグ機能が実装されているテーマ

「Ankle（TCD092）」以降からマイナーチェンジが加えられています。基本的な機能は2021年版と同じですが、設定項目が整理され、リアルタイムプレビューが新たに搭載されました。

従来の仕様ではダッシュボード内でデザインして、サイトのフロント画面を確認する必要がありましたが、最新版ではダッシュボード内で設定してそのままプレビューで確認できます。

テーマオプションで「囲み枠」のデザインを指定できないテーマ

テーマオプションで「囲み枠」のデザインを指定できるテーマ

【テーマオプション設定型】新TCDクイックタグの概要

テーマオプションでは下記のパーツにオリジナルのデザインを指定できます。

• 見出し
• ボタン
• アンダーライン
• 吹き出し
• Googleマップ
• 囲み枠
• コメントアウト

クイックタグには他にも下記のようなパーツが実装されています。こちらは【テーマ内蔵型】と同じ仕様になります。

• Youtube
• 関連記事カードリンク
• レイアウト2c、3c

見出し

見出しは通常の投稿でも固定ページでも見出しはほぼ確実に使用しますよね。

テーマオプションの編集画面は以下のようになっており、Hタグごとに文字サイズや、背景色、枠線の色や太さ、テキストまでのスペースまで調整いただけます。一度登録しておけば、投稿の編集画面内でワンタッチで出力されます。

2022年版のクイックタグならこのように仕上がりを見ながら直感的にデザインできちゃいます。

文字サイズはもちろん、上下左右の枠線のタイプや背景色の有無をリアルタイムでプレビューしながら変更いただけます。h2からh5まで個別に設定可能です。

ボタン

ボタンも使用頻度は高いですよね。テーマオプションの編集画面では、サイズやボタンのタイプの他、ボタンにカーソルを合わせた色、線の色、ホバーエフェクトのタイプなども変更可能です。

登録できるホバーエフェクトは、以下の2種類ですが、形や色、サイズは自由に変更可能です。

2022年版では、ホバーしてカラーが変わる一般的なノーマルボタンに加えて、背景が透けているゴーストボタン、その反対のアクションのリバースボタンを選択可能です。プレビュー内のボタンにホバーしてアニメーションを確認できます。最大3タイプまで登録可能ですので、投稿や固定ページ別で使い分ける際にも便利です。

アンダーライン

一部のテキストに下線を引いて強調させる「アンダーライン」。こちらも汎用性の高い機能です。

スクロール時にアニメーションするアンダーラインを表示できます。目立たせたいテキストにご利用ください。テーマオプションでカラーを3色まで登録して本文内に以下のように出力できます。

テーマオプションでは、カラーピッカーを使って色を登録できます。

2022年版では線の色がプレビューされつつ、文字の太さやアニメーションの有無も設定できるようになりました。あらかじめ3色まで登録可能です。

吹き出し

吹き出しデザインで本文内をポップに彩ります。会話調での説明や、カジュアルな印象のコンテンツに最適です。難しい内容も会話調で表現すれば、読みやすいですよね。2セット（左右二個ずつ）まで登録可能です。

テーマオプションの設定箇所では、用意されているフィールドに一つずつ登録すれば、クイックタグボタンで出力されるようになります。

2022年版では、会話調の吹き出しデザインもプレビューしながら作成できます。文字色やユーザー画像、背景色を変更してご自身のサイトにマッチしたデザインでご活用いただけます。

Googleマップ

「Googleマップ」をワンタッチで出力できるクイックタグです。通常の投稿はもちろん、固定ページで作成したABOUTページやアクセスページなどにも出力できます。以下は、「大阪市」とのみ入力した場合のサンプルになります。

テーマオプションでは、以下のような項目が用意してあるので、デフォルトのマーカーの代わりにテキストやロゴ画像も設置できます。店舗や会場までのアクセス等にご活用ください。

2022年版では、設定項目がよりシンプルになりました。

※Googleマップを表示するには、APIキーを入力する必要があります。詳しくは下記記事をご覧ください。

囲み枠

囲み枠をプレビューしながらデザインできる機能です。

囲み枠

線の色はもちろん、太さ、シェイプのほか、背景色やラベル（見出し）の設定も可能です。

コメントアウト

こちらは、テキストエディター以外の場合、下記の記述は表示されません。実際の画面で表示させたくないメモ書きなどにご利用ください。例えば、記事の編集画面内のみにこのような記述を残しておけます。

※クラッシックエディターのビジュアルエディター、及びブロックエディターのクラッシックブロックでは表示されないため利用できません。

<div class=”hidden”><!– ここから先リライト予定 –></div>
<div class=”hidden”><!– 記事公開後リンクさせる予定 –></div>

複数人で運営しているメディアで管理者や自分用のメモに使う以外にも、大部分のコンテンツをまるごとブラウザで非表示にすることも可能ですね。

まとめ

デザインやレイアウトを登録して、いつでもワンタッチで呼び出せるので、オリジナルのコンテンツ制作が捗ります。2022年からマイナーチェンジされ、管理画面内でプレビューできるので、直感的に操作可能で使いやすくなっています。

今後リリースするテーマでもこの仕様を基準にアップデートを重ねていく予定です。コンテンツ制作をサポートするための機能ですので、お客様から一定のご要望があれば新機能追加も検討させていただきます。

当記事にコメントいただいたり、弊社SNS（FaceBook/Twitter）にメンションいただいても大丈夫です。ぜひお気軽にご意見をお聞かせください。