読者です 読者をやめる 読者になる 読者になる

知識いらない!誰でも出来る初めてのCSSカスタム方法【はてなブログカスタムVol.12】

はてなブログカスタム

f:id:george-gogo:20160202221044p:plain

これから勉強をする人、勉強を始めた方、コピペでしかCSSを触ったことがない方のために、本当に知識なしで、自分の力でやる、ブログのCSSカスタム方法をです。コピペからの卒業だ!!

※1 中級者以上の方は見る価値なしです(断言)。
※2 はてなブログを中心に説明していきます。

本当に簡単なので、しっかり読んで実践してください。また、できるだけ難しいカタカナを使わないで、難しいところは無視していきます。

この記事を読むための準備

まずはChromeをダウンロードしましょう。

Googleが提供しているインターネットをするためのブラウザソフトです。このChromeを使って説明していくので、もし使っていない方がいましたら、この機会にダウンロードしましょう。

ダウンロードはこちら:Chrome ブラウザ

インストール方法:Google Chromeのダウンロードとインストール 

3つのページを開いてください。

①自分のブログの「デザイン」「カスタムCSS」のページ

②自分のブログのお好きな記事ページ

③そして僕のブログの、この記事

この3つのページを確認しながら説明していきます。

もしもの為のバックアップ

現在もし何かCSSをカスタムしているのなら、念のためバックアップしましょう。パソコンのメモ帳にでも、CSSをまるまるコピペしておけば、後で元に戻せます。

 

では、始めます。

ChromeのCSS丸見えツールを開こう(デベロッパーツール)

まず皆さんが開いてくれているであろう、自分のブログの記事ページの画面に移動しましょう。

見出しの上で右クリック

「見出し」ありますよね?その見出しの上で「右クリック」してみましょう。

f:id:george-gogo:20160201225732p:plain

右クリック後に出てきたメニューの『検証』をクリック

f:id:george-gogo:20160201225930p:plain

すると謎の英語が下から出てきましたね?

f:id:george-gogo:20160201230426p:plain

この画面の左側が『HTML』右側が『CSS』と呼ばれるものです。

この画面と同じになっていない方は、左側の「Elements」ってボタンを選択してください。右側は「Styles」を選択。

またこの画面はマウスで伸縮できますので、使いやすいサイズに調整してください。

さあこれが良く聞く『デベロッパーツール』です。これでみんなデベロッパーが名乗れます。

さっそく見出しをカスタムしましょう

もうカスタムです。もうできます。レッツゴー。

HTMLの確認

先ほど、見出しの上で右クリックしたので、左側のHTML欄で、難しい英語に挟まれた見出しの文字があるはずです。見つからない場合は、デベロッパーツールを開いたまま、もう一度見出しを右クリック!

f:id:george-gogo:20160201231648p:plain

僕の場合は<h3>に挟まれた言葉が、選択されています。この時、挟まれている英語(タグ)は何でもいいです。

CSSの確認

今度は右側のCSSです。

f:id:george-gogo:20160201232051p:plain

今現在、見出しを選択している状態で、右側に表示されているCSSは、『このブログで見出しを装飾するために使われているCSSの全て』です。これ重要です。

見出し1つでも沢山のCSSが使われています。分かりやすく言うと、

  1. ブログ全体の文字色を「」に指定。
  2. その後に、記事内の文字色を「」に指定
  3. さらにその後、見出しの文字色だけを「」に指定

これは例えですが、見出しに使われているCSSは3つになります。そして1番細かい指定が反映されます。この例を使うと、ブログ全体って1番大きいですよね?次に記事内が大きいので、見出しは1番細かい指定になります。よって「」の効果は「黒」に打ち消されることになります。

デベロッパーツールでは、効果が発揮されていないCSSは打ち消し線で消されます。(横棒ね)

文字サイズを変更してみよう!

デベロッパーツールの良いところは、いじり放題。ここでどんなことをやっても、実際のブログには反映されません。安心。では、行きましょう。

まず自分の見出しに反映されている文字サイズを探します。

f:id:george-gogo:20160201234508p:plain

文字サイズを指定してるっぽくない?絶対にサイズですよね。こいつは。

【font-size: 1.5em;】って書いてありますね。でもemとか無視です。とりあえず直感で数を大きくすりゃ、大きくなるって分かりますよね。また、僕の場合は「em」って単位で大きさを指定していますが、人それぞれ色んな単位があります。でも無視。とにかく数を大きく!

