Facebook
RSS Feed
Apr 10, 2014

トップへ戻るボタンをカスタマイズする方法

yutenji-11

サイトを下の方にスクロールして行くと、右下に現れる「トップへ戻るボタン」。
押すとぴゅーっとトップに戻るので便利ですよね。
Minimal WPのテーマには全て最初から装備されているのですが、
これをオリジナルのアイコンに変更したい時のカスタマイズ方法をご紹介します。

トップへ戻るボタンをカスタマイズする方法

まずはワードプレステーマの中のjsフォルダの中に入ってる、
「scrolltopcontrol.js」というファイルを開きます。
12行目の以下のところが表示されるボタンの部分です。

controlHTML: ‘<span style=”color:#CCC;font-size:28px”>↑</span>’,

デフォルトでは一番シンプルに矢印のテキストになってますが、

ここはhtmlも使えるので、好きな矢印ボタン画像にしたりも簡単に出来ます。
「’」と「’」の間に直接htmlで指定するだけです。

controlHTML: ‘<img src=”http://exsample.com/wp-content/uploads/up.gif”>’,

例えばこんな感じに、アップロードした矢印画像のURLを指定します。

そうすると指定した画像が表示されるようになります。
以上!スーパー簡単ですね!

*「<」と「>」は半角でね!

カスタマイズの無料サポートは行ってませんので、分からない所は自分で調べてくださいね!
あと必ずバックアップを取って作業することをオススメします!
Posted in WordPress初心者講座Comments Closed 

関連記事

今月の人気のワードプレステンプレートBEST 3

WordPressテーマ(スマホ対応レスポンシブデザイン)「Slauson」
公式サイト/マガジン/ビジネス・企業
WordPressテーマ(スマホ対応レスポンシブデザイン)White Studio
ビジネス・企業/コーポレートサイト/公式サイト
WordPressテーマ(スマホ対応レスポンシブデザイン)「Pantomime」
ギャラリー・ポートフォリオ / 公式サイト