WordPressで作られたWebサイトを無限スクロール出来るようにする
WordPressで作ったWebサイトを、 スクロールすると、次ページが 自動でロードされる無限スクロー ルが出来るようにする、という 方法です。今更感満載ですけど。 よく見かける、「スクロールするだけで次ページが次々とロードされる」みたいなサイトをWordPressで作ろう、みたいな話。既出な話題なので基本的な導入方法だけ書きます。 無限スクロール(Infinite Scroll)出来るようにするWordPressを無限スクロール出来る様にします。 以下、手順。サンプルコードはTwenty Elevenで動作テストしています。 スクリプトを用意する無限スクロールさせるスクリプトを用意します。いろいろあるのでお好みで構いません。今日はWordPressのプラグインにもなっているInfinite Scrollを使います。じゃあプラグイン使えよ、って話ですが。 Infinite Scrollは
スクロールしたらフェードインしながら表示される「TOPへ戻る」
Result jQuery//初期は非表示 $("#back-top").hide(); $(function () { $(window).scroll(function () { //100pxスクロールしたら if ($(this).scrollTop() > 100) { //フェードインで表示 $('#back-top').fadeIn(); } else { $('#back-top').fadeOut(); } }); //ここからクリックイベント $('#back-top a').click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); });css#back-top { position: fixed; bottom: 30px; margin-left: 15
画像を菱形状に並べるイメージギャラリーを実装するスクリプト・jquery.diamonds.js
以前よく見かけたタイプのイメージギャラリーを実装出来るスクリプトがあったのでメモ。菱形状に並べる、というものです。実用性は置いといて、素敵な見せ方ですね。 菱形状に画像を並べます。 こんな感じのイメージギャラリーを実装出来ます。尚、IE7等では大変なことになってしまうので使いどころに気をつけないとですね。 $("#foo").diamonds({ size :250 , gap :1 , hideIncompleteRow : false, autoRedraw : true, itemSelector : ".bar" });セッティングは上記の要領で書けばいいみたいです。ちょっと目を惹けるレイアウトですね。 jquery.diamonds.js
jQueryのプラグインを大量に収集している・「Unheap」
UnheapはjQueryのプラグインを大量の収集、紹介しているWebサイトです。かなり細かくカテゴライズされているので探しやすい印象でした。社内向けに作ったリソースサイトらしいです。 Unheap
jQuery+CSSで実装するナビゲーションメニュー総集編
cssやプログラミングcss+jQuery jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Do
画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 LightboxLightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。グル
JavaScriptも使わず元画像も変更せずに画像をグレースケール表示させる
ちょっと調べ物をしたのでメモ。 画像1枚だけで、グレースケール、 マウスホバーでカラー画像に、 みたいなのを実装したい、出来れ ばJavaScriptも使用せず、みたい な内容です。 2枚用意しろよと言われたら実も蓋もないんですけど、画像1枚だけでグレースケール⇔カラー画像を実装したい。画像の数は半分で済むし、加工の時間も不要になるのは大きなメリットです。 1年前に同じ事をunformedbuilding（アップデート版もありました）さんがやってますので合わせてどうぞ。 Sample マウス乗せるとカラーになる、という良くあるホバーエフェクトですが、極力無駄を省きたい。画像が1枚で済めば、20枚必要なところが10枚で済むし、画像が追加されても加工したり、マークアップしなおしたりファイルをアップロードする必要がなくなります。 IE IEはfilterプロパティ使えばいいですね。 img{ f
jQueryUIを使ってマウスオーバー時に背景色をアニメーションさせながら変更出来ると今更知った
備忘録。マウスオーバー時に背景の 色をアニメーションしながら変更する、 というのをクロスブラウザ対応で実装 したい。css3を使えば簡単な事ですが、 ご存知のようにIEは非対応。で、色々 探してみたんですが、jQueryUIを使う のが一番良さそうな感じでした。 普通にググったらJquery Color Pluginというプラグインがあったのですが、動作はするけどIEでエラーが出ます。リファレンスを見ても そもそも数値型の値をとらない属性（backgroundColorなど）には、animate関数は対応していません。 (jQuery日本語リファレンス) と書いてあるし、Jquery Color Pluginを直すのも面倒だし、どうしようかなと思ったんですが、jQueryUIを使えば凄く簡単なんですね・・・素人ですみません。 コード<script type="text/javascript
「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね
Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの本家です。jQuery
tableをレスポンシブWebデザインに対応させるスクリプト・FooTable
table要素をレスポンシブに対応させる、というスクリプトです。他にも同じようなスクリプトは存在しますが実用的ではなかったので紹介してなかったですけどこれはアリな気がします。 table要素をレスポンシブに対応させるjQueryプラグインです。他にもMediaTableやzurbのスクリプトもあります。 ウィンドウサイズの幅が狭くなると、表示しきれないカラム部分をタップによる表示式に切り替える、というもの。 上記のようにタップすると非表示部分のカラムの内容が表示されます。ユーザーにとっても分かりやすい気がしました。 公式の動作サンプルです Sample コード<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <scrip
グリッドレイアウト向けのシンプルで軽量なレシポンシブWebデザイン用CSSフレームワーク・Simple Grid
シンプルなCSSフレームワーク・ Simple Gridのご紹介。1140px をベースに、レスポンシブWeb デザインにも対応できるグリッド レイアウトなWebサイト向けの フレームワークです。 軽量なフレームワークのご紹介。クロスブラウザに対応しなければシンプルで軽量にする事は可能ですよね・・ シンプルなレスポンシブWebデザイン対応のCSSフレームワークです。PCサイトでは1140pxベースのグリッドレイアウトとなります。 グリッドです。 用意されているCSSは1.73kbと極めて軽量です。IE等にも対応させるにはもう少し必要になりますが、タブレットやモバイル端末のみにこのフレームワークを利用するなら最軽量ですみそうですね。スマフォ⇔PCサイト切り替え形式のWebサイトで使えるかも。 この手のは他にもかなり選択肢があるのでお好みで。ちょっと忙しいので今日は簡単に済まさせて頂きます。
画像のズームと、ドラッグによる連続表示を使った360度ビューが可能なECサイト向けjQueryプラグイン・Dopeless
ECサイトに良さそうなjQuewryの プラグイン・Dopelessのご紹介 です。画像のズームと、ドラッグ 操作で360度ビューを再現できる というもの。タッチデバイスに も対応しているようです。 ライセンスが非商用CCで、商用はライセンス購入のプラグインですが、ズーム機能と360度ビューがセットになっているのは素敵です。 画像をドラッグで動かすと、四方八方から撮影されたプロダクトを連続表示し、360度ビューを可能にしています。また、ズーム機能も付いていて、タッチイベントにも対応しているとの事。画像はPHPで自動ロードする仕様です。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text
色覚障害のあるユーザーに、Webサイトがどう見えているかをザックリと教えてくれるWebツール・Chromanope
日曜日ですが、良さ気なツールを 見かけたので備忘録的にご紹介。 色覚障害の方、俗に言う色弱の 人にとってWebサイトがどう見えて いるかを教えてくれる、という Webサービスです。 「色覚障害の方は～色が～に見える」と言った記事はたまに見かけますが実際はケースバイケースです。一応自分も国家医療資格の保有者なので、医学に関する事を軽々しくブログ等で書かく訳には行きません。なので、教科書に載ってる程度の事にだけ触れるようにしておきます。 人が刺激として錐体と呼ばれる器官で受けられる色は青、赤、緑の3色です。これらが全て正常に揃っているのがC型、赤の錐体に異常があるのがProtanope（P型）、緑の錐体に異常があるのがDeuteranope（D型）で、この2つのタイプが最も多く存在します。稀に青の錐体に異常がある場合もあります。これはTritanope（T型）と呼ばれます。 これらの3つのタイ
郵便番号や地名を入力するだけでGoogleマップ検索できる地図コンテンツをjQueryで作る
ちょっと便利そうなライブラリがあった ので備忘録。Googleマップでキーワード や郵便番号を入力するだけで、該当する 場所を表示します。ちょっと場所を確認 したい、みたいなシーンは地味にありま すし、これは手軽に実装出来るので覚え ておきたい。 Googleマップネタです。jQueryでオート検索する地図コンテンツを作りましょう、というもの。フォーム入力の補助にもなりそうなならなそうな。 jQuery Automatic Geocoder動作サンプルです。適当に入力してみてください。郵便番号でも検索できます。 表示が、ブログのCSSに影響されてしまっていますが気にしないで下さい。シンプルで使いやすい印象でした。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/
国産限定・Web制作時に覚えておくと便利な14のフリーのWebサービス
最近、国産のWebサービスも かなり勢いがあるなぁと思ったので ちょっとまとめてみました。よく 紹介されるのは海外製ですが、 それに劣らないMade in Japanの Web制作者が知っておくと便利そうな フリーのWebサービスをご紹介します。 順不同です。日本語が完全に通じる海外Webサービスも今回は省いて純国産のWebサイト制作に一役買ってくれそうなWebサービスをご紹介したいと思います。出来る限り高性能だったり多機能なWebサービスのみにしたつもりですが主観入ってます。 Color of Book 国産サービスで一番多用しています。AmazonAPIを使って雑誌の表紙を抜き出し、その表紙からカラーチャートを生成。アイデアが素晴らしいですね。雑誌は表紙のデザインや色で惹きつけるよう考えられている事が多いのでWeb制作時のカラー選定にかなり参考になるのでは。 Color of Book
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブWebデザインのレイアウトチェックツール・「The Responsinator」
MetroライクなTwitter Bootstrap用デザインテーマ･Cosmo
マガジンスタイルでレスポンシブWebデザイン対応のWordPressテーマ・Newspaper