賢威7.0

「トップに戻る」ボタンをカスタマイズする方法:賢威7

goto-top-button-thumbnail

賢威7 ではコーポレート版やビューティー版、プリティ版など、いくつかのテーマの中から使用するサイトに合わせたテーマを選ぶことができます。

ナビゲーションメニューやサイドバー、背景など、テーマによって違った画像が用意されていますが、トップに戻るボタンもそれぞれのテーマに合わせた画像が用意されています。ボタンのような細かいところにも気を使ってくれるのは嬉しいですね。

今回のカスタマイズでは、そんなトップに戻るボタンをカスタマイズする方法をご紹介したいと思います。

カスタマイズ前

↓ カスタマイズ前のトップに戻るボタン

top-button-before

カスタマイズ後

カスタマイズ 1
↓ トップに戻るボタンの大きさを変更

top-button-after

カスタマイズ 2
↓ トップに戻るボタンを別の画像に変更

top-button-standard-mouseoff

[ad]

今回はPHPファイルを編集するので、バックアップを取ってから作業するようにして下さい。
画面が真っ白になることもあるので、小さいものでもPHPコードのミスには要注意です。

1. 「トップに戻る」ボタンを別のテーマの画像にする

まずは「トップに戻る」ボタンの画像をプリティ版の画像からスタンダード版の画像にしてみましょう。

今回はプリティ版を使用しましたが、コーポレート版やビューティー版など、別のテーマでも同じようにカスタマイズすることが出来ます。

1-1. 同じ名前の画像を差し替えるだけ

賢威7では、common フォルダの中の page-top_off.png という画像がトップに戻るボタンとして表示されるように設定されているので、、、

common フォルダの中の page-top_off.png という名前を付けた画像がトップに戻るボタンとして表示されます。

↓ common フォルダ

top-button-folder

マウスオーバーしたときには page-top_on.png という名前の画像を使うように指定されているので、、、

マウスオーバー時の画像を差し替えるときには、通常の状態と同じように page-top_on.png を違う画像に変更すれば、お好みの画像に差し替えることができます。

↓ 通常の状態(page-top_on.png)

mouse-off-image

↓ マウスオーバーした時の画像(page-top_off.png)

mouse-on-image

なので、トップに戻るボタンの画像をスタンダード版の画像に差し替えると、スタンダード版の画像が表示されるようになります。

top-button-standard-mouseoff

今紹介した方法で、他の賢威のテーマからお好みの画像を使い回すことができます。

(※)画像の名前とアップロード先のフォルダを同じようにすれば、賢威以外の画像でも自由に使うことが出来ます。

2. 「トップに戻る」ボタンの画像サイズを変更する

次に「トップに戻る」ボタンの画像サイズを変更してみます。
画像サイズの指定をしているのは footer.php ファイルの23行目付近にある以下のコードです。

<!--▼ページトップ-->
<p class="page-top"><a href="#top"><img class="over" src="<?php bloginfo('template_url'); ?>/images/common/page-top_off.png" width="80" height="80" alt="ページの先頭へ"></a></p>
<!--▲ページトップ-->

この中の、

// 「トップに戻る」画像を表示
<img class="over" src="<?php bloginfo('template_url'); ?>/images/common/page-top_off.png" width="80" height="80" alt="ページの先頭へ">

というコードで、「トップに戻る」画像を表示させながら、画像の大きさも一緒に指定しているんですね。なので、画像サイズを変更するにはこの部分を変更します。

2-1. 画像を「縦横50px」に変更

まずは「トップに戻る」ボタンの画像サイズを「縦横50px」にします。

画像の大きさは、img タグの中の width="" height="" の部分で指定できるので、これを縦横 50(px)に変更すると、以下のようになります。

<!--▼ページトップ--> からのコード(編集後)

<!--▼ページトップ-->
<p class="page-top"><a href="#top"><img class="over" src="<?php bloginfo('template_url'); ?>/images/common/page-top_off.png" width="50" height="50" alt="ページの先頭へ"></a></p>
<!--▲ページトップ-->

width=""height="""" の中には px が付かず、必要なのは数字だけということに注意して下さい。

これで画像サイズを変更することが出来ました。
他の画像サイズへの変更についても、先ほどの 50 という数字部分を変更すればお好みの大きさで表示することが出来ます。

top-button-after

2-2. 少しでもサイトの表示を早くするために

ここまでのカスタマイズで「トップに戻る」ボタンの大きさを変更することが出来ましたが、読み込まれる画像サイズは変更の前後で全く変わりません。
(50pxの大きさに変更しても、読み込まれる画像サイズは80pxのままなのです)

なので、少しでもサイトの表示を早くするためには、50pxなどの表示したい大きさにリサイズしておくのががオススメ!色数が少ないものは gif にしてもいいかもしれません。

サイトの表示速度に悩んでいた方、ぜひお試し下さい!