記事の装飾をより美しくするためのTCD独自機能「クイックタグ」一覧
カードリンク
サイト内の関連記事へのリンクをサムネイル画像付きで表示できます。
H3見出しa
H3見出しb
H4見出しa
H4見出しb
H5見出しb
囲み枠a
囲み枠b
囲み枠c
確かな集客基盤を形成し、売れる仕組みを構築する店舗型事業向けWordPressテーマ「Switch」 – WordPressテーマ「Switch(tcd063)」
多くの店舗経営者の悩みの種となるのが、「集客」の問題です。実店舗の経営ばかりに目が行き、ホームページを有効的に活用できていない事案が数多く存在します。
WordPressテーマ「KADAN (tcd056)」
縦書き文字にも対応した和風ワードプレステーマ「KADAN （華壇）」デモサイト
ユーザーの心を掴むインパクト大のヒーローヘッダー – WordPressテーマ「KADAN (tcd056)」
WEBサイトを入り口に商品や作品を多くの人に知ってもらうためには、掲載コンテンツが充実していることはもちろん、第一印象のインパクトやセンスの良さをアピールすることが不可欠です。
カラムレイアウト
レイアウト2c
クイックタグとは、テキストエディタを利用するときに、入力エリアの上部にあるボタンをクリックすると、そのボタンに応じたタグが挿入されるという機能です。クイックタグを効果的に使うことで、テキストエディタでの記事作成をすばやく、また記事の投稿者が違う場合でも同じような記事構造にすることができます。「カラム」とは「段組み」という意味です。つまり2カラムは縦に2列に分けた表示のことをいいます。カラム作成は基礎・骨格を決める非常に重要な部分です。見やすいようにレイアウトを整える事を初期段階で行い、おおまかな配置を決めていきます。より見やすいコンテンツにするためには必要な骨組み設計です。
レイアウト3c
3カラムは縦3列に分けてレイアウトをすることを指します。PC画面にTCDテーマのクイックタグで3カラムにした場合ですが、PC画面では3カラム表示となりますが、スマートフォンなどで閲覧すると1カラム表示に変更され、スマートフォンでよりみやすい状態に変わります。モニターに収まるように配置する事を考えると、3カラム以内が適当であることが多いかもしれません。モニターといっても、様々なサイズがあります。その全てで同じ見え方ができないと、デザインした意図通りの結果につながらない可能性が高くなるので、配置には注意が必要です。横スクロールが出てしまうようなWebサイトにはしないようにしましょう。縦方向へのスクロールであれば、マウスホイールでスクロール操作ができますが、横方向へ対応しているマウスは一般的ではありません。操作性の良さを考えて、より見やすいコンテンツにしていきましょう。
見出しスタイル
H2
記事の装飾を美しくするTCDクイックタグ H2見出しa
マニュアルや報告書などページ数の多い文書を作成するときには、第1章、第2章というように章や、第1節、第2節というように項目などで管理します。このように「第1章、第1節、第1項」といった階層構造を持たせておくと、読み手にとってわかりやすくなります。 文書に階層構造を持たせる場合は、「見出し」と呼ばれるスタイルを設定します。
記事の装飾を美しくするTCDクイックタグ H2見出しb
見出しの「h1」は記事のタイトルで使われています。本文では基本的に使わない方が良いため、TCDクイックタグの入力設定には表示されないようにしてあります。記事の本文見出しには「h2」以降の見出しタグを用いて文章に階層構造を持たせるように意識をしてください。
H3
記事の装飾を美しくするTCDクイックタグ H3見出しa
ページ内に、「h1 → h2 → h3 → h4」というような順序になるように配置をすれば正しい状態になります。避けたい例は「h1 → h3 → h3 → h4」と歯抜けになっていたり、「h1 → h3 → h2 → h4」と順序が逆になっていたりする場合です。
記事の装飾を美しくするTCDクイックタグ H3見出しb
「h1」だけでなく「h2」や「h3」も使うことで、WEBページの内容がわかりやすくなり、検索エンジンに対してフレンドリーなWEBコンテンツを作ることができます。hタグをうまく使うことで、検索エンジンはかんたんにWEBページの内容を理解できるようになるでしょう。そして、検索エンジンが内容を正しく理解できると、検索結果に表示されやすくなると言われています。
H4
記事の装飾を美しくするTCDクイックタグ H4見出しa
章ごと・見出しタグごとに内容がまとまっていてわかりやすいと、コンテンツの質は勝手に上がります。要点が整理され、コンテンツの内容がより役に立つものになるからです。一方、見出しが効果的に使われていない文章はわかりづらいために役に立てづらく、良質なコンテンツとは言えなくなります。
記事の装飾を美しくするTCDクイックタグ H4見出しb
見出しタグは1から6までありますが、最も重要なのがh1、次に重要なのがh2、さらにはh3タグとなります。WEBページ執筆時はh1から6へと順番に使うのが基本です。hタグを使うと文字が大きくなるからと言って、大きくしたい文字にhタグを使うというのは避けましょう。ただ大きくしたいだけならCSSで対処し、「ここのキーワードや文章に注目」と検索エンジンに伝えたい時にhタグを使うようにします。
H5
記事の装飾を美しくするTCDクイックタグ H5見出しa
見出しごとに内容がまとまることは、訪問ユーザーにとって、とても良い対策になると言えます。訪問ユーザーの心を動かすような、わかりやすい文章やコンテンツを作るには、それなりにノウハウが必要ですが、「h2」や「h3」（「h4」「h5」）タグを使ってコンテンツを作りつづけると、誰でも自然にそのノウハウが身についていきます。
記事の装飾を美しくするTCDクイックタグ H5見出しb
見出しを使うことは、見出しごとに内容をまとめて、コンテンツをわかりやすくする、という作業にほかならないからです。ぜひ、「h2」や「h3」（「h4」「h5」）を使って、まとまりのあるコンテンツを書く習慣をつけ、訪問ユーザーの心を動かすコンテンツをたくさん産み出していきましょう。TCDクイックタグがあなたが文章を書くことに集中できるようサポートします。
囲み枠のスタイル
WEBコンテンツを運営されている方にとって、記事を書く中で「ここに注目してほしい！」と思うことは多くあると思います。そんなときにはパッと目をひく、囲み枠（ボックスデザイン）がおすすめです。TCDクイックタグでは3種の囲み枠を用意しています。
文章や図などを枠で囲んでグループ化して見せたり、見出しなどを枠で囲んで強調することは文章の内容が整理されて見やすくなります。デザインにメリハリがつき、アクセントになるなど、囲み枠の効果はたくさんありますので効果的に使っていきましょう。
枠を多用しすぎると、強調したい箇所が主張をしすぎているため、読みにくくなってしまい、これでは本末転倒です。枠をつけるのは必要なものだけにし、その他は、下線を引く、文字を大きくする、色を変える、太字にする、書体を変えるなどしましょう。
カスタマイズ＊囲み枠のカラーバリエーション
※クラス指定を追加することで配色の変更が可能です。
「揃える」ことは重要です。文字の位置や、見出しなど揃えられるところはすべて揃えます。文章の端が揃うことで文頭が見つけやすくなり、文章が読みやすくなります。画像の大きさ、ボックスの色を揃えると見た目のバランスが良くなります。
「まとめる」ことも効果的です。項目名と説明、写真と写真のタイトルなどのデザインを揃えるように、関連のあるもの（例えば注釈など）を同じ枠、背景色で表示することで直感的に理解をしやすくなり、劇的に全体の視認性が向上します。
まとめた情報を「区別する」とグループが強調され、情報を素早く見つけることができ、正確に伝えることができます。グループを区別するには、罫線を引く、色分けをするなどの方法があります。TCDクイックタグを使ってサッとデザインを整えましょう。
プロのデザイナーは、これらのルールを経験からほとんど無意識に使いこなします。このルールを身に付ければ、誰でもレイアウトが上達します。様々なルールがありますが、基本ルールは「揃える」「まとめる」「区別する」を使った情報の整理整頓です。
ボタンのスタイル
フラットボタン（デフォルトサイズ）
フラットボタン-L
フラットボタン-S
フラットボタン（red）
フラットボタン（blue）
フラットボタン（green）
フラットボタン（yellow）
角丸ボタン（デフォルトサイズ）
角丸ボタン-L
角丸ボタン-S
ラウンドボタン（デフォルトサイズ）
ラウンドボタン-L
ラウンドボタン-S
カスタマイズ＊ボタンの配置方法を指定する
※pタグで囲い、クラス指定を追加することで配置方法の指定が可能です。
フラットボタン-L（左揃え）
フラットボタン-L（中央揃え）
フラットボタン-L（右揃え）
テーブルのレスポンシブ表示
テーブルタグで作成された表組みをレスポンシブに表示するためのタグです。
ブラウザのウィンドウ幅を縮小してスマホでの表示スタイルをご確認ください。
CSS Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは…
レスポンシブデザイン レスポンシブデザイン（RWD）とは、Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定された単一のファイルを制作し、すべての機器に同じように送信する…
フォームのスタイル
プラグイン「Contactform7」で作成したフォームを記事内に設置した際のスタイル設定も含まれています。
レスポンシブ表示に対応しています。
お名前 (必須)
メールアドレス (必須)
題名
メッセージ本文
