クイックタグ機能とは、TCDテーマオリジナルの記事執筆やコンテンツの作成をサポートする機能です。例えば、見出しやボタンのデザインをあらかじめ登録しておいて、エディター内のボタン一つで投稿や固定ページ内に出力できます。
こちらでは、TCD独自機能「TCDクイックタグ」の基本的な使い方や活用例をご紹介いたします。
TCD076（Be）以降にリリースされたテーマについては、TCDテーマオプションからデザインの指定ができる、【テーマオプション設定型】新クイックタグが搭載されています。
TCDテーマの人気機能のひとつのクイックタグ。「Be（tcd076）」以降のテーマでは、TCDテーマオプションで、オリジナルデザインのクイックタグを登録できるようになっています。 どなたでも非常に使いやすくなっていますので、当記事でその概要をご紹介いたします。 クイックタグ機能とは T...
販売終了しているTCD029（SWEETY）未満のテーマをお使いの方は、プラグインの導入が必要です。
ブログ記事をより伝わりやすいものに、記事作成をより簡単にするTCDテーマの機能「クイックタグ」を使う方法をご紹介いたします。 この記事では、現在販売終了しているTCD030~TCD013テーマに搭載されている、AddQuicktagプラグイン利用型のクイックタグについて解説しています。 ...
目次
クイックタグ機能の使い方
テキストエディター（クラシックエディター）とブロックエディターの両方でご利用いただけますが、一部仕様が異なりますので、こちらでご紹介いたします。
クラシックエディターの場合
クイックタグ機能内蔵のTCDテーマであれば、投稿編集画面に以下のボタンが表示されます。
こちらで任意のボタンをクリックして本文内に出力します。TCDテーマ内に用意されている「フリースペース」というコンテンツ内でも上記のクイックタグと同じものをご活用いただけます。
フリースペースは、多くのテーマで、トップページ用のコンテンツビルダー、固定ページ用のコンテンツビルダーなどに搭載されています。
ブロックエディターの場合
ブロックエディターでクイックタグ機能を使うには、「クラシックブロック」を選択してください。なお、「クラシックブロック」ではHTMLが変換されてしまうため、YouTubeやレイアウト2c、3cのパーツは編集しにくい可能性がございます。ブロックエディターの標準で実装されているブロックの利用もご検討ください。
クイックタグで実際に出力される記述とサンプル
ここでは、最新版のクイックタグで使えるスタイルをご紹介いたします。実際に記事内に表示される見た目をご紹介いたします。
YouTube
下記の編集画面の記述の「ここにYoutubeのコードを入力してください」にYouTubeの埋め込みコードをコピペするとYouTube動画がレスポンシブ表示されるタグです。
「ここにYoutubeのコードを入力してください」の箇所には、Youtubeから取得した埋め込みコードを入力してください。Youtubeの動画ページを開き、動画下にある①「共有」 → ②「埋め込み」の順にクリックで表示されるコードを取得（コピー）して下さい。
ブロックエディターの「クラシックブロック」利用時
「Youtube」のクイックタグボタンはHTMLで出力する仕様のため、ブロックエディターの「クラシックブロック」上では表示されません。
デフォルトの「YouTube」埋め込みブロックをお使いください。
関連記事カードリンク
他のページへのリンクなどをテキストリンクより目立たせるようにセットしたい場合は、「カードリンク」をご利用ください。任意のURLを入力して下記のように表示できます。
YouTubeチャンネルで情報発信を始めると自社サイトに下記のような動画プレイヤーを表示させたい方は多いのではないでしょうか？ 弊社もYouTubeチャンネルを運営していますが、自社サイトに関連する動画は埋め込むようにしています。当記事では、このようなYouTube動画の埋め込み方法を解説しま...
関連記事リンクを表示したい箇所を選択した状態で［関連記事カードリンク］ボタンをクリックし、挿入されたタグ内の「ここに表示させたい記事URL」の部分を表示させたい記事のURLに差し替えてください。
※関連記事カードリンクはサイト内の記事が対象となります。
レイアウト2c、3c
記事内でカラム数を分けたい時にお使いいただけます。「レイアウト2c」なら2カラムに、「レイアウト3c」なら3カラムに分けれます。
上の例では、左カラムに横幅が830pxという大きいサイズの画像を配置していますが、縦横比は維持したままで左カラム幅に収まるように自動的にリサイズされているのがご確認いただけるかと思います。3カラム（［レイアウト3c］）の場合も同様に、クイックタグの挿入 → 内容の編集を行って下さい。
下記は、「レイアウト2c」のクイックタグをクリックして出力される記述です。任意のテキストなどを下記箇所入力すれば、2カラムで表示されます。
見出し
TCDテーマオプションで登録した各見出しのデザインを、h2からh5までボタン一つで出力できます。※見出しのデザインはテーマにより異なります。
見出しに設定したいテキストをドラッグで選択した状態で各ボタンをクリックすることで、見出しのスタイルが適用されます。※一部テーマでは仕様が異なり、ダミーテキスト込みで挿入される仕様です。
囲み枠
こちらは一部のテキストを目立たせたい場合や、本文の補足説明などにご活用ください。以下のように出力されるので、「囲み枠」というテキストを任意のものに差し替えてご利用いただけます。※囲み枠のデザインはテーマにより異なります。
囲み枠
囲みたいテキストをドラッグで選択した状態で各ボタンをクリックすることで、囲み枠のスタイルが適用されます。※一部テーマでは仕様が異なり、ダミーテキスト込みで挿入される仕様です。
ボタン
テーマオプションで登録されているボタンを、本文内に出力できます。リンクを設置したい場合などにご活用ください。※ボタンのデザインはテーマにより異なります。
まとめ
記事執筆や、サイトのページ作成に役立つ装飾をワンクリックで呼び出せる機能がクイックタグ機能をご紹介してきました。
デザインやレイアウトを登録して、いつでもワンタッチで呼び出せるので、オリジナルのコンテンツ制作が捗ります。ぜひあなたのサイト制作にもご活用いただけると嬉しいです。
また、全TCDテーマでは装飾にまつわる便利なCSSが最初からセットされています。こちらも使うと便利すぎて止まらないので、ぜひ使ってみてください！
TCDテーマには、調整用のCSS（汎用クラス）が内蔵されています。 あらかじめスタイルが指定されているため、そのクラスを指定するだけで微調整や装飾が可能です。 「ちょっとここを調整したいな」という時に、CSSのクラスを新設してスタイルシート（カスタムCSS、追加CSS）に追記という作業は...
アンダーラインの透明度、太さを変更したいのですが、どこでカスタマイズすればいいでしょうか。
教えていただけると助かります。よろしくお願いいたします。
透明度は、テーマオプション > クイックタグ > アンダーライン > ラインの色のカラーピッカーの右端の縦バーから調整可能です！ラインの太さに関しましては設定項目がありませんが、以下でご紹介している方法で対応可能です。
>> TCDテーマ共通：クイックタグ「アンダーライン」の太さを変更する方法 | TCD LABO
ご返信ありがとうございました！助かりました。
お役に立てて嬉しいです！
クイックタグの見出し周りについて質問です。
項目にない調整をしたいとき、どのソースを調整したらよろしいでしょうか？
style.cssに記述しても上書きされてしまいうまく反映されません。
やりたいこととしてはh4のweightを400から600に変更したいです。
簡単でリスクが小さい方法をご紹介いたします。
テーマファイルの「style.css」を編集するのではなく、基本設定の「カスタムCSS」に以下を記載してみてください。
.post_content h4 {
font-weight: 600!important;
}
上記でh4のフォントウェイトに600を指定できます。
カスタムCSSの使い方はこちらの記事を参考にご覧いただけますと幸いです。
>> TCDテーマ独自機能「カスタムCSS」の使用方法