Bloggerの見出しの扱いをStackEdit用に変更する

Bloggerに記事をアップしてからいろいろネットで情報を探していたら、StackEditとBloggerにはそれぞれ癖があって、書き方に注意しないといけないことがわかってきました。ちょっとずつまとめていきます。

今回は見出しの扱い。SEO対策として見出し情報が使われているので、SEOを意識する人にはとても大切だとか。タグの意味が正しく使われていないと、私、きになります! な人にも有効だと思われます(えるたそ～) 。私はあんまりきにしてなかったり…

人の書いたHTMLを読みながら変更していくのって結構私には難しかったりするので、どのようにやっていったのか、経過とともに説明していきます。

参考サイトはBloggerテンプレートのh2とh3タグの編集です。少し時が立っているのでほんのちょっとですが変わっています。でもやらなきゃいけいないことは全部分かったので、とても参考になりました。感謝です!

なにしたらいい?

まずどんなふうにタグを扱えばいいか決めてみます。次にBloggerでのタグの扱いを調べてみます。そのあとHTMLのどこをどう変えたらいいか、HTMLをみて確認していきます。

どんなふうにしたい?

記事のHTMLではこんなふうになって欲しいです。

内容	タグ
ブログタイトル	h1
記事タイトル	h2
記事見出し	h3～H6

どうやったらできるかな?

BloggerでStackEditで書いた記事が、自分が考えたとおりの見出しになるようにするには次の事が必要だと考えました。

StackEditで記事を書く時、見出しは###から使い始める。
BloggerのHTMLをカスタマイズして、元のH2～H6タグを削除する。

h1はブログタイトル、h2は記事タイトルにしたいので、記事本文での見出しはh3ですね。なのでStackEditで記事を書くときに###で書き始めることにします。注意すればできそうですね。書くときに気をつけることにします。

2.は結構変更が必要です。また、今回のカスタマイズで気をつけないといけないのがウィジェットを追加したらhtmlの編集でh2タグをcustom_widget_titleに変更する必要があることです。ウィジェットのタイトルラベルにh2が使われているので、ウィジェットを追加したら「画面が崩れたあああ」ってパニクること、うけあいです。 orz

では、早速カスタマイズに手を出してみましょう!

カスタマイズしてみよう!

調査: Bloggerの見出しのHTMLタグ

Bloggerの癖はこんな感じです。

タグ	場所
h1	ブログタイトル
h2	投稿日時、自己紹介、ブログアーカイブ
h3	記事タイトル
h4	コメント
h5～H6	(使われていなさそう)

なんでBloggerはH2～H4タグをこんなふうに使ったんだろう…

検討: どうしたい?

じゃあ、どんなふうになってるとうれしいかな…

内容	タグ
ブログタイトル	h1
記事タイトル	h2
記事見出し1～4	h3～H6
投稿日時	(見出しじゃない)
自己紹介	(見出しじゃない)
ブログアーカイブ	(見出しじゃない)
コメント	(見出しじゃない)

h1, h5, h6はそのまま、Bloggerで使っているh2～h4は出現しないように、そして新たにh2, h3は該当するところで使われるように変更すれば良さそうです。そして自分スタイルが使えるようにすれば、ゴールです。

実践: Bloggerのテンプレートをカスタマイズしよう

まずはBloggerではどのように書かれているかを調べます。そしてちょっとづつ変更して考えたことが当たり!かどうか確認して、それから必要な変更をやっていきたいと思います。HTML壊すとなおすの大変なんですよね… orz
あと、行数を書いていますが、カスタマイズ状況で変わるので目安です。

ステップ1: Bloggerのh2を取り外す

Bloggerでh2が出てきているところを調べます。結構あります。

