折り畳む、文章を伸ばす JavaScript

スポンサーリンク

JavaScript(moreタグ)、で「うにょ〜」と伸びるように

シリンダーとキー アイコンWordPressには「続きを読む」とのタグがあって、それをクリックすると文章の続きが読めます。

デフォルトの設定では「続きを読む」をクリックすると、新たにフレームが立ち上がってそこに残りの文章が表示されます。

ただ、その方式だと文章が途中で途絶えるんですよね。検索エンジン経由でどこかの記事とかページ(WordPressにおける静的ページ)に当たると、検索した文字列の発見に手間取ります。

GoogleやYahoo!がどこかのページをキャッシュした時には全文になっています。ですから、検索した文字列もきちんと入っているのですがWordPressの場合は少々事情が異なります。

WordPressは閲覧者が訪れたり、ボタンを押した時点でデータベースから情報を書き出します。ですので、「続きを読む」の場合、ボタンを押した時点から再スタートになります。

デフォルトのままだと「別ページ」が開いて立ち上がることになります。

すると文字がハイライトされないことが多い。

ボタンを押した瞬間に新しく書き出す形式になりますので、ハイライトが消えてしまいます。

WordPressにおいて「続きを読む」を設定する場合には <More>というタグを埋めるだけなのでとても簡単なのですが・・・。たったそれだけで文章を短くすることが可能です。

ただし、だからこそ使い方が難しい。ユーザーが下にスクロールさせて読むのがが当たり前だと思っている人の場合、WordPressに備わっているデフォルトの機能<More>(続きを読む)を一度も使わないままサイトを構築しているケースもあります。

ですので「More? 続きを読むってなんじゃ?」と思ってる人も多いです。「いつ使うのか、何の役目があるのか?」と不思議に感じている方もいます。

HTMLからの移行、フレームの代わりに

Moreを押した瞬間に残りの文章をデータベースから書き出すのでHTMLの時とは微妙に異なります。

HTMLはどこにこういったボタンを埋めても、きちんと検索文字がハイライトされます。全文が固定ページとしてそこに存在していますので、データベースからの書き出しとは違い安定した動作になるのです。

もっとも、普通はそんなことはせずにフレームを用いると思いますが・・・。

私の以前のサイトも、メインフレームには下にスクロールさせる機能が付いていました。ジャバ・スクリプトを使って「折り畳む」方式は言わば、ブログにおいて発展した方法であって、一般的なHTMLの記述ではあまり導入している例はないですね。

ページをめくらせるか分割する、大量の文字とか文章の場合はサイト本体に細工をして「下スクロールフレームにする」のが一般的ではないか?と思います。

私も今回のWordPressへの移行に合わせてページを分割しようかとも思ったんですけどね。

ただ、少々困った問題もあります。私のサイトはかなり昔から運営をやってる関係で、検索エンジン(GoogleやYahoo!など)に大量にインデックス(登録)されています。

2010年1月の時点で、100ページ前後でしょうかね?

文言や文章を半分にするとか、いくつもに分割すると結果として検索結果とは違った内容を表示することになります。また、過去のテキストの購入者には「○○のコーナーを参照するように」との言葉もあります。

ページが細かく分割されてしまい、メールでの受け答えとかテキストに書いた内容と相違するようになったのでは読者とか購入者にわかりにくいかと思います。

データの引き継ぎというか検索エンジンのインデックスを、「次のページに」移すことも可能です。ですが、記述を分けてしまうと少々難しくなる。

AというデータをBとCに分割することになりますから・・・。一つのページが2つになってしまいます。巡回してくるクローラとかrobotにはヒット数を稼ぐためのスパムとかミラーとも受け取られかねないですね。

ですので、何か巧い方法はないか?と移転、リニューアルを前に探していました。

元は複数に渡るページでした

色々検索して探していた所、この「折り畳む」を改造して全文を短くする方法を発見しました。

今回はShow Hide “more” with WordPressってプラグインを用いています。

どうしてもこれが導入したくて・・・。私のサイトは長文が異様に多いですからね。

実は1ページの文章が長文になってしまったのにも、きちんと理由があります。

元々はワンコーナーとして書き上げた文章が多い。ですので当初は2、3ページとか5、6ページ、長いものは10ページにも渡って分割して書き上げられた文章だったのです。

ここは元々は1997年に開始されたサイトです。ですので通信環境もあまり良くはなく当初はアナログです。128(イチニッパ)どころか56kbpsだった時代もあるんですよ。

写真やアイコンどころか、文字の読み込みさえ遅かった時代があります。ですから読み込み速度を考えて写真は貼らないようにしていましたし、ページも細かく分割してありました。

それが始めてネットに繋ぐようになった人達にウケたわけですね。内容も大切ですが、読み込みに時間がかからないとか読みやすいような配慮も行っていましたから。

ところが、途中で回線のスピードは大幅に上がりました。と同時に私としても放置しておくわけにもいかず、サイトのリニューアルとか修正を手がけるようになった。

記述が複数に渡っているとCMS(コンテンツ・マネージメント・システム)においても不利になります。管理も大変になりますし、なにより検索した時に語句が引っかかりにくくなるのです。クローラとかrobotの仕様の問題です。

ですので、ワンコーナーはワンコーナーとしてひとまとめにし、一気に情報として載せてしまうほうがいいだろうと判断しました。

