【はてなブログ】サイドバーのフォントサイズを変更しました

f:id:Kawan0116:20180323073951j:plain

かわんです。

最近ちょこっとブログのカスタマイズをCSSで行なっています。

まずはブログ全体のフォントサイズを変更。

body {
    font-size:18px !important;
}

これを設定すれば、ブログ本文のフォントサイズが18pxになります。

しかし問題が・・・

上の設定をすると、サイドバーのフォントサイズも変更されてしまいます。

そこで、こんな感じに設定します。

#box2 {
    font-size:14px;
}

これでサイドバーのフォントサイズを変更できます。

注意点

お使いのテンプレートによっては、サイドバーのフォントサイズが変更出来ないことがあります。

その場合はChromeで自身のブログを開き、サイドバーの文字の上で右クリックし検証をクリックしましょう。

そうすることで、クラスやIDが分かるはずです。

そのクラスやIDに対してfont-sizeを設定しましょう。

なお、CSSの編集に失敗すると、ブログのレイアウトが崩れる場合があります。

十分注意し、自己責任で行なって下さい。

まとめ

という事で、色々と書いてみました。

基本的にテンプレートの編集は好きでありません(笑)

Chromeで検証した場合、クラスやIDが複雑で一苦労します。

なので、比較的簡単な文字サイズの変更と文字の色付けだけを行なっています。

僕は、元Webデザイナー&コーダーだったので、CSSとは友達。

本気を出せば、かなりカスタマイズ出来る自信があります。

ま、やらないですけどね(笑)

なお、上で書いたようにCSSの編集に失敗するとレイアウトが崩れる場合があります。

よって、自己責任の上でCSSの編集をして下さいね。

スラスラわかるHTML&CSSのきほん 第2版
狩野 祐東
SBクリエイティブ
売り上げランキング: 60,711