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

とまじぃさんち

信じるか信じないかはあなた次第・・・。

【スタイルシートに詳しくなくてもできる】はてなブログカスタマイズ法

インターネット インターネット-はてなブログ

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

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

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

CSSを眺める

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

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

このアドレスをコピーして、ブラウザのアドレスバーに貼り付けます
f:id:tomag:20160519065649p:plain

数多くの呪文が書かれたページが開きます(笑) f:id:tomag:20160519065753p:plain

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

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

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

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

CTRL+Fを押すと「ページ内検索」ができますので、たとえば中見出し(h3タグ)をカスタマイズしたいと過程して、「h3」で検索して見ましょう。 f:id:tomag:20160519070454p:plain

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

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

そして5個目。
f:id:tomag:20160519070724p:plain
なんかそれっぽいのが見つかりました。

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

ちなみにカスタマイズ前の見出しはこんな感じ。
f:id:tomag:20160519071238p:plain

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

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

f:id:tomag:20160519071637p:plain

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

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

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

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

www.netyasun.com

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

色を変えてみましょう

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

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

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

f:id:tomag:20160519071238p:plain

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

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

ではその部分の数字を適当に変えてみましょう f:id:tomag:20160519072725p:plain

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

って事で、文字色と背景色を変えたものがこちら。 f:id:tomag:20160519072914p:plain

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

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

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

とりあえず最初は

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

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

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

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

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

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

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

まとめ

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

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

f:id:tomag:20160519073856p:plain

スマホ画面はPC画面に近くなるように改造
f:id:tomag:20160519074005p:plain

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

とまじぃさんちらしさ 出せましたかね?(笑)