【賢威6.2】「このページの先頭へ」ボタンのカスタマイズ

このページの先頭へ06

 

 

 

ちょっとしたことなんですが

とても便利な「このページの先頭へ」ボタンですが

非常に簡単にカスタマイズができます＾＾

 

カスタマイズをすることで

訪問者に気づいてもらいやすくユーザビリティも上がるので

是非、この機会にあなた好みにカスタマイズしてみては

いかがでしょうか。

 

また

 

「このページの先頭へ」という文言を

別の文言に変更する方法もお知らせいたします。

 

 

「このページの先頭へ」ボタンの文字色、背景色等の変更

ワードプレス管理画面より

『外観』⇒『テーマの編集』と進み、テーマの編集画面に行き

『design.css』を選択します。

 

このページの先頭へ01

 

 

このページの先頭へ02

 

 

このページの先頭へ03

 

 

/*——————————————————–

ページトップ

——————————————————–*/

****************

途中省略

****************

.page-top a:link,

.page-top a:visited{

background: url(./images/common/bg-pagetop.png) 15px 21px no-repeat #0099ff; 通常時背景色

color: #fff; 通常時文字色

}

 

.page-top a:hover,

.page-top a:active{

background: url(./images/common/bg-pagetop.png) 15px 21px no-repeat #00cc99; マウスオーバー時背景色

color: #fff; マウスオーバー時文字色

}

 

この黄色の部分のカラーコードを変更して頂くと

ボタンの背景色や文字色が変更できます。

 

 

 

賢威6.2『このページの先頭へ』文言を変更する方法

『このページの先頭へ』という文言を変更したい場合は

ワードプレス管理画面より

『外観』⇒『テーマの編集』よりテーマの編集画面に行き

『フッタ（footer.php）』を選択します。

 

このページの先頭へ01

 

 

このページの先頭へ04

 

 

このページの先頭へ05

そして、

下記のコードの場所に行き、

『このページの先頭へ』という文言を任意の言葉にすることで

変更することができます。

 

<!–▼ページの先頭へ戻る–>

<p class=”page-top”><a href=”#container”>このページの先頭へ</a></p>

<!–▲ページの先頭へ戻る—>

 

 

いかがでしたか？

非常に簡単でしたね＾＾

ちょっとした心遣いが訪問者にとって

ありがたいということになるのではないでしょうか。

 

ユーザビリティの向上にもなりますので

是非この機会に設定して下さい。

 

 

最後までありがとうございました。

ヒロ