tcd-css-customize_ecmg

ワードプレス

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

初心者にとって避けて通りたい・・避けたくてもいつかは必ずやぶち当たる・・魔物なアイツ。そう、ヤツの名はCSS。しー!えす!えす!記事装飾などにはどーしても必要になってきます。

ここで紹介する「TCDテーマで簡単にできるデザイン変更」を通して、基本的なCSSの特徴や、簡単なカスタマイズ方法を覚えましょう。奥深くて細かいことは割愛。では早速。

「クイックタグ」から学ぶ、簡単なカスタマイズ

TCDテーマでは最初から、デザイン性のあるボタンや見出し、囲み枠、関連記事のカード型リンクなどがたくさん用意されています。しかも独自の「クイックタグ」機能で、一瞬で呼び出すことができるという・・・まさにボタンひとつ、ポチッとするだけ

tcd-css-customize_01

「クイックタグ機能」の詳細はこちら 

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

ボタンのカスタマイズ

まずクイックタグを使って、2つのパターンを見比べてみます。

tcd-css-customize_02

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

tcd-css-customize_03

フラットボタン-green

ボタンを押しただけで出力されたテキストを比べて見てみると・・・

class="q_button"
class="q_button bt_green"

という部分が違います。つまり、【q_button】でフラットボタンが表示され、その後に【半角スペース+bt_green】を付ければ緑色に表示される、ということです。

ボタンの色・形を自由に組み合わせる

このように、各クイックタグボタンを押したときに出力される「class=“●●”」の部分を見れば、呼び出すために必要な文字列(クラス名)が分かるというワケです。

それさえ分かればこっちのもん。例えば「角丸ボタン」を押すと・・・

tcd-css-customize_04

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

「角丸ボタン-S」を押すと・・・

tcd-css-customize_05

角丸ボタン-S

同様に、出力されたクラス名を比べてみると・・・

class="q_button rounded"
class="q_button rounded sz_s"

q_button】でデフォルトのフラットボタンを呼び出し・・・【rounded】で形を角丸に変えて・・・【sz_s】でボタンの大きさを小さくしている、ということが分かります。

つまり、緑色の小さな角丸ボタンを作りたいなら 

class="q_button rounded sz_s bt_green"

角丸ボタン-S(緑)

という具合です。【bt_green】を追加しただけ。CSSを利用するとき、「それぞれの要素を呼び出すクラス名」を半角スペース付きで並べれば、好きな組み合わせのものが作れる、ということ。意味不明だった文字列も、仕組みさえわかれば簡単に操れるようになれます。

CSSの基本 – 組み合わせは自由自在

もちろん他のスタイルにも応用できます。「囲み枠c」を押すと・・・

tcd-css-customize_06

と出力されるので、呼び出すクラス名は【well3】だと分かります。

実際の表示は、こんな囲み枠。

では、「フラットボタン」と「囲み枠c」を連続ポチッ。すると・・・

tcd-css-customize_07

Requ.log

というカンジで、自由な「あわせ技」も可能になります

「クイックタグ」で出力されるクラス名は、各テーマによって異なる可能性がありますが問題ありません。文字列が違うだけで、同じ「仕組み」になっています。

ボタンの表示場所を変える

さて上のボタン、せっかくなんで中央に配置したいですよね。こんな感じに。

Requ.log

そのためには、コレを加えるだけ。 ここからは画像も中央寄せにしていきますか!

tcd-css-customize_08

TCDテーマでは、中央寄せ、右寄せ、左寄せのスタイルが用意されています。クラス名はそれぞれ、中央寄せ⇒【align1】、右寄せ⇒【align2】、左寄せ⇒【align3】。だから例によって、半角スペースと一緒に加えるだけで済むんですね。もちろん、ボタンだけで配置を変えられます。

tcd-css-customize_09

Requ.log

Requ.log

Requ.log

配置のクラス名は基本的に、TCDでは全テーマ共通のようですが、テーマによって異なる可能性もあります。うまく反映されない場合は、WordPress管理画面「外観」⇒「テーマの編集」⇒「スタイルシート (style.css)」を覗いて、「配置」や「寄せ」などで検索してみてください。注釈付きでわかりやすくまとめられています。

tcd-css-customize_10

好きな色のボタンを新たにつくる

管理画面の「外観」⇒「テーマの編集」⇒「スタイルシート (style.css)」に入ります。

tcd-css-customize_11

tcd-css-customize_12

「ボタンのスタイル」などで検索すると、該当の場所が見つかります。

tcd-css-customize_13

q_button】。見たことあるクラス名です。フラットボタン(デフォルト)のクラス名ですね。そのもうちょい下に・・・

tcd-css-customize_14

bt_green】発見!緑色に指定するクラス名が見つかりました。その他の赤・青・黄色に指定するものも並んでいます。

ここでは新しい色のボタンを作るために、新しいクラス名を作りましょう。下の画像の該当部分(2列分)を全コピーして・・・

tcd-css-customize_15

管理画面「外観」⇒「テーマオプション」内の「カスタムCSS」の中にペーストします。

tcd-css-customize_16

