quicktag_ecmg

ワードプレス

WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機能の使い方

小見出しのデザインを美しくしたい?ああ、例えば、世にも美しいこういうヤツですか?

世にも美しい見出し

囲み枠のデザインもキレイにしたい?ああ、例えば背景がウッスラ色づいた、点線のヤツ?

主張しすぎない点線の囲み枠

それともこんな角丸でフレッシュ!なヤツ?

角丸フレッシュ!な囲み枠

・・ええそーなんです。コレらはぜんぶ、本・当・は、CSSの知識が必要になります

関連記事のカード型リンクを作りたい?YouTubeが記事枠を飛び出してしまう?かっちょいいボタンリンク?・・・ああ、、申し訳ない。ぜーんぶCSSの知識が必要です本・当・は。

というのも、TCDテーマなら全部、最初から解決してるんです。上に挙げたものも全部、最初から用意されているモノ。WordPressを使おう!と決めたとき、「壁」に感じる専門的な知識が、ほとんど必要ないんです

quicktag_ins1

ナンスカその顔。・・ああ!完っ全に疑ってますね?じゃあ本当に簡単な様子を見せましょう

TCD独自の「クイックタグ」機能

TCDテーマでは、洗練されたテーマのデザインに合う独自のスタイルシートが、はじめから用意されています。それこそがあの、CSSというものです。初心者にとって魔物なアイツです。

本来ならそのシートを参照しながら、記事作成の時にうまいこと表記してゴニョゴニョ・・と手間がかかるものなんですが・・・用意されたボタンを押すだけでOK!にしてくれています。

quicktag_01

例えば冒頭の見出し。見出しに表示したいテキストを選択ボタンをポチッとするだけ。

quicktag_02

世にも美しい見出し

ボタンだって・・・

ボタンに表示したいテキストを選択ボタンをポチッ飛び先URLを「#」の場所へ。特別なことは必要ありません。マウスオーバーした時のフワッとした色変化もいい感じです。

じゃあ実際にはどんなデザインの、何がどれだけ用意されているのか?一挙に並べていきます

上のボタンでは、あえてリンク先に飛ばないようにしています。
以降は視認性のため、項目によってプルダウンで表示するようにしています。

見出しスタイル

H3見出しa
H3見出しb
H4見出しa
H4見出しb
H5見出しa
H5見出しb

囲み枠のスタイル

囲み枠a・・・主張しすぎない囲み枠。角丸がおしゃれです。後述しますが、冒頭で挙げたフレッシュ!な囲み枠もコレを応用すれば簡単に作れます。

囲み枠b・・・王道なデザインの囲み枠。シンプルながらも影がついているので、少し浮かび上がって見えます。上品です。

囲み枠c・・・冒頭で挙げた囲み枠。優しいイメージがありながらも、記事中の区切りとしてしっかり役割を果たしてくれます。

背景色もうっすら付いているのがわかりますか?囲み枠bもそうですが、「視線が留まるぐらいの」ちょうどいいセンスを感じます。

もちろん、どの囲み枠も文字数に応じて、こんな風にきちんと広がってくれます。

ボタンのスタイル

quicktag_ins2

デフォルトで用意されているボタンは13種類。どのボタンもデフォルトでは左寄せですが、ボタンを真ん中に配置したり、右寄せにすることも超絶簡単です。(後述)

また、カラーが選べるボタンはデフォルトで「フラットボタン」だけですが、全てのボタンを同じように、または好みの色に色付けすることができます。(これも後述)

では、マウスオーバー具合も確認しつつ、まとめてご覧ください。

フラットボタン

フラットボタン-S

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

フラットボタン-L

フラットボタン(赤・青・緑・黄)

フラットボタン-red

フラットボタン-blue

フラットボタン-green

フラットボタン-yellow

角丸ボタン

角丸ボタン-S

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

角丸ボタン-L

ラウンドボタン

ラウンドボタン-S

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

ラウンドボタン-L

いずれのボタンもうっすら影がかっていて、浮かび上がって見えます。・・・上品ですね。マウスオーバー時のフワッと感も適度な変化でキモチイイ。そして文字数に応じて自動伸縮してくれるのも嬉しいところです。

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

内部リンクでも外部リンクでも、カード型にカッコよく表示させたい。その期待にもボタンひとつで応えてくれます。

「関連記事カードリンク」ボタンを押して・・・

quicktag_04

quicktag_05

出力されたテキスト内、「ここに表示させたい記事URL」部分にURLを貼るだけで・・・

ハイ、完成。

カラムレイアウト

画像を横並べにしたい。または画像を横に置きつつ、その説明文を入れたい。そんなレイアウトもボタンひとつ。2カラムと3カラムが用意されています。

quicktag_06

2カラム

quicktag_07

quicktag_08

quicktag_09

こんな感じで、一方にテキストを表示させる、なんて応用も可能です。

なお、スマートフォンでは左から順に縦に並んで表示されます。

