見出しタグの設定 忍者ブログ

まずは見出しタグの設定から。


ブログのタイトルを<h1>に指定します。

▼元ソース
<div id="TopTitle">
<a href="<!--$g_url-->"><span class="TopTitleFont"><!--$g_title--></span></a>
</div>

ブログのタイトル部分を<h1>でくくり、spanでフォント指定されていますがこれを削除します。

▼カスタマイズ・ソース
<div id="TopTitle">
<h1><a href="<!--$g_url-->"><!--$g_title--></a></h1>
</div>


次に記事タイトルを<h2>に指定します。

▼元ソース
<div class="EntryTitle">
<a href="<!--$entry_link-->"><span class="EntryTitleFont"><!--$entry_title--></span></a>
</div>

記事のタイトルを元ソースのclass指定を流用し、<h2 class="EntryTitleFont">～<h2>でくくり、spanタグを削除します。

▼カスタマイズ・ソース
<div class="EntryTitle">
<h2 class="EntryTitleFont"><a href="<!--$entry_link-->"><!--$entry_title--></a>
</div>


こえで1度テンプレートを保存しますが、忍者ブログの場合はテンプレート保存時に保存方法を選べますので、念のために「新規保存」にチェックを入れ、テンプレートの名称を「GRAY01（任意の名称）」とでもして「送信」してください。

保存できたらブログを確認してください。

レイアウトが崩れていると思いますので、スタイルシートもカスタマイズします。


ブログタイトルのスタイルシート

■元ソース
/*ページタイトル文字色の設定*/
.TopTitleFont { font-size: 16px; font-weight: bold; text-decoration: none; margin-top: 200px; }

.TopTitleFontをh1に換え、margi-top: 200pxを0pxにします。

■カスタマイズ・ソース
/*ページタイトル文字色の設定*/
h1 { font-size: 16px; font-weight: bold; text-decoration: none; margin-top: 0px; }

※<h2>に指定した記事タイトルはclass="EntryTitleFont"を流用したのでそのままでOKです。

これを保存してやれば、ほぼ元デザインと同じレイアウトになります。


以上、見出しタグの設定でした！