これから勉強をする人、勉強を始めた方、コピペでしかCSSを触ったことがない方のために、本当に知識なしで、自分の力でやる、ブログのCSSカスタム方法をです。コピペからの卒業だ！！
※1 中級者以上の方は見る価値なしです（断言）。
※2 はてなブログを中心に説明していきます。
本当に簡単なので、しっかり読んで実践してください。また、できるだけ難しいカタカナを使わないで、難しいところは無視していきます。
この記事を読むための準備
まずはChromeをダウンロードしましょう。
Googleが提供しているインターネットをするためのブラウザソフトです。このChromeを使って説明していくので、もし使っていない方がいましたら、この機会にダウンロードしましょう。
ダウンロードはこちら：Chrome ブラウザ
インストール方法：Google Chromeのダウンロードとインストール
3つのページを開いてください。
①自分のブログの「デザイン」「カスタムCSS」のページ
②自分のブログのお好きな記事ページ
③そして僕のブログの、この記事
この3つのページを確認しながら説明していきます。
もしもの為のバックアップ
現在もし何かCSSをカスタムしているのなら、念のためバックアップしましょう。パソコンのメモ帳にでも、CSSをまるまるコピペしておけば、後で元に戻せます。
では、始めます。
ChromeのCSS丸見えツールを開こう（デベロッパーツール）
まず皆さんが開いてくれているであろう、自分のブログの記事ページの画面に移動しましょう。
見出しの上で右クリック
「見出し」ありますよね？その見出しの上で「右クリック」してみましょう。
右クリック後に出てきたメニューの『検証』をクリック
すると謎の英語が下から出てきましたね？
この画面の左側が『HTML』右側が『CSS』と呼ばれるものです。
この画面と同じになっていない方は、左側の「Elements」ってボタンを選択してください。右側は「Styles」を選択。
またこの画面はマウスで伸縮できますので、使いやすいサイズに調整してください。
さあこれが良く聞く『デベロッパーツール』です。これでみんなデベロッパーが名乗れます。
さっそく見出しをカスタムしましょう
もうカスタムです。もうできます。レッツゴー。
HTMLの確認
先ほど、見出しの上で右クリックしたので、左側のHTML欄で、難しい英語に挟まれた見出しの文字があるはずです。見つからない場合は、デベロッパーツールを開いたまま、もう一度見出しを右クリック！
僕の場合は＜h3＞に挟まれた言葉が、選択されています。この時、挟まれている英語（タグ）は何でもいいです。
CSSの確認
今度は右側のCSSです。
今現在、見出しを選択している状態で、右側に表示されているCSSは、『このブログで見出しを装飾するために使われているCSSの全て』です。これ重要です。
見出し1つでも沢山のCSSが使われています。分かりやすく言うと、
- ブログ全体の文字色を「赤」に指定。
- その後に、記事内の文字色を「青」に指定
- さらにその後、見出しの文字色だけを「黒」に指定
これは例えですが、見出しに使われているCSSは3つになります。そして1番細かい指定が反映されます。この例を使うと、ブログ全体って1番大きいですよね？次に記事内が大きいので、見出しは1番細かい指定になります。よって「赤や青」の効果は「黒」に打ち消されることになります。
デベロッパーツールでは、効果が発揮されていないCSSは打ち消し線で消されます。（横棒ね）
文字サイズを変更してみよう！
デベロッパーツールの良いところは、いじり放題。ここでどんなことをやっても、実際のブログには反映されません。安心。では、行きましょう。
まず自分の見出しに反映されている文字サイズを探します。
文字サイズを指定してるっぽくない？絶対にサイズですよね。こいつは。
【font-size： 1.5em;】って書いてありますね。でもemとか無視です。とりあえず直感で数を大きくすりゃ、大きくなるって分かりますよね。また、僕の場合は「em」って単位で大きさを指定していますが、人それぞれ色んな単位があります。でも無視。とにかく数を大きく！
※もしも同じものが見つからない人は、h3｛ って書いてあるところの下をクリックすると入力出来るので、 font-size:1em; と入力してみてください。
はい、僕は1.5を3.5にしました。皆さんできました？単位は絶対に付けてくださいね！
大きくなりました！！！はい、非常に簡単です！
文字色の変更
同じく見出しのカスタムです。さて、僕の見出しの色は何色に指定されているでしょう。見てみましょう。
文字色は「color（カラー）」って文字を上から探します。ま、直感で分かりますよね。
もしここに「color」がなかった場合、僕のcolorがあるところの位置をクリックしてみてください。
こうやって好きな場所に追加できるので、colorと#000を試しに入力してみましょう。（デベロッパーツールは好き勝手にCSSを追加することが可能です）
さて、話を戻します。皆さんとは色が違うと思いますが、僕の場合は＃000の左側に、黒い四角のマークがありますよね？これをクリックすると…あとは直感で分かるはず
できたーーー！見出しが赤くなりました！簡単！
ブログにコピペ
今までやったものを、ブログに貼り付けます。
こんな感じで、デベロッパーツールに追加した箇所を全部コピーしちゃいましょう！注意点は、しっかり【h3｛ 】から【 } 】までコピーすること。
では、さっき開いたカスタムCSSの方のページにコピーしましょう。
どうしてそれぞれ別のページで開いたかというと、デベロッパーツールでHTMLやCSSに変更を加えた箇所は、ページの移動や更新をしてしまうと元の状態に戻ってしまうからです。
これで間違いなく本物のブログの方にCSSが反映されているはずです。
応用
今回はCSSを簡単に編集する方法として、文字サイズと文字色を触りましたがデベロッパーツール上では何をしても問題ないので、触りまくってみましょう。
初心者でコードが分からないと思いますので、まずは「数字」。数字なら簡単です、英語を打たないでいいんですから。とにかく数字を弄ってみよう！
また、デベロッパーツールではちゃんとショートカットキーの「control＋Z」で簡単に元に戻せるので、「これは何かな？これを変更するとどうなるの？」ってどんどこ実験してみましょう。
色々なWEBデザインの本やサイトがありますが、本を読みながら、この方法でCSSの勉強をしていくのがとても分かりやすいと思います。「すぐに効果を目で確認できる」ってのが大きいです。
しかし何れにしろ、必ず知識は必要になってくるので、「お、自分でもできそうじゃん」と思ったら勉強しましょう。ちゃんと勉強すれば、基本的なことはすぐに出来るようになります。
まとめ
どうだろう、伝わったかなぁ。でもこのやり方で実行すれば、必ず自分の手でCSSを少しは書くことができるはずです。向き、不向きはあると思いますが、自分で好きなようにデザインするのは面白いので、是非挑戦してみてください。
デベロッパーツールはとても高機能なので楽しいですよ！（仕事ではFirebugも使ってます。）
いやーそれにしても、この僕の先生みたいな口調うざいねー（何様？）。読み返してひいた。
おしまい。
こんな記事も書いてますよん
【保存版】簡単コピペの"続きを読む"ボタンデザイン集
はてなブログの"ソーシャルボタン"のカスタム
おっぱいの語源が「ををうまい」の略っていうから色々考えた。