Blogger Bloggerカスタマイズ テンプレート

Bloggerシンプルテンプレートの記事タイトルをh3からh2に日付をh2からdivに変更

シンプルテンプレートの記事タイトルをh3からh2に変更して、日付やウィジェット(ガジェット)タイトルをh2からdivにそれぞれ変更した方法の記録です。

変更後、記事内で使う見出しは小見出し(h3)から使い始めます。また、Bloggerでは準見出し(h4)までしか選択できないため、h5やh6はHTMLで手書きする必要があります。

日付をh2からdivに変更

テンプレートの編集から

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

を検索して、h2の部分をdivに変更する。2個あるので両方変更する。

変更後はこのようになります。

<div class='date-header'><span><data:post.dateHeader/></span></div>

ガジェットタイトルをh2からdivに変更

テンプレートの編集から

<h2 class='title'><data:title/></h2>

を検索(1850行)して、h2の部分をdivに変更する。

続いて、

<h2><data:title/></h2>

を検索(2008行と2046行)して、同様に変更する。2個あるので両方変更する。
※これは、ガジェットでラベルと新着記事を追加している場合の変更方法です。追加しているガジェットが増えると、変更する箇所も増えます。

このときdivにclassを設定しておくとスタイルを変更できる。ここではwidget-titleとしました。

変更後はこのようになります。

<div class='widget-title'><data:title/></div>

後からガジェットを追加した場合は、その都度変更が必要です。
ガジェットタイトルの装飾は、テンプレートカスタマイズの上級者向けCSSの追加からできます。

ガジェットタイトルの装飾

テンプレートの編集で直接書き込むことも可能ですが、今回はCSSの追加からやりました。

.widget-title {
padding-left:10px;
font-size:20px;
border-left:solid 5px #000;
}

上のclassでwidget-titleとしたため.widget-titleとなっています。文字サイズやボーダーの色、太さなどは自由に変更可能です。

記事タイトルをh3からh2に変更

テンプレートの編集から

<h3 class='mobile-index-title entry-title' itemprop='name'>
<data:post.title/>
</h3>

と

<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

が2箇所の計3箇所をh3からh2に変更します。

h2・h3・h4・h5の装飾

CSSの追加で

h2{
margin:20px 0 10px 0;
font-size:20px;
color:#444;
font-weight: bold;
}

h3{
padding-left:10px;
margin:20px 0 10px 0;
border-left:solid 5px #444;
font-size:20px;
color:#444;
}

h4{
margin:20px 0 10px 0;
font-size:18px;
color:#444;
}

h5{
margin:20px 0 10px 0;
font-size:16px;
color:#444;
}

これで、ブログタイトルがh1、記事タイトルがh2、記事内の見出しがh3・h4・h5・h6となりました。

一つのことに特化したブログの場合はこれでいいと思いますが、そうではない場合は記事タイトルをh1にしたほうが個人的にはいいと思います。

しかし、たったこれだけの変更でも結構な手間となるため、元から変更されているテンプレートに変えてしまうのが最も簡単な方法かもしれません。

スポンサーリンク