こんにちは。おはるです。
以前webデザイン初心者向けの記事を書きましたが、そのときはこれから勉強する前提の記事だったので今回はもう少しすぐに使える！な内容を書いてみようかなと思います。
（※以前の記事はこちら）
itjoshi.hatenablog.jp
さて今回の内容ですが、
デザインテンプレートを入れてみたけど、ここの文字サイズだけ変更したい！コンテンツ幅を調整したい！でもどこを変えたらいいのか分からない…
こんな時に使えるかもしれないコツを紹介しようと思います！
※今回ははてなブログでカスタマイズをする前提としています。
基本的な考え方
テンプレートで設定しているCSSは外部ファイル化されている
多くのデザインテンプレートでは、CSSは外部ファイルで読み込まれていると思います。
デザインCSS内に下記のような記述があれば、CSS自体を外部ファイルとして読み込んでいます。
@import url("http://hatenablog.com/theme/6653586347149180725.css");
これはテンプレートを作ったときに設定したCSSファイルは別の場所においてるから、その別なところのURLを読み込んでCSSを適用させてるよ！ってことです。
変えたい部分を上書きするイメージ
外部ファイルとして読み込まれているCSSはこちらでは変更できません。なので、ここの設定を変更したい！というときはデザインCSSで自分で記述する必要があります。
例えば、外部ファイルCSSでこのような設定だったら、
h1{ font-size: 40px; }
デザインCSSで同じセレクタを設定して数値を変更すれば自分のブログに反映されます。
h1{ font-size: 60px; }
同じセレクタの設定を重複して書いても大丈夫なの？と思うかもしれませんが、CSSはあとから書いたものを優先する仕様になっているので大丈夫です！
もしどうしても反映されなかったら、末尾に「!important」をつける奥の手もあります。でもこれやっちゃうと、他で影響出る場合があるのであまりおすすめはしません…。
もしも外部ファイル化されていない時は
すべてのデザインテンプレを見たわけではないのとテンプレの制作方法についてよく分かってないので、もしかしたら外部ファイル化しておらず直接記述しているものもあるかもしれません。
（この辺り無知ですみません…。）
その時は、変更したい部分の設定を変更するだけでOKです。ただ、そのまま変更してしまうとテンプレの元の状態が分からなくなってしまうので、どこかテキストファイルに内容をコピっておいておくなど必ずバックアップを取りましょう。
実際に自分でやってみる！
基本的には、この2ステップでやっていきます。
- 変更する箇所を探す
- その部分をデザインCSSに貼り付けてブログに反映させる
デベロッパーツールで変更したい箇所を探す
前の記事でも超便利だよ！！！って紹介していたこのツール。使います。
というか、デベロッパーツールで変更する箇所を探したらデザインの調整もここでやってあとはデザインCSSに貼り付けするだけ！ぽいっ で終わります。（笑）
まずデベロッパーツールを表示させます。
表示のさせかたも複数ありますが、以下のいずれかでできます。
）
では実際に変更したい箇所を探してみたいと思います。ここではブログタイトルの文字を大きくします。
デベロッパーツールを表示させる
変更したい箇所を選択します。
キャプチャの黄色部分を押すとページ上の要素をつかめるようになります。選択できる部分はマウスをオンすると青色のエリアが出てくるので、自分が変えたい箇所をクリック。
するとデベロッパーツールのhtml部分に、今マウスで選択した要素がグレーでハイライトされます。
CSSを確認
今回変更したいのはデザインの部分なので、ここに適用されているCSSを確認します。
html部分の右側or下側に「Styles」というタブがありませんか？※右か下かは表示の設定で異なります。ここが今選択した要素に適用されているCSSです！
ただし、今の選択だとh1の中のaタグが選択されているので、CSSを見ると文字の大きさを設定しているプロパティはありません。こういう場合はいっこ上の塊を選択してみます。
該当の場所ではなかったら１つ上を選択してみる
今回はh1なので、htmlの該当部分をクリックします。
するとCSSで「#title」のクラスに設定されているプロパティの中に「font-size」がありました！変更したいのはここですね。
複数のセレクタを設定している部分はコピペに注意！
CSSを書くときに、複数のセレクタを一緒にまとめて設定ができます。
こういう場合、複数のセレクタを一気にコピペしてしまうと意図しない箇所が変わってしまうので、自分が変えたい部分のセレクタだけをコピペするようにしましょう。
まとめ
今回はデザインを調整する時にこうやったら自分でできるよ！というやりかたを紹介しました。
見出しのデザインやボタンデザインのパーツが紹介されているブログはたくさんありますが、文字サイズや行間・コンテンツ幅を変えたいときにどうしたらいいのかと感じる人もいるのでは？と思い書いてみました。
結構長くなってしまったので端折ってしまいましたが、別の機会によく使うCSSプロパティなど紹介できたらなと思います！
それでは！