※もしも同じものが見つからない人は、h3{ って書いてあるところの下をクリックすると入力出来るので、 font-size:1em; と入力してみてください。

f:id:george-gogo:20160201235241p:plain

はい、僕は1.5を3.5にしました。皆さんできました?単位は絶対に付けてくださいね!

f:id:george-gogo:20160201235755p:plain

大きくなりました!!!はい、非常に簡単です!

文字色の変更

 同じく見出しのカスタムです。さて、僕の見出しの色は何色に指定されているでしょう。見てみましょう。

文字色は「color(カラー)」って文字を上から探します。ま、直感で分かりますよね。

f:id:george-gogo:20160202010432p:plain

もしここに「color」がなかった場合、僕のcolorがあるところの位置をクリックしてみてください。

f:id:george-gogo:20160202011826p:plain

こうやって好きな場所に追加できるので、colorと#000を試しに入力してみましょう。(デベロッパーツールは好き勝手にCSSを追加することが可能です)

さて、話を戻します。皆さんとは色が違うと思いますが、僕の場合は#000の左側に、黒い四角のマークがありますよね?これをクリックすると…あとは直感で分かるはず

f:id:george-gogo:20160202012154p:plain

できたーーー!見出しが赤くなりました!簡単!

ブログにコピペ

 今までやったものを、ブログに貼り付けます。

f:id:george-gogo:20160202211744p:plain

こんな感じで、デベロッパーツールに追加した箇所を全部コピーしちゃいましょう!注意点は、しっかり【h3{ 】から【 } 】までコピーすること。

では、さっき開いたカスタムCSSの方のページにコピーしましょう。

どうしてそれぞれ別のページで開いたかというと、デベロッパーツールでHTMLやCSSに変更を加えた箇所は、ページの移動や更新をしてしまうと元の状態に戻ってしまうからです。

これで間違いなく本物のブログの方にCSSが反映されているはずです。

応用

今回はCSSを簡単に編集する方法として、文字サイズと文字色を触りましたがデベロッパーツール上では何をしても問題ないので、触りまくってみましょう。

初心者でコードが分からないと思いますので、まずは「数字」。数字なら簡単です、英語を打たないでいいんですから。とにかく数字を弄ってみよう!

また、デベロッパーツールではちゃんとショートカットキーの「control+Z」で簡単に元に戻せるので、「これは何かな?これを変更するとどうなるの?」ってどんどこ実験してみましょう。

色々なWEBデザインの本やサイトがありますが、本を読みながら、この方法でCSSの勉強をしていくのがとても分かりやすいと思います。「すぐに効果を目で確認できる」ってのが大きいです。

しかし何れにしろ、必ず知識は必要になってくるので、「お、自分でもできそうじゃん」と思ったら勉強しましょう。ちゃんと勉強すれば、基本的なことはすぐに出来るようになります。

数字で動かせるCSSたち(簡単なやつだけね)

  • color :文字色
  • background :背景関連
  • border :線関連(色、太さ、線の種類など)
  • border-radius :線の丸み
  • width :範囲の横幅
  • height :範囲の縦幅
  • margin :外側の隙間の広さ
  • padding :内側の隙間の広さ
  • 〇〇-shadow :影(◯には色々な英語が入るよ!シャドウが付いたら何かの影!

こんなもんかな。注意点としては、数字には必ず単位を付けるってこと。デベロッパーツールでもともと付いていた単位を変えなければ、何にも怖くない!

そして数字を動かしても効果が出ないこともあるでしょう。そんな時は、諦めよう(キッパリ)!諦めきれない人は勉強かコピペを探しましょう。「諦めきれない!」って思える人は、WEBデザイン向いてます(断言)。少し覚えると楽しいですよー。

まとめ

どうだろう、伝わったかなぁ。でもこのやり方で実行すれば、必ず自分の手でCSSを少しは書くことができるはずです。向き、不向きはあると思いますが、自分で好きなようにデザインするのは面白いので、是非挑戦してみてください。

デベロッパーツールはとても高機能なので楽しいですよ!(仕事ではFirebugも使ってます。)

いやーそれにしても、この僕の先生みたいな口調うざいねー(何様?)。読み返してひいた。

おしまい。

こんな記事も書いてますよん

【保存版】簡単コピペの"続きを読む"ボタンデザイン集
はてなブログの"ソーシャルボタン"のカスタム
おっぱいの語源が「ををうまい」の略っていうから色々考えた。