ここでは紫色に指定したいので【.bt_green】⇒【.bt_purple】とでも名前を変更し・・・

tcd-css-customize_17

tcd-css-customize_18

.bt_purple】直後の{}で囲まれた中、「background:#27ae60;」⇒これが背景色を指定する部分。「color:#fff;」⇒これが文字色を指定する部分。それぞれシャープの後ろの数字を任意に変更します。

tcd-css-customize_19

tcd-css-customize_20

一方、【.bt_purple:hover, .bt_purple:focus】直後の{}で囲まれた中、「background-color:#39c574;」と「color:#fff;」。これはマウスオーバーした際の背景色と文字色を指定する部分。同様にシャープの後ろの数字を任意に変更します。

tcd-css-customize_21

tcd-css-customize_22

保存したら早速使ってみましょう。マウスオーバー時の色変化も指定通りか?も忘れず確認。

tcd-css-customize_23

Requ.log

いい味だしてるねぇ。

なお、テーマオプション内のカラーパレットを(一時的に)使って、色を決めるとラクです。

tcd-css-customize_24

テーマオプション(カスタムCSS含む)の詳しい使い方はこちら 

理想のWEBサイトを直感デザイン。TCD『テーマオプション』の使い方

囲み枠・見出しのカスタマイズ

ボタンの色を変えられたならもう大丈夫。囲み枠も見出しも自由に色付けできます。

囲み枠の色を変える

ここでは、「囲み枠a」の色を変えてみます。クイックタグで呼び出すと・・・

tcd-css-customize_25

と出力されるので、呼び出すクラス名は【well】だと分かります。

囲み枠a・・・主張しすぎない囲み枠。角丸がおしゃれです。色を変更すれば、フレッシュ!な囲み枠も簡単に作れます。そーなると急に主張しだす囲み枠です。

じゃあ、ボタンのときみたいに【bt_purple】を追記してみよう!

class="well bt_purple"

囲み枠a・・・主張しすぎない囲み枠。角丸がおしゃれです。色を変更すれば、フレッシュ!な囲み枠も簡単に作れます。そーなると急に主張しだす囲み枠です。

おぅ・・・ハードな色合いですね。マウスオーバーしたときの変化も若干ウルサイ・・・そういえばボタンに使っていた【bt_●●】シリーズは、マウスオーバーしたときのアクションも指定されていたんでしたね。

でも、TCDのことです。こーゆー時のための「オイシい色付けスタイル」も用意してるんじゃないですか?ちょっと探してみましょう。

ボタンのときと同じように「テーマの編集」⇒「スタイルシート (style.css)」に入り、「囲み枠」などで検索。

tcd-css-customize_26

tcd-css-customize_27

ありましたありました!【wl_red】【wl_blue】【wl_green】【wl_yellow】。これらをつけてみましょう!

tcd-css-customize_28

囲み枠a(赤)・・・角丸のおしゃれ枠。注意喚起に相性がいい、優しい赤色。

囲み枠a(青)・・・角丸のおしゃれ枠。冷たすぎない、さわやかな青色。

囲み枠a(緑)・・・角丸のおしゃれ枠。注目度が高く安心感のある、柔らかな緑色。

囲み枠a(黄)・・・角丸のおしゃれ枠。うるさい印象を与えにくい、落ち着いた黄色。

いいかんじです。

見出しの色を変える+ちょっと応用

ここでは、「H3見出しb」のデザインを変えてみます。クイックタグで呼び出すと・・・

tcd-css-customize_29

と出力されるので、呼び出すクラス名は【style3b】だと分かります。

H3見出しb(デフォルト)

うーん絶妙に美しい見出し。。。い、いじらないほうがいーんじゃないか!?・・・・・いや!ここではあえて、上品さを残しつつ、ほんの少しだけ変化させることに挑戦してみましょう

同じように「テーマの編集」⇒「スタイルシート (style.css)」に入り、「見出しのスタイル」などで検索。

tcd-css-customize_30

tcd-css-customize_31

その中にありましたね。【style3b】。ボタンのときと同様に、まるっとコピーして「テーマオプション」⇒「カスタムCSS」に追記します。

tcd-css-customize_32

tcd-css-customize_33

.post_content .style3b】直後の{}で囲まれた中、「background:#fafafa;」⇒これが背景色を指定する部分でしたね。シャープの後ろの数字を任意に変更します。

tcd-css-customize_34

tcd-css-customize_35

ここでひとつ応用してみましょう。「border-top:2px;」⇒これが見出しの上にかかっているラインの太さを指定する部分。「border-bottom:1px;」⇒これが見出しの下にかかっているラインの太さを指定する部分。それぞれの数字を任意に変更します。

tcd-css-customize_36

tcd-css-customize_37

H3見出しb(カスタマイズ)
H3見出しb(デフォルト)

背景色をほんのり濃くして、上のラインを細く、下のラインを太くしました。ほんのちょっとずつ変えただけでも印象が変わりますね微妙なんて言わないで。洗練されたデザインをセンスよさげにいじるのは・・ゆ、勇気がいるのです。でも、実際使えそうな見出しでしょ?

