RSSはこちら

ブログテンプレートならHKD

ブログタイトルを3時間悩んでやっと思いつきました。変にこだわるデザインです。すでに変にこだわって時間をロスしています。

更新休止のお知らせ

現在HKDは更新を休止しており、緊急を要する修正以外は手をつけれない状態です。 ご利用していただいてる方々には申し訳ございませんが、よろしくお願いいたします。
  • 2009⁄09⁄18(Fri)
  • 11:48

アンカーリンクの挙動の変更

【2010/08/08追記】
テンプレート更新によりアンカーリンクの挙動に関する部分を自作しました。
ほぼ同じように設定できます。
詳しくはこちらをご覧下さい。



HKDのテンプレートではアンカーリンクの挙動にjQuery Easing Scrollを使わせていただいています。

製作者さんのページ
http://moto-mono.net/
参考記事
http://moto-mono.net/2009/05/18/page-scrolling-with-jqueryeasing.html


このjQuery Easing Scrollのいいところは簡単に導入できるところはもちろん、スクロールの挙動を簡単に変更する事ができるところです。
そのスクロールの挙動の変更方法を簡単に説明します。
ダウンロードして頂いたテンプレートの中の<head>タグ内に、次のような記述があると思います。
$("a[href*='#']").easingScroll({
/**************************************************
easingとdurationの値を変えることで、アンカーリンクの挙動を
変更する事ができます。詳しくは当ブログへ。
***************************************************/   
easing: "easeInOutCirc",
duration: 600
});


ここで設定を行います。

ここのeasingの値で挙動を変更し、durationでスピードを調整できます。
挙動の違いは製作者さんがサンプルを作ってくださっているので、こちらをご覧下さい。
挙動サンプル

けっこう似たような動きも多いのですが
easing: "easeOutBounce",
duration: 800
とかにすると大きな違いが分かるんではないでしょうか。バウンドして跳ねるのがおもしろいですね。

ただ、テンプレートに記述して試す場合はプレビュー画面だとうまく動作しないようです。
テンプレートに記述して更新ボタンを押してからお試し下さい。
関連記事
スポンサーサイト



category
カスタマイズ > その他カスタム
tag
jQuery
genre
ブログ
theme
FC2ブログ共有テンプレート

TrackBack Url

http://hkdesign.blog91.fc2.com/tb.php/20-8ec36f59

検索フォーム

プロフィール

HKD TEMPLATE


Author:
 Hellow
mail:
 hkdesign.mail☆gmail.com
 ☆を半角@に変えてください。

Henni
Kodawaru
Design
略してHKD

ブログテンプレートならHKDにようこそ!
このサイトではFC2で使える共有テンプレートを配布しています。
サイトについての説明はこちらをどうぞ。

カテゴリ

アクセスランキング

[ジャンルランキング]
ブログ
5080位
アクセスランキングを見る>>

[サブジャンルランキング]
共有テンプレート
32位
アクセスランキングを見る>>

FC2カウンター

メールフォーム

名前:
メール:
件名:
本文:

アプリ紹介

google chrome拡張機能「high! like!」を作りました。
機能1:はてなハイクをサイト上に投稿できる
機能2:はてなハイク投稿時に同時にtwitterにも投稿する
詳しくは次のURLへお越しください
hk-factory
Googleウェブストア

プラグインギャラリー

ブログ管理画面の共有プラググイン追加から、作者:hkdesignと検索してダウンロードしてください。

CastomCategory
CustomRssReader
ImageClock

テンプレートギャラリー

ブログ管理画面の共有テンプレート追加から、作者:hkdesignと検索してダウンロードしてください。

動作環境について

テンプレートは以下の環境・方法で動作確認を行ってからFC2に申請しています。もし、記載の環境でも表示が崩れて見えない場合は連絡してくれるとありがたいです。

【Win】FireFox 3 / IE8 / IE7(*) / IE6(*) / Google Chrome
【Mac】FireFox 3.0(*) / Safari 3.0(*)
*マークがあるブラウザは手元に環境がないので、Adobe BrowserLabを使ってチェックしています。

Adobe BrowserLab
https://browserlab.adobe.com/

ライセンスについて

ライセンス形態はGPLライセンスをとります。
簡単に言うと次の4つです。
  • カスタマイズ・再配布など連絡なしに使用OK。
  • ただし、著作権表示は消したらダメです。
  • なんらかの損害が出た場合は自己責任です。
  • 再配布する場合、GPLライセンスが適用されます。