Bloggerに目次まで移動する矢印アイコンを取り付けました

一応、まとめページを作るとき目次を使うことがあるので設置しました。


photo credit: Simon Pow via photopin cc

目次をつける方法


ブログに目次をつけるには、以下のように書きます。これは、主に目印のようなものです。

<a name="mokuji"></a>


これで、以下の様なタグを使うと、目次までジャンプできます。

<a href="#mokuji"></a>



なお、ここで使用している mokujiという文字列はなんでも構いません。


目次までジャンプする矢印アイコン




画面右下 :

(あまりはっきりしませんが、目次がある場合は、クリックするとジャンプしてくれます)


#back-top2 {
position: fixed;
bottom: 20px;
right: 1px;
}

/* arrow icon (span tag) */
#back-top2 span {
width: 60px;
height: 30px;
border: 1px solid #ccc;
display: block;
background: #333333 url(ここに画像URL) no-repeat center center;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}

#back-top2 a:hover span {
opacity:0.5;
}



そして、 </body>のあたりに、以下のタグを挿入します。


<p id='back-top2'>
<a href='#mokuji'><span/></a>
</p>



なお、モバイルには表示させたくないので、以下のように書きます。


<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0' name='viewport'/>
<style>

#back-top2 {display:none !important;}

</style>
</b:if>



または、


.mobile #back-top2 {display:none;}