ブロガーはHTML・PHPなんか覚える必要ありません。とにかくCSSです。CSSさえ出来れば可能性が無限に広がります。騙されたと思ってCSSを覚えてください。
CSSとは『サイトを飾り付けする小学生用の図工キット』です。定規（長さを変更）・絵の具（色を変更）・ハサミ（要らないものは非表示）・セロハンテープ（コンテンツを装飾）が使えます。構造は単純なので今すぐ覚えてすぐ実践に入る事ができます。
CSSで出来る事
| 文字の色を変える（color） |
| 文字の大きさを変える（font-size） |
| 文字のフォントを変える（font-family） |
| 文字の太さを変える（font-weight） |
| テキストの位置を調整する（text-align） |
| テキストの高さを調整する（line-height） |
| 背景の色を変える（background） |
| コンテンツに枠を付ける（border） |
| コンテンツに影を付ける（box-shadow） |
| コンテンツの幅・高さを調節する（weight・height） |
| コンテンツを非表示にする（display） |
| コンテンツに透明度を与える（opacity） |
| コンテンツの角に丸みをつける（border-radius） |
| コンテンツの内側のスペースを調整する（padding） |
| コンテンツの外側のスペースを調節する（margin） |
| コンテンツの前に命令を与える（before） |
| コンテンツの後に命令を与える（after） |
| 変化の速度を変える（transition） |
| ホバー時（マウスオン時）の変化を与える（hover） |
| 絶対命令（!important） |
僕が主に使ってるCSSはこれぐらいですね。たったこれだけでサイトを好きな様にカスタマイズできるんですからめちゃくちゃ楽ですよ。あとは慣れです。
CSSの構造
上図は当サイトを構成しているCSSの一部分です。ゴチャゴチャして良く分からないかもしれませんが、全て同じルールに従ってコードが書かれています。
| セレクタ｛プロパティ：値；｝ |
【セレクタ】命令を与える場所を指定する
【プロパティ】命令を決める
【値】命令の細かい内容を決める
セレクタ
いきなり『場所を指定しろ』なんて言われても分かりませんよね。僕も半年以上『セレクタで指定する場所はどうやって見つけるんだろう？』と日々悩み続けていましたが、すんごい便利なツールを発見したのです。
その名もデベロッパーツールです。
【F12】で表示させる方法もありますが、これは要素を見つけるのに余計な手間がかかるので、僕はもっぱら【Ctrl+Shift+C】を使ってます。デベロッパーツールが起動している状態で『マウスオンされた要素』の上に住所が出てきます。
精密には『画像・東京・港区・○○商店街・飲食店組合』みたいな感じなので、住所の様に『番地』までドンピシャ指定するのは難しいです。img・#・div・a・li・h2とか色々な表示規則がありまして、これをどうにか組み合わせて場所指定します。
この場所探しがCSSの一番難しい部分なので回数こなして慣れるしかないです。まあ『デベロッパーツール』が無い状態で半年、濃霧のロンドンを歩き続けた僕という人間がココにいますから。このツールが有るだけ200倍マシです。晴天の北海道です。
プロパティ：値；
場所が決まればプロパティ（命令）を与えます。まず最初に覚えて欲しいのは『display:none;』です。セレクタで指定した場所にこの命令を与えるとその場所に有る物が消えるので『セレクタで指定した場所が本当に合っているのか？』を確かめる時に一番てっとり早い方法です。
セレクタ+プロパティ＋値＝命令
入力する場所は【ダッシュボード▼左メニュー▼外観▼カスタマイズ▼追加CSS】僕はすでにごちゃごちゃコードを書いてますが、初期状態では空白です。なんでも実践してみるのが早いので、試しに『サイトのタイトル』を消します。
まずはデベロッパーツールで住所を確認します【Ctrl+Shift+C▼タイトルにマウスを合わせる】表示された単語の中から効きそうな単語を使いますが、これは勘です。慣れてくればコツを掴めてきます。今回は【#inner-header】をセレクタに記述します。
【追加CSSの空白に住所を入力】場所が決まれば次は命令を与えます。
｛｝をつけてプロパティ【display】を与え【：】で区切り値【none】を与え【;】で閉じると。
タイトルが消えたので『セレクタの場所指定は正解でした』というお話。あとは【display:none;】を削除して好きな命令を与えて行けばOKです。
逆に消えなければセレクタで場所を的確に指定できてない可能性がある（場所は合っていても命令が効かない場合がある）ので、クラスを指定し直せば解決する事が有ります。目的の場所が消えるまで１つずつ条件を組み合わせていって、どうにか『その場所』を見つける必要があります。
クラスの指定
次は『記事タイトル』を消してみましょう。
青い部分が『クラス』と呼ばれる集合体の名前です。クラスは『.』で区切るので、このコンテンツには『.entry-title』『.single-title』という２つのクラスが存在します。先ほどのコードにそれぞれ入れてみましょう。
.entry-title{display:none;}
記事タイトルは消えましたが『.entry-title』クラスを持っているどこかの何かも一緒に消えている可能性が有ります。
.single-title{display:none;}
記事タイトルは消えましたが『.single-title』クラスを持ったどこかの何かも一緒に消えている可能性があります。
.entry-title .single-title{display:none;}
両方組み合わせたら何も消えませんでした…いや、僕としてはコレでも消えて『セレクタに２つのクラスを指定する事で、その条件を満たす要素（.entry-title と .single-titleのクラスを合わせ持つ要素）だけが消えました』で終わろうと思ったんですが、なぜか消えませんでした。
まあこういうイレギュラーも多々起こりますし、何が原因でこうなっているかを調べる術もないので、潔く諦めて臨機応変にコツコツと場所を割り出していきます。場所探しはローラー作戦です。１つ１つ潰していくのです。
セレクタで２つ以上のクラスを組み合わせるて指定する時は、クラスとクラスの間に半角スペースを入れてください。
CSSで見出しをデザインする
ワードプレス序盤、CSSが一番生きるのは『見出しのデザイン』です。
もし一年後『見出しのデザインを変えたい』と思った時、１つ１つ記事を回って手作業で修正したくないですよね。CSSを使えば全ての見出しデザインを一括変更できます。
僕がCSSを勉強するキッカケになったのも『見出しを好きに装飾したい』でした。最初のうちは色々な命令を与えまくって、何がどう変化するのかを楽しみながら勉強してみてください。あっという間に上達します。
HTML・PHPは難しすぎて勉強する気も起きませんがCSSは本当に簡単です。失敗しても消すだけで元通り、バグも出ない、ただ慣れるだけで使いこなせるようになる。こんなに楽な言語は無いですよ（そもそもHTML・CSSはプログラム言語ではありませんが）覚えなくちゃ損です。
１つだけ見出しのCSSコード解説しときますね。
CSSコードの解説
| .article h3 { font-size:1.2em; background: blue; color:white; padding: 0em 0.5em; line-height: 2em; border-radius: 10px 10px 10px 10px; border-left: 0px solid #FFFFFF !important; } |
| クラスarticle 見出し３{ フォントの大きさ：1.2em; 背景：青； 文字の色：白； コンテンツ内側の空白：上下0em 左右0.5em； 行の高さ：2em； ４隅の丸み：左上10px 右上10px 右下10px 左下10px； 左の線：0px ソリッド線 色！絶対； ｝ |
見出しのCSSを10個ほど公開している記事もありますので、ほかのCSSコードも見てみたいという方は参考にしてみてください。
コメントを残す