ページ判定条件文

bloggerの条件分岐分には「blog型」と「view型」の２種類があり、ほぼ同じように機能する。

blog型ホームの条件文はプレビューと共通

下書きプレビュー時に自分のURLが/blog-post.htmlになってるとここを通る。タイトルを日本語にした場合起きる現象。

<b:if cond='data:blog.url == data:blog.homepageUrl'>
	//URLの状態によってプレビューもここを通る
</b:if>

<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
	//記事タイトル
	//URLの状態によってプレビューもここを通る
</b:if>

この条件が特にタイトル部分（class='post-title entry-title'）にデフォルトテンプレートで使われてるためプレビュー条件を入れて公開状態と同じにする必要がある。

ホームだけを通したい場合の対策

view型のホーム分岐を使う。

blog型、view型の条件文

blog型	view型	ページ種類
<b:if cond='data:blog.pageType == "index"'>		ホーム \|\| ラベル \|\| 月別
<b:if cond='data:blog.url == data:blog.homepageUrl'>	-	ホーム \|\| プレビュー
-	<b:if cond='data:view.isHomepage'>	ホーム
<b:if cond='data:blog.pageType == "item"'>	<b:if cond='data:view.isPost'>	投稿
<b:if cond='data:blog.pageType == "static_page"'>	<b:if cond='data:view.isPage'>	ページ
<b:if cond='data:blog.url == data:post.url'>	<b:if cond='data:view.isSingleItem'>	投稿 \|\| ページ
<b:if cond='data:blog.searchLabel'>	<b:if cond='data:view.isLabelSearch'>	ラベル
<b:if cond='data:blog.searchLabel == "ラベル名"'>	<b:if cond='data:view.isLabelSearch == "ラベル名"'>	特定のラベル
-	<b:if cond='data:view.isPreview'>	プレビュー

※elseifは効かないためelseの中に入れ子にする

[【Blogger】ifを使って要素を判別するテンプレートタグまとめ ]
[ bloggerで表示しているページを判断する方法 ]

ページ別に<body> class名をつける

pageType	ページ種類
index	ホーム/ラベル/月別
item	投稿
static_page	ページ

ホームだけのclassをつける

<body expr:class='"loading" + data:blog.mobileClass + data:blog.pageType + (data:blog.url==data:blog.homepageUrl ? " home" : "")'>

ホームでの出力

body class="index home"

※公開中の投稿プレビューにもhomeがつく
※ページを読み込み後時間差で効く。そのためこれを利用してcssを書くとたとえ color であってもPageSpeed InsightsのCumulative Layout Shift評価が下がり、その結果良好 URLの数が激減する。
参考： Bloggerのページタイプ別にスタイルを適用したい

<title>

<title>
   <b:if cond='data:blog.searchLabel'>
      <data:blog.pageName/>
   <b:else/>
      <b:if cond='data:blog.pageType == "item"'>
         <data:blog.pageName/>
      <b:else/>
         <data:blog.pageTitle/>
      </b:if>
   </b:if>
</title>

ラベルページ：ラベル名のみ
投稿ページ：投稿タイトルのみ
それ以外：ブログ名:ページ名（homeのときはブログ名のみ）

ホームで投稿タイトルのみ表示

ラベルページやホーム、特定のページ投稿で本文を表示させない場合は条件分岐で出し分ける。

タイトルから本文、ラベルなど投稿内容すべてを出力してるコード

<b:include data="post" name="post"/>

検索するとテーマHTML内に一箇所だけある。

リンクつきのタイトルのコード

<a expr:href='data:post.url'><data:post.title/></a>

サムネイル画像featuredImageをimgタグで出力

画像の横幅と縦横の比率を指定

<b:with value='data:post.featuredImage.isResizable?resizeImage(data:post.featuredImage, 512, "3:2"): data:post.thumbnail' var='image'>
   <img class='featuredImage' expr:alt='data:post.title' expr:src='data:image' layout='responsive' />
</b:with>

デフォルトではalt属性が「イメージ」固定のためimgタグ出力に置き換える

<meta description>

投稿タイトル名を含めたディスクリプションを自動で設定する方法。

<meta expr:content='data:blog.pageName + "のページです"' name='description'/>

投稿ページでのソース上の出力（投稿タイトル「英語」の場合）

ウィジェットエリアを追加する

表示したい場所に置くコード

<b:section id='任意の名前'/></b:section>

投稿に使われてるラベルを表示する

<span class='post-labels'>
  <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url + "?home=1"' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'> </b:if>
    </b:loop>
  </b:if>
</span>

ラベルページでそのラベル名を表示

<data:blog.pageName/>

Essentialカスタムマニュアル

シンプルなbloggerテーマEssentialをもとにカスタムするためのミニマル化。

ヘッダースクリプト無効化

</body>直前のscriptをコメントアウト

ラベル

Blogger カスタムマニュアル