【実例付】超ド初心者のためのCSS早理解と、最初に知っておくべき注意点

ブログ運営

「CSSとか意味わからんし#」なら大丈夫です。

私も全くわかってないド初心者ですが、コード書き替えてサイドバーや、h2タグ、ブログカードの色変えとか(レクチャーして下さるサイト様の数々を参考に)カスタマイズしてます。

こういった事ができるようになるには、どの程度ウェブスキルがいるかなどはわかりませんが、わたし自身ゲームが大好きでPCでもゲームしていただけで、

ウェブスキル系の勉強もしたことなければ、そもそも親から肉体労働を斡旋されやっていたほど学歴も全くありません。

 

ですから、誰でも!とは言いませんが、実は肝心な点さえ理解したら、それほど難しい事でもなかったりします。

当然それには『Cocoon』という超ありがたい無料テンプレありきなんですが、

とにかく、『Cocoon』を使って、子テーマの準備さえできれば(それもそれほど難しくはないはず)、あとはその子テーマのスタイルシートに、ネットで探してきた改変コードを張り付けるだけで初心者でもあらかたできてしまいます。

ただ、とはいえ、そのまま丸パクリでは紹介して下さってるサイト様にも失礼でもありますし、そもそも自分のサイトの雰囲気に合わせたくなるので、

そうこうしてるうちに、徐々に自分の思う形にできるようになってきます。

まだまだそんな偉そうなこと言えるほど、色々なカスタマイズができるようになってるわけではないのですが、初心者だからこそ感じる最初の時点で理解しておいた方がいい注意点があったので、

本当の初心者向けに、現時点で感じた、CSSカスタマイズの理解方法から、最初に知っておいた方がいい注意点抑えるべきポイントを実例とともに紹介したいと思います。

 

スポンサーリンク

ともあれ『Cocoon』導入

とにかく初心者ならテンプレはCocoonがすごく使いやすいと思います。

歴戦の方々も乗り換えるほどよくできたテンプレのようで、過去のテンプレがどの程度出来るのかは詳しく知りませんが、『Cocoon』では最初から様々な便利機能が用意されており、

