「FC2ブログ カスタマイズ」の検索から来させていただきました! 過去の記事を少し読んだのですがとてもわかりやすいので参考になりました。 とても初歩的なことをお聞きすることもあるかと思いますが、答えていただけるとうれしいです(`・ω・´) 更新楽しみにしていますっ。
![スライドショーのサンプルを集めた記事のまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/41f84ceeb087cc9a9ecf1d64257891f092764c30/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-73.fc2.com%2Fw%2Fe%2Fb%2Fweboook%2Fwebpark-ogp.png)
Slide one jQueryを使った横メニューです。 クリックをしなくても一定時間で次のタブに切り替わります。 時間の設定などはJavaScriptで変更できます。 タブの数も自由に変更できます。 Slide two 最初に表示するタブは以下のclassで指定します。 <ul class="slides-nav"> <li class="on"><a href="#slide-one">Slide one</a></li> <li><a href="#slide-two">Slide two</a></li> <li><a href="#slide-three">Slide three</a></li> </ul> Slide three slideshow.jsの上の方をいじるとタブの入れ替わり方を変更できます。 timeout: 300, // 自動でタブがかわる間隔 slideS
htmlに直接書き込んでいる以下の部分についても若干説明。 <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ auto: true, continuous: false, numeric: true }); }); </script> autoは自動的に次の画像に移動するかどうか、continuousは自動的に次の画像に移動して最後までいった場合、最初に戻るかどうかです。 たいした説明ではないですが、サンプルもあるので問題ないと思います。
メニュー全体は「position: fixed;」で固定されているので下にスクロールしても同じ位置に表示され、オンマウスでアイコンがあらわれます。 少しだけ解説してみます どちらもソースは似ているので、今回は後で紹介した左側にメニューがある方で説明してみます。 緑の数字が最初に画面が表示されたときにアイコンが収まるまでの時間で、赤の数字がマウスを乗せたときにアイコンがあらわれるまでの時間です。数字が大きいほどゆっくりになります。 ちなみにjavascriptはjQueryと以下の分だけですので非常にシンプルです。 <script type="text/javascript"> $(function() { $('#navigation a').stop().animate({'marginLeft':'-85px'},1000); $('#navigation > li').hover(
よく見かけるタイプのjQueryを使ったスクロールしても上に固定されているメニューを紹介します。最近FC2ブログの上部に現れた検索バー(このブログは非表示にしてます)みたいな感じです。 <script type="text/javascript"> $(function() { $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); if(scrollTop != 0) $('#nav').stop().animate({'opacity':'0.5'},400); //スクロール時 else $('#nav').stop().animate({'opacity':'1'},400); //一番上にあるとき }); $('#nav').hover( function (e) { var scrollTop =
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く