2014-04-10

ワードプレスブログのトップへ戻るボタンをカスタマイズする方法

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を指定します。

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

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

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

ホームページからの集客できてますか?

ワードプレステーマ「Minimal WP」
Minimal WPのWordPressテンプレートは、月間45万PV超のブログ運営のノウハウを詰め込んだミニマルデザインテンプレート。HTML不要で初心者でも簡単におしゃれなホームページが作れます!ブログ・自社メディアを始めるなら今がチャンスです!
by
関連記事