Thursday, November 16, 2006
「続きを読む」をベータに継承

思えば、BloggerがBetaを発表したのは今年8月のこと。その直後にあたしは運良くアカウント移行のチャンスを与えられたので、早速、新しいテンプレート・システムをいじりつつ、難解になった新システムを罵倒する日々が続いていたわけですが、本日、テンプレも新システムに移行してみました。

えーしばらく更新をサボっていましたが、仕事がモーレツに忙しいだけでなく、その間、テンプレをベータ・システムに移行するために最終チェックを行っていました。
Bloggerによると、ここ最近で言語ローカライズ化も一気に進み、すでにベータへの移行がすべての旧アカウント保持者に対して推奨されているようです。日本語が表示できるようになったのを機会に、ベータ移行を決心し、新しいテンプレ・システムを使い始めた方も多いのではないでしょうか。

あたしの場合、ベータ移行してからもかなり長い間、旧Bloggerとまったく同じテンプレが使用できるクラシック・テンプレ・システムを使っていたわけですが、それには2つの大きな理由がありました。

ひとつは、ブログのインポート機能の登場を待っていたこと。
Bloggerでは、Blogger内で書かれたブログ・データをバックアップする方法を使えば、WordPressなどのブログ・ツールにデータをエキスポートすることが可能です。ま、家財道具を抱えて嫁に行くことができるわけですね。
ところが、外部で書いていたブログのデータを、Bloggerにインポートする機能がない。外部からBloggerへの簡易引越しはできないわけです。前夫との思い出を抱えたままの再婚は許されないみたいなもんです。
あたしは別に、外部で書いている他のブログをBloggerにインポートさせたいと思っていたわけじゃないんですが、これまでに書いたエントリの中には、以前使っていたランキング・サイトのバナーとか、いらないものがたくさんある。それを1枚ずつ開いて削除するのは面倒だし、どうせテンプレもベータ仕様に変更するなら、その際にデータをエキスポートして、いらない部分を手持ちのエディタで瞬時に抹殺してからインポートし直してやれば、クリーンな状態で再スタートが切れると思っていたんです。

でも、インポート機能は登場しませんでした。

ふたつ目は、ただ考えるのがめんどくさかっただけなんだけど、「続きを読む」の料理方法。
あたしは、"クリボウのBlogger Tips"で紹介されているこの方法を使って「続きを読む」を実装しています。だもんで、各エントリの中にすでに埋め込まれている<div class="fullpost">や<div class="readmore">に手を加えずに、一発ですべてが継承できる方法じゃないと、これまたエラくめんどくさいことになるわけですね。
そこでちょっと調べてみたら、JavaScriptを使えというアドヴァイスが大量にヒット。でも、別にそんなことしなくても、CSSとBlogger独自のif構文だけで任意のページにアイテムの表示、非表示はできるはず。ただ、<head></head>内の<style></style>に、if構文が使えないことが問題として残りました。

そこでちょっと悩んだわけですが、CSSは別に<head></head>内に入れなくてもいいことを思い出し、<body></body>内に直接CSSを書き入れることですべてが解消。普段は直書きなんてしないので、基本的なことを忘れてました。
あたしと同じように、「続きを読む」の継承が原因で新テンプレ・システムへの移行を渋っている方のために、その方法を紹介しておきます。

まず、テンプレの"htmlを編集"に行き、右上の" ウィジットのテンプレートを展開"にチェックを入れたら、以下の部分を探してください。

    <div class='post-header-line-1'/>
    <div class='post-body'>
      <p><data:post.body/></p>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

でもって、赤字になっている部分を以下のように変更します。

    <div class='post-header-line-1'/>
    <div class='post-body'>
     <b:if cond='data:blog.pageType == "item"'>
       <style>.fullpost {display:block;}</style>
       <style>.readmore {display:none;}</style>
        <p><data:post.body/></p>
      <b:else/>
       <style>.fullpost {display:none;}</style>
       <style>.readmore {display:block;}</style>
        <p><data:post.body/></p>
     </b:if>

      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

そんだけです。

ところで、あたしは以前から新テンプレ・システムに対して懐疑的。ウィジットなどの機能面は向上しましたが、ほんの小さなデザインの変更でも、ウィジットに対応するBlogger独自のマークアップをある程度理解していなければならないので、一般ユーザにとってはデザイン面の制限が増え、大きく後退したと思っています。
htmlなどの最低限の知識だけで、誰もが気軽に個性的な"自分だけのブログ"を作れるのが理想なんだけどなぁ。また、そのせいでBloggerユーザが離れていかないことを祈りつつ、早いとこベータにも対応したテンプレ配布を実現させたいと思ってます。ただ、忙しくて時間がね・・・



6 comments | コメントを書く

6 comments:

安宅正之 said...

なるほどー。Read more は、同じことを外部スタイル・シートでやる方法もありますね。item ページ用とそれ以外のスタイル・シートを用意して、(head 要素内でスタイル・シートを呼び出す) link 要素を、if 分岐させてやれば OK なはず。

11/17/2006 9:26 pm

Envy said...

@akaさん、コメントありがとうございます。

そうかー、ページ別に作ったCSSのエクスターナルを呼び出して使うこともできるんですね。
head内のstyleにifを入れても機能しなかったので、headではifがまったく使えないと勝手に解釈していました。

ところで・・・あたしのようなド素人がBloggerを少しずつでもいじりながら楽しめるのは、@akaさんやクリボウさんのように、惜しみなくサポートや新しいアイデアを提供してくださる方が日々活躍されているからこそだと感じています。
どうかこれからも宜しくお付き合いください。

P.S.
わらじやの雑炊がウマそうでウマそうでもう・・・。

11/18/2006 12:38 am

Anonymous said...

はじめまして。
早速、試してみたところ、うまくいきました。ずっと気になっていたのですが、beta版はうまくいかないのかな...と思ってたところ、こちらにたどり着きました。ありがとうございます。助かりました。

11/29/2006 3:29 pm

Envy said...

> Satoさん
こちらこそ初めまして。コメントありがとうございます。
お役に立てて良かったです。

Blogger Betaのテンプレ関連で使えそうなネタを発見したら今後も紹介していきたいと思っていますが、なんせド素人なのでどうなることやら(笑)。

11/29/2006 9:28 pm

Kuribo said...

> 前夫との思い出を抱えたままの再婚は許されないみたいなもんです。
はは、面白い表現ですね。

スタイルシートをブログポストウィジェット内に書き入れると、投稿の数だけ同じものが書き出されてしまいますね。

スタイルはブログ内に一つあれば良さそうなので(記事内容よりも先に書く必要はありますが)、ヘッダーウィジェットに書き入れる方法がいいかもしれません。

この記事に乗っからせていただいて Blogger beta にも「続きを読む」機能 という記事を書いたので、よければお読み下さい。

12/05/2006 12:49 am

Envy said...

> クリボウさん
ヘッダに入れる・・・なるほど。

早速試してみましたが、あまりにもテンプレをカスタマイズしすぎているせいか、ヘッド内に指示を入れるとエントリがまったく表示されなくなってしまい、ちょっと苦戦しています。
現在、原因を追求中。なんでかなー。

12/05/2006 11:51 am