2022年3月12日

Blogger カスタムマニュアル

ページ判定条件文

特定のラベルページの条件文

<b:if cond='data:blog.searchLabel == "ラベル名"'>
</b:if>

ホームの条件文は公開済み記事のプレビューと共通

<b:if cond='data:blog.url == data:blog.homepageUrl'>
	//公開済み記事のプレビューもここを通る
</b:if>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
	//記事タイトル
	//公開済み記事のプレビューもここを通る
</b:if>
Blogger ページ種類
<b:if cond='data:blog.pageType == "index"'> ホーム || ラベル || 月別
<b:if cond='data:blog.url == data:blog.homepageUrl'> ホーム || 公開済みの投稿プレビュー
<b:if cond='data:blog.pageType == "item"'> 投稿
<b:if cond='data:blog.pageType == "static_page"'> ページ
<b:if cond='data:blog.searchLabel'> ラベル
基本的な条件分岐コード[ 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>

<meta description>

投稿タイトル名を含めたディスクリプションを自動で設定する方法。
<meta expr:content='data:blog.pageName + "のページです"' name='description'/>

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

<meta content='英語のページです' name='description'/>

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

表示したい場所に置くコード
<b:section id='任意の名前'/></b:section>
Wish I could be Comic Sans ついにマイコンピューターでインターネットを始めたの
わたしはヨガマットデザイナー

fzfeed