- 1 - - 2 - - 3 - - 4 - - 5 - - 6 - - 7 - - 8 - - 9 - - 10 - - 11 -
- 1 - - 2 - - 3 - - 4 - - 5 - - 6 - - 7 - - 8 - - 9 - - 10 - - 11 -
無限スクロールとは、ページの下部までスクロールすると自動的に新しい要素が追加される機能のこと。TwitterなどのSNSのタイムラインを初めとして様々なウェブサイトで使われているが、いくつかの問題点も指摘されている。 無限スクロールのよく知られた問題点と、それに対する解決方法をまとめた。 別のページに移動してから戻ると継ぎ足しがリセットされる リンクがクリックされたときは常に新しいウィンドウを開くようにしたり、 Lightboxのようなモーダルな擬似ウィンドウをページ内に開いたりすることで、ページの遷移そのものを抑制するという方法がある。 また、次の項目で紹介する「History APIでURLを書き換える」という方法を使えば、読み進んだ位置は復元される。 permalinkが取れない 同じページに次々と新しい内容が継ぎ足されていくので、いま自分が見ているページのURLが分からないという問
[対象: 上級] Googleは英語版ウェブマスター向け公式ブログで、検索エンジンが処理しやすい無限スクロール(Infinite Scroll)の推奨構成を説明しました。 細かな話は後回しにして、その推奨構成をさっそく日本語で紹介します。 なお逐一の訳ではなく、理解しやすくするために表現や構成を原文とは多少変えてあります。 構成の概要 無限スクロールからリンクされている個々のアイテム(記事やコンテンツなど)を検索エンジンが確実にクロールできるように、利用しているシステムが、無限スクロールとともにページネーションしたページも作成できるように必ずしておく(無限スクロールで、1つのURLに収めるのではなく、分割して複数のページに分けるということ)。 ※拡大画像はオリジナルのURLで表示します(もう1つの画像も同様) 無限スクロールは、分割したページに変換されることで検索エンジンが処理しやすくなる
これまでページ送りはサーバ側で行ってきたが、選択されたページ番号ごとの処理が新たなリクエストになり処理の度に項目数をカウントすることにならざるを得ない。 新たなリクエストに項目数などの情報をクッキーやGETリクエストのパラメータで引き継ぐことをすればよいのだが、ページ送りのためだけに大掛かりなことはしたくない。いろいろと調べているとJavaScriptを使えば端末側でページ送りができるので早速試してみた。 使ったのは、jquery pagination Plugin。 準備はjquery pagination Pluginに含まれるjquery.pagination.jsとpagination.cssを適当なフォルダーに入れておく。 ページ送りは全項目分のコンテンツを用意しておき、jquery.pagination.jsを使うことにより、ページ選択と必要項目の表示をしてくれる。それぞれの項
使用するリソース jQuery jquery.pagination.js pagination.css (ナビゲーションのデザインファイル) head要素への記入 <script language="javascript" type="text/javascript" src="フォルダ名/jquery.js"></script> <script language="javascript" type="text/javascript" src="フォルダ名/jquery.pagination.js"></script> <script type="text/javascript"> function pageselectCallback(page_index, jq){ var new_content = jQuery('#hiddenresult div.result:eq('+page
PHPのPEARライブラリにはページング機能を実装するPagerクラスがあります。Googleの検索ページでは、ヒット数が多くて最初のページに載せきれない結果を、複数ページに渡って表示していますが、Pagerクラスを使えばそれと同じことを実現することができます。 前回PHPとjQueryで連携して作成したページナビを紹介しましたが、今回そのスクリプトを公開します。 ⇒PHPとjQueryによるビッグサイズのページナビ ファイル構成 jquery.php-pagination/ | |―――――|――――――――――――――| | | | index.php css js | | jquery.php-pagination.css jquery.php-pagination.js jquery.php-
WordPressでは多くのページネーションを実装するプラグインがありますが、使用しているテーマにあったデザインで機能も必要なものだけにできるように、プラグイン無しでページネーションを設置する方法を紹介します。 How to build a WordPress Post Pagination without plugin [ad#ad-2] ここでは上記元記事で紹介されているものをノーマル版とし、コメントで投稿されている拡張版の二つを紹介します。 Pagination without plugin:ノーマル版 Pagination without plugin:拡張版 Pagination without plugin:ノーマル版 How to build a WordPress Post Pagination without plugin PHP テーマファイル内の「fuction.ph
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く