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テーマのおすすめメンバーセレクション

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. 知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケ…
  2. サラリと終える開発者登録。FacebookのApp ID(アプリID)とApp …
  3. もっとストレスフリーに・・Todoistの連携ワザで高速タスク登録!
  4. 忘れたくないユーザビリティー。収益化と両立しよう。TCDテーマでスマホとパソコン…
  5. アレ?Chromeの表示文字、汚なくなった!? キレイなフォントを1分で取り戻そ…

関連記事

  1. favicon-generator_ec
  2. facebook-page-plugin_ecmg
  3. tcd-theme-selection_ecmg
  4. backup-all-in-auto_ec

    ワードプレス

    WordPressサイトを丸ごとバックアップ!「BackWPup」で丸投げタイマー設定

    一度設定したら、後はおまかせ!せっかく作った自分のWEBサイトが、…

  5. tcd-theme-user-review_ecmg

    ワードプレス

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

    TCDテーマの、実際の使用感。幅広いユーザーニーズに応える『TCD…

  6. facebook-fast-display_ecmg

    ワードプレス

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

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

スポンサーリンク
高速・安定レンタルサーバー
高速・高機能・高安定レンタルサーバー【エックスサーバー】 高速・高機能・高安定レンタルサーバー【エックスサーバー】

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

レク.サウンドラボ

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

特集記事

  1. improvement-flow_ecmg
  2. todoist-extension_ecmg
  3. todoist_ec
  4. business-books_ecmg
  5. original-share-button_ecmg
  6. theme-change_ecrt
  7. extension-tools-for-bloggers_ec
  8. adjust-the-button_ecmg
  9. retina_ecmg
  10. valuable-content-from-image_ec

ピックアップ記事

  1. todoist-constitution_ec
  2. dash_ecmg
  3. tcd-theme-widget_ecmg
  4. blog-contents_ecrt
  5. todoist-advanced_ec
  6. facebook-page-plugin_ecmg
  7. sns-count-cache_ecmg
  8. reset-button_ecrt
  9. chrome-font_ecmg
  10. tcd-theme-options_ecmg

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

business-books

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

todoist

おすすめ記事

  1. 「Mailboxの代わりは…?」代替メールアプリ…
  2. 成長に欠かせない大切な秘訣。真面目な人ほど陥りやすい、…
  3. 不要なメール通知にうんざり!購読・迷惑メールの解除をまとめて…
  4. Screenpresso(スクリーンプレッソ)を使うなら、や…
  5. 【Retinaディスプレイ対応1】Macで綺麗に。Windo…

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

retina-os-solution

ブログクオリティー底上げ10ツール

extools-for-bloggers

最近の記事

  1. 「私の名前はページプラグイン。」Facebookページのいい…
  2. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ペー…
  3. feedlyのフォロワー数が表示されないっ!?SNS Cou…
  4. カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせ…
  5. 【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザ…

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

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

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

Requ.log | おすすめ物語

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

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

Requ.log | STORY

  1. 「あの時、気づけなかった。」苦しい時に思い出して奮い立つ、人…
  2. 心が折れそうに辛いとき。一歩前へ踏み出し紡がれた、今へ続くス…
  3. 大切な人の最後の1年
  1. display-speed_ec

    ワードプレス

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

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
  3. improvement-flow_ecmg

    マネジメント

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

    マーケティング

    カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせた作り方と簡単カスタ…
  5. adjust-the-button_ecmg

    ワードプレス

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