nico*STYLE

好きなもの、好きな事、思うままに。自由気ままに。書いてます。

はてなブログのテーマ カスタマイズの方法。

テーマの可愛さが気に入ってはてなブログにしたのですが、

そのまま使うのはちょっとなぁ…と思い、

少しだけカスタマイズしました。

でもどうもやり方が分からなくて苦戦しました。

 

なので今回は

簡単にカスタマイズ出来る方法をご紹介しようと思います。

 

 

まずは下準備

テーマストアから、テーマを選びます。

HTMLは変えられないので、自分の作りたいブログのイメージに近いものを選んでください。

決めたらインストール。

これからいよいよカスタマイズしていきますが、

カスタマイズ中は公開範囲を「自分だけに公開」にしておきましょう。一応。 

 

 

自分のブログを表示してみる

私はブラウザはchromeを使っているので、そのやり方になりますが。

chromeで自分のブラウザを表示してみましょう。

そして、右クリック→要素を検証をクリック。

すると…

f:id:nicoxnico:20140619104916g:plain

こんな風にHTMLとcssが表示されます。

 

便利なとこは…

f:id:nicoxnico:20140619104923g:plain

 HTMLにマウスを合わせると

 

f:id:nicoxnico:20140619104929g:plain

そのHTMLタグがどの部分のものなのか、一目でわかります。

f:id:nicoxnico:20140619104934g:plain

サイズも表示。分かりやすい。

HTMLをクリックすれば、その部分に定義されているcssも表示され、そのままcssを編集することもできます。

ここで、スタイルを変えたらどんな感じになるのかを確認しておきます。

 

 

 cssを上書きしていく

 chrome上で確認した後、cssを上書きしていきます。

管理画面→デザイン→カスタマイズ→デザインcss

で、直接cssを入力できます。

後から記入したスタイルがどんどん上書きされていくので、元のcssはいじりません。読むのめんどくさいので。

 

f:id:nicoxnico:20140619104943g:plain

こんな感じで、自分が変えたい部分のスタイルのみ記入。

 

 

完成!!

以上です。

cssをいじれるので、自分の作りたいものが割と簡単にできますね。

なにより、この設定画面がとても使いやすいです。

これからちまちまと変えていこうと思ってます。