JavaScript(以下JS)は、クライアントサイドに依存するものなので、ブラウザの設定でJSの有効をOFFにしていたら動作しません。そのため、使いどころには注意が必要です。
しかし、CSSのように、見た目をリッチにするためだけに使うのであれば、機能的に劣るわけではないので、導入しやすいと思います。
最近ではユーザビリティの観点から、「ページのトップへ戻る」ボタンやテキストをつけているサイトも多いと思います。
ページ内リンクというのは、実際どこへ移動しているのか、視覚的にわかりにくいところがあります。
しかし、ページ内リンク先に一瞬で遷移せず、スクロールしながら遷移すれば、今、ページのどの地点にいるのかわかりやすいですよね?
スムーススクロールのJSスクリプトあるいはPHPスクリプトを配布しているサイトは多いのですが、当サイトでも導入しているJSスクリプトを紹介します。
The Tiny Scrolling(s) - from The Lab of the weblog Central Scrutinizer
これは、上記URIからtiny-scrollings.jsをダウンロードして、header内に以下のソースを追記するだけです。
<script type="text/javascript" src="tinyscrolling.js"></script>
あとは、クラスの追加も必要なく、一般的なページ内リンクの設定をするだけです。ただし、リンク先がidで指定されていないといけません、確か。nameは使えなかったと思うので注意です。
いくつかのデザインを作成者のほうで用意しておくのも面白いかもしれません。
WordPressでは、テーマも変更できるので、スタイルシートだけでなく、構造自体を変えることができます。
以下のサイトでは、WordPressによってサイトが構成されていますが、3つのテーマを切り替えることができます。
WordPressでテーマを切り替える場合は、theme-switcherというプラグインを使用するとよいと思います。
以下のページからは日本語版をダウンロードできるようです。
ThemeSwitcher 日本語版 « MMRT daily life
本家はこちらから。
ThemeSwitcher - WordPress Plugin Repository - Trac
使い方は以下の通り。
<?php wp_theme_switcher(); ?>
単純にスタイルシートを切り替えたい場合は、WWW WATCHさんの「CSS レイアウト切り替えスイッチ」を利用すると便利です。添付されているサンプル画像もかっこよくてお勧めです。
リンクテキストにカーソルを合わせたとき、ただテキストの色が変わるだけでなく、リッチな動きをするのも面白いですね。
上記で紹介したBest Web Galleryの3つテーマを切り替える真ん中のボタンをクリックしてみてください。
画像の下部にテキストリンクが画像が透過された形でありますよね。その部分にカーソルを合わせてください。
ゆっくりと透過率が下がっていき(画像上)、最後は下の画像が透過されず黒い背景となります(画像下)。
これは、 fadeTo()というフェードインさせるJS関数を使用しています。
Best Web Galleryでは、jQueryというライブラリと併用して以下のような書き方をしています。
$(document).ready(function(){ $('#full h3').fadeTo("fast", 0.6); $('#full h3').mouseover(function() { $(this).fadeTo("slow", 1); }); $('#full h3').mouseout(function() { $(this).fadeTo("fast", 0.6); }); }Best Web Galleryより引用
文字サイズ変更やエラスティックレイアウトなどによりテキスト表示部分が可変となると、丸角などの背景画像をCSSだけで表示するとどうしても無駄なdivを書かざるを得ない場合もあります。
しかし、JSを使用することにより、無駄に書いてしまうdiv要素をJSで出力するので、元々のHTMLコードはクリーンのままであるというメリットがあります。
また、JSが無効の場合はタダの線で囲まれて表示されるので、テキストが表示されないなどの不具合は起こりません。
Transparent rounded/custom corners and borders | Lab | 456 Berea Street
文字サイズやブラウザのサイズを変更してみてください。丸角画像がくずれることなく表示されます。
トラックバック歓迎です。以下URLにて登録をお願いいたします。
このエントリーのトラックバックURL:
↓↓↓トラックバックしてくださった方々↓↓↓
※トラックバックされても管理人がスパムと判断したものは公開されません。