tcd-css-customize_ecmg

ワードプレス

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

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

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

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

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

tcd-css-customize_01

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

ボタンのカスタマイズ

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

クリックで拡大

tcd-css-customize_02

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

クリックで拡大

tcd-css-customize_03

フラットボタン-green

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

1つめ注目箇所

class="q_button"

2つめ注目箇所

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"

角丸ボタン-S

class="q_button rounded sz_s"

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

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

角丸ボタン-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含む)の詳細

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

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

囲み枠の色を変える

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

tcd-css-customize_25

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

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

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

囲み枠a(紫)・・??

class="well bt_purple"

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

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

でも、こーゆー時のための「オイシい色付けスタイル」も用意してるんじゃないですか?ちょっと探してみましょう。ボタンのときと同じように「テーマの編集」⇒「スタイルシート (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を例にした「学び方」のご提案でした。

関連記事

スポンサーリンク

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. Twitterのシェア数表示を復活!「widgetoon.js & count.…
  2. メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simpl…
  3. TodoistでToDoリスト。プロジェクトやタスクの階層化で頭の中を楽にする
  4. 子テーマ使用者必見!カスタマイズしたWordPressテーマのアップデート方法と…
  5. WordPressで子テーマを作る際に知っておくべき仕組みと注意点

関連記事

  1. retina-slider_ec

    ワードプレス

    【Retinaディスプレイ対応5】WordPressのスライダーやサムネイル画像を綺麗に表示させる設…

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

  2. screenpresso-capture-ecmg

    ワードプレス

    その瞬間をキャプチャー。Screenpressoでパソコン画面のスクリーンショットを撮る方法

    ピクセル単位でキレイにキャプチャー。前回の記事ではScreenpr…

  3. enlarge-image-ecmg
  4. child-theme_ecmg

    ワードプレス

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

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

  5. insert-card-link_ecmg

    ワードプレス

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

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

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

特集記事

  1. valuable-content-from-image_ec
  2. tcd-mag_ecmg-ps
  3. todoist-extension_ecmg
  4. retina_ecmg
  5. adjust-the-button_ecmg
  6. theme-change_ecrt

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

todoist

人気記事

  1. screenpresso-initial-setting_ec
  2. media-setting_ec
  3. child-theme_ecmg
  4. jpg-gif-png_ecmg
  5. chrome-full-screen-capture-ecmg
  6. compress-jpeg-png-images-ecmg

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

tcd-mag

ピックアップ記事

  1. lightshot_ecmg
  2. chrome-font_ecmg-1
  3. quicktag_ecmg
  4. customized-theme-update_ecmg-1-ps
  5. widgetoon-js-count-jsoon_ecmg
  6. jpg-gif-png_ecmg

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

retina-os-solution

掘り出し記事

  1. mailbox-goodbye-newapp_ec
  2. unroll-me_ec
  3. screenpresso-capture-ecmg
  4. feedly-count-problem_ecmg
  5. retina-os-solution_ecmg
  6. screenpresso-initial-setting_ec

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

gif-animation

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg

とっておきのWordPressテーマ。

tcd-theme-selection

ピックアップ記事

  1. enlarge-image-ecmg
  2. todoist-routine_ecrt
  3. chrome-font_ecmg-1
  4. chrome-full-screen-capture-ecmg
  5. widgetoon-js-count-jsoon_ecmg
  6. annotation-image-ecmg

CATEGORIES

Requ.log | Recommend

WordPressテーマ「MAG(TCD036)」
WordPressテーマ「Bloom(TCD053)」

特集記事

  1. todoist-tips_ecmg
  2. tcd-theme-selection_ecmg-ps
  3. todoist_ec
  4. adjust-the-button_ecmg
  5. tcd-theme-user-review_ecmg
  6. tcd-mag_ecmg-ps

人気記事

  1. child-theme-mechanism_ecmg-ps
  2. child-theme_ecmg
  3. chrome-font_ecmg-1
  4. chrome-full-screen-capture-ecmg
  5. screenpresso-initial-setting_ec
  6. jpg-gif-png_ecmg
  7. todoist-basic_ec-ps

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg
  1. tcd-mag_ecmg-ps

    ワードプレス

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

    ワードプレス

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

    ワードプレス

    目指せ軽量化!今からでも始めるべき、WordPressサイトの表示スピード改善計…
  4. adjust-the-button_ecmg

    ワードプレス

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

    ワードプレス

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