今までネットで公開されている様々な表現を持つスライダーを見てきました。
サンプルを動かしてみて気に入ると「使いたい！」って思うんですが、
そう思うスクリプトの大半は煩雑でサイズも大きく、改造する面でもスクリプトの読み込み速度の面でも考えてしまい、結局使わずじまいでいました。
でもすごく軽くて（Javascript部分はたったの1.3KB！）動きもなかなか良いスライダーを見つけました＾＾
そこで早速実践してみましたので報告します。
私が実践してみたページはこちらです。
【Javascript】他のスクリプトに依存しない軽量アコーディオンスライダーを使ってみた
導入＋PHPを使って3つのパラメータの変更ができるようにしてみました。
０．すごいところ
・タイトルでも冒頭でも書いたのですがJavascriptのファイル容量はわずか1.3KBです。
・だからといって他のスクリプトに依存しているわけではなく、jQueryやPrototype.jsといったような外部スクリプトも必要としません。
・導入が簡単です。
・JavascriptがOFFでもメニューが隠れることなく表示されます。
１．ダウンロード
遅くなりましたがソースの配布元は
Animated JavaScript Accordion V2 - Web Development Blog
です。
サイト内のダウンロードリンクはこちらになります。
２．HTMLの編集
基本的にダウンロードしたaccordion.zipを解凍した中にあるindex.htmlを開いておいて、同じように組み込んでいけば使えるようになります。
まずhead内にcssとjsファイルの読み込みを書きます。
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
div,dl,dt,ddの関係を崩さないよう実際のリストを作成します。
<div id="accordion2">
<dl class="accordion2" id="slider2">
<dt>List1</dt>
<dd>
hoge1はfuga1です。
</dd>
<dt>List2</dt>
<dd>
hoge2はfuga2です。
</dd>
・
・
・
リストの数だけ繰り返す
</dl>
</div>
タグを階層別にみると、
・divのidはアコーディオン全体のcssで利用
・dlのclassは同じくcss、idはjsで利用
・dtはリストのタイトルでcss、jsで利用
・ddはリスト内に書かれる情報でcss、jsで利用
こんな感じの構成になっています。
最後にJavascriptを書きます。
ページの初期表示でどこかのリストを全部閉じておきたい場合と、どれかは開いておきたい場合とで若干記述が変わります。
全部閉じておきたい場合
<script type="text/javascript">
var slider2=new accordion.slider("slider2");
slider2.init("slider2");
</script>
どれか開いておきたい場合（下の例は1番目を開いておきたい場合です）
<script type="text/javascript">
var slider2=new accordion.slider("slider2");
slider2.init("slider2",0);
</script>
slider2.initの第2引数がインデックスになっていて、1番目なら0、2番目なら1という形で数字を変更します。
３．CSS編集
CSSの編集については、絶対変更しなければ動かないという箇所はないので、リスト内の情報の長さやHTML全体に対してのレイアウトなどそれぞれの環境に合わせて変更してみてください。
４．最後に
今回は【Javascript】他のスクリプトに依存しない軽量アコーディオンスライダーを使ってみた
で実践してみたのですが、実はこれのトップページウェブサイト技術の実践もこのスライダーに変えてしまいました。
ただSEO的な部分でちょっとだけ気になったので、ページを表示し直す度にランダムでリストのどれかが必ず開くようにしてあります。
あまり意味ないかもしれないですけど＾＾；
まあウェブサイト技術の実践のトップページはぶっちゃけ検索エンジンのお世話になる必要もたいしてないのでどうでもいいといえばいいんですけどね。。
このアコーディオンスライダー、軽くて軽快なのですっかり気に入ってしまいました。
スライダー系のリストを作ろうと思う方がいましたら、こちらもぜひ試してみてください。
何かしら参考になりましたらクリックをよろしくお願いします
いつもながらすごいですね。
やっぱりＳＥＯ的には？？？なんんでしょうかね。
ミミオはブランディングのサイトは作っていないので、どちらかというと使うのはＳＥＯ優先かな…
こんばんは＾＾
気になる部分はCSSのoverflow:hiddenですね。
実際の所、結論ははっきりしていないようです。
検索エンジンにとって外部CSSはレイアウト部分にあたるので解釈しない（読みにこない）という人もいます。
hidden属性などはロールオーバーやツリーなどを作成する際にはよく使われます。
統計的にマイナス要素になる率が高いとわかっているのであれば果たしてこれだけたくさん利用されるのか？という疑問もあります。
あとは、最近の検索エンジンは隠れているテキストの内容をページ全体のキーワードと比較したりリンク先の妥当性をチェックしたりしていて、単純に隠れているからといってペナルティを受けるわけではないという話もあります。
まあ今の所は使うも使わないもその人次第という感じでしょうかｗ
逆にそういった意味でも今回の試みはSEO的なテストでもあると思っています。
いつもトモヒロさんから頂くコメントも
新しい発見がたくさんあって参考にさせていただいています。
まだまだ学ぶことが多くてついていけてない部分も多々ありますけど^^
これからもよろしくお願いします。
コメントありがとうございます＾＾
こちらこそよろしくお願いします m(＿ ＿)m
Adsenseで何かをしたら成果がガラリと変わったとかありましたらぜひブログの記事にしてくださいね＾＾
全世界に公開したくないようなすごい事でしたらこっそり教えて下さいｗｗ
いつも楽しく拝見しています。
一つリクエストをお願いいたしたいのですが、
アフィリエイトリンクをページに貼る場合、
アフィリエイトを直接ページに貼ると検索順位に影響するので
phpファイルを経由してアフィリエイトのページへ飛ぶようにしたいのです。
もし可能であれば、記事で取り扱っていただきたく、よろしくお願いいたします。
ショートカットキーの記事、面白かったです！
それでは今後も記事を楽しみにしています！(^-^)