カテゴリ:Javascript小技 2008年3月17日 10:17
ちょっとした不具合があったので修正しました(;´д`)(2008/03/17 21:33現在)
ページをやたらと細切れにして PV 数を稼ごうとするメディアサイトの問題と解決策 | Web担当者Forumの記事受けて、ページ分割を簡単に実装できる JavaScript を作ってみました。
使い方はとても簡単で、分割したい要素にクラス名を追加するだけです。
※Javascriptオフの場合は、分割をなくしてすべてを表示します。
以下、使い方を。
▼EntryMore▼
スクリプトファイルを読み込みます。js ファイル、CSS ファイルへのパスは保存先のものに変更してください。
上記スクリプトの読み込みのあとに、この分割処理の実行部分を挿入します。
この処理により、ページンググループに設定されている要素を分割し、ページングを挿入します。
1 ページに表示したい部分を div 要素で囲い、クラス名に "paraGroup" を追加します。
(ex. <div class="paraGroup">)
分割したい要素すべてに、クラス名 "paraGroup" をつけてください。
この "paraGroup" が設定されている要素を分割し表示します。
上記タグを挿入することで、そのタグの個所にページングを挿入します。
また、追加したタグ分、自動でページングを挿入しますので、
例えば、コンテンツが長い場合に、コンテンツの上下にページングを埋め込むことも可能です。
▼追加されるページングサンプル

(※サンプルにある CSS を編集することでカスタマイズが可能です)
一番左と一番右にある矢印は、設定された表示ページ数よりページ数が多い場合に表示されます。
これをクリックすることで 10 ページ目以降のページ処理が表示されます。(※サンプルの場合)
上記のソースを任意の場所に挿入してください。
JavaScript オフで閲覧している場合は、自動的に非表示の部分を表示します。
「pini.ini();」のカッコ内に数字を入れることで、ページングの最大表示数を設定できます。
(※デフォルト値は 10 です)
この記事のカテゴリー一覧を見る⇒Javascript小技
トラックバックURL
コメント
1 - kenta さん
はじめまして、便利なjavascriptだなーと思って見せていただきました。
一つ疑問に思ったのでコメントさせて頂きます。
サンプルはこちらの~/paging/というアドレスにアクセスするとページングメニューが表示されないのですが、これは~/paging/#no○とするのがデフォルトの設定なのでしょうか?
お手数ですが、ご回答頂けたら嬉しいです。よろしくお願いいたします。
2008年9月24日 13:58
2 - えど
さん
>>1 - kentaさん
コメントありがとうございます!
そして、ご指摘ありがとうございました。
すみません、その動作は不具合です;
ですので、特にNo.の指定がなくても
自動で1ページ目を表示するように修正しました。
2008年9月25日 00:51
3 - kenta さん
修正ありがとうございます。
上手に使えたら日記ページなどにも利用できそうなので楽しみです。
これからもこちらのブログで勉強させてください。
また、何かありましたらよろしくお願いします。
2008年9月25日 02:52
4 - ひろと さん
はじめまして。
ページングテンプレートを探していてこちらにたどり着きました。
見たとき、これだ!と思って自サイトにとりつけたのですが、いざページを
指定すると上から100pxほど、もしくはparaGroupのてっぺんで表示されます。
ページの最初の部分から表示させたいのですが、ソースを見ても皆目わからず・・・。
もしよろしければ、どこを触ればいいのかだけでもご回答願えたらと思います。
2008年12月 3日 19:41
5 - えど
さん
>>4 - ひろとさん
コメントありがとうございます。
えぇと、コメントだけでは状況が分からないので、
可能でしたら、サイト一番下にある問い合わせ用の
メールアドレスからアップ先のURLか
キャプチャ画像などをいただけないでしょうか?
(できれば問題の起きているURLを見せていただけると
解決が早いかと思います)
2008年12月 4日 21:51
6 - ひろと さん
お返事ありがとうございます。
HP作成を始めたばかりの模索中サイトで、お恥ずかしいのですが
URLはこちらになります。
[URLは管理人が削除しました]
他にページングを施しているところもこんなものです。
申し訳ありませんが、よろしくお願いいたします。
あと、よろしければ、上記URLは参考になさったあとは消して下さればと
思います。
2008年12月 4日 22:41
7 - えど
さん
>>6 - ひろとさん
URL拝見しました。
が、ちょっと言われている内容が把握できませんでした;
使用しているブラウザはIE6でしょうか?
ちなみに、こちらで確認したところ
Firefoxではiframeの(写真リスト)ところのサイズが
とても小さくなってしまっているようです。
IEでも確認しましたが、
問題があるように見受けられませんでした・・。
(なにが正解で、どこに問題があるのか、
比較できないのでなんともいえませんが・・)
もし、それ以外のブラウザを使用しているようであれば
そのブラウザ名を教えてもらえますか?
2008年12月 5日 01:03
8 - ひろと さん
URLの削除、ありがとうございました。
おっしゃるとおり、IE6を使っています。(WIN2000)
自分のPCが古いせいかなとネットカフェのIE7(XP)ので見たところ
問題の内容も似たようなものでしたが・・・あらら。
お手数をおかけして申し訳ありません。
2008年12月 5日 21:36
9 - ひろと さん
何度も申し訳ありません。
Firefox 、Operaと対応させましたがやはり、以前言っていた症状がでるようです。
ページが画面よりも長くなったときののような。
はずしてしまったので言える立場ではないんですが、一応報告をいたします。
2008年12月30日 20:50
10 - えど
さん
>>9 - ひろと さん
どもです。
前のコメントでも書きましたが、「正しい」状態がこちらではわからないので
(ずれていても、それが正しいのかずれているのかの判断ができないため)
どういう状況なのか分かりかねました;
以前ではFirefoxで見たときにレイアウトが崩れていたので
もしかしたらなにかしらのCSSがぶつかったりして
レイアウトが崩れていたのかもしれません。
2008年12月31日 00:50
11 - haru さん
はじめまして^^
ページ分割をダウンロードさせていただきました。
ありがとうございます。
CSSファイルにイメージも入っていますが、そのままでいいのですか?
指定のデレクトリィーでパスしていますが、表示されません。
テストページを上げていますので、確認して頂いても良いでしょうか^^;
[管理人削除]
URLの削除お願いしますね。
間違っているとおもいますので、ご指導のほどお願いします。
2009年6月 9日 20:01
12 - えど
さん
>>11 - haruさん
コメントありがとうございます(*'-')
なにも変更を加えない場合は、そのままアップしてもらい、
それを使ってもらえば正常に動くはずです。
連絡いただいたサイトを拝見したところ
どうやらJavaScriptファイル内の日本語が文字化けしているために
エラーが起きているようでした。
日本語のコメントを削除したものをアップしなおしましたので
再度ダウンロードしてもう一度試してもらえますか?
(ちなみに、ダウンロードしたもののJSファイル内に日本語がある場合は
キャッシュの問題かもしれないので、何度かダウンロードをやり直してみてください)
2009年6月10日 00:10
13 - haru さん
お返事ありがとうございます。^^
再度ダウンロードしてもう一度試してみましたが
表示されませんでした。
SCC JSは、読み込んでると思うんですけど
booy無いのHTMLの書き込みが間違っているのでしょうか?
HTMLのソースも(えどさん)サンプルページのソースをコピーしたんですけどね^^;
端に青い線は、画像の一部のように思うんですが?
僕が根本的に、間違った事をしてるように思います。
ソースの書き込み間違っていませんでしたか??
2009年6月10日 12:25
14 - えど
さん
>>13 - haruさん
うーん、ダメでしたか・・。
サイトを見てみたんですが、どうも、そもそも JS が実行されてないのかな?
という印象を持ちました。
色々とテストしてみないと分かりませんが、
ページング実行の「pini.ini();」の後あたりに
「alert( pini );」とかを追加して
pini がオブジェクトになっているか、
またアラートが表示されるかを確認してもらえますか?
もしアラートが出ない場合は
おそらくページングの処理そのものが実行されていません。
それからタイトル左側の青いバーは paging.css 内のものですね・・。
組み込みを考えると適切ではなかったですね。
こちらについては修正しておきます。すみません。
2009年6月10日 13:08
15 - haru さん
ご迷惑お掛けしています。^^;
「alert( pini );」追加しましたが、表示されませんね。
デモでは、動いてるのに・・
僕のソースの書き間違いかなぁ~(>_<)
CSSフアイルの中にいくつかのCSSがありますがファイル内で
イイですよね。(^_^.)
2009年6月10日 23:05
16 - えど
さん
>>15 - haruさん
やっぱり・・。
prototype.js とかでエラーが出ていたので
もしかしたら全体的になにかエラーが起きているのかもしれません。
Firebugとかは使われていますか?
JavaScript のデバッグがとても楽になるのでおすすめですよ。
ちなみに
>CSSフアイルの中にいくつかのCSSがありますがファイル内でイイですよね。(^_^.)
というのがちょっとわからないのですが(;´Д`)
ダウンロードした CSS ファイルを全部読み込む必要がありますか?ってことですか?
いちおう paging 用に読み込ませる CSS ファイルなど
分かりやすいように編集したものをアップしなおしました。
css フォルダ内に images フォルダができているのが最新です。
そちらに入っている paging.css を使ってもらうと
左側のブルーの border が表示されなくなるはずです。
(読み込むのは paging.css のみで大丈夫です)
2009年6月11日 11:16
17 - haru さん
エラーですか・・^^;
CSS件了解しました。
Firebugってなんですか?すみません。
詳しくなくて、良ければ教えて頂けますか(^_^.)
2009年6月11日 22:41
18 - えど
さん
>>17 - haruさん
Firebug というのは、Firefox のアドオンです。
インストールすると、閲覧中の HTML や CSS、JavaScript など
あらゆる要素を見ることができます。
さらに HTML の編集や CSS の適用・不適用や
新しいスタイルの追加、なんかもサイトを見ながらできてしまいます。
(操作できるだけで再読み込みしたら元に戻っちゃいますが)
なので自分でサイトを制作しているときなんかでも
例えば position の left や top などを調整するときなどもとても役に立ちます。
日本語のサイトもあるので一度見てみると分かるかと思います↓
http://getfirebug.com/jp.html
2009年6月12日 09:55
19 - haru さん
Firebug件^^
確認しましたよ。
色々と便利なサイトがあるんですね。ぜんぜん知りませんでした。^^;
ところで・・気になっています。↓
【手軽に画像のロールオーバー効果を実装するJavaScript】
ロールオーバーは、僕のサイトでも使っているのですが、
やたら・・ソースは入ってくるので、気になっていたところです。
※手軽に画像のロールオーバー効果を実装するJavaScriptの
ソースは、シンプルでいいですね。
HTMLのソースですが、指定は、通常使う画像一枚だけでいいんですか?
オーバー画像書き込みはしなくていいですか?
body内のクラスのソース教えて下さい。
時間のある時で構いませんので宜しくお願いします。
2009年6月14日 12:55
20 - えど
さん
>>19 - haruさん
Firebug はほんと便利ですよー。
むしろそれがないと制作スピードが半減しますw
「手軽に画像のロールオーバー効果を実装するJavaScript」は、
他のものと同様に通常時とロールオーバー時のふたつの画像が必要です。
画像の差し替えをせず、ただ単にロールオーバーのエフェクトだけを
実装したい場合は、以下の記事が役に立つかもしれません。
▼マウスオーバー時に、レイアウトを崩さずに画像にborderを表示するテクニック
http://css-eblog.com/csstricks/mouseover-border-effect.html
それから、この記事の本題から外れた質問に関しては
このサイトのメニューにある「お問合せ」から連絡を頂けると助かります。
2009年6月15日 09:52