Suche senden
Hochladen
WordPress プラグイン Infinite Scroll を試してみた
•
Als KEY, PDF herunterladen
•
6 gefällt mir
•
8,067 views
Yuji Nojima
Folgen
2012年10月開催の WordBench 神戸での発表資料です。シェアするにあたって、発表時とはタイトルのみ変更させて頂いています。
Weniger lesen
Mehr lesen
Melden
Teilen
Melden
Teilen
1 von 76
Jetzt herunterladen
Empfohlen
WordPressプラグイン Jetpack って何だ?!
WordPressプラグイン Jetpack って何だ?!
Yuji Nojima
Wp プラグインapiから理解するword press.share
Wp プラグインapiから理解するword press.share
Yuji Nojima
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
Yuji Nojima
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
Yuji Nojima
BuddyPressで街のポータルサイトを作ろう
BuddyPressで街のポータルサイトを作ろう
松田 千尋
Word press初心者が 基本アーキテクチャを ざっくりと学ぶ
Word press初心者が 基本アーキテクチャを ざっくりと学ぶ
climbFrog
デザイナーのためのはじめてPHP ~Codex、どう使いこなす?~
デザイナーのためのはじめてPHP ~Codex、どう使いこなす?~
takenao
WordPressプラグイン作成入門
WordPressプラグイン作成入門
Yuji Nojima
Empfohlen
WordPressプラグイン Jetpack って何だ?!
WordPressプラグイン Jetpack って何だ?!
Yuji Nojima
Wp プラグインapiから理解するword press.share
Wp プラグインapiから理解するword press.share
Yuji Nojima
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
Yuji Nojima
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
Yuji Nojima
BuddyPressで街のポータルサイトを作ろう
BuddyPressで街のポータルサイトを作ろう
松田 千尋
Word press初心者が 基本アーキテクチャを ざっくりと学ぶ
Word press初心者が 基本アーキテクチャを ざっくりと学ぶ
climbFrog
デザイナーのためのはじめてPHP ~Codex、どう使いこなす?~
デザイナーのためのはじめてPHP ~Codex、どう使いこなす?~
takenao
WordPressプラグイン作成入門
WordPressプラグイン作成入門
Yuji Nojima
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
rie05
HTML5 アプリ開発
HTML5 アプリ開発
tomo_masakura
Pinoco phptal-phpcon-kansai
Pinoco phptal-phpcon-kansai
Hisateru Tanaka
プラグイン公開までの道のり
プラグイン公開までの道のり
Takami Kazuya
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
Go Imai
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Fumio SAGAWA
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
tomo_masakura
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
HTML5 のお話
HTML5 のお話
tomo_masakura
WordPress 多言語化プラグインqTranslateの紹介
WordPress 多言語化プラグインqTranslateの紹介
Takashi Uemura
120225 bootstrap
120225 bootstrap
TechGardenSchool
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
Tsuyoshi.
Bootstrap
Bootstrap
kenji goto
HTML5 入門
HTML5 入門
NOAN
20120915 Pythonは本当にBlenderの役に立っているか?
20120915 Pythonは本当にBlenderの役に立っているか?
Tetsuo Mitsuda
WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪
WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪
Chieko Aihara
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
Masakazu Muraoka
短期間+大規模ゲーム開発でも破綻しないHTML・SCSS
短期間+大規模ゲーム開発でも破綻しないHTML・SCSS
Shogo Iwano
非エンジニア向けHTML勉強会その1
非エンジニア向けHTML勉強会その1
Karino Kyohei
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
yoshikawa_t
Chromeでjavascriptデバッグ!まず半歩♪
Chromeでjavascriptデバッグ!まず半歩♪
Yuji Nojima
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会
Yuji Nojima
Weitere ähnliche Inhalte
Was ist angesagt?
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
rie05
HTML5 アプリ開発
HTML5 アプリ開発
tomo_masakura
Pinoco phptal-phpcon-kansai
Pinoco phptal-phpcon-kansai
Hisateru Tanaka
プラグイン公開までの道のり
プラグイン公開までの道のり
Takami Kazuya
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
Go Imai
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Fumio SAGAWA
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
tomo_masakura
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
HTML5 のお話
HTML5 のお話
tomo_masakura
WordPress 多言語化プラグインqTranslateの紹介
WordPress 多言語化プラグインqTranslateの紹介
Takashi Uemura
120225 bootstrap
120225 bootstrap
TechGardenSchool
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
Tsuyoshi.
Bootstrap
Bootstrap
kenji goto
HTML5 入門
HTML5 入門
NOAN
20120915 Pythonは本当にBlenderの役に立っているか?
20120915 Pythonは本当にBlenderの役に立っているか?
Tetsuo Mitsuda
WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪
WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪
Chieko Aihara
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
Masakazu Muraoka
短期間+大規模ゲーム開発でも破綻しないHTML・SCSS
短期間+大規模ゲーム開発でも破綻しないHTML・SCSS
Shogo Iwano
非エンジニア向けHTML勉強会その1
非エンジニア向けHTML勉強会その1
Karino Kyohei
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
yoshikawa_t
Was ist angesagt?
(20)
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
HTML5 アプリ開発
HTML5 アプリ開発
Pinoco phptal-phpcon-kansai
Pinoco phptal-phpcon-kansai
プラグイン公開までの道のり
プラグイン公開までの道のり
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
HTML5 のお話
HTML5 のお話
WordPress 多言語化プラグインqTranslateの紹介
WordPress 多言語化プラグインqTranslateの紹介
120225 bootstrap
120225 bootstrap
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
Bootstrap
Bootstrap
HTML5 入門
HTML5 入門
20120915 Pythonは本当にBlenderの役に立っているか?
20120915 Pythonは本当にBlenderの役に立っているか?
WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪
WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
短期間+大規模ゲーム開発でも破綻しないHTML・SCSS
短期間+大規模ゲーム開発でも破綻しないHTML・SCSS
非エンジニア向けHTML勉強会その1
非エンジニア向けHTML勉強会その1
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
Andere mochten auch
Chromeでjavascriptデバッグ!まず半歩♪
Chromeでjavascriptデバッグ!まず半歩♪
Yuji Nojima
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会
Yuji Nojima
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
旧)宣伝費ゼロで累計200万DLに至った経緯 - 写真加工スマホアプリMy Heart Camera と Pico Sweet
旧)宣伝費ゼロで累計200万DLに至った経緯 - 写真加工スマホアプリMy Heart Camera と Pico Sweet
Ryo Kawanobe
LESS使ってますか?
LESS使ってますか?
じゅん なかざ
Sass実践編+Compass入門
Sass実践編+Compass入門
Yoshiya OKI
IonicFrameworkをつかってSalesforce1アプリの開発をしよう
IonicFrameworkをつかってSalesforce1アプリの開発をしよう
Taiki Yoshikawa
Sass勉強会 - メジャーなCSS設計紹介とDocBaseのCSS
Sass勉強会 - メジャーなCSS設計紹介とDocBaseのCSS
Asami Kamei
PHPUnit でよりよくテストを書くために
PHPUnit でよりよくテストを書くために
Yuya Takeyama
Tensorflowのチュートリアルで理解するdeep learningはじめてハンズオン
Tensorflowのチュートリアルで理解するdeep learningはじめてハンズオン
健一 茂木
これからのpre_get_postsの話をしよう
これからのpre_get_postsの話をしよう
Hishikawa Takuro
Sass超入門
Sass超入門
Mizuno Renya
Andere mochten auch
(12)
Chromeでjavascriptデバッグ!まず半歩♪
Chromeでjavascriptデバッグ!まず半歩♪
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
旧)宣伝費ゼロで累計200万DLに至った経緯 - 写真加工スマホアプリMy Heart Camera と Pico Sweet
旧)宣伝費ゼロで累計200万DLに至った経緯 - 写真加工スマホアプリMy Heart Camera と Pico Sweet
LESS使ってますか?
LESS使ってますか?
Sass実践編+Compass入門
Sass実践編+Compass入門
IonicFrameworkをつかってSalesforce1アプリの開発をしよう
IonicFrameworkをつかってSalesforce1アプリの開発をしよう
Sass勉強会 - メジャーなCSS設計紹介とDocBaseのCSS
Sass勉強会 - メジャーなCSS設計紹介とDocBaseのCSS
PHPUnit でよりよくテストを書くために
PHPUnit でよりよくテストを書くために
Tensorflowのチュートリアルで理解するdeep learningはじめてハンズオン
Tensorflowのチュートリアルで理解するdeep learningはじめてハンズオン
これからのpre_get_postsの話をしよう
これからのpre_get_postsの話をしよう
Sass超入門
Sass超入門
Ähnlich wie WordPress プラグイン Infinite Scroll を試してみた
HTML5+wordpressで電子書籍
HTML5+wordpressで電子書籍
Wataru Asai
AmazonElasticBeanstalk
AmazonElasticBeanstalk
Taisuke Oe
Djangoのススメ
Djangoのススメ
Alisue Lambda
MetroStyleAppsさわってみた わんくま
MetroStyleAppsさわってみた わんくま
c-mitsuba
Django ORM道場:クエリの基本を押さえ,より良い形を身に付けよう
Django ORM道場:クエリの基本を押さえ,より良い形を身に付けよう
Takayuki Shimizukawa
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
アプリリリース後に後悔しないための20のこと
アプリリリース後に後悔しないための20のこと
leverages_event
Css nite(2010.09.23)
Css nite(2010.09.23)
Yoshiki Ushida
Chrome-eject がこの先生きのこるには
Chrome-eject がこの先生きのこるには
Yosuke HASEGAWA
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Takuma Nishiyama
20110824 gatracker-final
20110824 gatracker-final
susumukatachi
WordBench Nagoya 201601
WordBench Nagoya 201601
kuma2515
Chrome Packaged Apps
Chrome Packaged Apps
Ryoya Kawai
初心者向けAndroidゲーム開発ノウハウ
初心者向けAndroidゲーム開発ノウハウ
Kentarou Mukunasi
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Maaya Ishida
空のテンプレートから始めるWindows 8 ストアアプリ
空のテンプレートから始めるWindows 8 ストアアプリ
Akira Hatsune
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
Osamu Shimoda
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
FLOW web planning & design
スマホにおけるWebGL入門
スマホにおけるWebGL入門
Yohta Kanke
Ähnlich wie WordPress プラグイン Infinite Scroll を試してみた
(20)
HTML5+wordpressで電子書籍
HTML5+wordpressで電子書籍
AmazonElasticBeanstalk
AmazonElasticBeanstalk
Djangoのススメ
Djangoのススメ
MetroStyleAppsさわってみた わんくま
MetroStyleAppsさわってみた わんくま
Django ORM道場:クエリの基本を押さえ,より良い形を身に付けよう
Django ORM道場:クエリの基本を押さえ,より良い形を身に付けよう
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
アプリリリース後に後悔しないための20のこと
アプリリリース後に後悔しないための20のこと
Css nite(2010.09.23)
Css nite(2010.09.23)
Chrome-eject がこの先生きのこるには
Chrome-eject がこの先生きのこるには
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
20110824 gatracker-final
20110824 gatracker-final
WordBench Nagoya 201601
WordBench Nagoya 201601
Chrome Packaged Apps
Chrome Packaged Apps
初心者向けAndroidゲーム開発ノウハウ
初心者向けAndroidゲーム開発ノウハウ
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
空のテンプレートから始めるWindows 8 ストアアプリ
空のテンプレートから始めるWindows 8 ストアアプリ
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
スマホにおけるWebGL入門
スマホにおけるWebGL入門
WordPress プラグイン Infinite Scroll を試してみた
1.
Infinite Scroll を試してみた
オートページローディング
2.
自己紹介 ‣ ノジマユウジ
‣ プログラムが好き @yuka2py ‣ PythonとJavascriptが ‣ 株式会社フォーエンキー 大好き♪ 代表 ‣ おしゃれも大好き☆ ‣ システム開発、 グラフィックデザイン、 ‣ リボンやお花が好き☆ DTPや印刷など
3.
自己紹介 ‣ ノジマユウジ
‣ プログラムが好き @yuka2py ‣ PythonとJavascriptが ‣ 株式会社フォーエンキー 大好き♪ 代表 ‣ おしゃれも大好き☆ ‣ システム開発、 グラフィックデザイン、 ‣ リボンやお花が好き☆ DTPや印刷など
4.
自己紹介 ‣ ノジマユウジ
‣ プログラムが好き @yuka2py ‣ PythonとJavascriptが ‣ 株式会社フォーエンキー 大好き♪ 代表 ‣ おしゃれも大好き☆ ‣ システム開発、 グラフィックデザイン、 ‣ リボンやお花が好き☆ DTPや印刷など (´∀`〃)ゝ
5.
最近のオレ
Py 2% GraphicDesign iOS 14% お嫁 3% Windows(C#) Android お嫁 We b ( P H P / J S ) 7% Android 46% iOS Web(PHP/JS) GraphicDesign Py 9% Windows(C#) 19% 2012年10月13日 株式会社フォーエンキー調べ
6.
オートページローディングとは?
7.
オートページローディングとは? ‣ スマートフォンとかで、よくあるUI
8.
オートページローディングとは? ‣ スマートフォンとかで、よくあるUI ‣ 下の方までスクロールしたら、
9.
オートページローディングとは? ‣ スマートフォンとかで、よくあるUI ‣ 下の方までスクロールしたら、 ‣
自動で次のページのロードが開始され、
10.
オートページローディングとは? ‣ スマートフォンとかで、よくあるUI ‣ 下の方までスクロールしたら、 ‣
自動で次のページのロードが開始され、 ‣ ぐるぐるぐるーっと回ったりして、
11.
オートページローディングとは? ‣ スマートフォンとかで、よくあるUI ‣ 下の方までスクロールしたら、 ‣
自動で次のページのロードが開始され、 ‣ ぐるぐるぐるーっと回ったりして、 ‣ 現在のページに追加して表示されるやつ。
12.
オートページローディングとは? ページの一番下でこんなんなって
13.
オートページローディングとは?
続き記事が追加されるアレです
14.
実現する方法
15.
実現する方法 ‣ WordPressのプラグインでやっちゃう (́
`〃)ゝキャハ
16.
実現する方法 ‣ WordPressのプラグインでやっちゃう (́
`〃)ゝキャハ ● WP-AutoPager http://wppluginsj.sourceforge.jp/wp-autopager/
17.
実現する方法 ‣ WordPressのプラグインでやっちゃう (́
`〃)ゝキャハ ● WP-AutoPager http://wppluginsj.sourceforge.jp/wp-autopager/ ● Infinite Scroll http://www.infinite-scroll.com/
18.
実現する方法 ‣ WordPressのプラグインでやっちゃう (́
`〃)ゝキャハ ● WP-AutoPager http://wppluginsj.sourceforge.jp/wp-autopager/ ● Infinite Scroll http://www.infinite-scroll.com/ ‣ jQueryのプラグインでやっちゃう (`・ω・́)ノ
19.
実現する方法 ‣ WordPressのプラグインでやっちゃう (́
`〃)ゝキャハ ● WP-AutoPager http://wppluginsj.sourceforge.jp/wp-autopager/ ● Infinite Scroll http://www.infinite-scroll.com/ ‣ jQueryのプラグインでやっちゃう (`・ω・́)ノ ● jQuery.autopager http://lagoscript.org/jquery/autopager
20.
実現する方法 ‣ WordPressのプラグインでやっちゃう (́
`〃)ゝキャハ ● WP-AutoPager http://wppluginsj.sourceforge.jp/wp-autopager/ ● Infinite Scroll http://www.infinite-scroll.com/ ‣ jQueryのプラグインでやっちゃう (`・ω・́)ノ ● jQuery.autopager http://lagoscript.org/jquery/autopager ‣ 修行だと思って全部自分で作ってみる (,,・`_́・)、キリッ
21.
実現する方法 ‣ WordPressのプラグインでやっちゃう (́
`〃)ゝキャハ ● WP-AutoPager http://wppluginsj.sourceforge.jp/wp-autopager/ ● Infinite Scroll http://www.infinite-scroll.com/ 今回はコチラ ‣ jQueryのプラグインでやっちゃう (`・ω・́)ノ ● jQuery.autopager http://lagoscript.org/jquery/autopager ‣ 修行だと思って全部自分で作ってみる (,,・`_́・)、キリッ
22.
Infinite Scroll を試した理由 ‣
WordPress なので、プラグイン使いたい ‣ WP-AutoPager は、プラグインディレク トリに無かった(たぶん) ‣ Infinite Scroll の方が高機能っぽかった
23.
インストール 1. 管理画面から、
[プラグイン] > [新規追加]
24.
インストール 1. 管理画面から、
[プラグイン] > [新規追加] 2. 検索結果から、 [いますぐインストール]
25.
設定画面 • 管理画面から [設定] >
[Infinite Scroll] で設定画面へ
26.
設定画面 • 管理画面から [設定] >
[Infinite Scroll] で設定画面へ
27.
全般設定(1)
28.
全般設定(1) タブが2つ
29.
全般設定(1) 全般的な設定
30.
全般設定(2)
31.
全般設定(2) プラグインの有効範囲
OFF 管理者以外ON 管理者のみON 全員ON
32.
全般設定(2) プラグインの有効範囲
OFF 管理者以外ON 管理者のみON 全員ON デバッグモードのON/OFF Javascript Console にログが出る。便利
33.
全般設定(3)
34.
全般設定(3) 続きのページを<自動>で読み込むか 続きのページを<手動>で読み込むか
35.
全般設定(4)
36.
全般設定(4) 続きの記事を読み込んだ後に、 実行したい Javascript を書く
37.
全般設定(4) 続きの記事を読み込んだ後に、 実行したい Javascript を書く
ページ読み込み完了後の フラッシュとか?
38.
全般設定(5)
39.
全般設定(5) ローディング中に表示する画像を変更できる
40.
全般設定(5) ローディング中に表示する画像を変更できる
デフォルトはこんな画像
41.
全般設定(6)
42.
全般設定(6) ローディング画像の位置
43.
全般設定(7)
44.
全般設定(7)
ローディング中のテキスト
45.
全般設定(7)
ローディング中のテキスト もう記事が無い時のテキスト
46.
全般設定(7)
ローディング中のテキスト 編集出来ます もう記事が無い時のテキスト 編集出来ます
47.
セレクタの設定(1)
48.
セレクタの設定(1)
49.
セレクタの設定(1) セレクタ設定
50.
セレクタの設定(1)
実は セレクタ設定 こちらが 重要
51.
セレクタの設定(1)
実は セレクタ設定 こちらが 重要 テーマのHTML構造に合わせて、 うまく設定しないとちゃんと動かない!
52.
セレクタの設定(2)
53.
セレクタの設定(2) 記事全体を囲むブロックを特定するCSSセレクタ
54.
セレクタの設定(2) 記事全体を囲むブロックを特定するCSSセレクタ 個別の記事ブロックを特定するCSSセレクタ
55.
セレクタの設定(3)
56.
セレクタの設定(3) ナビゲーションブロックを特定するセレクタ
57.
セレクタの設定(3) ナビゲーションブロックを特定するセレクタ 次ページへのリンク(aタグ)を特定するCSSセレクタ
58.
実際にやってみます (実演)
59.
カスタマイズのヒント
60.
カスタマイズのヒント ‣ 特定のページに適用するには?
61.
カスタマイズのヒント ‣ 特定のページに適用するには? ●
Navigation Selector を工夫する
62.
カスタマイズのヒント ‣ 特定のページに適用するには? ●
Navigation Selector を工夫する ● 例) body.category-A #navigation-block
63.
カスタマイズのヒント ‣ 特定のページに適用するには? ●
Navigation Selector を工夫する ● 例) body.category-A #navigation-block ‣ カテゴリやページ毎に異なる読み込み方をさせたい
64.
カスタマイズのヒント ‣ 特定のページに適用するには? ●
Navigation Selector を工夫する ● 例) body.category-A #navigation-block ‣ カテゴリやページ毎に異なる読み込み方をさせたい ● それはHTMLとCSSで出来る
65.
カスタマイズのヒント ‣ 特定のページに適用するには? ●
Navigation Selector を工夫する ● 例) body.category-A #navigation-block ‣ カテゴリやページ毎に異なる読み込み方をさせたい ● それはHTMLとCSSで出来る ● Infinite Scroll はあくまでも、Ajaxで次の記事を読 み込んで、DOMに追加しているだけ
66.
カスタマイズのヒント ‣ 特定のページに適用するには? ●
Navigation Selector を工夫する ● 例) body.category-A #navigation-block ‣ カテゴリやページ毎に異なる読み込み方をさせたい ● それはHTMLとCSSで出来る ● Infinite Scroll はあくまでも、Ajaxで次の記事を読 み込んで、DOMに追加しているだけ ここ 重要
67.
カスタマイズのヒント
結構 いろいろ ‣ 特定のページに適用するには? 出来る!! ● Navigation Selector を工夫する ● 例) body.category-A #navigation-block ‣ カテゴリやページ毎に異なる読み込み方をさせたい ● それはHTMLとCSSで出来る ● Infinite Scroll はあくまでも、Ajaxで次の記事を読 み込んで、DOMに追加しているだけ ここ 重要
68.
最後 に
アイデア次第で色々と
69.
最後 に
アイデア次第で色々と ‣ 画像をたくさん並べたら
70.
最後 に
アイデア次第で色々と ‣ 画像をたくさん並べたら ● グーグルの画像検索結果ページみたいな感じに
71.
最後 に
アイデア次第で色々と ‣ 画像をたくさん並べたら ● グーグルの画像検索結果ページみたいな感じに ‣ Scrolling Behavior の切り替えで、自動ロードを オフにできることも忘れずに
72.
最後 に
アイデア次第で色々と ‣ 画像をたくさん並べたら ● グーグルの画像検索結果ページみたいな感じに ‣ Scrolling Behavior の切り替えで、自動ロードを オフにできることも忘れずに ● つまりユーザーアクションで次の記事を読み込める。 ([もっと●●を表示] ボタン的なやつ)
73.
最後 に
アイデア次第で色々と ‣ 画像をたくさん並べたら ● グーグルの画像検索結果ページみたいな感じに ‣ Scrolling Behavior の切り替えで、自動ロードを オフにできることも忘れずに ● つまりユーザーアクションで次の記事を読み込める。 ([もっと●●を表示] ボタン的なやつ) ● 読込ボタンに onclick を仕込み、 Javascript to be called after... と組合せれば、記事の入れ替えも可能
74.
最後 に
アイデア次第で色々と 楽しい こと考え ‣ 画像をたくさん並べたら よう☆ ● グーグルの画像検索結果ページみたいな感じに ‣ Scrolling Behavior の切り替えで、自動ロードを オフにできることも忘れずに ● つまりユーザーアクションで次の記事を読み込める。 ([もっと●●を表示] ボタン的なやつ) ● 読込ボタンに onclick を仕込み、 Javascript to be called after... と組合せれば、記事の入れ替えも可能
75.
ありがとうございました!
©copyright 2012 Foreignkey, inc. All right reserved.
76.
©copyright 2012 Foreignkey,
inc. All right reserved.
Hinweis der Redaktion
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Jetzt herunterladen