イイですねぇ。プロっぽいですねぇ。

quicktag_10

3カラム

quicktag_11

quicktag_12

quicktag_13

quicktag_14

3カラムだってまったくいっしょ。なんてイージー。

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

YouTubeをはじめ、動画サービスの共有リンクを貼り付けたとき、記事部分のカラム幅を超えて表示されてしまうことがあります。動画の幅のほうが大きい時に起こる現象ですね。

特にスマートフォンなどディスプレイの小さいデバイスではよくあること。PC表示がOKでも安心ナラネーわけです。でもコ・レ・も、ボタンひとつです。

quicktag_15

quicktag_16

共有コードを挟むだけで完了。スマートフォンでの表示もキレイに収まっていることが確認できると思います。

PC環境でもブラウザのウィンドウを縮小すれば、スマホでの表示スタイルを確認できます。

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

例えば下のようなテーブル(表)を作ったとします。こういった表組みは、スマートフォン表示では崩れやすいんですよね。

ここではレスポンシブ対応版と非対応版を用意しました。スマートフォンまたは、ブラウザのウィンドウサイズ調整で、表示の違いを確認してみてください。

テーマオプション

WEBサイトを立上げると、最初におおまかなレイアウト設定をすることになります。サイトのテーマカラー、ロゴの設置、SNSシェアボタンの設置などなど・・・

TCDテーマなら専門的な知識は不要。プロに外注するような本格的なサイトを自分で作れる。管理できる。TCD独自の「テーマオプション」の使い方を紹介。

ウィジェット

WEBサイトのレイアウトって、メインカラムだけじゃキマらない。関連リンクや広告もセンスよく配置したい。

デザインセンスも必要とされる・・・ハズのWEBサイト制作。TCDテーマの「オリジナルウィジェット」にまかしときゃあ解決です。

テーマオプション

WEBサイトを立上げると、最初におおまかなレイアウト設定をすることになります。サイトのテーマカラー、ロゴの設置、SNSシェアボタンの設置などなど・・・

TCDテーマなら専門的な知識は不要。プロに外注するような本格的なサイトを自分で作れる。管理できる。TCD独自の「テーマオプション」の使い方を紹介。

ウィジェット

WEBサイトのレイアウトって、メインカラムだけじゃキマらない。関連リンクや広告もセンスよく配置したい。

デザインセンスも必要とされる・・・ハズのWEBサイト制作。TCDテーマの「オリジナルウィジェット」にまかしときゃあ解決です。

パソコンではまったく一緒に見えるんですが、スマートフォンでは・・・それぞれ、下のように表示されるはずです。

 レスポンシブ対応 / 非対応

quicktag_17

quicktag_18

スマートフォンでのテーブル表示って、こんな「難しさ」があるんですが・・コレもお決まりの、ボタンひとつで解決。

quicktag_19

quicktag_20

説明が書いてある場所に、テキストや画像を入れるだけで完了今やモバイルでの閲覧環境を整えることは必須。ヒジョーに重宝する「ポチッとボタン」です。



以上、TCDテーマ「クイックタグ」機能を紹介してきました。WordPress初心者にとってはオイシイ、簡単すぎる記事装飾機能ですね。

「クイックタグ」ライブラリは購入者特典

quicktag_ins3

この便利な「ポチッとボタン」たちは、TCDテーマを購入後、購入者専用サイトで配布されているデータをインポートするだけで実装されます。テーマごとに内容が違うこともあるでしょう。

quicktag_21

その作業も、書いてある説明のまま進めれば、初心者でも5分足らずでできるようなもの。サイト内で「クイックタグ」などで検索すれば、説明記事がヒットするかと思います。

quicktag_22

追記:インポート作業も不要になりました。テーマを有効化するのみで実装されます。

ちなみに、購入者専用サイトは各テーマごとに用意されていて、テーマのインストール方法から始まりロゴの設定方法などなど、順番に読んでいけば誰でも失敗しない「各テーマ専用の取扱説明サイト」になっています

しかし、よー作りますね、、どんどん新テーマをリリースしてるってのに・・・まあとにかく、「購入後はほったらかし」じゃないので、いやホントに、ほっとします。あそこの存在は。

「クイックタグ」もうひとつのウマミ

quicktag_ins4

クイックタグ機能や購入者サイトの魅力は、「WordPressサイトを簡単にスタートできる」だけではないように感じます。簡単に満足のいくサイトが始められると、軌道に乗るのが早い。

そーすると次に・・「いろんな箇所の見栄えを、WEBサイトテーマにフィットさせていきたくなる欲求」が出てきます。ここで紹介したものはぜんぶ、ボタンを押すだけで完了!なので、スタートで疲れ切ってしまうことがないからですね

quicktag_ins5

 フラットボタン以外のボタンにも色をつけたい

 ボタンを中寄せ表示させたい

 見出しの背景色を変えてみたい

という欲求が早速出てきた「コダワリ派」のあなたは、こちらを参考に。

