Blogger：見出し設定(6)Hタグ編集の記録

前の関連記事：Blogger：見出し設定(5)どのHタグの見出しを変更するか？

あれこれいじくって今の形に落ち着いたのですがもとのテンプレートからどういじったのかわからなくなってしまいました。ということでもう一度デフォルトテンプレートからいまの形にする手順を記録しておこうと思います。

まずはテンプレートデザイナーで変更できるところは変更してしまう

Blogger：見出し設定(4)テンプレートデザイナーで見出しをカスタマイズで使ったテンプレートデザイナーで変更できるものはこれでやってしまったほうがプレビューもすぐ見れて簡単です。

管理画面→テンプレート→カスタマイズ

左のメニューから「上級者向け」をクリック。

するとその右に変更できるメニューが出てきます。

すべての部分のフォントの大きさと色がこれで変更できればよいのですがいまのところ変更できるのは「ページのテキスト」と「ブログのタイトル」、「タブのテキスト」、「ガジェットのタイトル」だけです。

「投稿タイトル」は色は変更できず大きさのみ変更できます。

「日付ヘッダー」、「投稿のフッターのテキスト」、「投稿の枠線」は色のみ変更できます。

フォントも変更できるものがありますが日本語フォントはなくフォントを変えても変化するのは英数字部分のみです。

結局テンプレートデザイナーで変更したのは
「ブログのタイトル」でタイトルフォントをROCK SALTに
「投稿タイトル」を24pxに
変更したのみでした。

日本語のタイトルの場合は日本語フォントがないので画像でタイトルを作るしかなさそうです。

他の部分の変更はもうテンプレートHTMLをいじるしかありません。

テンプレートHTMLの<b:skin>～</b:skin>をみていくと繰り返し部分がみつかった

ちょっと話がそれます。

デフォルトテンプレートはPicture Windowです。

テンプレートのHTMLの<b:skin>の次に書いてあります。

<b:skin><![CDATA[/*-----------------------------------------------

Blogger Template Style
Name:     Picture Window
Designer: Josh Peterson
URL:      www.noaesthetic.com
----------------------------------------------- */

この<b:skin>の中身でCSSを設定するのですが上から実行されて下に同じものがあると上書きされるようです。

ということで一番下にある定義が最終的に反映されます。

現在の反映されている定義をみるにはこの<b:skin>の中身を下からみていくとよいことになります。

いまこの時点ではこのブログの<b:skin>の一番下はBlogger:テキストリンクにアイコンをつけるで書き込んだ.entry-content a[～]関連のものになっています。

その上はBlogger:引用符をカスタマイズで書き込んだblockquoteに関するものです。

その上がBlogger:SyntaxHighlighter(1)ブログにソースコードを綺麗に表示させるに関するものです。

えらくボリュームがあるなあ、と思いながスクロールしてみると

* Copyright (C) 2004-2010 Alex Gorbatchev.

が何度もでていることに気がつきました。

これはおかしいと思い調べてみるとSyntaxHighlighter関連が4回も繰り返されていました。

SyntaxHighlighter関連は226行もあるので全部で678行も無駄に書き込まれていたことになります。

テンプレートのバックアップをとった後に思い切って繰り返されている部分を削除してみました。

いまのところ支障は起きていないです。

モバイルWimaxで編集しているので編集途中で電波が途切れて書込完了の確認ができずにシステムが何度もリトライしたのかもしれません。

今回気づいたのも実は以前も違うタグでも同じことが繰り返し書き込まれていることが何度もあったので注意していてスクロールさせていたからです。

現在の状態のhタグに関する<b:skin>に追加したCSS部分を書き出して
デフォルトテンプレートに適用してみる

デフォルトテンプレートの<b:skin>の最後は以下のようになっています。

.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
  border-$startSide: 1px solid $(tabs.separator.color);
}
]]></b:skin>

現在のブログのテンプレートHTMLで</b:skin>と上記ではさまれた部分にあるｈタグ関連のものを抜き出してみました。

h4 {
font-size: 16px;
font-weight: bold;
margin: 5px 0;
padding: 5px 0 5px 10px;
background: #eee;
border-top: 1px #777 solid;
border-bottom: 1px #777 solid;
border-left: 8px #777 solid;
border-right: 1px #777 solid;
}
h3 {
font-size: 24px;
font-weight: bold;
margin: 5px 0;
padding: 5px 0 5px 10px;
}
h2 {
font-weight: bold;
margin: 5px 0;
padding: 5px 0 5px 10px;
border-top: 1px #777 solid;
border-bottom: 1px #777 solid;
}
h5 {
padding: 5px 0 0 0;
border-top: 1px #777 solid;
border-bottom: 1px #777 solid;
}

新たにブログを作ってデフォルトテンプレートの<b:skin>の最終部分に上記を追加してみました。

このテンプレートではBlogger：見出し設定(5)どのHタグの見出しを変更するか？で調べたように

h1タグ　ブログタイトル

h2タグ　見出し：日付、ガジェットタイトル

h3タグ　小見出し：投稿タイトル

h4タグ　準見出し：コメント関係

となっているはずです。h5はGoogleアドセンス用に新たに作ったものです。


これが以下のようになります。


投稿本文内のタイトルにh4タグを使うことにしたので投稿文下部にでてくる同じくh4タグの

が目立ちすぎます。

これらをh2タグに変更することにしました。

コメントに関する部分のh4タグをh2タグに変更する

HTMLの編集画面でウィジェットへの移動→Blog1、とすると

<b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'>

へ飛びます。この中のincludableをみると

<b:includable id='comment-form' var='post'>

がそれらしい名前です。コメント入力画面をcommet-formというのでしょう。

<b:if cond='data:mobile'>

まずモバイルテンプレートの設定がでてきます。このブログではモバイルテンプレートは使わないので<b:else/>以下を見ます。(結局Blogger:IE8で背景の色が消える問題(3)モバイルサイト有効にせざるを得ないでモバイルテンプレートは使うことにしましたのでその部分もh2に変更しました。）

　　<b:else/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>

この部分のh4をh2に変更します。

テンプレートを保存してブログを表示させると


「コメントを投稿」部分がh2タグになっています。

ほかにcommetと名のつくincludableのh4タグがついている箇所を探すと

              <b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
      <h4><data:post.commentLabelFull/>:</h4>

がありました。

このh4をh2に変更します。


「0件のコメント：」もh2タグにかわりましたね。

以上でhタグに関する設定は現在のブログと同じものになったはず、、、です。

いつもは設定をしながら記録をとっていますがこのときは試行錯誤が多すぎて記録をとる心のゆとりがなかったので記憶をたどりながら書きました。
なので、抜けているところがあるかもしれません。

2013.11.16追記。
コメントの件数表示は0件の部分と1件以上のときでは異なるインクルードで表示されていました。

<data:post.commentLabelFull/>がコメント件数を表示しているのですが上記の <b:includable id='comments' var='post'>にある<data:post.commentLabelFull/>は「0件のコメント：」だけでした。

「1 件のコメント:」を表示している<data:post.commentLabelFull/>は<b:includable id='threaded_comments' var='post'>にありました。

              <b:includable id='threaded_comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <h4><data:post.commentLabelFull/>:</h4>

のh4もh2に変更します。

コメントでご指摘いただいた匿名さんありがとうございました。