Blogger で「続きを読む」機能を。-- 3.5

既にWidget内への実装ではなくなってるので、タイトル変えました。

色々と試行錯誤をしている間に、なんか意味不明になりつつある、「続きを読む」機能ですが、前回の記事で CSSの機能で「続きを読む」機能の不備は補完できるって話を同僚から聞いたので、それを試してみました。

本来ならば即座に前回の記事をUpdateするつもりだっのですが、そのSuggestionをくれた同僚と飲みに行ってしまったので、この時間の別記事での投稿となりました。

しかしながら、その同僚からさらなるアドバイスを貰えたりしたのでメリットは多大にありました。

まず聞かれたのは「PV(Page View)はどれくらい?」と。ちょっと鯖読んでAbout 500 per day.とかって目標としているような数値を答えてしまいましたが、本当の問題は、その中のブラウザの比率を知りたかったらしいです。

実はAdjacent sibling selector(隣接セレクター)はCSS2.0な規格で、Firefox(Mozila)、Operaでは早くから対応してらしいけど、IE6は対応してないので、IE6ユーザーが多いならその対応は薦められないと。IE6の使用率は半数近くを占めていて未だに無視できないと。

Inernet Explorer 7はCSSに本気で対応したというのが売り文句の一つらしいですが、IE6をフォローしようとすると、css的なアプローチをするとしてもBehaviorからスクリプトって流れになるので、先に両方に対応できるScirptを書いたのならばそれでいいじゃないって結論を、人の奢りのビールを飲みながら出してくれました・・。

こんな話はあったのですが、試してみないとって事で。

ベースとなるのは、 Blogger Widgetで「続きを読む」を自動化。-- 3.1で書いた内容になります。


基本的にStyleの設定を変更するだけですので、Template内にstyle指定を追加します。このstyleタグを入れる場所ですが、</head>タグの直前が良いかと思います。別所ではbodyタグ内に入れている例もありますが、DTD的にも正しくないかと思いますので。

]]></b:skin>

    <style type='text/css'>
      <b:if cond='data:blog.pageType == "item"'>
        .fullpost {display:block;}
        .readmore {display:none;}
        .readmore2 {display:none}
        <b:else/>
        .fullpost {display:none;}
        .readmore {display:block;}
        .readmore2 {display:none;}
        .fullpost + .readmore2 {display:block;}
      </b:if>
    </style>

</head>

上記のように通常のTemplateですと</head>の直前には</b:sink>があると思いますので、その間に挿入する形で言いかと思います。

classでreadmoreとreadmore2と両方指定していますが、readmoreは以前の投稿した記事に対する為で、記事内部に投稿時に手書きでclass="readmore"なタグがある事を想定しています。

readmore2への指定が今回の変更部分です。blog.pageTypeがitemでは無い場合にも基本は隠す(display: none)のですが、直前にclass="fullpost"なタグがあった場合は表示(display:block)しています。

この.fullpost + .readmore2 部分が Adjacent sibling selector(隣接セレクター)指定になります。

そして投稿記事の直後にreadmoreなソースを自動的に挿入するために、使っているテンプレートにより若干の違いがあるかと思いますが、と書いてある直後にタグを追加します。

    <div class='post-body'>
        <p><data:post.body/></p>
    </div>
    <div class='post-footer'>

上記のような部分を以下のように変更します。

<div class='post-body'>
  <p>
    <data:post.body/>
      <b:if cond='data:blog.pageType != "item"'>
      <div class='readmore2'>
        <a expr:href='data:post.url'>
          続きを読む・・
        </a>
      </div>
    </b:if>
  </p>    
</div>
<div class='post-footer'>

ポイントは、記事データ(<data:post.body/>)の直後に<div class="readmore2">で隣接関係を作り出そうとしている部分です。

要約したい記事(「続きを読む」を使う)は投稿される際に以下のような形式である必要があります。

ここは序文です。

要約しないで、一覧表示時にも表示したい部分です。

<div class="fullpost">
ここに要約される記事本文を書きます。
このブロックに書いた部分は一覧表示では表示されません。
</div>

必ず<div class="fullpost">で括る必要があり、それを閉じた以降は改行すらしてはいけません。Bloggerの内部に保存される際に、改行コードが&bt;br/>に置き換えられてしまうために、class="readmore"との隣接関係が崩れてしまうからです。

ですが要約を必要としない記事に関してはこの限りではありません、Reaadmoreなタグは隣接にfullpostが無い限り表示されませんので。つまりclass="fullpsot"を使ったら、それが必ず最後の要素となるように記事を作成する必要があるという事です。

このような形でCSS的な解決方法も出してみましたが、Javascriptを使わないので、その分制約も出てしまいました。苦労した割にはあまりパッとしたものにはなりませんでした・・。


Javasciptで後からダブったreadmoreタグを消し込む前回の方式の方が気楽なので個人的にはこちらでいこうかと思ってます。

関連のありそうな記事