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

こちらでは、TCD独自機能「TCDクイックタグ」の基本的な使い方や活用例をご紹介いたします。

TCD076(Be)以降にリリースされたテーマについては、TCDテーマオプションからデザインの指定ができる、【テーマオプション設定型】新クイックタグが搭載されています。

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

クイックタグ機能の使い方

テキストエディター(クラシックエディター)とブロックエディターの両方でご利用いただけますが、一部仕様が異なりますので、こちらでご紹介いたします。

クラシックエディターの場合

クイックタグ機能内蔵のTCDテーマであれば、投稿編集画面に以下のボタンが表示されます。

クラシックエディターのクイックタグ

こちらで任意のボタンをクリックして本文内に出力します。TCDテーマ内に用意されている「フリースペース」というコンテンツ内でも上記のクイックタグと同じものをご活用いただけます。

フリースペースは、多くのテーマで、トップページ用のコンテンツビルダー、固定ページ用のコンテンツビルダーなどに搭載されています。

ブロックエディターの場合

ブロックエディターでクイックタグ機能を使うには、「クラシックブロック」を選択してください。なお、「クラシックブロック」ではHTMLが変換されてしまうため、YouTubeやレイアウト2c、3cのパーツは編集しにくい可能性がございます。ブロックエディターの標準で実装されているブロックの利用もご検討ください。

ブロックエディターのクイックタグ

クイックタグで実際に出力される記述とサンプル

ここでは、最新版のクイックタグで使えるスタイルをご紹介いたします。実際に記事内に表示される見た目をご紹介いたします。

YouTube

下記の編集画面の記述の「ここにYoutubeのコードを入力してください」にYouTubeの埋め込みコードをコピペするとYouTube動画がレスポンシブ表示されるタグです。

編集画面に出力される記述<div class=”ytube”>ここにYoutubeのコードを入力してください</div>

「ここにYoutubeのコードを入力してください」の箇所には、Youtubeから取得した埋め込みコードを入力してください。Youtubeの動画ページを開き、動画下にある①「共有」 → ②「埋め込み」の順にクリックで表示されるコードを取得(コピー)して下さい。

tag_sample4-3

ブロックエディターの「クラシックブロック」利用時

「Youtube」のクイックタグボタンはHTMLで出力する仕様のため、ブロックエディターの「クラシックブロック」上では表示されません。
デフォルトの「YouTube」埋め込みブロックをお使いください。

ブロックエディターのYouTube埋め込み

関連記事カードリンク

他のページへのリンクなどをテキストリンクより目立たせるようにセットしたい場合は、「カードリンク」をご利用ください。任意のURLを入力して下記のように表示できます。

編集画面に出力される記述[clink url="ここに表示させたい記事URL"]

関連記事リンクを表示したい箇所を選択した状態で[関連記事カードリンク]ボタンをクリックし、挿入されたタグ内の「ここに表示させたい記事URL」の部分を表示させたい記事のURLに差し替えてください。

※関連記事カードリンクはサイト内の記事が対象となります。

関連記事の設定サンプル

レイアウト2c、3c

記事内でカラム数を分けたい時にお使いいただけます。「レイアウト2c」なら2カラムに、「レイアウト3c」なら3カラムに分けれます。

カラムの設定サンプル

カラムの表示サンプル

上の例では、左カラムに横幅が830pxという大きいサイズの画像を配置していますが、縦横比は維持したままで左カラム幅に収まるように自動的にリサイズされているのがご確認いただけるかと思います。3カラム([レイアウト3c])の場合も同様に、クイックタグの挿入 → 内容の編集を行って下さい。

下記は、「レイアウト2c」のクイックタグをクリックして出力される記述です。任意のテキストなどを下記箇所入力すれば、2カラムで表示されます。
カラムレイアウトのサンプル

編集画面に出力される記述<div class=”post_row”><div class=”post_col post_col-2″>ここに左カラムに表示させたい任意のテキストや画像タグを入力します。</div><div class=”post_col post_col-2″>ここに右カラムに表示させたい任意のテキストや画像タグを入力します。</div></div>

見出し

TCDテーマオプションで登録した各見出しのデザインを、h2からh5までボタン一つで出力できます。※見出しのデザインはテーマにより異なります。

デフォルトの見出しのデザイン

見出しの表示サンプル

見出しに設定したいテキストをドラッグで選択した状態で各ボタンをクリックすることで、見出しのスタイルが適用されます。※一部テーマでは仕様が異なり、ダミーテキスト込みで挿入される仕様です。

見出しのクイックタグ

囲み枠

こちらは一部のテキストを目立たせたい場合や、本文の補足説明などにご活用ください。以下のように出力されるので、「囲み枠」というテキストを任意のものに差し替えてご利用いただけます。※囲み枠のデザインはテーマにより異なります。

囲み枠

囲み枠の表示サンプル

囲みたいテキストをドラッグで選択した状態で各ボタンをクリックすることで、囲み枠のスタイルが適用されます。※一部テーマでは仕様が異なり、ダミーテキスト込みで挿入される仕様です。

囲み枠のクイックタグ

ボタン

テーマオプションで登録されているボタンを、本文内に出力できます。リンクを設置したい場合などにご活用ください。※ボタンのデザインはテーマにより異なります。

ボタンのデザインサンプル

ボタンの表示サンプル

まとめ

記事執筆や、サイトのページ作成に役立つ装飾をワンクリックで呼び出せる機能がクイックタグ機能をご紹介してきました。

デザインやレイアウトを登録して、いつでもワンタッチで呼び出せるので、オリジナルのコンテンツ制作が捗ります。ぜひあなたのサイト制作にもご活用いただけると嬉しいです。

また、全TCDテーマでは装飾にまつわる便利なCSSが最初からセットされています。こちらも使うと便利すぎて止まらないので、ぜひ使ってみてください!