ブログサービスの中のよくある機能として、記事の見出し部分だけを見せてそれ以降は「続きを読む」をクリックしたら表示されるというようなものがあります。
結構多くのブログサービスでそのような機能が実装されていたりしますが、このAmebaブログではその機能が存在しません。
って事で、少し見せかけなんですが、その「続きを読む」機能を実現する方法を書いてみます。
- 実現したイメージ
この記事自体、それを実装しているんですがパーマネントリンクを開くとそれが表示されません。
一番わかりやすい方法は、2011年07月03のアーカイブ を開いてみてください。
ちょうどこの下に、「続きを読む...」のリンクが開いており、クリックすると全てが表示される（そして、「続きを読む」リンクは削除されている）と思います。
記事を隠し、続きを読むリンクを配置するJavaScript
実際はjQueryで書いているんですが、まず下記のソースをフリープラグインに書き込み保存します。
$(document).ready(function() {
var page_url = location.href;
var entries = $(".foot a:contains('記事URL')");
for (i = 0; i < entries.length; i++) {
var url = entries[i];
if (!page_url.match(/^.+\/entry[\-0-9]*\.html$/g )) {
var article = $(".entry > .contents > .subContents").eq(i).find("p.continue");
if (article.size() > 0) {
article.nextAll().hide();
article.html("<a href='" + url + "'>続きを読む...</a><br /><br />");
}
}
}
});
続いて、各記事の続きを読むを表示したい位置に下記のタグを埋め込んでおきます。
タグの挿入は、エントリを書く際に「HTMLタグを表示」からタグ編集モードにして書いておきます。
<p class="continue" />
このタグの表示位置に「続きを読む...」が表示され、それ以降の記事が非表示となります。
続きを読むを実装するJavaScriptの詳解
そんなに難しいことはしていませんが、
var entries = $(".foot a:contains('記事URL')");
にて、各記事のパーマネントリンクを取得してます。
続いて、パーマネントリンクを開いていない場合のみ、その記事内に先ほど埋め込んだ、continueクラスを持つPタグの情報を探すようにしています。
var article = $(".entry > .contents > .subContents").eq(i).find("p.continue");
さらに、上記のPタグが見つかった場合は
article.nextAll().hide();
で、そのPタグ以降の記事データを非表示にしています。
2011.07.04 追記
私のブログの場合、プログラムの表示用にSyntaxHighlighterを使っているんですが、その場合に隠した要素が表示されるという現象が出てしまいました。
まぁ要素を隠しただけで実際は存在するので、SyntaxHighlighterによってCSSが書き換えられて再度表示されてしまいます。
ってことで、下記のように要素自体を削除することで対応しました。
article.nextAll().remove();
その上で、
article.html("<a href='" + url + "'>続きを読む...</a><br /><br />");
にて、空のPタグを「続きを読む...」というリンクを作成して入れ替えるようにしています。
記事を非表示にする部分より、続きを読むリンクを作成する条件やリンクのパーマネントを埋め込む方が時間かかったりしましたが・・・。
で、ここまで書いてて何なんですが、あくまで非表示にするってだけなので、これをすることによってページ表示のパフォーマンスがあがるとかそういう効果はありません。
一般的には、サマリを表示することで読者に見やすくさせたりする以外に、記事をコンパクトにまとめることで表示スピードを上げたりする効果もでるのでしょうが、あくまで記事を全部読み込んだ後に、特定部分を非表示にしているだけです。
まぁ、トップページを見せる場合などは少しは見やすくなるかもしれませんがね。
関連記事
jQuery UI Sortableを使ってドラッグ＆ドロップでリストを並び替える
Google+1ボタンがIEだと折り返して表示されることへの対処（暫定版）
Amebaに「なうで紹介」と「mixiチェック」ボタンを追加してみたよ
Amebloに設置していたツイートボタンをTwitter公式のものに変えました
AmebloのフリープラグインのJavaScriptをGoogle codeにホストしたよ
ReTweet数を表示できるTopsyブログパーツをAmebloに張ってみたよ
Amebaで任意の位置に自動でタグを挿入するブログパーツ書いたよ