記事の装飾をより美しくするための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
フラットボタン-S

フラットボタン(red)
フラットボタン(blue)
フラットボタン(green)
フラットボタン(yellow)

角丸ボタン(デフォルトサイズ)
角丸ボタン-L
角丸ボタン-S

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

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

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

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

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

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

テーブルのレスポンシブ表示

テーブルタグで作成された表組みは自動的にレスポンシブ表示されます。
ブラウザのウィンドウ幅を縮小してスマホでの表示スタイルをご確認ください。

CSS Cascading Style Sheets(CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート)とは…
レスポンシブデザイン レスポンシブデザイン(RWD)とは、Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定された単一のファイルを制作し、すべての機器に同じように送信する…

フォームのスタイル

プラグイン「Contactform7」で作成したフォームを記事内に設置した際のスタイル設定も含まれています。
レスポンシブ表示に対応しています。

Your Name (required)

Your Email (required)

Subject

Your Message

鈴木 次郎代表取締役

投稿者プロフィール

大阪府出身。株式会社○○所属。ウェブデザイン好きの1988年生まれ。

ここに好きな文章を入れることが出来ます。
リンク

この著者の最新の記事

関連記事

  1. 2014-8-3

    売上アップの為の「ランキング一覧」やテキスト広告

    当テーマでは、マネタイズの効果的な方法を想定して開発しておりますので、バナー広告だけでなく、ランキン…

おすすめ記事

  1. これまでのテーマでは、特定の場所にしか設置できなかった、カスタム投稿タイプ「プレスリリース」や「お知…
  2. 当テーマに搭載されている「ランキング一覧」機能では、お好みのランキングを1位から10位まで設定するこ…
  3. 当テーマ「Opinion」では、カテゴリー編集画面から各カテゴリーのキーカラーを設定することができま…
WordPressテーマ「SWEETY (tcd029)」

話題をチェック!

  1. 2014-6-3

    facebook、ツイッターのOGP機能を搭載

    SEO機能の一環として、Opinionでは、facebookのOGP設定機能やTwitter Car…
  2. 2014-4-14

    「PR一覧」でテキスト広告を設定可能

    今回新たに追加された「PR一覧」では、お好きなテキスト広告を5件まで設定可能です。表示位置はトップペ…
  3. 2014-4-9

    WordPressテーマTCDシリーズ一覧

    WordPressテーマTCDシリーズのテンプレートをご紹介します。TCDシリーズのテンプレートはい…

ランキングBEST10

アーカイブ

WordPressテーマ「CORE (tcd027)」
ページ上部へ戻る