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

IT女子、がんばる。

仙台住み24才webデザイナーが、人見知りをなおすために頑張る雑記ブログ。

【初心者向け】細かいところを調整したい!はてなのデザインカスタマイズのコツ

f:id:xxxdrama:20160926070915j:plain
こんにちは。おはるです。
以前webデザイン初心者向けの記事を書きましたが、そのときはこれから勉強する前提の記事だったので今回はもう少しすぐに使える!な内容を書いてみようかなと思います。

(※以前の記事はこちら)
itjoshi.hatenablog.jp

さて今回の内容ですが、
デザインテンプレートを入れてみたけど、ここの文字サイズだけ変更したい!コンテンツ幅を調整したい!でもどこを変えたらいいのか分からない…
こんな時に使えるかもしれないコツを紹介しようと思います!

※今回ははてなブログでカスタマイズをする前提としています。

基本的な考え方

テンプレートで設定しているCSSは外部ファイル化されている

多くのデザインテンプレートでは、CSSは外部ファイルで読み込まれていると思います。

f:id:xxxdrama:20160925225344j:plain
デザイン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ステップでやっていきます。

  1. 変更する箇所を探す
  2. その部分をデザインCSSに貼り付けてブログに反映させる

デベロッパーツールで変更したい箇所を探す

前の記事でも超便利だよ!!!って紹介していたこのツール。使います。
というか、デベロッパーツールで変更する箇所を探したらデザインの調整もここでやってあとはデザインCSSに貼り付けするだけ!ぽいっ で終わります。(笑)

f:id:xxxdrama:20160925225444j:plain
まずデベロッパーツールを表示させます。
表示のさせかたも複数ありますが、以下のいずれかでできます。

  • ページ上で右クリック → 検証
  • ページ上でctrl+shift+I(Macの場合)
  • ページ上でF12(Windowsの場合)

f:id:xxxdrama:20160925230058j:plain
では実際に変更したい箇所を探してみたいと思います。ここではブログタイトルの文字を大きくします。


デベロッパーツールを表示させる

f:id:xxxdrama:20160925231503j:plain
変更したい箇所を選択します。
キャプチャの黄色部分を押すとページ上の要素をつかめるようになります。選択できる部分はマウスをオンすると青色のエリアが出てくるので、自分が変えたい箇所をクリック。

するとデベロッパーツールのhtml部分に、今マウスで選択した要素がグレーでハイライトされます。


CSSを確認

f:id:xxxdrama:20160925231655j:plain
今回変更したいのはデザインの部分なので、ここに適用されているCSSを確認します。

html部分の右側or下側に「Styles」というタブがありませんか?※右か下かは表示の設定で異なります。ここが今選択した要素に適用されているCSSです!

ただし、今の選択だとh1の中のaタグが選択されているので、CSSを見ると文字の大きさを設定しているプロパティはありません。こういう場合はいっこ上の塊を選択してみます。


該当の場所ではなかったら1つ上を選択してみる

f:id:xxxdrama:20160925231920j:plain
今回はh1なので、htmlの該当部分をクリックします。
するとCSSで「#title」のクラスに設定されているプロパティの中に「font-size」がありました!変更したいのはここですね。


もう一度CSSを確認

f:id:xxxdrama:20160925232236j:plain
デベロッパーツールではhtml・CSSを変更すると開いているページが一緒に変更するので、ここで数値を入れてみてどのくらいの大きさにするのか決めます。
※ページをリロードしたら設定変更したものが元に戻ってしまうので注意!

どの数値に変更するか決まったら、今度はデザインCSSにコピペするだけ!簡単!!!


デザインCSSに貼り付ける

f:id:xxxdrama:20160925232528j:plain
ではデザインCSSに今変更したものを持っていきましょう。CSSのプロパティとセレクタごとコピペします。

※ちなみに、CSSのプロパティとセレクタと読んでいるのはここの部分です。
f:id:xxxdrama:20160925235857j:plain

コピーしたものを貼付け

f:id:xxxdrama:20160925232703j:plain
デザインCSSにぺいっと!します! で、あとは保存するだけ。
これで自分のブログを見てみると変わっているはずです!!

複数のセレクタを設定している部分はコピペに注意!

CSSを書くときに、複数のセレクタを一緒にまとめて設定ができます。

f:id:xxxdrama:20160925233023j:plain
こういう場合、複数のセレクタを一気にコピペしてしまうと意図しない箇所が変わってしまうので、自分が変えたい部分のセレクタだけをコピペするようにしましょう。

まとめ

今回はデザインを調整する時にこうやったら自分でできるよ!というやりかたを紹介しました。
見出しのデザインやボタンデザインのパーツが紹介されているブログはたくさんありますが、文字サイズや行間・コンテンツ幅を変えたいときにどうしたらいいのかと感じる人もいるのでは?と思い書いてみました。

結構長くなってしまったので端折ってしまいましたが、別の機会によく使うCSSプロパティなど紹介できたらなと思います!

それでは!