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です。

本文中の見出しだけ変更したい

そんなときはクラスを指定します。本文のクラスは大抵はpost-bodyとなっているはずです。

.post-body h2{
font-size:2em;
}

フリーテンプレートをダウンロードした場合はその限りではありません。

このブログの人気の投稿

硬い木、強い樹木のリスト(日本・世界)

Ubuntu初回起動時にWi-Fiが繋がらないというより選択肢が出てこない問題への対処法

【解決】AcerのAspireノートPCでBiosにF2で入る方法が完璧にわかった!

【挑戦】USBメモリー又はSDカードにUbuntuをインストールする方法

【解決】ランダムなハードウェアアドレスをオンにすると家庭用のwifiに繋がらなくなる(Windows10の話)

Package Name(パッケージ名)の決め方 - Android Studio プログラミング

デロンギのオイルヒーターを使ってみた!風呂場のヒートショックの予防策

時間をかけて作ったページがSearch Consoleのインデックスカバレッジで除外されている件について

Android Studio 3.3でメモ帳を作ってみた!初めてのプログラミング

BEAU SOLEIL(ボーソレイユ)スイスの名門寄宿学校