目次を付けるとかつけないとか、ページごとにサイドバーを表示するとかしないとか、広告を表示するとかしな(ry

とにかく様々な便利機能も最初から入っているので、実際の所、CSSのカスタマイズをしなくても、最初から普通に綺麗なサイト(ブログ)になるように作られてます。

(わいひらさん本当にありがとうございます)

まだの方は、テーマや子テーマの導入辺りは、わいひらさんの公式ページできちんと説明されてあるので、そちらを参考にされてください。(丸投げ)

 

超初心者のためのCSS早理解

私はウェブ系の勉強などしてないので、ここでいう「CSSの理解」とは「その意味」ではなく、「結局どうしたらいいのか」といった部分になります。

なので用語など色々間違ってる部分や、勝手に解釈した表現もあるかと思いますが、私が実際にどのように理解したかと受け取ってください。

(間違いの指摘など大歓迎です)

CSS書き換えで何ができるのか?

現時点で、すでにコクーンを導入し、子テーマも設定出来たものとして話を進めていきます。

先ほども申しましたように、CSSが何かは知りませんが、とにかく、スタイルシートに一定のコードを書くと、書き換えたコードが正しければ、サイトに反映され、コードに記されたとおりに変化します。

具体的には、h2タグの色が変えたい場合は、

.article h2 {
background: 色コード番号;
}

といった具合で、もっと複雑なコードなどは、グーグル検索で、「h2 css」などと検索したら山のように改変例を示してくれたサイト様が出てきますから、そちらを参考にしてください。

それを繰り返していると、他のコードでも、同様の「background:」などが使われているのに気づいて来るので、応用ができてくるようになると思います。

色は、グーグル検索で「色コード」などと検索したら、色見本とともに「#777」などといった感じでコードが出てきますので、それをコピペで色変えは簡単にできたりします。

超単純に言いのけてしまうと、結局は他の部分でもそういった事です。

 

改変の場所

具体的な改変の場所ですが、ワードプレス内のサイドバーにある「外観 テーマエディター」になります。

このページの『 /*必要ならばここにコードを書く*/ 』以下に拾ってきたコードをコピペすると、そのコードに応じた変更が加えられます。

反映されない場合は、そのコードが間違っているか、CSSコードじゃないんじゃないかと思います。

この段階でわかってくるのは、これを子テーマでなく直接親テーマに書いてしまった場合は、バージョンアップの度に、書き換えたコードが消されるという事です。
ですから、子テーマは少なくとも「ただ日記が書きたいだけの人」以外はほぼ確実に必須だという事です。
更に言うと、様々なサイトで、子テーマの役割や、実際の挙動などをレクチャーして下さってるサイトがありますが、ウェブスキルの勉強をしてるわけでは無ければ、それほど理解しなくてもいいのではないかと思います。

 

当ブログのh1とh2の実例紹介

これももとはどこかのサイト様から拾ってきたコードを元に少しずつ改変して、シンプルですが自分の形にしたものです。

h1タグの解説

.article h1 {
border-bottom: double 8px #0000FF;
}

これは超シンプルに、『下二重線』です。

「border-bottom」が下線という事でしょう。

「double」が2本線を、「8px」はピクセル?なのでサイズでしょうね、

それと最後の「#数字」が色を表していますね。

結果として、「h1タグの下に2本線を青色で引く」というコードになってるという事です。

h2タグの解説

 

.article h2 {
 font-size: 34px;
  margin-top: 44px;
  margin-bottom: 5px;
  padding: 10px;
 background: #0066CC;
	 border-left: 14px solid #0066CC;
	color: #faf0e6;
}

 

ここでやりたかったのは、当初は「上と下に線」を引いていたのですが、結局、今現在は「真っ青に白文字」になってます。

「font-size」などは読んでの通り「文字のサイズ」だという事がわかると思います。

「padding」などはいまいち理解してませんが、細かい部分は調べれば出てくるので割愛して、

「border-left」をわざわざバックグラウンドと同じ色で入れてる理由ですが、

文字を始める位置を少し後ろに下げたくて、多分そういったコードも調べると出てくるのでしょうが、結果同じ状態になればいいので、左に14PX幅で縦線を同じ色で入れる事で、結果論として、「文字が始まる位置が少し後ろに下がってる」という事になってます。

それによる弊害がどの程度かわかりませんが、実際の所文字を後ろに下げるコードを書くのも同じなんじゃないかと、素人ながら感じてます。

CSSカスタマイズ前に先に知っておくべき注意点

コードの書き換えは、間違えてる場合、実際は警告が出るので、間違ってる事がすぐにわかり、それは大した問題ではないのですが、多くの改造をしていると、実際に感じる不都合が出てくるので、簡単な事なんでそれを先に知っておくといいと思います。

こういう感じ

/*●▼◆*/の効果

コードのサンプルを教えて下さるサイトで、コードを拾ってきた場合、『 /* */(『』は要らない)で囲まれた文字が含まれてる事が良くあります。

これはどうやら、”コード内で認識しないコード”のようで、この中にそのコードの効果がよく書かれてあります。

それが毎度書かれてあればいいのですが、サイトによってはかかれていない事もあり(当然タダで頂いているので文句は言えませんが)、あとでそのコードが何を改変したものか分かり難くなってしまいますので、そのコードの前に『 /* */ 』で「何を改変したコードなのか」などを記しておいた方が後々いいです。

例:

といった具合です。

これは簡単なので一々書かなくても忘れないでしょうが、徐々に複雑に改造していくと、そのコードが何を改変していて、どこまでがそのコードの続きなのか?などが一目でわからなくなってしまうので、拾ってきたコードに目的が記されてない場合は、自前で書き足していた方がいいと思います。

 

まとめ

CSSカスタイマイズ例は、先人の方々やウェブスキルに詳しい方々が参考例を出してくださってるので、まず初心者の方は、(こう言うとあれですが、初めのうちはあまり人も来ていないのが現実ですから)

一旦コードを丸パクリして、実サイトでどのように変化してるか確認しながら、自分で適当に改変してみたりして覚えると、案外同じようなコードが出てきて、「そのコードは何をしてるのか、どこが変わるのか」が徐々にわかってくると思います。

その際、『 /* */ 』が無い場合は、自分で『そのコードが何をしてるのか』を書いておくと後々整理がしやすくなると思います。

わたし自身もまだまだですが、現実的にサイト運営するのが目的で、あまり細かい所の勉強に時間を割くのも本筋ではなく、他にやらなくてはいけない事もありますし、勉強自体は意味のないものでもないですが、

現状ウェブデザイナーになりたいというわけではではない場合、最低限やっている中で覚えればいいんじゃないかと思ってます。