ブログ

記事の装飾をより美しくするためのTCD独自機能「クイックタグ」一覧

テーマ付属の設定ファイルに入っているクイックタグの表示サンプル一覧です。エディタ上に表示されるクイックタグボタンと同じ順にご紹介します。

Youtube動画のレスポンシブ表示

記事内のYoutube動画をレスポンシブ表示します。
PCでは、メインカラム幅より横幅が大きい動画でも自動的にカラム幅ぴったりにリサイズされます。

関連記事のカードリンク表示

サイト内の関連記事へのリンクをサムネイル画像付きで表示できます。

カラムレイアウト

レイアウト2c

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

レイアウト3c

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

見出しスタイル

H3見出しa

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

H3見出しb

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

H4見出しa

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

H4見出しb

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

H5見出しa

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

H5見出しb

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

囲み枠のスタイル

スタイル1・・・Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

スタイル2・・・Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

スタイル3・・・Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

カスタマイズ*囲み枠のカラーバリエーション

※クラス指定を追加することで配色の変更が可能です。

スタイル1(red)・・・Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

スタイル1(blue)Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

スタイル1(green)Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

スタイル1(yellow)Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ボタンのスタイル

ボタンのサイズ

フラットボタン-L
フラットボタン-M(デフォルト)
フラットボタン-S

ボタンのカラー

フラットボタン-red
フラットボタン-blue
フラットボタン-green
フラットボタン-yellow

角丸ボタン

角丸ボタン-L
角丸ボタン-M(デフォルト)
角丸ボタン-S

ラウンドボタン

ラウンドボタン-L
ラウンドボタンM(デフォルト)
ラウンドボタン-S

カスタマイズ*ボタンの配置方法を指定する

※pタグで囲い、クラス指定を追加することで配置方法の指定が可能です。

フラットボタン-L(左揃え)

フラットボタン-L(中央揃え)

フラットボタン-L(右揃え)

Contactform7のデフォルトスタイル

Contactform7で作成されたフォーム用のスタイル設定も含まれています。

お名前 (必須)

メールアドレス (必須)

題名

メッセージ本文

関連記事

コメントは利用できません。

ピックアップ記事

  1. 2014.9.26

    イメージ画像のキャプション表示テスト

    これは画像位置合わせテスト(アンキャプション付き画像)のページです。

ピックアップ記事

  1. これは画像位置合わせテスト(アンキャプション付き画像)のページです。
  2. このページではテーマで設定されている様々なスタイルの確認ができます。
  3. 当テーマはロゴを設定しない場合には、サイトタイトルとサイトの説明がテキストで表示されます。