2015-11-28ブログのデザインをカスタマイズをする上で、前回の記事では1つの課題となるCSSのクラスについて使い方をおさえました。CSSを理解して利用するには避けては通れないとても大切な要素です。多くの人がこの辺りで分からなくなり挫折していきますが、難しく考える必要はありません。0から全てを築くわけではなく、WordPressで利用しているテーマに対してカスタマイズをする、といった部分修正が基本であり、そのために必要なことだけを理解していけば良いからです。形式や指定法を学び、CSSの骨格を習得します。簡単にポイントを解説をしていますので御覧ください。詳しくは以下を御覧ください。CSSのクラスの復習まずは少しだけCSSのクラスの復習です。色の指定や太字など、デザインを指定する内容が複数入ったセットメニューみたいなもの。class=”title21′′>明日に向かって売れ!</h2>いかがですか?今ひとつ理解に不安がある場合には、以下の記事をもう一度見ておきましょう。いや、難しいことありませんのでリラックスして読み進めてください。クラスとidの違いまずはクラスとidの違いについてですが、ここは混乱するところ。基本はどちらも指定するために使う識別子、というところですが、大きな違いは以下のようになります。classは、個別の指定に使われるidは、特定の範囲やグループを指定するために使われる簡単すぎてイメージが湧きません!。・゚・(ノД`)・゚・。ある領域やグループを表すのに使うもの。そのため、ページ内に1度しか利用できない、という制限もあります。ページ内に一度しか使えない、というところが特徴、ということですね。使い、そうでない単に識別子としてどこでも使う場合にはクラス、となります。(良くわからないから全てクラスを使えばいいや、という人も多いですが、一応理解はしておきましょう)プラグインでの活用法その性質上、WordPressではプラグインでよくidが活用されてます。表示の仕方を指定する、という使い方です。aタグとかpタグなど、明らかに他で使用している一般的なHTMLタグに対してCSSでデザインを指定しても、他の領域の表示に影響を及ぼさず、プラグインが独自に表示する領域内のみに効果のある表示ができる、というわけです。形式は「#」を先頭に付け、続けて名前、といった単純なもので、以下のとおりです。名称をつけたりします。(名称は分かりやすく、他に使用されていなければOK)idを使ったCSSの適用は、以下の形式になります。(図の例では”明日は明日の何故が付く”)は、文字色が黒で、文字の大きさは24pxにする、という指定になります。idの具体例よくある具体的としては、リンクで使用する「aタグ」が分かりやすいです。aタグは「クリックすると別のページが開く」といったような「リンクを指定するタグ」です。メニューは勿論、記事のタイトル一覧などにはこのタグが使用されています。リンク色を青色に指定という形になります。具体的には、以下の様な指定ですね。)が来て、HTMLタグ、そしてCSSの指定という形です。※)idは特定の領域、グループを示すといった性質上、同じページ内に複数同じ名前のidがあってはいけないルールです。自体にCSSを設定して表示を指定する、ということも勿論出来ます。書いた所、idの場合では、id=”xxx”となります。定義した場合のタグへの適用は以下のようになります。クラスの違いやその使い方、タグへの指定の仕方がおおよそ分かりました。補足として、これらの複合した指定方法を見ておきます。※)以下が全てではありませんが、慣れておけば他のサイトのCSSも構造がわかるようになり、必要な箇所の抜き出しやコピペに役立ちます。1)複数同時指定CSSでは、複数同時に指定できます。同じ内容として定義2)異なる部分だけ改めて定義するという形にもできます。同じ内容を定義するには、コンマ(,)で区切って並べればOKですが、良く分からないので具体例を見てみましょう。黄色(違いは背景色のみ)個別に指定すれば以下のようになります。同じ内容として定義して、その後に異なる部分だけ定義すると、以下のようになります。*/}CSSでは後に出てくるものが優先される(後に出てくる内容が上書きされる)というルールが有ります。このため上の例では、text02は最初は背景色は白で定義され、その下で黄色と再定義されているとういうことから、結果的にtext02の背景色は黄色となります。同じ内容を定義するには、コンマ(,)で区切って並べます。ここでは2つの例ですが、3つ、4つでも同じです。...)タグも勿論同じように定義できます。*/}みたいな感じですね。クラス同じクラス名でも場所が変われば内容を変えたい、という時にこの組み合わせとなります。*/}という形で定義することになりますね。タグこの組み合わせは記事の中にも出てきてますが、場所によって同じタグでもCSSの内容を変えたい!といった場合に使う組み合わせです。*/}という形で定義することになります。クラスとタグ場所、クラス、タグを明確にして定義する場合の組み合わせです。*/}まずは中身より形に慣れて行って下さい。他のブログをCSSを見たり、そこから必要な部分をコピーしたりする時に必ず役立ちます。今回の復習idとクラスの違いidは特定の領域やグループを指定するために使われる。そのため1つのidは、同一ページ内では一度のみ利用可。逆にクラスは何度でも利用できる。概要をざっと見てきました。本当は更に深く広く色々な要素や指定の仕方などがありますが、ゼロから全てを学ぶのは非常に時間がかかりますし、全てを学ぶ必要性もありません。(いや、全て知っているに越したことはないですけど、時間と効果を天秤にかけてどうするかというお話しです)ベースにあるのはWordPressのテーマのデザイン。あとはそれを元に、どうカスタマイズして個性を出していくかを考え、その中で必要に応じて新しい知識とテクニックを取り入れつつカスタマイズの実践をしていくのが一番です。読者もあなた自身も気に入る個性あるブログデザインにして行くこと。それがグーグルからのペナルティーから離れ、読者の滞在時間を延ばし、息の長いブログの構築につながります。date*日本語が含まれない投稿は無視されますのでご注意ください。JIN】コンサルタント・コピーライター・ウェブデザイナー、プランナーとして活動中。本格的に取り組みだした2年目2016年には年収1000万円突破、2017年5月に自動化で月収170万突破。多忙な時期を過ごすが、自由に憧れ退職、海外移住し、ネットビジネスの道へ入る。現在は海外にいながら自分らしく生きるとは何かを追求するとともに、主に日本国内、またその他海外に住むネットで収入を得たい方に対し、いかにネットビジネスを成功に導き、時間や場所、不要な人間関係にとらわれず自由を得る人、会社、社会に依存しないで自由に稼ぐ人を増やすことに全力を注いでいます。!!初心者だった頃「こういったものが欲しい!」と心に描いていた想いを形に制作した、ネットビジネス学習の決定版!知識ゼロ、これから始める初心者の方、年齢、性別問わず、初歩の初歩からどなたにも楽しみながら学べるコンテンツ。月収10万、そしてさらにそれ以上を目指せる知識を学べます。Cruise』を完全無料で手に入れる!!メルマガのご案内に説明動画があります。運営者情報プライバシーポリシーお問い合わせ受講者なんと2500名突破!正しい努力は必ず報われる。稼げないのは努力の仕方が違うから。評判のメールマガジンで、一人でも生きていける力、稼げる力を身に付ける。