Wordpressにスクロールしながらトップへ戻るボタンを設置 Scroll to Top Plugin

2,3年前あたりからアンカーリンクはスクロールしながら移動するのが

当たり前になった！と言わんばかりに各WEBサイトで見かけます。

jQueryなどを使って簡単に設置することができるようになったからでしょうか。

そんな、半ば必須のスクロール機能ですが

Wordpressなら、プラグインをインストールするだけで、簡単に導入することができます。

今回導入するプラグインは、Scroll to Top Pluginです。

1ファイルのプラグインと1枚の画像からなるプラグインです。

ページをスクロールして、下の部分を表示すると

自動的にTopへ戻る為のアンカーリンク画像が表示されます。

自分のサイトデザインにあった画像に変更することも簡単に行なえます。

自力でテンプレートにjQueryコードを追加するより便利に導入することが
できますので、Wordpressにスクロールを導入する際は、検討してもいいかもしれませんね。


導入時間：1分以内


■Scroll to Top Plugin
http://wordpress.org/extend/plugins/scroll-to-top-plugin/

HTMLのテーブルを簡単にソートし表示順番を変更する

HTMLで使っているテーブルを簡単にソートできれば

いいのにと思う時があります。

データベースから、データを表示している場合はフレームワークなどを

使えば比較的簡単にソートなりフィルタリングなりを行うことができます。

が、

自前でゴリゴリ作ったテーブルなどでは、自力でソート処理を作らないといけません。


jQueryを使えば、数行のコードを追加するだけで

簡単に既存のテーブルに、ドラッグ＆ドロップ機能を追加するこができます。



■Drag & Drop with PHP & jQuery

http://papermashup.com/drag-drop-with-php-jquery/

おしゃれなテーブルソート（ドラッグ＆ドロップ）
やや、設置するコードが多い？



■Table Drag and Drop JQuery plugin

http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/

簡単テーブルソート（ドラッグ＆ドロップ）
IE7だと動作しない？


おすすめは
Table Drag and Drop JQuery plugin
でしょうか？

HTMLページ内に、シンプルなjQueryタブを設置してレイアウトデザイン

商品説明など、ある特定の項目に分けることができる情報は

テーブルの用に羅列して表示するよりかは

いっそタブにしてしまった方が、見栄えもユーザビリティーも向上します。


jQueryでタブ化をするプラグインはいくつも存在しますが

中には必要も無い機能が多いのか？

やたらと外部ファイルを必要とするプラグインがある。


タブ化ぐらいで大げさだ！

シンプルイズベスト！！！

そんな、シンプル派におすすめしたいのが

simple-jquery-tabsです。


基本的にjQueryだけでOKです。

jQueryを外部サーバーから直接利用する場合は、コードを追加するだけでタブ化できてしまいます。

とても便利です。


■simple-jquery-tabs
http://papermashup.com/simple-jquery-tabs/

■simple-jquery-tabs デモ
http://papermashup.com/demos/jquery-tabs/

画像をスクロールに合わせて読み込み表示する[Lazy Load Plugin for jQuery]

1ページ内に多くの画像ファイルを表示するHTMLページだと

ページの読み込みが完了するまでに、とても時間がかかってしまう。


HTMLの記述の仕方によっては、読み込みの完了まで、部分部分の内容するら表示されない！

これでは、折角アクセスしてくれたユーザーが、表示される前に離脱してしまいかねない！


そんな悩みは、表示している画面に合わせて画像をリードしてくれる

jQueryのプラグインを導入してみると解決してくれる。


導入方法は簡単で、プラグインをダウンドードして、設置するだけで既存の
画像に反映される。特に難しい設定も必要がない。


問題としては、他のjQueryプラグイン、他のAjaxライブラリを利用していると
正しく動作しない場合がある。


万が一動作しない場合は
使っているライブラリを整理しながら、調整していけば問題なく動作する。

それでも動作しない場合は、プラグインの読み込む順番などを調整すればよいだろう。


■jQuery プラグイン
Lazy Load Plugin for jQuery
http://www.appelsiini.net/projects/lazyload


■Wordpress プラグイン / CMS
jQuery Image Lazy Load WP
http://wordpress.org/extend/plugins/jquery-image-lazy-loading/

■Joomla プラグイン / CMS
Lazy Loader for Joomla
http://www.pbwebdev.com.au/blog/lazy-loader-plugin-for-joomla#download


【デモ】
http://www.appelsiini.net/projects/lazyload/enabled.html


いい感じです。
必要な画像だけの表示になるので、ネットワークの負荷も抑えられます。利用する価値は高そうです。

ただ、環境によっては読み込み読み込みが発生するので
見た目上、嫌う人もおおそうです。


※株式会社マイスタンダードではお客様に合わせたカスタマイズを行なっております。

株式会社マイスタンダード
〒532-0011
大阪府大阪市淀川区西中島7-7-3
06-4805-7890
WEBシステム開発