WordPress無料テーマ LION MEDIAでするするスクロール

WordPress無料テーマ LION MEDIAでするするスクロール
Photo by Brandon Morgan on Unsplash

 

WordPressとLION MEDIA 便利だけど

WordPressとWordPress用無料テーマLION MEDIAを使って現在こちらのブログを作成しています。
LION MEDIAの多機能ぶり便利さに感動しており特に

本文中にテキストを「見出し」にすると、自動的にページトップに目次を作り、さらにページ内リンクをしてくれるというのが本当に驚きでした。

すごい便利で驚いたのですが、デフォルトの状態だと「パッ」とページの見出しの場所に飛んでしまいちょっと味気ないので、よくある「するするっとスクロール」するやつにしたいなと思い、またまたGoogle先生に確認してみました。

JavaScriptはちょっとかじっていたので、いざとなれば本文中に書いちゃえばいいかなとも思ったのですが、やはりLION MEDIAは抜け目ありません。しっかりとカスタマイズが可能だったのです。

LION MEDIA 設定

WordPressで 外観>カスタマイズ を開くと様々な設定項目が出てくるのですが、その中に「高度な設定」というのがあります。

これをクリックすると、「<head>~</head>内用の自由入力エリア(CSSなどの読み込みに最適)」ってのがあるわけです。

でここに、するするスクロールのコードを入れちゃいます。
(検索するとでてきます)

サンプルソース

例えばこんなの

<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>
<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>

クリックしてみてください

あとは、目次をクリックすればあら不思議。
するすると見出し部に移動してくれます。

本当に便利で涙が出そうです。
今回は記事の性格上、見出しを無理やり付けたこと、ご了承ください。

WordPressカテゴリの最新記事