TCD独自機能「クイックタグ」の基本的な使い方や活用例をご紹介いたします。「Be（tcd076）」以降のテーマでは、クイックタグ機能のマイナーチェンジが行われていますので、テーマによって一部仕様が異なる場合があります。
また、「VIEW（tcd032）」を除く、「AGENT（tcd033）」以前の販売中のテーマでは、「AddQuicktagプラグイン」を有効化する必要があるので、こちらの記事を参考にご覧ください。
クイックタグ機能の使い方
テキストエディター（クラシックエディター）とブロックエディターの両方でご利用いただけますが、一部仕様が異なりますので、こちらでご紹介いたします。
クラシックエディターの場合
クイックタグ機能内蔵のTCDテーマであれば、投稿編集画面に以下のボタンが表示されます。
こちらで任意のボタンをクリックして本文内に出力します。TCDテーマ内に用意されている「フリースペース」というコンテンツ内でも上記のクイックタグと同じものをご活用いただけます。
フリースペースは、多くのテーマで、トップページ用のコンテンツビルダー、固定ページ用のコンテンツビルダーなどに搭載されています。
ブロックエディターの場合
ブロックエディターでクイックタグ機能を使うには、「クラシックブロック」を選択してください。
上記箇所からクイックタグをご利用いただけます。なお、ブロックエディターでは、仕様上、「Youtube」のクイックタグボタンは使えないので、デフォルトの「YouTube」埋め込みブロックをお使いください。
クイックタグで実際に出力される記述とサンプル
ここでは、最新版のクイックタグで使えるスタイルをご紹介いたします。クイックタグのアップデートの都度、当記事を更新する予定です。実際に記事内に表示される見た目とテキストエディター（クラシックエディター）の編集画面の出力例をご紹介いたします。
YouTube
下記の編集画面の記述の「ここにYoutubeのコードを入力してください」にYouTubeの埋め込みコードをコピペするとYouTube動画がレスポンシブ表示されるタグです。
関連記事カードリンク
他のページへのリンクなどをテキストリンクより目立たせるようにセットしたい場合は、「カードリンク」をご利用ください。任意のURLを入力して下記のように表示できます。
レイアウト2c、3c
記事内でカラム数を分けたい時にお使いいただけます。「レイアウト2c」なら2カラムに、「レイアウト3c」なら3カラムに分けれます。
下記は、「レイアウト2c」のクイックタグをクリックして出力される記述です。任意のテキストなどを下記箇所入力すれば、2カラムで表示されます。もちろん画像なども設置可能です。
コメントアウト
こちらは、テキストエディター以外の場合、下記の記述は表示されません。実際の画面で表示させたくないメモ書きなどにご利用ください。例えば、記事の編集画面内のみにこのような記述を残しておけます。
<div class="hidden"><!– ここから先リライト予定 –></div>
<div class="hidden"><!– 記事公開後リンクさせる予定 –></div>
複数人で運営しているメディアで管理者や自分用のメモに使う以外にも、大部分のコンテンツをまるごとブラウザで非表示にすることも可能ですね。
見出し
TCDテーマオプションで登録した各見出しのデザインを、h2からh5までボタン一つで出力できます。デフォルトでは以下のようなデザインになっていますが、それぞれお好みに変更・登録いただけます。
また、テーマオプションの編集画面は以下のようになっており、Hタグごとに文字サイズや、背景色、枠線の色や太さ、テキストまでのスペースまで調整いただけます。一度登録しておけば、投稿の編集画面内でワンタッチで出力されます。
囲み枠
こちらは一部のテキストを目立たせたい場合や、本文の補足説明などにご活用ください。以下のように出力されるので、「囲み枠」というテキストを任意のものに差し替えてご利用いただけます。
囲み枠
ボタン1,2,3
テーマオプションで設定したボタンを3つまで登録して、本文内に出力できます。以下は一例ですが、上から順にフラット、角丸、ラウンドと、ボタンのタイプを選択したサンプルです。
ボタン1の例ですが、下記が出力されます。widthやheightの箇所の数値を変更すれば、編集画面でもサイズを変更できます。
テーマオプションの編集画面では、サイズやボタンのタイプの他、ボタンにカーソルを合わせた色、線の色、ホバーエフェクトのタイプなども変更可能です。
登録できるホバーエフェクトは、以下の2種類ですが、形や色、サイズは自由に変更可能です。
アンダーライン1, 2, 3
スクロール時にアニメーションするアンダーラインを表示できます。目立たせたいテキストにご利用ください。テーマオプションでカラーを3色まで登録して本文内に以下のように出力できます。
以下はアンダーライン1の例ですが、色コードの部分（下記の「#fff799」の部分）を編集すれば、編集画面内で色を変更することも可能です。
テーマオプションでは、カラーピッカーを使って色を登録できます。
吹き出し
吹き出しデザインで本文内をポップに彩ります。会話調での説明や、カジュアルな印象のコンテンツに最適です。難しい内容も会話調で表現すれば、読みやすいですよね。
編集画面では、下記のように出力されます。「user_image_url=”sample.jpg”」や「user_name=””」に画像のパスやテキストを入力して直接編集することも可能です。
テーマオプションの設定箇所では、用意されているフィールドに一つずつ登録すれば、クイックタグボタンで出力されるようになります。
Google map
最後は、「Google map」をワンタッチで出力できるクイックタグです。通常の投稿はもちろん、固定ページで作成したABOUTページやアクセスページなどにも出力できます。以下は、「大阪市」とのみ入力した場合のサンプルになります。
![Googleマップのサンプル]( "google_map")
デフォルトマーカー仕様のGoogleマップ
上記の通り出力されるので、任意の住所を入力して簡単にマップを表示できます。
テーマオプションでは、以下のような項目が用意してあるので、マーカーにテキストを表示させたり、ロゴ画像などに変更することもできます。
※Googleマップを表示するには、APIキーを入力する必要があります。詳しくは下記記事をご覧ください。
まとめ
記事執筆や、サイトのページ作成に役立つ装飾をワンクリックで呼び出せる機能がクイックタグ機能をご紹介してきました。中でも以下の5つは、TCDテーマオプションで細部まで編集して登録できます。
デザインやレイアウトを登録して、いつでもワンタッチで呼び出せるので、オリジナルのコンテンツ制作が捗ります。ぜひあなたのサイト制作にもご活用いただけると嬉しいです。