2015-11-27ブログのデザインをカスタマイズをする上で、前回の記事でHTMLとCSSの概要をおさえました。(参照:HTMLとCSSの使い方を簡単に理解する!)今回はいよいよ最初の壁となるCSSのクラスの使い方です。HTMLとCSSを使ってみようと思ったはいいけど、結局良くわからずにやめてしまった、という場合、原因の多くは以下2点。「クラスとかidが出てきて分からなくなった」ネットビジネスではWordPressを使い、外観のデザインは”テーマ”を選ぶこと自ら体を入れることなく、基本は全てでき上がっています。それでも他のブログと外観で差別化をはかるには、ヘッダー画像を変えたり、個別のパーツの色や大きさ、形を変える、といったように、何もないところから全て作る、というのではなく「部分修正が基本」。CSSの全てを理解し習得する必要はなく、修正したい箇所に対して必要なもののみを使えるようになれば良い、ということがポイントです。(極端に言えばどこかに示されているサンプルをコピペして使えるようにする術だけを覚えれば良い)ここでは一歩進んでCSSの最初の難関、クラスについて理解を深めます。あなたのデザインスキルを上げるため、ここで更に武器に磨きをかけ、成功への足取りを楽しくします。簡単にポイントを解説をしていますので御覧ください。詳しくは以下を御覧ください。HTMLとCSSの復習まずは少しだけHTMLとCSSの復習です。black;}さてこの内容に対して、ちょっと待った!イマイチ理解が...と言う場合には、以下の記事をもう一度見て復習しておきましょう。ブログデザインのカスタマイズ!HTMLとCSSの使い方を簡単に理解する!誰もがつまづくクラスぱっと眺めればとてもシンプルなHTMLとCSSですが、CSSには”クラス”と”id”というものがあります。多くの人が最初につまずく1つがこの”クラス”と(次回解説の)”id”ですが、ここが理解できれば怖いものはありません。CSSは上で見たように、HTMLのタグに対して直接指定できます。これだと不便な場合も出てきます。指定された箇所全て「文字色が緑で太字」に変化します。同じタグ(h2)が使われてたりして、実際表示してみるとゲゲ!となることも少なくありません。いう場合があるからこそ活躍するのが「id」や「クラス」です。クラスとは(今回の記事では基本となるクラスの解説です)クラスとは、色の指定や太字など、デザインを指定する内容が複数入ったセットメニューみたいなもの。セットメニュー1は、太字と文字色は黒セットメニュー2は、文字色は黄色で、下線付きセットメニュー3は、周りを黒色の線で囲むこれらのセットメニュー1~3に対して、英数字で固有の名前を付けたものがクラスです。box01※)ここでは意味なく適当に名前を付けてます他に使ってない名前なら基本はOK.自分にとってその中身がよく分かる名前にします。(具体例は以下参照)クラスの使い方こうしてクラス(セットメニュー)を作り、それをHTMLのタグに適用する、とうい使い方になります。実際のクラスの書き方は、最初に「.」(ピリオド)を付けて以下の形。いうクラスは、太字で文字色は黒、という内容になります。書き、xxxの部分に作成したクラス名を記述します。これを先ほどのh2に適用する場合では以下の様な形です。指定する、という使い方ができます。感覚の鋭いあなたなら「お、ということは...」とわかると思いますが、ここで作成したクラス「title21」などはどこにでも使えます。<p>これは記事本文です。内容は...</p>といった最もよく見かける「p」タグ(paragraph:段落や文章のまとまりを意味するタグ)ですが、ここに太字で文字色は黒、と上で定義でしたクラス「title21」」を同じように適用したいとします。この場合、正に上でしたように以下のように指定すれば良いんですね。class=”title21′′>これは記事本文です。内容は...</p>このように使い回しが出来てとても便利なクラス。それでも異なるHTMLのタグに対して同じCSSのクラスを使うと、結果としてどこでどのように使っているか分からなくなり、後で修正を入れる時に大変なことになったりします。σ^-^;))(タイトルだけ文字色を黒から紫に変えるつもりが、記事の本文まで全て紫色に変わってしまい大パニック、みたいな感じですね)特定のタグへ限定する指定法ということから、特定のHTMLタグに限定して有効とするクラスの書き方も勿論あります。black;}このように、クラス名の前にHTMLのタグを書けば、この「title21」はh2のタグだけに有効なクラス、となります。class=”title21′′>これは記事本文です。内容は...</p>では、title21の指定は無効になる、ということです。(間違って使われることはない。難関の1つとなるCSSのクラスについて見てきました。class=”title21′′>明日に向かって売れ!</h2>CSSのクラスの形式、タグへの指定の仕方は分かりましたか?実際のCSSはどういう指定の仕方をすると、そうなるんだろう、と先ばかりが気になりますが、まずはこの形を理解するようにして下さい。極端に言えば、形さえ理解すれば、必要な所を抜き取ってコピペすればデザインカスタマイズはできるのです。あせらず1つづつ自分のものにしていって下さいね。date*日本語が含まれない投稿は無視されますのでご注意ください。JIN】コンサルタント・コピーライター・ウェブデザイナー、プランナーとして活動中。本格的に取り組みだした2年目2016年には年収1000万円突破、2017年5月に自動化で月収170万突破。多忙な時期を過ごすが、自由に憧れ退職、海外移住し、ネットビジネスの道へ入る。現在は海外にいながら自分らしく生きるとは何かを追求するとともに、主に日本国内、またその他海外に住むネットで収入を得たい方に対し、いかにネットビジネスを成功に導き、時間や場所、不要な人間関係にとらわれず自由を得る人、会社、社会に依存しないで自由に稼ぐ人を増やすことに全力を注いでいます。!!初心者だった頃「こういったものが欲しい!」と心に描いていた想いを形に制作した、ネットビジネス学習の決定版!知識ゼロ、これから始める初心者の方、年齢、性別問わず、初歩の初歩からどなたにも楽しみながら学べるコンテンツ。月収10万、そしてさらにそれ以上を目指せる知識を学べます。Cruise』を完全無料で手に入れる!!メルマガのご案内に説明動画があります。運営者情報プライバシーポリシーお問い合わせ受講者なんと2500名突破!正しい努力は必ず報われる。稼げないのは努力の仕方が違うから。評判のメールマガジンで、一人でも生きていける力、稼げる力を身に付ける。