> カスタマイズ >
Blogger ブログで、矢印キーを使ってページ移動できるようにするカスタマイズ
Blogger Buster に、矢印キーでページを移動する方法が載っていたのでご紹介します。今回参考にしたのは、こちらのページ。
Blogger Buster: Page Navigation with Arrow Keys in Blogger
ライブデモはこちら。矢印キーの右が「Older Post」、左が「Newer Post」に対応しているようです。
導入方法
※ 必ずテンプレートのバックアップをとってから行ってください。
これだけです。導入しても閲覧者がこの操作法を使ってくれるかどうか分からないんですが、新しいページ操作をブログに取り入れてみたいという人は試してみるといいんじゃないでしょうか。
スポンサードリンク：
お願い：
Blogger Buster に、矢印キーでページを移動する方法が載っていたのでご紹介します。今回参考にしたのは、こちらのページ。
ライブデモはこちら。矢印キーの右が「Older Post」、左が「Newer Post」に対応しているようです。
導入方法
※ 必ずテンプレートのバックアップをとってから行ってください。
１．Blogger 管理画面「テンプレート ＞ HTML の編集 ＞ 続行」 と進み、「ウィジェットのテンプレートを展開」にチェックを入れます。
２．次のようなコードを見つけます。ブラウザの検索機能で「blog-pager」を探すと見つけやすいと思います。
３．赤字部分を次の青字のように書き換えます。
４．
５．「テンプレートを保存」ボタンを押します。
２．次のようなコードを見つけます。ブラウザの検索機能で「blog-pager」を探すと見つけやすいと思います。
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
３．赤字部分を次の青字のように書き換えます。
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' id='newer' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' id='older' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' id='newer' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' id='older' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
４．
</body> タグの直前に以下のコードを挿入します。（元のコードだと「前の投稿」「次の投稿」がないページの場合にエラーが出ていたため、クリボウが少し改良を加えています。）
<script type='text/javascript'>
window.onload = function() {
document.onkeyup = function(event) {
var kGo = (!event) ? window.event : event;
switch(kGo.keyCode) {
case 37:
var l = document.getElementById('newer');
if (l) {
window.location.href = l.href;
}
break;
case 39:
var l = document.getElementById('older');
if (l) {
window.location.href = l.href;
}
break;
}
}
}
</script>
window.onload = function() {
document.onkeyup = function(event) {
var kGo = (!event) ? window.event : event;
switch(kGo.keyCode) {
case 37:
var l = document.getElementById('newer');
if (l) {
window.location.href = l.href;
}
break;
case 39:
var l = document.getElementById('older');
if (l) {
window.location.href = l.href;
}
break;
}
}
}
</script>
５．「テンプレートを保存」ボタンを押します。
これだけです。導入しても閲覧者がこの操作法を使ってくれるかどうか分からないんですが、新しいページ操作をブログに取り入れてみたいという人は試してみるといいんじゃないでしょうか。
スポンサードリンク：
「この記事役に立った！」と思ったら、ぜひフィード登録をお願いします。 
これはいいですね｡
ReplyDeleteたしかに、キー操作でブログが動くのは面白いですね。
Deleteコメントありがとうございます。
http://emc-mee.kinja.com/east-eldmam-com-1791211077
ReplyDeletehttp://emc-mee.kinja.com/jumperads-com-1791210879
http://emc-mee.kinja.com/1791211197
http://emc-mee.kinja.com/1791211921
http://emc-mee.kinja.com/1791211985
kyrie shoes
ReplyDeleteyeezy 500
lebron james shoes
golden goose outlet
kd13
kevin durant shoes
steph curry shoes
supreme hoodie
supreme hoodie
air jordan