実践あるのみ!TCDテーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本

想像よりずっと簡単に、カスタマイズできてしまうことが伝わると思います。
スタートダッシュがキマれば、カスタマイズの知識も自然と、無理なく付いていく
思い通りのサイトが自分で作れる。運営していける。これが大きな付加価値だと思います。

関連記事

【使用者レビュー】WordPress初心者にこそおすすめのブログテーマ、TCD「MAG」のデフォルト機能と魅力を徹底解説

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. 仕事に時間をとられ、何もやる気がでない時。がんじがらめ感をスカッ!と解消するモチ…
  2. あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方…
  3. 魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「Phrase…
  4. ブロガー以外も知っておきたい。ブログ記事の書き方と、頭を整理する構成方法
  5. 「忙しくてやりたいことができない・・!」に効く。マイペースに習慣を変えるタスク管…

関連記事

  1. backwpup-japanese_ec

    ワードプレス

    アップデートで英語化された!?BackWPupをサクッと日本語化する方法

    アップデートしたら、設定画面が英語化された!? 2…

  2. retina-logo_ec

    ワードプレス

    【Retinaディスプレイ対応4】サイトの顔も綺麗に。TCDテーマなら3ステップで完了する、ロゴ画像…

    サイトロゴは、サイトの顔。このサイトでは最上部にロゴを配置していま…

  3. retina-text-widget_ecrt
  4. unveil-lazy-load_ec

    ワードプレス

    設定不要!WordPressプラグイン「Unveil Lazy Load」でページ読込スピードアップ…

    簡単装備で速度をブースト!プラグインをインストールするだけで、ペー…

  5. insert-card-link_ecmg

    ワードプレス

    クリックひとつで完成。Embedlyで見栄えの良いカード型の記事リンクを貼る方法

    リンク挿入、どうしてますか?記事を書いていると、「以前に自分が書い…

  6. display-speed_ec

    ワードプレス

    目指せ軽量化!今から始める、WordPressサイトの表示スピード改善計画

    あなたの●●●、ちょっと重すぎない? いえ、すみません。あなた…

【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

Requ.Sound Lab. | レク.サウンドラボ

レク.サウンドラボ

音に、景色と”振る舞い”を。

特集記事

  1. retina_ecmg
  2. theme-change_ecrt
  3. extension-tools-for-bloggers_ec
  4. tcd-theme-user-review_ecmg
  5. todoist_ec
  6. tcd-mag_ecmg
  7. adjust-the-button_ecmg
  8. todoist-extension_ecmg
  9. improvement-flow_ecmg
  10. valuable-content-from-image_ec

ピックアップ記事

  1. original-share-button_ecmg
  2. blog-theme-mag_ecmg
  3. sns-count-cache_ecmg
  4. todoist-basic_ec
  5. media-setting_ec
  6. tcd-theme-widget_ecmg
  7. todoist-advanced_ec
  8. like-button-card_ecmg
  9. gif-animation_ec
  10. widgetoon-js-count-jsoon_ecmg

強みを見つけて、活かしていくために。

business-books

タスク管理で、自己管理。

todoist

おすすめ記事

  1. WordPressサイトを丸ごとバックアップ!「BackWP…
  2. 【Retinaディスプレイ対応2】スリムで美しいブログを実現…
  3. メディア問題さん、さようなら。画像サイズを気ままに追加するプ…
  4. タスクを完了させたくなる!? モチベーションアップに役立つT…
  5. 小規模チーム、家族間の疎通に。Todoistで始める気軽なタ…

魅力的なブログを、今すぐ作る。

tcd-mag

ブログのRetina対応、始めませんか?

retina-os-solution

最近の記事

  1. 【使用者レビュー】WordPress初心者にこそおすすめのブ…
  2. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  3. タスクに、日時や曜日が勝手に反映される・・!?Todoist…
  4. 魅力的なブログで収益化。ワードプレステーマTCD【MAG】の…
  5. MAGのデザインをフル活用。PCとスマホの広告設置枠を自由に…

ゆっくり、フシギなGIFアニメ。

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

特集記事

  1. 【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザ…
  2. 【保存版】知ったら戻れない、美しさの極みへ。WordPres…
  3. 【フリーランス必見】確実に納期を守るために。タスク管理ツール…
  4. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  5. いつでもどこでも即タスク化。Todoistの便利すぎる拡張機…

Requ.log | おすすめビジネス書

コンテンツの秘密-ぼくがジブリで考えたこと 「言葉にできる」は武器になる。
プロフェッショナルは「ストーリー」で伝える 日本人の知らなかったフリーエージェント起業術

Requ.log | おすすめ物語

モモ マリコ/マリキータ
なんくるない たったひとつの冴えたやりかた

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  2. theme-change_ecrt

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点…
  3. business-books_ecmg

    マーケティング

    【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分の強みを見つけて活か…
  4. extension-tools-for-bloggers_ec

    ブログ

    【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個の…
  5. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
PAGE TOP