【Blogger】独自タグの活用方法まとめ

2020/07/19

ご存じの方も多いかもしれませんが、BloggerにはHTML編集で使える独自タグがあります。

初めて目にすると面食らう独自タグですが、使い慣れると非常に便利なものです。今回は、独自タグを駆使すればこんなことができるよーというのを使用法とともにご紹介します。

そもそも独自タグとは？

独自タグというのは、Bloggerでのみ使用できるHTML編集用のタグです。

<b:○> ～ </b:○>という形をしていて、ifやswitchによる分岐処理、loopによる繰り返し処理、data:によるデータ参照など色々なことができます。Blogger独自のプログラミング言語みたいなものですね。

この独自タグを使うことで、普通のHTMLでは絶対できないような処理がいとも簡単にできるようになります。さっそく見ていきましょう。

読み込み遅延の解消

いきなりですが、読み込み遅延の解消ができます。

読み込み遅延というのは、余計なリソース（外部ファイルやJavaScriptコードなど）を読み込むことで生じるタイムロスのことです。これを無くすことで、ページの読み込み時間を短縮できます。

独自タグにはこれにピッタリな役割のものがあります。それはこちら。

b:if制御文

よくあるプログラムのif文と同じです。

<b:if cond='条件式'>
  <!-- 実行内容 -->
</b:if>

基本的な書き方はこのような感じで、cond='～'の部分の条件を満たすときのみ処理が実行されます。

この性質を利用して、特定のリソースを読み込む必要がないページには参照コードを表示させないようにできます。以下のような形で使用します。

使用例

<head>
  ...
  <b:if cond='data:blog.url == "スクリプト使用ページのURL"'>
    <script src='～'></script>
  </b:if>
</head>

このようにすると、スクリプトを使用する特定のページ以外は<script src='～'></script>の部分が表示されなくなります。data:blog.urlというのは現在のページのURLです。

b:if制御文は当ブログでも大活躍していて、下の画像のように設定しています。

制御文による違いがどれほどあるのか、Page Speed Insightsで実際に測定してみました。結果は以下の通りです。

測定結果

制御文なし

制御文あり

モバイルの場合ですが、比べてみるとその差は歴然！余計な外部コードの読み込みがないだけで、スコアも大幅アップしました。

MathJaxやシンタックスハイライターのようなライブラリはサイズが大きいため、特に効果大です。制御文があるかないかで1秒以上読み込み時間が違うって結構すごいですよね…

使用のポイント

今回の方法は、特定のページでのみ使用するリソースがある場合非常に有効です。

例えば、記事（item）ページでのみ使うリソースがある場合、以下のように設定できます。

<b:if cond='data:blog.pageType == "item"'>
  <!-- リソース1 -->
  <!-- リソース2 -->
  ...
</b:if>

data:blog.pageTypeというのはページの種類を示すデータ型で、これを利用するとページの種類に応じて異なる処理を行うことができます。data:blog.pageTypeで指定できるページは以下の4種類です。

ページ種類	説明
index	トップページ、ラベル＆検索ウィジェットの結果ページ
item	個々の投稿記事ページ
archive	アーカイブから参照できるページ
static_page	静的ページ

リソースの使用場面に応じて、条件を適切に設定することがポイントです。

状態別の処理

独自タグを利用すると、状態に合わせた特別な処理を行うことができます。

要素の動的切り替え

ページごとに要素をアクティブ/非アクティブのように切り替えたいと思うこと、あると思います。

例えば、ナビゲーションバーで今いるページには<a>要素を付けたくないといった場合。こうした場面には、先ほどと同じく条件分岐タグが威力を発揮します。

<nav>
  <ul>
    <li>
      <b:if cond='data:blog.url == "HOMEページのURL"'>
        HOME
      <b:else/>
        <a href='#'>HOME</a>
      </b:if>
    </li>
    <li>
      <b:if cond='data:blog.url == "ABOUTページのURL"'>
        ABOUT
      <b:else/>
        <a href='#'>ABOUT</a>
      </b:if>
    </li>
    <li>
      <b:if cond='data:blog.url == "CONTACTページのURL"'>
        CONTACT
      <b:else/>
        <a href='#'>CONTACT</a>
      </b:if>
    </li>    
  </ul>
</nav>

