【Tumblr Tips】エントリにタイトルリンクを設定する

タイトルをクリックすればそのエントリへ画面が切り替わる。この当たり前の動きをTumblr標準では実現できないことがある。Tumblrでブログ運営する際に困るこの課題への対応を検討、実践してみた。

2023/8/17追記

このエントリは、tumblrの旧投稿形式 Legacy Post Format（LPF）向けとなります。2023/8現在 LPFが廃止されNeue Post Format（NPF）に順次切り替わっているようですので、NPF対応版を記載しました。こちらも併せてご覧いただけますと幸いです。

はじめに

多くのブログ系のサイトは、最初にエントリ一覧ページが表示される。そこには各エントリのタイトルと本文の一部が表示され、タイトルをクリックすると、エントリ個別のページに遷移するのが一般的。Tumblrでも同様にエントリ一覧ページ（IndexPage）とエントリ個別ページ（PermalinkPage）から構成される。

ところがTumblrでは新規エントリ投稿時、エントリにタイトルを設定できる場合と、タイトルを設定できない場合がある。具体的にはテキストエントリにはタイトルを設定する欄が投稿時に表示されるが、写真エントリやフォトセットエントリ（組写真）ではタイトルを設定する欄がなく、タイトルを設定できない。

写真エントリやフォトセットエントリは使い勝手が良いからこそ、Tumblrを使用している身としては、テキストエントリ同様にタイトルリンクを設定したいと思う。

そこで当サイトでは、Tumblrテーマ上にJavaScriptカスタマイズロジックを挿入し、疑似的に写真・フォトセットエントリ上でのタイトルリンクを実現している。その手順を忘備録的にまとめてみる。

Step1. エントリ投稿の運用カバー

テキストエントリとは異なり、写真・フォトセットエントリの投稿画面には写真のエントリ本文（本来は写真のキャプションを記載）を入力する欄しか存在しないため、この先頭にタイトルを記載するような運用をしている。具体的には本文の先頭にH1タグで囲ったタイトルをいつも入れ、そのあとに本文を記述している。あらかじめテーマのCSS側の設定から、本文中のH1のデザイン（フォントサイズ・色等）を、テキストエントリのタイトルと同じ設定になるよう指定している。

これで見かけ上、写真・フォトセットエントリの本文先頭につけたH1タイトルは、テキストエントリのタイトルと同じになる。

Step2. 本文先頭のH1タグのリンク化

次に、H1設定したタイトルにエントリへのリンクを付与する。JavaScriptカスタマイズロジックを使用し、H1設定したタイトルを抽出し、その内容をリンク付のものに書き換えていく。

手順は、エントリの本文が描画されるオブジェクト（div要素）のIDにTumblr側で採番されるID（独自タグ {PostID})を設定するようあらかじめテーマHTMLに記述しておく。次にJavaScriptでIDを指定して本文を含むオブジェクトを取得する（1）。このオブジェクトの子ノード（2）の1番目の要素がH1の場合（3）、その子ノード（H1タイトル）をリンク付のタイトルに置き換えて完了（4）。

この動きを以下のサンプルFunctionの形に実装した。

//  タイトルリンク付記事を生成する関数
function setTitleLink(id, url)
{
    //  1.キーを指定して記事エレメントを取得
    var elEntry = document.getElementById(id);
    //  2.子ノード取得
    var children = elEntry.childNodes;
    //  3.子ノードの1要素目がH1の場合
    if(children[1].tagName == "H1" || children[1].tagName == "h1")
    {
        //  タイトル文字列取得
        var strTitle = children[1].innerText;
        //  4.タイトルリンクセット
        children[1].innerHTML = "{block:IndexPage}<a href="%22%20+%20url%20+%22">{/block:IndexPage}" + strTitle + "{block:IndexPage}</a>{/block:IndexPage}";
    }
}

呼び出し元では、該当記事のIDとエントリURLを引数に渡して使用する。これにより、Tumblr標準機能で画面に描画された本文中のH1タイトル部を上書きして、タイトルリンクを実現している。

<!-- 画像投稿 -->
{block:Photo}
    <!-- 画像表示 -->
    {LinkOpenTag}
        <img src="%7BPhotoURL-HighRes%7D" border="0" alt="{PhotoAlt}">
    {LinkCloseTag}
    <!-- 画像表示 -->
    <!-- 本文 -->
    {block:Caption}
    <div id="{PostID}">
        {Caption}
    </div>
    <!-- 本文 -->
    <!--先頭のH1にリンクを付けるロジック-->
    <script language="JavaScript">
        setTitleLink("{PostID}", "{Permalink}");
    </script><!--先頭のH1にリンクを付けるロジック-->
    {/block:Caption}
{/block:Photo}
<!-- 画像投稿 -->

欠点

このカスタマイズの欠点は、画面側で見かけ上の疑似タイトルにリンクを設定しているだけであるという点。写真・フォトセットエントリのようなタイトルを設定できないエントリは、Tumblr内部では本文の先頭一部をタイトルとみなしていて、この本文の一部がエントリURLやRSSフィード等のタイトルとして使用されている。そのため、RSSフィード等に表示されるタイトルと、画面上の疑似タイトルが一致しない場合が少なくない。このあたりのTumblr標準の動きもJavaScript等で捻じ曲げられるのかもしれないが、今のところ着手できていない。

また、この実装はあくまでWEBブラウザの画面上に描画された内容をテーマ上のJavaScriptロジックで書き換えているだけなので、カスタマイズしたテーマが適用されないTumblrアプリや標準モバイルテーマ上では機能しない。

まとめ

Tumblr標準機能によって描画された内容（単なるH1見出し）を、JavaScriptで書き換える（H1リンク付タイトル）ことで、タイトルリンク設定機能を実現した。シンプルであるがゆえに、機能面でいろいろと物足りなさを感じることも少なくないTumblr。HTML・CSS・JavaScriptの組み合わせ次第で、自由に機能拡張できる点は魅力に感じる。