スマホでページの1番上へリンクするボタンを設置するCSS

このページの先頭へ

どーも、ダンゴです( ̄▽ ̄)ノ

年々スマートフォンの普及が進み、
当ブログの読者もほとんどがスマホからの閲覧となっています。

まだSEOが重視されるのはPCページのほうですが、
読者さんの大部分がスマホユーザーなので、
モバイルページのカスタマイズはかなり重要になってきますね。

ですので、僕は記事を書いたら、
一応自分のスマホでも読んでみて、
見やすさなどを確認しています。

パソコンからでもスマホ画面を確認できますが、
(参考:スマホ画面の表示をパソコンで確認する方法)
やっぱり実際にスマホを手に持って見てみて、
初めて気づくこともありますからね(*^^)b

 

それで、このぶろらいをスマホで見てて、
「1番上までスクロールするのめんどくさいな」
と思ったので、ページ下部に、
先頭までジャンプするリンクボタンをつけてみました☆

トップリンク ぶろらい

 

今回は、その設置方法をご紹介しますね(^^)

 

ページトップへのリンクボタン

<a href="#top">▲このページの1番上へ</a>

 

ページの1番上へリンクするには、
上記のコードを使えばOKです(*^^)b

文字は好きなものに変えてください☆

これだけでもいいのですが、
ページの下にテキストリンクだけあっても
わかりづらいし見栄えがあまりよくありません(^_^;)

 

なので、僕は四角でリンクを囲ってみました☆

.sikaku {
display: block;
font-size: 16px;
text-align: center;
border: 2px solid #0000ff;
font-weight: bold;
padding-top: .3em;
padding-bottom: .3em;
margin-top: 10px;
margin-bottom: 0;
background-color: #f0f8ff !important;
}

.sikaku a {
display: block;
}

 

まず、CSSに四角の記述をしてやります。

枠や背景の色などは、
こちらのサイトを参考に好みに変えてみてください(*^^*)

WEB色見本 原色大辞典 – HTMLカラーコード

下の部分の記述を加えることにより、
文字以外の部分をクリックしても
リンクが効くようにできます☆

 

<div class="sikaku"><a href="#top">▲このページの1番上へ</a></div>

 

CSSを保存したら、
上記のコードを任意の場所に加えればOKです(*^^)b

僕はfooter.phpに書きましたが、
どこでも大丈夫です☆

 

ブログランキング参加中!
よければ1日1クリックしていただけると
嬉しいです♪ヾ(´▽`*)ノ
↓ ↓ ↓

 

管理人プロフィール
▼名前:ダンゴ
ダンゴ プロフィール
どーも、ダンゴです。

お酒と漫画とお笑いが大好きな大学生で、現在はネットビジネスとスロットで学費と生活費を稼ぎながら、細々と暮らしてます。

数年前ブラック企業に内定し、「雇われるリスク」を肌で感じた結果、就職を放棄。

とはいえ食わねばいけないので、藁にもすがる思いでネットビジネスを始めたところ、毎月10万円以上の収入を生み出すことに成功!

知識ゼロから月収10万円を稼ぐまでの道のりをメールで紹介していますので、興味があれば登録してみてください☆

⇒10万を稼ぐ第1歩


コメントを残す

サブコンテンツ

このページの先頭へ