“/* Variable definitions” の部分
61行目変数定義

   <Group description="Date Header" selector=".main-inner h2.date-header">
     <Variable name="date.font" description="Font" type="font"
         default="normal normal 14px 'Trebuchet MS',Trebuchet,sans-serif" value="normal bold 10px Cherry Cream Soda"/>
     <Variable name="date.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#7109b8"/>
   </Group>

80行目変数定義

   <Group description="Gadget Title Color" selector="h2">
     <Variable name="widget.title.font" description="Font" type="font"
        default="normal bold 14px 'Trebuchet MS',Trebuchet,sans-serif" value="normal bold 14px &#39;Trebuchet MS&#39;,Trebuchet,sans-serif"/>
     <Variable name="widget.title.text.color" description="Title Color" type="color" default="#ffffff" value="#ffffff"/>
   </Group>

“/* Headings” の部分
239行目

h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}

.main-inner h2.date-header {
  font: $(date.font);
  color: $(date.text.color);
}

.footer-inner .widget h2,
.sidebar .widget h2 {
  padding-bottom: .5em;
}

.footer-inner .widget h2,
.sidebar .widget h2 {
  padding-bottom: .5em;
}

本文の部分

947行目: PC用の投稿日

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

1304行目: モバイル用の投稿日

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

1974行目: ラベルウィジェットのタイトル文字: ラベル

  <b:if cond='data:title != &quot;&quot;'>
    <h2><data:title/></h2>
  </b:if>

2013行目: プロファイルウィジェットのタイトル文字: プロファイル

    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>

2056行目: ブログアーカイブウィジェットのタイトル文字: ブログアーカイブ

  <b:if cond='data:title != &quot;&quot;'>
    <h2><data:title/></h2>
  </b:if>

まずわかりやすい本文のところを少し変えてみます。一番最後のブログアーカイブのところを変更してみましょう。h2タグをspanにかえ、クラスにcustom_widget_titleとつけてみます。

  <b:if cond='data:title != &quot;&quot;'>
    <span class='custom_widget_title'><data:title/></span>
  </b:if>

ここでブログの画面をみるとどうでしょう? ちゃんと変わりました!

太字だったのが細字になりました。今度はここのスタイルを指定している部分を変更してみましょう。前とおんなじスタイルになれば成功ですね。h2のスタイルシートの部分をコピペして、セレクタのところをcustom_widget_titleに書き換えてみます。

.custom_widget_title {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}

これだけだと中の変数が反映されないはずなので、htmlテンプレートの変数定義のところも変更します。安全のため元のselector=”h2”のところ全体をコピーして追加し、h2を.custom_widget_titleに書き換えます。

   <Group description="Gadget Title Color" selector="h2">
     <Variable name="widget.title.font" description="Font" type="font"
        default="normal bold 14px 'Trebuchet MS',Trebuchet,sans-serif" value="normal bold 14px &#39;Trebuchet MS&#39;,Trebuchet,sans-serif"/>
     <Variable name="widget.title.text.color" description="Title Color" type="color" default="#ffffff" value="#ffffff"/>
   </Group>

   <Group description="Gadget Title Color" selector=".custom_widget_title">
     <Variable name="widget.title.font" description="Font" type="font"
        default="normal bold 14px 'Trebuchet MS',Trebuchet,sans-serif" value="normal bold 14px &#39;Trebuchet MS&#39;,Trebuchet,sans-serif"/>
     <Variable name="widget.title.text.color" description="Title Color" type="color" default="#ffffff" value="#ffffff"/>
   </Group>

そうすると、テンプレートの保存をしたとき、画面にこんなエラーがでてきました。

Invalid variable declaration in page skin: Variable name must not be declared twice. Input: widget.title.font

h2と.custom_widget_titleで同じ変数名があるのがまずかったようです。h2のほうを消してみましょう。そして画面を確認すると…

できました! h2のかわりにspanを使って変更したスタイルを指定すればうまくいきそうです。では残りの右サイドバーのウィジェットのラベルも変更します。

ラベルウィジェットのタイトル文字: ラベル

      <b:if cond='data:title != &quot;&quot;'>
        <span class='custom_widget_title'><data:title/></span>
      </b:if>

プロファイルウィジェットのタイトル文字: プロファイル

    <b:if cond='data:title != &quot;&quot;'>
      <span class='custom_widget_title'><data:title/></span>
    </b:if>

できました。割りとあっさりできたのが驚きです。

次は投稿日のところです。h2をspanに書き換えると、spanの中にspanがあるようになってしまいます。でもhtmlではspanのなかにspanを書くことができるので、問題ないはずです。

PC用の投稿日

        <b:if cond='data:post.dateHeader'>
          <span class='date-header'><span><data:post.dateHeader/> <data:post.timestamp/></span></span>
        </b:if>

モバイル用の投稿日1

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

モバイル用の投稿日2

    <b:if cond='data:post.dateHeader'>
      <span class='date-header'><span><data:post.dateHeader/></span></span>
    </b:if>

はい、ちゃんと変更が反映されました。じゃあ、スタイルの定義も変更しましょう。h2のところをspan.date-headerに変更します。

変数定義

   <Group description="Date Header" selector=".main-inner span.date-header">
     <Variable name="date.font" description="Font" type="font"
         default="normal normal 14px 'Trebuchet MS',Trebuchet,sans-serif" value="normal bold 10px Cherry Cream Soda"/>
     <Variable name="date.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#7109b8"/>
   </Group>

CSS定義

.main-inner span.date-header {
  font: $(date.font);
  color: $(date.text.color);
}

大成功です! これで本文からh2がなくなりました。あとは先程custom_widget_titleのスタイルを作るときに残したh2のスタイル定義を削除します。これも問題なくできました。

ステップ2: 記事タイトルをh2にする

次は記事タイトルをh2にしていきましょう。Bloggerでは記事タイトルはh3になっているので、HTMLの中のh3を探します。

“/* Variable definitions” の部分

   <Group description="Post Title" selector="h3.post-title a">
     <Variable name="post.title.font" description="Font" type="font"
         default="normal bold 20px 'Trebuchet MS',Trebuchet,sans-serif" value="normal bold 24px Oswald"/>
     <Variable name="post.title.text.color" description="Text Color" type="color"
         default="#ffffff" value="#000000"/>
   </Group>

“/* Posts” の部分

294行目

h3.post-title {
  margin-top: 20px;
}
h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
}
h3.post-title a:hover {
  text-decoration: underline;
}

本文の部分

1228行目: モバイル用の記事タイトル1

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

1318行目: モバイル用の記事タイトル2

        <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:elseif cond='data:post.url and data:blog.url != data:post.url'/>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        </h3>

1426行目: PC用の記事タイトル1

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

他にh3は見当たりません。どうやらh3は記事タイトルでしか使われていないみたいなので、全部h2に変更しちゃいましょう。そして記事タイトル用のスタイル追加します。

さて、管理画面のCSSを追加でサクッと追加するかーと思ってメニューからひらいてみたら!! 以前追加したCSSが表示されていない! どうやらいろいろ変更してる影響で「CSSを追加」ではもうカスタマイズできなくなったようです。しかたがないのでHTMLを編集で、いままでにCSS定義の最後のほうに以下を書き加えます。

h2.post-title {
    font: normal bold 24px Oswald;
    color: #00001f;
    position: relative;
    margin: 0 0 0;
    padding: 0.2em 0 0.2em 1.5em;
    border: 2px solid #B92A2C;
    font-weight: bold;
}
h2.post-title:before{
    content: "";
    position: absolute;
    background: #B92A2C;
    top: 50%;
    left: 0.5em;
    margin-top :-15px;
    height: 30px;
    width: 8px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}

はい、大成功です! 実はCSSの定義で上の方にはまだh2.post-titleに対する定義が残っているんです。でもCSSの仕様では、使われるCSSはその場所から上の方をたどって一番近いところのCSS定義を使う、というのがあったりします。つまり同じクラスの定義が複数あってもエラーじゃないってことになります。ちょっと気持ち悪いかもしれないけど、もともとの定義は残しておこうと思います。

これで、h2に関するカスタマイズは終わりです。はぁ～、つかれた～

でもここでひとつ注意です。ウィジェットのタイトルラベルにh2が使われているので、ウィジェットを追加したらhtmlの編集でh2タグをcustom_widget_titleに変更することを忘れないようにしましょう。でないとウィジェットを追加したら「画面が崩れたあああ」ってパニクること、うけあいです。 orz

ステップ3: 記事の中の見出し1をh3にする

次は記事見出し1です。h3タグはBloggerでは記事タイトルに使われていましたが、ここまでのカスタマイズでもうHTMLに存在しません。ですのですなおにh3用のスタイルを追加します。

h3 {
    margin: 1.5em 0 1.0em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    padding-left: 0.7em;
    padding-right: 0.3m;
    font-size: 1.2em;
    font-weight: bold;
    border: 2px solid #211aeb;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
    -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
    -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
    -o-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
    -ms-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}

バッチリです!

ステップ4: コメントのh4を取り外す

Bloggerでコメントに使われていますね。まだ自分のブログにコメントがないので、自分でコメントして確認します。(寂しい…(´:ω：｀)ﾌﾞﾜｯ )

おおっと、ブログトップではコメントって件数表示しかないんですね。個別のページでコメント入力とか表示するようになっているんですね。ふむふむなるほど…、ってBloggerの設定画面でコメント表示方法選択できるんだ。知らなかった…

ではではHTMLの中のh4を探します。

“/* Posts” の部分

341行目

#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
  color: $(post.title.text.color);
}

本文の部分

988行目: バックリンクラベル

      <a name='links'/><h4><data:post.backlinksLabel/></h4>

1017行目: コメント投稿欄

      <h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a></h4>

1024行目: コメント投稿欄

      <h4 id='comment-post-message'><data:postCommentMsg/></h4>

1072行目: コメントのラベル

      <h4><data:post.commentLabelFull/>:</h4>

1095行目: コメントのラベル

    <h4><data:post.commentLabelFull/>:</h4>

h2でやったのと同じように、スタイル指定の部分はh4を.custom_commentに、本文部分はタグをspanに変更してcustom_commentクラスになるようh4をspan class=’custom_commentに変更してみましょう。終了タグのをに変更するのも忘れずに。変更したコードは省略します。

はい、大成功です! 画面も崩れず、ソースを確認してもh4はありません。

ステップ5: 見出し2～4までをh4～h6にする

h4～h6までのタグのスタイルを書いておきましょう。h4～h6のスタイルは同じに設定してみました。h5やh6をたくさん使うようになったら、またスタイルを変更しようと思います。さっきのh3の下に追記します。

h4, h5, h6 {
 margin: 0.5em 0.5em 1.0em 0.5em;
 padding: 0.1em 0.6em 0.1em 1.5em;
 font-size: 1.0em;
 font-weight: bold;
 border-top: 1px dashed #aaa;
 border-bottom: 1px dashed #aaa;
 background: #eee;
 text-shadow: 1px 1px 0 rgba(255,255,255,1);
 box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset;
 -moz-box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset;
 -webkit-box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset;
 -o-box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset;
 -ms-box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset;
}
h5 {
 margin: 0.3em 0.5em 0.5em 0.5em;
 padding: 0.1em 0.6em 0.1em 2.5em;
 font-size: 0.9em;
}
h6 {
 margin: 0.3em 0.5em 0.5em 0.5em;
 padding: 0 0.6em 0 3.5em;
 font-size: 0.75em;
 font-color: black;
}

はいっ、これも反映されました!
いや～、HTMLを壊さないように変更するのって、神経使いますね～。みなさんはどんなふうにやってるんでしょう?

ステップ6: 目次の余分な点々を消そう

“###”からかきはじめるため、Bloggerでは目次のところに箇条書きの点(・)が表示されてしまいます。目次によぶんな点々がでているとちょっとうっとうしいですね。なのでよぶんな点々を消して、目次の位置を左に寄せてみやすくします。

CSSの最後あたりに下記記述を追加します。

/* 目次の不要なdiscを消す、目次を左に寄せた分幅を広げる */
.toc ul {
 list-style: none;
 width: 100%;
}
/* 目次の表示位置を左に寄せる */
.toc > ul > li > ul > li {
 position: relative; left: -4em;
}

ほら、消えた!

どうだった?

結構大変でしたが、かなり思った通りのカスタマイズができました。めっちゃうれしいです! でもプレビューみて気づいたんですが、表とコード、きれいじゃない! そういえば画像サイズの問題も残ってる… まだまだ道は続くよどこまでも…

参考情報 (日本語)

Bloggerテンプレートのh2とh3タグの編集
(2008-12-7)わたしの記事でやっていることをもっとわかりやすく書いてくれています。少し古いですが本当に役に立ちました。他にも有用な記事がたくさんあるので読み込んでみます。