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不要で初心者でも簡単におしゃれなホームページが作れます!集客力アップ、ブランディングを成功させましょう!
WordPress新規導入の手順を解説
★有料note「人気ブログを作る10の秘訣」★

月間45万PVブログの運営ノウハウ(集客・ライティング・収益化テクニック)を全て公開中!
人気ブログを作る10の秘訣 >

by
関連記事