賢威,このページを先頭へ

賢威ではどのテンプレートでもデフォルトで「このページの先頭へ」という文字が入ったボタンがフッター部分の右下に設置されています。
記事が長くスクロール量が多いときに、一瞬でページトップに戻ってくれるこのボタンは、ユーザビリティに貢献してくれる便利な機能ですね。

が、意外とこの部分を変更しているサイトは少ないように思われます。
小さな部分とはいえど、サイトに訪れたユーザーはこういった細部もしっかり見ているので、ぜひこれをサイトの雰囲気やデザインに合わせた素敵なボタンに変更し、他サイトと差別化していきたいものですね^^

今回は、この「このページの先頭へ」というページトップボタンをカスタマイズしていく方法を解説します。

 

「このページの先頭へ」のデザイン変更方法

 

それでは早速、ページトップボタンのデザインを変更していきましょう。
今回は、賢威の「プリティ版」で解説していきます。

デフォルトではこのようになってますね。

184_2

 

文字(文言)を変更する

「このページの先頭へ」という文言がデフォルトで設定されていますが、今回の例ではこれを「TOPへ戻る」という文言に変更してみたいと思います。

編集するファイルは、「footer.php」です。
ダッシュボードメニューから次のようにアクセスしてください。

外観 → テーマの編集 →フッター「footer.php」

footer.phpの編集画面を開いたら、<!–▼ページの先頭へ戻る–> と記載のある部分を検索します。

文字(文言)の変更は、この1行下にある「このページの先頭へ」と書かれた部分を変更して行います。

184_3


変更後、「ファイルを更新」をクリックしてください。
サイトを確認すると、「TOPへ戻る」という文言に変更されていますね。

184_4

以上で、文字(文言)の変更は完了です。

 

文字色や背景色を変更する

 

次に、文字色や背景色を変更してみましょう。

こちらを編集するファイルは、「design.css」になります。
ダッシュボードメニューから次のようにアクセスしてください。

外観 → テーマの編集 →「design.php」

design.phpの編集画面で page-top a:link と記載のある部分を検索すると、下記の画面のような箇所が見つかりますね。

184_5※クリックで拡大

page-top a:link の下にある .page-top a:visited  .page-top a:active という箇所のカッコ内のカラーコードが変更箇所になります。

この2つのカッコの中の違いは、マウスオーバーしているかしていないかという違いになり、

.page-top a:visited → 通常の状態
.page-top a:active → マウスを乗せた時の動作

を表しています。

この2つのカッコの中のカラーコードを変更して、文字色と背景色を変更してみましょう。

 


文字色を変更するには、color: の後に続くカラーコードを変更します。

color: #******;

背景色を変更するには、no-repeat の後に続くカラーコードを変更します。

background: url(./images/common/bg-pagetop.png) 15px 21px no-repeat #******;

変更したら、「ファイルを更新」を押してサイトに反映させていきましょう。
サイトを確認すると、このように変更されています。

184_7

 

矢印アイコンの変更や削除

 

次に、ページトップボタンの中にある矢印アイコンの変更や削除についてご説明します。

この矢印アイコンが表されている場所は、下記の茶の枠線内の記述の部分になります。

184_6※クリックで拡大

デフォルトでは、テンプレートデータに格納されている画像が指定されていますが、こちらを変更することで画像の変更が可能です。

background: url(http://*******/) 15px 21px no-repeat #c8c8c8;

ここに、挿入したい画像データのURLを記述し、「ファイルを更新」すると、このように変更されます。

184_9

 


また、この矢印アイコンを削除してしまいたい場合は、urlに続くカッコの中身を空欄にします。

background: url() 15px 21px no-repeat #c8c8c8;

更新すると、

184_8

このように、矢印アイコンが削除されました。

 

「このページの先頭へ」を画像に変更する

 

賢威のページトップボタンのデフォルトデザインはとても独特なので、そのままだと「賢威」テンプレートだということが一目で分かります。
ついでにどのテンプレートを使っているかもバレバレですよね(笑)

サイトのデザイン性やオリジナリティを高めるには、賢威テンプレートを使っていることが分かってしまうのは極力避けたいところですので、このボタンをオリジナルの画像に変更していきましょう。

 


1. まず、「design.css」を編集します。

page-top a:link の下にある .page-top a:visited  .page-top a:hover に続くカッコ内の記述を削除します。

.page-top a:link,
.page-top a:visited{
background: url(./images/common/bg-pagetop.png) 15px 21px no-repeat #3E96B6;
color: #FEC34C;
}

.page-top a:hover,
.page-top a:active{
background: url(./images/common/bg-pagetop.png) 15px 21px no-repeat #00bfff;
color: #fff;
}

⇓ 削除

.page-top a:link,
.page-top a:visited{
}

.page-top a:hover,
.page-top a:active{
}

 

そして、page-top a:link の少し上にある .page-top a のカッコ内 border:要素も削除します。

.page-top a{
 display: block;
 padding: 20px 20px 15px 37px;
 border: 3px solid #fff;     ⇒ 削除
 border-bottom: 0;
 text-decoration: none;
 border-top-right-radius: 30px;
 border-top-left-radius: 30px;
 -webkit-border-top-right-radius: 30px;
 -webkit-border-top-left-radius: 30px;
 -moz-border-radius-topright: 30px;
 -moz-border-radius-topleft: 30px;
}

 


2. 次に、フッター「footer.php」に移動して<!–▼ページの先頭へ戻る–>の1行下の部分を下記のように変更します。

<a href=”#container”>このページの先頭へ</a>

⇓ 変更

<a href=”#container”><img src=”画像URL” ></a>

 

ファイルを更新して、以下のようにオリジナルの画像に変更されているのを確認してください。

184_10

 

「このページの先頭へ」を削除する

 

最後に、ページトップボタン自体を削除する方法を解説します。

記事量がそれほど長くならない場合などは、逆にこのボタンが邪魔になってしまうことがあります。
その場合は思い切って削除してしまうのもいいでしょう。

編集するファイルは、フッター「footer.php」です。

<!–▼ページの先頭へ戻る–>の部分を全て削除します。

184_13

ファイルを更新すると、以下のようにボタンが全て削除されています。

184_12

フッター部分にコンテンツが盛り込まれている場合などは、こちらの方がスッキリして見やすいでしょう。

また、テーマファイルを編集するときは、必ずバックアップを取ってから作業するようにしてくださいね^^