はてなブログのテーマ カスタマイズの方法。
テーマの可愛さが気に入ってはてなブログにしたのですが、
そのまま使うのはちょっとなぁ…と思い、
少しだけカスタマイズしました。
でもどうもやり方が分からなくて苦戦しました。
なので今回は
簡単にカスタマイズ出来る方法をご紹介しようと思います。
まずは下準備
テーマストアから、テーマを選びます。
HTMLは変えられないので、自分の作りたいブログのイメージに近いものを選んでください。
決めたらインストール。
これからいよいよカスタマイズしていきますが、
カスタマイズ中は公開範囲を「自分だけに公開」にしておきましょう。一応。
自分のブログを表示してみる
私はブラウザはchromeを使っているので、そのやり方になりますが。
chromeで自分のブラウザを表示してみましょう。
そして、右クリック→要素を検証をクリック。
すると…
こんな風にHTMLとcssが表示されます。
便利なとこは…
HTMLにマウスを合わせると
そのHTMLタグがどの部分のものなのか、一目でわかります。
サイズも表示。分かりやすい。
HTMLをクリックすれば、その部分に定義されているcssも表示され、そのままcssを編集することもできます。
ここで、スタイルを変えたらどんな感じになるのかを確認しておきます。
cssを上書きしていく
管理画面→デザイン→カスタマイズ→デザインcss
で、直接cssを入力できます。
後から記入したスタイルがどんどん上書きされていくので、元のcssはいじりません。読むのめんどくさいので。
こんな感じで、自分が変えたい部分のスタイルのみ記入。
完成!!
以上です。
cssをいじれるので、自分の作りたいものが割と簡単にできますね。
なにより、この設定画面がとても使いやすいです。
これからちまちまと変えていこうと思ってます。