Blogger:プロフィールのリンク先を変更した時にハマった罠

Bloggerの「基本情報」ガジェットでは、プロフィールのリンク先は Blogger のプロフィールのページとなっています。

Blogger の基本情報ガジェット

その Blogger のプロフィールのページですが、紹介文に使用できる文章の文字数に制限があったり、使用できるタグに制限があります。


そこで、もっと長い紹介文を表示できるように、Blogger のページに著者情報のページを用意しました。
その著者情報のページへのリンクを Blogger の基本情報ガジェットのリンク先として設定しました。


Blogger のテンプレートの HTML の編集にて、基本情報ガジェットの部分を探しだしました。
今回は著者が一人の場合に対応するため、data:team が true の場合の部分には触れていません。

今回修正したのは、以下に赤字・太字・橙マーカーで示している プロフィール画像のリンク 部と 詳細プロフィールを表示へのリンク の 2 箇所のリンクです。

Blogger ユーザ名の部分には、隣に Blogger のロゴが表示されているので、その部分は Blogger のプロフィールへのリンクをそのまま残すことにしました。


  <b:widget id='Profile1' locked='false' title='著者情報' type='Profile'>
    <b:includable id='main'>
        <b:if cond='data:title != &quot;&quot;'>
          <h2>
            <data:title/>
          </h2>
        </b:if>
        <div class='widget-content'>
          <b:if cond='data:team == &quot;true&quot;'>
             <!-- このブログの記事上では表示を省略 (実際にはここは弄っていません。） -->
            <b:else/>
            <!-- normal blog profile -->
            <b:if cond='data:photo.url != &quot;&quot;'>
              <a expr:href='data:userUrl'> <!-- プロフィール画像のリンク -->
                <img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/>
              </a>
            </b:if>
            <dl class='profile-datablock'>
              <dt class='profile-data'>
                <a class='profile-name-link g-profile' expr:href='data:userUrl' expr:style='&quot;background-image: url(&quot; + data:profileLogo + &quot;);&quot;' rel='author'>
                  <data:displayname/>
                </a>
                <b:if cond='data:hasgoogleprofile'>
                  <br/>
                  <div class='g-follow' data-annotation='bubble' data-height='20' expr:data-href='data:userUrl'/>
                </b:if>
              </dt>
              <b:if cond='data:showlocation == &quot;true&quot;'>
                <dd class='profile-data'>
                  <data:location/>
                </dd>
              </b:if>
              <b:if cond='data:aboutme != &quot;&quot;'>
                <dd class='profile-textblock'>
                  <data:aboutme/>
                </dd>
              </b:if>
            </dl>
            <a class='profile-link' expr:href='data:userUrl' rel='author'> <!-- 詳細プロフィールを表示へのリンク -->
              <data:viewProfileMsg/>
            </a>
          </b:if>
          <b:include name='quickedit'/>
        </div>
      </b:includable>
  </b:widget>


最初に、expr:href='data:userUrl' の部分を expr:href='http://upa-pc.blogspot.jp/p/writer.html' としてテンプレートを保存してみると、何故かプロフィールガジェット自体が表示されなくなりました。

理由がわからず、インターネットを調べていると以下の情報が見つかりました。

テンプレート・ファイルの眺め方 - Google プロダクト フォーラム
https://productforums.google.com/forum/#!topic/blogger-ja/gENRku1NgCg

この情報によると、expr:href='...' のように、HTML の属性の前に expr: がついていると、その属性値（'...'の中身）が Blogger のデータとして展開されて、href='展開後のデータ' という形で HTML に出力されるようです。

そのため、expr:href='data:userUrl' は、data:userUrl が Blogger のデータとして解釈され、http://www.blogger.com/profile/01778686324734783630 と展開された後、href='http://www.blogger.com/profile/01778686324734783630' という形で HTML に出力されているようです。


つまり、単純に expr:href='http://upa-pc.blogspot.jp/p/writer.html' としてしまうと、'http://upa-pc.blogspot.jp/p/writer.html' の部分が Blogger のデータとして解釈されてしまうため、おそらく解釈に失敗したために、プロフィールガジェット自体が表示されなくなったものと推測します。


そのため、有効な形でページへのリンクを記載するには、属性値を " (&quot;) で囲んで

expr:href='&quot;http://upa-pc.blogspot.jp/p/writer.html&quot;'

とするか、expr: を削除して、

href='http://upa-pc.blogspot.jp/p/writer.html'

とする必要があります。


今回は、すべてが Blogger の変数を含まない 定数のため、後者の形式を選択しました。

その形式で 2 箇所の リンクを修正した結果、プロフィール画像と 詳細プロフィールを表示のテキストをクリックすると、独自に用意した著者情報のページへ飛べるようになりました。