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. 仕事に時間をとられ、何もやる気がでない時。がんじがらめ感をスカッ!と解消するモチ…
  2. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  3. “知っているつもり”の拡張子、jpg gif png。画…
  4. 簡単で効果的なストレス解消方法。「リセットボタン」で本当のリラックスを呼びだそう…
  5. アレ?Chromeの表示文字、汚なくなった!? キレイなフォントを1分で取り戻そ…

関連記事

  1. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法

    もっと思い通りに。具体的な調整例。下の記事で紹介した「カッコ美しい…

  2. insert-card-link_ecmg

    ワードプレス

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

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

  3. theme-change_ecrt

    ワードプレス

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

    TCDテーマからTCDテーマへ!魅了されてしまった。ついに乗り換え…

  4. retina_ecmg
  5. tcd-theme-selection_ecmg
  6. simple-image-sizes_ec

    ワードプレス

    メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simple Image Si…

    挿入画像サイズ、もっと自由に選びたい。ハイどーも。お悩み相談室のコ…

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

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

レク.サウンドラボ

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

特集記事

  1. tcd-theme-selection_ecmg
  2. adjust-the-button_ecmg
  3. improvement-flow_ecmg
  4. todoist-extension_ecmg
  5. todoist-tips_ecmg
  6. display-speed_ec
  7. extension-tools-for-bloggers_ec
  8. tcd-mag_ecmg
  9. theme-change_ecrt
  10. tcd-theme-user-review_ecmg

ピックアップ記事

  1. todoist-constitution_ec
  2. todoist-class_ecrt
  3. todoist-basic_ec
  4. like-button-card_ecmg
  5. chrome-font_ecmg
  6. reset-button_ecrt
  7. dash_ecmg
  8. todoist-productivity_ecmg
  9. widgetoon-js-count-jsoon_ecmg
  10. todoist-advanced_ec

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

business-books

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

todoist

おすすめ記事

  1. ”WEBサイズマスター”へ。Chrome拡張「Page Ru…
  2. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ペー…
  3. きれいにしっかり画像圧縮。WordPressプラグインCom…
  4. タスクを完了させたくなる!? モチベーションアップに役立つT…
  5. 【Retinaディスプレイ対応2】スリムで美しいブログを実現…

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

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. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  2. 魅力的なブログで収益化。ワードプレステーマTCD【MAG】の…
  3. TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー…
  4. 『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテ…
  5. 【徹底検証】乗り換えたいでしょ?WordPressTCDテー…

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

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

Requ.log | おすすめ物語

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

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. theme-change_ecrt

    ワードプレス

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

    ワードプレス

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

    ワードプレス

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

    ワードプレス

    TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー目線レビュー
  5. improvement-flow_ecmg

    マネジメント

    最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くしておく生活改善フロー…
PAGE TOP