>-->

Blogger ブログで、矢印キーを使ってページ移動できるようにするカスタマイズ | クリボウの Blogger Tips

クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

> > Blogger ブログで、矢印キーを使ってページ移動できるようにするカスタマイズ

Blogger ブログで、矢印キーを使ってページ移動できるようにするカスタマイズ

Posted at: 2012-08-14 Label: 4

arrow
(cc) Froschmann : かえるおとこ


Blogger Buster に、矢印キーでページを移動する方法が載っていたのでご紹介します。今回参考にしたのは、こちらのページ。

thumbnailBlogger Buster: Page Navigation with Arrow Keys in Blogger  


ライブデモはこちら。矢印キーの右が「Older Post」、左が「Newer Post」に対応しているようです。


導入方法

※ 必ずテンプレートのバックアップをとってから行ってください。

１．Blogger 管理画面「テンプレート ＞ HTML の編集 ＞ 続行」 と進み、「ウィジェットのテンプレートを展開」にチェックを入れます。

ï¼’．次のようなコードを見つけます。ブラウザの検索機能で「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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' 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>

ï¼”．</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(&#39;newer&#39;);
        if (l) {
          window.location.href = l.href;
        }
        break;
      case 39:
        var l = document.getElementById(&#39;older&#39;);
        if (l) {
          window.location.href = l.href;
        }
        break;
    }
  }
}
</script>

５．「テンプレートを保存」ボタンを押します。

これだけです。導入しても閲覧者がこの操作法を使ってくれるかどうか分からないんですが、新しいページ操作をブログに取り入れてみたいという人は試してみるといいんじゃないでしょうか。
スポンサードリンク：
お願い：
「この記事役に立った！」と思ったら、ぜひフィード登録をお願いします。　
このエントリーをはてなブックマークに追加

Comments:4

  1. Anonymous15 August, 2012 23:50

    これはいいですね｡

    ReplyDelete
    Replies
    1. Kuribo05 September, 2012 22:55

      たしかに、キー操作でブログが動くのは面白いですね。
      コメントありがとうございます。

      Delete
  2. Eman sherkawy10 February, 2017 21:31

    http://emc-mee.kinja.com/east-eldmam-com-1791211077
    http://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

    ReplyDelete
  3. yanmaneee09 June, 2021 17:31

    kyrie shoes
    yeezy 500
    lebron james shoes
    golden goose outlet
    kd13
    kevin durant shoes
    steph curry shoes
    supreme hoodie
    supreme hoodie
    air jordan

    ReplyDelete

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.