暇人北っちの趣味ブログアフィリエイト。

ギター、ゲーム、アニメ。やりたいことに時間とお金を使おう。

スムースリンクを利用して、ページ内の指定した場所へひとっ飛び!

説明系の記事はどうしても縦に長くなりがち・・・・。

こんな時にリンクをクリックするだけで
読みたい部分へひとっ飛び!なテクニックをご紹介。

5分で出来ちゃうので、どうぞお試しあれ。

スムーススクロールを利用しよう

スムーススクロールって知ってます?
ブログ内の指定した部分まで
ページがスーッと移動してくれる機能のこと。

言葉で説明するよりも体験してもらった方が
早いのでまずは下のリンクを押してみてください。

→スムーススクロールを体験する

GO!!

ひとっ飛び!

どうですか?

画面が勝手に動いてここまで来てますよね。

これを利用すれば記事の最初に
目次っぽくリンクを作って
読者さんが読みたいところまで一気に
飛んで記事を読むことが出来ます。

スムーススクロールを導入する

それでは実際にスムーススクロールを
実装していきましょう。

と言ってもコピペするだけです。

[html]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>[/html]

これと、

[html]
<script type="text/javascript">
$(function(){
$(‘a[href^=#]’).click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? ‘html’ : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
</script>
[/html]

これ。

この2つの文字列をメモ帳などに
コピーしておいてください。

それからワードプレスの管理画面より
テンプレートの編集画面に移動します。

スムーススクロール1

「外観」→「テーマ編集」を選択です。

するとテンプレートの中身が表示されます。
「さっぱりわからん!!」というあなたも安心してください。

スクリーンショット 2013-07-12 19.13.45

右にいろいろテンプレートの中身が
一覧で表示されています。

その中からヘッダー(header.php)という
やつを探してください。

見つけたらそいつをクリック!!

スムーススクロール2

編集エリアの一番下に</head>っていうのがあります。
この上に先ほどコピーしておいた
文字列を貼り付けてください。

画像だと青くなっているのが
貼りつけた文字列になります。

</head>の上ですよ!!

出来たら「ファイルを更新」をクリック。

これでテンプレートの編集は終了。

あとは記事の方です。

記事内にスムーススクロールを入れるには

記事を書く時にリンクをまず作ります。

先ほどの例だと

[html]<a href="#test">→スムーススクロールを体験する</a>[/html]

となっています。

大事なのは“#test”の部分。

このtestの部分はなんでもOKですが、
必ずこの“#〇〇”をリンクのところに記述してください。

そして、移動させたい場所、見出しの所も
ちょこっと記述します。

[html]<h4 id="test"><span style="font-size: medium; color: #993300;">ひとっ飛び!</span></h4>[/html]

このように記述します。

<id=”test”>のところに注目。
先ほどのtestと同じになっていますよね。

この”#〇〇”と<id”〇〇”>の〇〇部分が
同じものになっているのが条件となります。

以上がスムースリンクを利用する手順です。

記事が長くなった時などに
ぜひ活用してみてください。

かなり便利な機能ですから。

LEAVE A REPLY

*
*
* (公開されません)

Return Top