ブログのカスタマイズ。 一度はまると、そればかりやってしまって、気が付くと記事も書かずにカスタマイズばかりやってしまう。

ブロガーだったら一度はハマる罠ですね（笑）

今回は「CSSの知識はYahoo！geocities時代で止まっている」レベルのおっさんが、勢いだけではてなブログのカスタマイズをする時に、行っている方法を公開します。

CSSを眺める

まずはテーマで使われてるCSSを眺めます。
どうやってみるかと言うと

はてなブログのデザイン設定の中のデザイン設定の一番最初の部分。
ここに「テーマで使われているCSSのアドレス」が記載されています。**

このアドレスをコピーして、ブラウザのアドレスバーに貼り付けます

数多くの呪文が書かれたページが開きます（笑）

もちろん何が書いてあるのかさっぱりわかりません！！！

ページ内検索で目的のものを探す

延々と続くアルファベットと数字の羅列。
解読しようなんて思ってはいけません。

目的のものだけど書き換えてオリジナリティを出していく
それが今回の目的です。

CTRL+Fを押すと「ページ内検索」ができますので、たとえば中見出し（h3タグ）をカスタマイズしたいと過程して、「h3」で検索して見ましょう。

6箇所あるらしいです！！

順番に見ていきますが4個目はでは「雰囲気的に違う」感じです。

そして5個目。

なんかそれっぽいのが見つかりました。

なんとなく二項目ありますが、たぶんこのテーマの見出しは「吹き出しタイプ」なので、上段が四角部分。下半分が「おまけの三角部分」だと思います（推測

ちなみにカスタマイズ前の見出しはこんな感じ。

一つだけルールを覚えましょう

では上記のタグを改変しますので、そのまま「デザインCSS内」にコピーしましょう。

ここで一つだけルールを覚えてください。

＃がついているのは色指定です。

上でコピペしてきたタグの場合は　#eee（明るいグレー）とか#111(ほとんど黒）とかですね。

色コードに関してはここで説明するにはめんどくさいスペースが足りないので

www.netyasun.com

このあたりを参考にしてください。

色を変えてみましょう

勘の言い方はもうおわかりですね。

そうです！！#の後ろの数字を書き換えれば色が変わります！！

ここでさっきの「カスタマイズ前」を見てみましょう。

「ほとんど黒」→文字色と左側の枠線 「明るいグレー」→背景色

だということがわかります。

ではその部分の数字を適当に変えてみましょう

ちょっとした遊びで「角丸」も設定しましたが気にしないでください（笑）

って事で、文字色と背景色を変えたものがこちら。

かなり印象が変わりますね♪

あとは繰り返して覚えていくだけ

だいたいこんなことを繰り返しながら、試行錯誤していくと「勝手に覚えていく」ものです。

とりあえず最初は

• ＃の後は色指定
• pxは大きさ、長さ、太さなど

だけ覚えておいて、そこの数字をいじるところから。

知らないフレーズが出てきたらググッて見るとか。
「これどうやってるんだろ？」（丸いシェアボタンとか）みたいなのがあったら、そこのCSSを眺めて真似してみるとか。

テーマの作者さんは親切なので、だいたいはCSSに注釈文が入っていたりしますので「見出し」とか「日付」とかで検索しても見つかる場合もありますし。

CSSの本などを買ってじっくり取り組むのも楽しいですが、「やっつけ仕事」でよければ、このくらいのゆるいカスタマイズ方法でもオリジナリティは出せると思います。

みなさんも試してみてくださいね♪

なお最終的には「上書きしなくて良い部分」や「重複する部分」は削除していますが、説明の便宜上「全部コピー」で説明しております。

まとめ

そんな感じで　PC版のデザインは

shiromatakumi.hatenablog.com
BROOKLYNをベースにして改造。

スマホ画面はPC画面に近くなるように改造

してこのデザインに落ち着きました。

とまじぃさんちらしさ　出せましたかね？（笑）