Blogger:ページナビの横に「上に戻る」ボタンを作る-p--q

どうしても1つの記事が長くなってしまいがちです。長い記事を校正していると何度も記事の最初までスクロールして戻ってくるのが面倒になってきました。そこでページナビの横に「上に戻る」ボタンを作ることにしました。

「ページトップに戻る」リンクボタンの設置は簡単な方法があるんだが、、、

        
              <a expr:href='data:post.url'>ページトップに戻る</a>

これをBlog1ウィジェット内に設置すれば一発解決することになります。

実際に<b:includable id='nextprev'>の中に設置してみました。

19行目から21行目が挿入部分です。

        
          
          
              
              <b:includable id='nextprev'>
  <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>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
　　<a expr:href='data:post.url'>ページトップに戻る</a>
</b:if>
  </div>
  <div class='clear'/>
</b:includable>

            

        
      

pageTypeで場合分けをしてアイテムページ以外では表示されないようにしています。

こんな風になります。Blogger:ページ番号付ページナビ(1)公開日時が重複する投稿は避けましょうのページ番号付ページナビを導入した状態なのでボタンの見た目はデフォルトとは変わっています。

動作も狙った通りになるのですがこの方法はいくつかの問題があります。

まずこれはページ内の移動ではなく新たにページを読み込んでいるので動作が遅いです。

一番の問題はGoogle Adsenseを導入している場合、広告の表示回数を無為に増加させることになるので規約違反になると思われます。

無効なクリックとインプレッション
サイト運営者様が自分の広告をクリックしたり、手動や他の方法で表示回数やクリック数を作為的に増加させることは禁止されています。AdSense プログラムポリシー - AdSense ヘルプ

ページ内ジャンプ機能を使う。まずジャンプ先を設定。

記事の先頭に戻れればよいのでページトップはなく投稿タイトルにジャンプするリンクをもったボタンを作ることにしました。

まず<a name="ジャンプ先の名前">投稿タイトル</a>を作ります。

管理画面→テンプレート→HTMLの編集、ウィジェットへ移動→Blog1

その中の<b:includable id='post' var='post'>の中を見ます。

        
          
          
              
              <b:if cond='data:post.title'>
    <h3 class='post-title entry-title' itemprop='name'>
     <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
    </h3>
</b:if>

            

        
      

<data:post.title/>が投稿タイトルです。 4箇所もでてきますがアイテムページでは投稿タイトルにはリンクがついていませんので10行目か13行目の<data:post.title/>にnameをつければよいと思われます。

        
              <a name="toko_taitoru"><data:post.title/></a>

ジャンプ先名はtoko_taitoruにしました。<data:post.title/>をこれに置き換えます。

やってみたところ10行目を変更すればよいことがわかりました。

ということで以下のように書き換えました。

        
          
          
              
              <b:if cond='data:post.title'>
    <h3 class='post-title entry-title' itemprop='name'>
     <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <a name="toko_taitoru"><data:post.title/></a>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
    </h3>
</b:if>

            

        
      

しかしこのままだと投稿タイトルにマウスカーソルをもっていくとリンクもないのにフォントの色が変わってしまいます。

そこでマウスカーソルが上にきても、もとのフォントの色に上書きしてしまう設定をします。

投稿タイトルの色はデフォルトでは、管理画面→テンプレート→カスタマイズ→上級者向け→ページのテキスト、でみれます。このブログでは色は#333333です。

        
              h3.post-title a:hover {
color: #333333;
}

]]></b:skin>の直前にこれを書き足します。

次にジャンプ元ボタンの設定

次にこの"toko_taitoru"へ飛ぶリンクボタンを作ります。上でみた<b:includable id='nextprev'>に作ります。

        
          
          
              
              <b:includable id='nextprev'>
  <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>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
     </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
     <a href="#toko_taitoru">記事タイトルに戻る</a>
</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>
  <div class='clear'/>
</b:includable>

            

        
      

14行目から16行目の以下が挿入部分です。

        
              <b:if cond='data:blog.pageType == &quot;item&quot;'>
　　<a href="#toko_taitoru">記事タイトルに戻る</a>
</b:if>

ついでにボタンの位置も入れ換えました。

これで素早く投稿タイトルに戻れるようになりました。

参考にしたサイト

ページ内ジャンプ HTML <a>
投稿タイトルまで戻る方法に使います。

FireFoxのname属性のリンクを消す（a:hoverを適用させない）方法｜web bibo
name属性をつけた投稿タイトルで色が変化しないようにする設定です

Blogger:ページナビの横に「上に戻る」ボタンを作る

「ページトップに戻る」リンクボタンの設置は簡単な方法があるんだが、、、

ページ内ジャンプ機能を使う。まずジャンプ先を設定。

次にジャンプ元ボタンの設定

参考にしたサイト

0 件のコメント:

コメントを投稿

ブログ検索 by Blogger

Translate

最近のコメント

全記事