それで前サイトではフレームの採用です。下に向って本文がダラダラと長くなったのはそれが検索対策(SEO)と、これまでのコンテンツの整理を兼ねたものだったから(笑)。

おそらくですが、何も私の所が催眠や心理学のホームページとして「古いサイト」だから検索上位にいたのではないんですよ。外部リンクも殆どしていないのに上位になったのはそういう理由です。

そういった見に来る側へとかクローラへの配慮を行って来てくれる方が多くなったので、Yahoo!やGoogleに宣伝費を支払ってもいないのに上位にいたことになります。

設置でお世話になったサイトを

配布元の英文を読んでみたのですが使い方というか設置方法がよくわかりませんでした。

似たようなタイプのプラグインにExpand More Linkがあります。

※Expand More Linkは開発が止まってしまったため、公式サイトから削除されています。

Expand More Linkのほうが設置は簡単です。私の所では有効化するだけですぐに動きました。ただし、Expand More Linkは設置が簡単な分だけ動作も簡単で、ボタンを押した瞬間に一瞬で開きます。

「パカッと」瞬間的に開く。文字通り「畳む」というだけ。

一方、Show Hide “more” with WordPressのほうは開くスピードを調整できます。うにょ〜っというか比較的ゆっくり開きます。タイミングを調整できるので見た目が綺麗というか気に入ったんですよ(笑)。

単純な理由かも知れませんが。見た目ってのも結構大事。

これの導入を決めたのでWordPressへの移行に踏み切りました。

初心者向けに心構えとか注意点のコーナーで書きましたが、私の場合にはまず「長文の現在のコンテンツをどう移行、どう処理するか?」がありました。

それを考えて事前にこのプラグインを試し、その後で自分で使うテーマを決めています。

日本語でWordPressについて詳しく説明しているサイトに「小粋空間」さんがあります。

WordPress で「続きを読む」の折りたたみ Web2.0
WordPressで追記文章を書いた時、「続きを読む」のリンクをクリックすると、スライドダウンで本文下に続きを表示するカスタマイズをご紹介します。1.特徴JavaScriptエフェクトライブラ...

一応、リンクを貼っておきますのでこちらを参考にされてください。

プログラムやWordPressに関してはド素人でまだよくわかっていない私が延々、ここで説明を並べるよりもよほどわかりやすくてまとまっていると思います。

私と同じく英文を読んで理解できなかった方でも、この方の記述を読めばわかりやすいかと思います。この方の書いた丁寧な文章や解説、サイトを読んでもわからない方は導入を諦めてください。正直、そのレベルの方では改造や設置は難しいと思います。

私なりに、一部追加記述を

他人の解説したプラグインをそのまま載せてお終い、というのは何ですので、私なりに注意点とか一部追加記述を・・・。

小粋空間さんでも解説されていますが、一部の写真系プラグイン(lightbox2など)との組み合わせで巧く動きません。JavaScriptの記述が重なってしまうことで起こるエラーだと思います。

私はあっさり諦めて、別のプラグインに乗り換えました(笑)。私には直すためのスキルが足り無いんだもの。幸い、写真系のプラグインはたくさん出ていますので、JavaScriptが重複しないタイプを発見しました。

私の使っているのはWP-Slimbox2ですね。

WP-Slimbox2 Plugin
AWordPressimplementationoftheSlimbox2javascript.

5つか6つくらい似たようなプラグインがありますので、両方を利用したい方は各自で試してみてください。テーマや現時点でお使いになっているプラグインによって結果が異なります。

あと、私のように投稿記事ではなく「Page」(WordPressの静的ページ)に「続きを読む」を入れて折り畳む場合にはテーマに細工する必要があります。

WordPress Codex 日本語版 続きを読むをカスタマイズするに載せられている、「ページで続きを読むを使用する方法」などを参照してください。

私のpage.phpの中にはこういった記述があります。

page.php 参考例
<?php global $more; $more= 0; ?>
<?php the_content('Read More >>'); ?>

私の使っているテーマではこれで無事に動作しています。Page(ページ)で使われているテンプレートに適用しないとうまく動作しませんのでご注意ください。

追記(2010/07-21)

検索ワードの解析で見てみると、折りたたんだ文章が「検索エンジン、Googlebotに認識してもらえないのではないか?」と心配している人がたどり着いています。

Show Hide “more” with WordPressを使った場合、検索エンジンにはきちんと引っかかります。

WordPressの仕様で「文章を折り畳む」(デフォルトのMoreタグを埋めた場合)の場合には別窓が開きます。ですから検索エンジンはその仕様上、それを「別のページ」と判断してしまいます。

Show Hide “more” with WordPressを用いた場合は全文が「下に」に伸びる形で収納されています。 ですからクリックしたことで「別のページ」が開いたことにはならず、カウンターも増えません。

検索にも載りますし、キャッシュを許可した場合には「続きを読む」ボタンまでが再現されます。 ジャバスクリプトですからね(笑)。別窓を開くデフォルトより検索上は有利かもしれないです。

更に追記(2017/11/29)

more(モア)タグを使っているとプラグインに不具合が起きやすくなっているため、現時点では全て外しています。代わりにmoreタグを使って「Amazonアドセンス」の広告を表示する改造を施しています。

2010年01月09日
2017年11月29日

谷口信行

超合金Zへ戻る