運営サイトのテーマによっては、もっとビビッドなカラーにしてもいいかもしれませんね。

実践の中で必要になったものを吸収・昇華する

tcd-css-customize_ins1

以上、TCDの「クイックタグ」で出力されるクラス名から、CSSの基本を知るという、ちょっとイレギュラーなカスタマイズの手順を紹介してきました。

こんな感じでいじっていると、だいたいどの要素をいじれば何が変わるのか?だいたい想像がついてきます。トライ&エラーだけでじゅうぶん理解していけます。わからないCSS要素も、「●● プロパティ」のような形で検索すればすぐに知ることができます。(例:「margin プロパティ」)

CSSなんて、初心者の時点では「サッパリわからん!」であたりまえじゃないでしょうか。参考書で勉強しようとしても「大枠の仕組み」から学んでいくことになります。「サイト運営は手段」であり、「目的はその向こう側」なのであれば、それはとても遠回りなことに思えます

tcd-css-customize_ins2

少なくとも、当初から本当に必須となる知識は少ない。すぐに始めて、実践して、必要になった知識を都度自分のものにしていくのが最短距離です。そしてそのほうが楽しいでしょう。

初心者のうちにTCDテーマに出会い、簡単にサイトを立ち上げ、ゴチャゴチャいじりながら実践で覚えていけたのは「自分でサイト運営していけるレベル」までの最短ルートでした。そのへん、モッてるんです私。

というわけで、私はCSSマスターなんかじゃありません。素人にフワフワうぶ毛が生えた程度。

でももうサイト運営はしていける。思いついたカスタマイズならできる。そんな経験談からの、実践でガンガンイケるぞ!っという、CSSを例にした「学び方」のご提案でした。

関連記事

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

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. TodoistでToDoリスト。プロジェクトやタスクの階層化で頭の中を楽にする
  2. 便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cac…
  3. “知っているつもり”の拡張子、jpg gif png。画…
  4. 魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「Phrase…
  5. ブログにおける「価値あるコンテンツ」とは?三大要素と”オリジナリティー”の正体

関連記事

  1. child-theme_ecmg

    ワードプレス

    「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡単解説!

    とりあえず作りきる!知識は後半!記事ページをカスタマイズしたい。え…

  2. sns-count-cache_ecmg

    ワードプレス

    便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cacheの設定方法と有効…

    必要な設定だけにフォーカス!「ページを表示するたびに、今のシェア数…

  3. lightshot_ecmg

    WEBデザイン

    Windows?Mac?なんでもゴザレ。スクリーンショットに特化したキャプチャーツールLightSh…

    "気軽な"先輩をウマく使おう。それなりに融通のきくMacのスクリー…

  4. retina-slider_ec

    ワードプレス

    【Retinaディスプレイ対応5】もっと美しくワガママに。スライダー画像さえも綺麗に表示させてしまう…

    スライダー嬢も、綺麗に。このサイトのトップページには、スライダーが…

  5. insert-card-link_ecmg

    ワードプレス

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

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

  6. facebook-fast-display_ecmg

    ワードプレス

    瞬間奥義「非同期設定」。Facebookのいいねボタン、ページプラグインたちの読込み遅延を斬るっ!

    余計な読込み遅延を解消セヨ。えぇー今回の任務は「ぺいじ」の読込…

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

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

レク.サウンドラボ

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

特集記事

  1. tcd-mag_ecmg-ps
  2. retina_ecmg
  3. tcd-theme-user-review_ecmg
  4. valuable-content-from-image_ec
  5. theme-change_ecrt
  6. todoist-tips_ecmg
  7. todoist_ec
  8. business-books_ecmg
  9. improvement-flow_ecmg
  10. adjust-the-button_ecmg

ピックアップ記事

  1. todoist-routine_ecrt
  2. dash_ecmg
  3. todoist-constitution_ec
  4. todoist-advanced_ec
  5. todoist-basic_ec-ps
  6. reset-button_ecrt
  7. media-setting_ec
  8. todoist-class_ecrt
  9. tcd-theme-widget_ecmg
  10. tcd-css-customize_ecmg

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

business-books

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

todoist

おすすめ記事

  1. 【Retinaディスプレイ対応1】Macで綺麗に。Windo…
  2. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ペー…
  3. メディア問題さん、さようなら。画像サイズを気ままに追加するプ…
  4. 不要なメール通知にうんざり!購読・迷惑メールの解除をまとめて…
  5. 自分のアクセス痕は残さない。アナリティクスのフィルタで自宅の…

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

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. TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー…
  2. 【徹底検証】乗り換えたいでしょ?WordPressTCDテー…
  3. 魅力的なブログで収益化。ワードプレステーマTCD【MAG】の…
  4. 【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分…
  5. 【フリーランス必見】確実に納期を守るために。タスク管理ツール…

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

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

Requ.log | おすすめ物語

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

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. todoist-tips_ecmg

    マネジメント

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

    ワードプレス

    魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカ…
  3. todoist_ec

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
  4. business-books_ecmg

    マーケティング

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

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
PAGE TOP