ナビゲーションバーの場合、対象ページのURLと現在のページのURLを比較することで簡単にアクティブ/非アクティブを切り替えられます。

Bloggerの場合、こうした条件分岐を入れるだけで自動的に表示が切り替わってくれるので非常に便利ですね。Bloggerでないときは対象ページごとにアクティブ部分を設定するという力技を使っていましたが、その必要もすっかりなくなりました。

表示の動的切り替え

今までのものと基本は同じですが、ちょっと応用的なテクニックです。

この記事ページでもバリバリ活躍しているのですが、お気づきでしょうか。ずばり…パンくずリスト部分の高さ調整です。

実はこのパンくずリスト、記事部分の外にあるように見えますが区分的には内部なのです。表示にラベルを利用する関係上、そうせざるを得ませんでした。

しかし、そのままだと当然高さは揃いません。そこで登場するのが、独自タグです。

パンくずリストは記事ページと静的ページにしか表示しないため、サイドバーの上の部分に以下のようにheight-adjustという高さ調整専用の<div>要素を設けました。

<b:if cond='data:blog.pageType in {"static_page", "item"}'>
  <div class='height-adjust'/>
</b:if>

@media screen and (min-width: 900px)
.height-adjust {
    height: 34px;
}

パンくずリストの高さは34pxであるため、記事とサイドバーが横並びになる幅900px以上のときのみheight-adjustに高さを持たせるようにしました。

こうして、画像のようにサイドバー部分の高さを自然に揃えることができました。

その他の便利機能

Bloggerには便利な機能が色々あります。使わないともったいないぐらいの機能が満載なので、ぜひ積極的に使ってみてください。

expr属性

これはかなり便利な機能です。これを使用すると、式で計算した値を属性値として指定できるようになります。

平たく言うと、拡張参照機能…みたいな感じでしょうか。実際に使用例を見ていただくとわかりやすいと思います。

使用例

a要素

<a expr:href='data:blog.homepageUrl + "p/blog-page.html"'>お問い合わせページ</a>

src属性

<img expr:src='data:post.firstImageUrl'/>

リンク

<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>

メタタグ

<b:if cond='data:blog.pageType == "index"'>
  <!-- indexページの場合、ブログタイトルのみを表示 -->
  <meta expr:content='data:blog.pageTitle' property='og:title'/>
<b:else/>
  <!-- それ以外の場合、「ページの名前｜ブログタイトル」の形で表示 -->
  <meta expr:content='data:blog.pageName + " | " + data:blog.title' property='og:title'/>
</b:if>
<!-- 現在のページのURLをメタコンテンツとして指定 -->
<meta expr:content='data:blog.url' property='og:url'/>

style属性

<div expr:style='"background-image: url(" + data:post.firstImageUrl + ");"'>

以上のように、href、content、styleなど様々な参照要素に対して使用することができます。data:～の部分は自動的に出力されるため、メタ要素等も制御文との合わせ技で一括指定できて非常に便利。

href辺りはわかるんですが、contentやstyleまで適用できるのは素晴らしいと思います。

resizeImage()

この関数も非常に優秀です。画像を指定した大きさにリサイズしてくれます。

指定は以下の通りです。

resizeImage(画像URL, 新しい画像の幅, 画像のアスペクト比)

使用例

<!-- 幅300pxの画像にリサイズ -->
<img expr:src='resizeImage(data:post.firstImageUrl, 300)'/>

<!-- 幅600px、縦横比1:1の画像にリサイズ -->
<img expr:src='resizeImage(data:post.firstImageUrl, 600, "1:1")'/>

<!-- 幅900px、縦横比4:3の画像にリサイズ -->
<img expr:src='resizeImage(data:post.firstImageUrl, 900, "4:3")'/>

この関数を使用すると、画像を自動的にリサイズしてくれるため圧縮したりする手間が省けます。場面に応じて効果的にリサイズすることで、ページの読み込みを速くすることが可能です。

まとめ

基本的なものから少し踏み込んだ内容まで、具体的な使用例とともにご紹介しました。

普段積極的に使うことはあまりないかもしれませんが、独自タグの世界はとても奥深いので、ぜひ楽しみながら触れてみてください。

参考：【第３回】これでわかった！Bloggerの制御タグ・データタグまとめ

コメントはまだありません

コメントを書き込む

IB-Note