Bloggerでh2,h3,h4の見出しタグを調節する方法2
Google Bloggerで見出しタグ<h1><h2><h3><h4>をカスタマイズする方法2
GoogleBloggerは自由にテンプレートを編集することが可能です。
見出しタグのサイズやデザインも簡単に変更できます。
前回の記事をもとに少し加筆しました。
前回の記事をもとに少し加筆しました。
テンプレート→テンプレートの編集をクリック
まずBlogger管理画面の左側にあるテンプレートをクリックします。
そしてテンプレートの編集を開くとソースコードが現れます。
見出しの変更はスタイルシートを使う
たいていのテンプレートは<skin>~</skin>というところに見出しタグの大きさが指定されています。
Ctrl+Fを押してh1やh2といった単語を検索する
テンプレートのソースコードを一回クリックしてからCtrl+Fを押して検索窓を出現させます。そこにサイズを変えたいh1やh2の見出しタグが書かれている部分を<skin>~</skin>から探します。
面倒な人は<skin>~<skin>の最終行で見出しタグを設定する
直接ソースコードの編集をするのがいやな人はスキンの最終行で自分で指定します。CSSは下の行が優先されます。
h1{
font-size:2em;
margin-bottom:1.4em;
}
こんな風に書きます。
テンプレートによってはこれでダメなものもあり、そのときはどうして効かないのか目を凝らしてソースの中から探し出します。emで指定したほうがいろいろと簡単です。
margin-top・・・上の余白
margin-left・・・左の余白
text-decoreation:underline;・・・下線
color:#123456;文字色
border:1px solid;・・・1pxの線で囲む
border-left:○px;・・・見出しの左側に■を描くことができる。
background-image:url(http://);・・・背景に画像を指定
Blogger記事作成画面の「見出し」はh2、「小出しは」h3、「準見出し」はh4です。
margin-top・・・上の余白
margin-left・・・左の余白
text-decoreation:underline;・・・下線
color:#123456;文字色
border:1px solid;・・・1pxの線で囲む
border-left:○px;・・・見出しの左側に■を描くことができる。
background-image:url(http://);・・・背景に画像を指定
Blogger記事作成画面の「見出し」はh2、「小出しは」h3、「準見出し」はh4です。
本文中の見出しだけ変更したい
そんなときはクラスを指定します。本文のクラスは大抵はpost-bodyとなっているはずです。
.post-body h2{
font-size:2em;
}
フリーテンプレートをダウンロードした場合はその限りではありません。