bloggerの記事タイトルを変更

以前「bloggerのCSSについて」でbloggerのデザインをカスタマイズしました。

あの状態だと、最初に見える記事タイトルはメイリオに変更されていますが、記事をクリックした後に表示される記事タイトルは明朝のままです。

↓ブログ表示時

↓記事タイトルクリック後

そこで記事タイトルクリック後も含め、記事タイトル用のcssを追加します。

１．テンプレート＞HTML編集を開きます。

２．HTMLエディタの中でctrl+Fを押し、検索窓を開きます。

３．<b:if cond=’data:post.title’>で検索すると以下の様な場所が見つかります。

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
  <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>
</b:if>

上記のブロックが２か所存在します。
私の場合は1408行と1546行で、最初のブロックがモバイル版、後半がPC版です。

４．３行目と17行目のh3をh2に変更します。
　　３行目の下に”<a expr:href=’data:post.url’>”を追加。
　　１７行目の下に”</a>”を追加する。

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
  <h2 class='post-title entry-title' itemprop='name'>
  <a expr:href='data:post.url'>
    <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>
  </a>
  </h2>
</b:if>

５．テンプレートの保存をします。

ｈ2に変更した事で前回設定したCSSが有効になり、メイリオに変更されました。
但し、h2に変更した事で文字サイズが小さくなりました。

そこで前回と同じサイズに戻します。

１．テンプレート＞カスタマイズを開きます。

２．上級者向け＞CSSを追加を開きます。

３．下記のCSSを追記します。

/* 記事タイトルフォントサイズ */
h2.post-title a{
font-size: 21px;
}

これで元通りのサイズになります。

共有: