非公開BloggerでFeedを使わずサイトマップ作成

Bloggerにおいて非公開のブログはFeed（RSS/Atom）も非公開となります。
非公開ブログでFeedが発行されていたら、誰もそのブログサービスは使わなくなるでしょう。

そこで問題発生です。限定公開のウェブアルバムを作っていましたが、カテゴリ表示ができません。（ツリー型カテゴリの参考：当ブログの右メニュー）
これは、Bloggerで実現できるカテゴリ表示には必ずFeedを利用するため、それが非公開であるとどうにもならないのです。

Bloggerの標準機能である「ラベル」では、その該当するラベルがすべて選択されてしまい、目的のアルバムを探せません。厳密には探せるのですが非常に手間です。とても使いやすいとは言えません。
（イメージは、本棚の片っ端からアルバム[背表紙なし]を探している感じです。）

せっかく見やすいウェブアルバムを作ることを目的に始めた「非公開ブログ」なのに、それが使いにくければ意味がありません。
＜限定公開のウェブアルバムを作る＞

これを何とかするために、検索しまくりました。
そして、わかったことはひとつ・・・。

「できません」

これでは不満足過ぎるので、我流力業で何とかすることにします。


要は、サイトマップのようなものから目的のアルバムにたどり着きたいのです。
（サイトマップ取得JSもFeedを使うため断念しました。）


ラベルを選択すると、その該当記事が数件分表示されます。もし、ここでタイトルのみ表示されればそれっぽくなります。
と言うことで、ここから攻めていきます。

まず、タイトルのみ表示するには「続きを読む」のようなもので、本文を１行目から折りたたみます。

そして、ラベル選択で表示される記事数をデフォルトの「数件表示」から「全件表示」されるようにします。

更に、不要な表示を削除し「もっと読む」自体も削除します。

最終的にこんな感じです。



これでブログ全体がサイトマップのようになり、目的のアルバムがズラーッと並ぶようになりました。


では次からは、その手順です。
（ラベルガジェットは追加しておいてください。）

※　私にHTMLやJavascriptの知識はありません。
テンプレートの編集は間違っているかもしれませんので、必ずバックアップを取ってから作業してください。

１．「もっと読む」を挿入

今回は写真の先頭行からこれを行いたいため、「HTML」編集画面から記事の先頭に次のタグを挿入します。

<!--more-->

すると表示はこのように写真が表示されなくなります。


２．テンプレートの編集

次に、不要な表示をすべてカットします。
以下の「post-footer」に関わる部分と「post.jumpText」の部分をテンプレートから削除します。

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>
    <b:if cond='data:top.showAuthor'>
      <data:top.authorLabel/>
        <b:if cond='data:post.authorProfileUrl'>
          <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
            <meta/>
            <a>
              <span itemprop='name'><data:post.author/></span>
            </a>
          </span>
        <b:else/>
          <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
            <span itemprop='name'><data:post.author/></span>
          </span>
        </b:if>
    </b:if>
  </span> <span class='post-timestamp'>
    <b:if cond='data:top.showTimestamp'>
      <data:top.timestampLabel/>
    <b:if cond='data:post.url'>
      <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
      <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
    </b:if>
    </b:if>
  </span> <span class='post-comment-link'>
    <b:if cond='data:blog.pageType != "item"'>
      <b:if cond='data:blog.pageType != "static_page"'>
        <b:if cond='data:post.allowComments'>
          <b:include data='post' name='comment_count_picker'/>
        </b:if>
      </b:if>
    </b:if>
  </span> <span class='post-icons'>
    <!-- email post links -->
    <b:if cond='data:post.emailPostUrl'>
      <span class='item-action'>
      <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
          <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
      </a>
      </span>
    </b:if>

    <!-- quickedit pencil -->
    <b:include data='post' name='postQuickEdit'/>
  </span> <div class='post-share-buttons goog-inline-block'>
    <b:if cond='data:post.sharePostUrl'>
      <b:include data='post' name='shareButtons'/>
    </b:if>
  </div> </div>

  <div class='post-footer-line post-footer-line-2'><span class='post-labels'>
    <b:if cond='data:post.labels'>
      <data:postLabelsLabel/>
      <b:loop values='data:post.labels' var='label'>
        <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
      </b:loop>
    </b:if>
  </span> </div>

  <div class='post-footer-line post-footer-line-3'><span class='post-location'>
    <b:if cond='data:top.showLocation'>
      <b:if cond='data:post.location'>
        <data:postLocationLabel/>
        <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
      </b:if>
    </b:if>
  </span> </div>
</div>

<div class='jump-link'>
  <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>

さらに、１度に表示される件数を全件にします。
テンプレートのラベルウィジェットの部分を次のように書き換えます。（このサンプルでは1000件まで表示されます。）

<b:loop values='data:labels' var='label'>
  <li>
    <b:if cond='data:blog.url == data:label.url'>
      <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
      <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
      <span dir='ltr'>(<data:label.count/>)</span>
    </b:if>
  </li>
</b:loop>

　　　　　↓

<b:loop values='data:labels' var='label'>
  <li>
    <b:if cond='data:blog.url == data:label.url'>
      <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
      <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?max-results=1000"'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
      <span dir='ltr'>(<data:label.count/>)</span>
    </b:if>
  </li>
</b:loop>

これで完了です。
このようになりました。


もう、基がブログだったとは思えません(^_^;)

細かい設定などは、その都度どのようにしたいのか変わりますので、ここでは触れませんが、この疑似サイトマップのタイトル付近に表紙となる写真を載せることもできるようです。

いずれは、そんなこともやってみようと思います。

    

loading..