3分で出来る!?Simplicityで「トップへ戻るボタン」を自由にカスタマイズする方法が楽しい!

この記事は約3分で読めます。

ちょーえがお 男の子

 

わたしは、テーマSimplicityを使用してこの記事を書いています。

 

このテーマは、初心者にも簡単にカスタマイズ出来るように配慮して作られているので、使用していてものすごく楽しいです(*^o^*)

 

開発者のわいひら様には本当に感謝です!!

 

さて、今回わたしがカスタマイズしたのはこちら。

 

記事を読んでいるときに表示される「トップへ戻るボタン」。

スクリーンショット_2016-03-10_6_18_47

 

記事読んでいる時もここに(=゚ω゚)ノ

スクリーンショット 2016-03-10 7.34.13

 

もちろん、デフォルトのままでもわかりやすくて良いのですが、せっかくなら自分好みにカスタマイズしたくてやってみました♪

 

結果、

 

こんな風になりました\(*^o^*)/

スクリーンショット_2016-03-10_6_20_51

 

記事読んでる時も飛んでます♪( ´▽`)

スクリーンショット 2016-03-10 7.35.29

 

方法はたったの2ステップ!

 

ちょー簡単なので、ぜひぜひやってみてください(=゚ω゚)ノ

 

スポンサーリンク

ステップ1:画像を用意

 

まず、自分が表示したい画像を用意しましょう。

 

なんでも良いのですが、サイズは縦・横100px(ピクセル)前後がオススメです(=゚ω゚)ノ

 

あまり大きすぎると、なんだかよくわからなくなりそうですので笑

 

ちなみにわたしの使用した画像はこちら♪

s_TOP-logo

 

無料で簡単にカッコイイロゴが作れてしまうこちらで作成しました!

squarespace

 

わたしのは無料版なので、下に会社の名前が出ます。

(有料版だと、会社名は消えます)

TOP-logo (1)

 

でも、今回はトップボタンサイズに小さく表示されるため、あまり会社名は目立ちません。

 

特にこだわりがなければ、無料版で良いと思います♪

 

画像を縮小するのに使用したサイトはこちら♪

画像を縮小する!

 

画像を選択し、サイズを100pxと入力するだけで簡単に縮小されます\(^o^)/

 

ステップ2:設定する

 

画像が用意出来たら、あとは設定するだけです♪

 

「ダッシュボード」→「外観」→「カスタマイズ」に行きます。

スクリーンショット 2016-03-10 6.55.51

 

「レイアウト(全体・リスト)」へ行きます。

スクリーンショット 2016-03-10 6.15.51

 

「トップへ戻るボタンに画像を指定」へ行き、先ほどの画像をアップロードするだけ!!

 

わたしの場合は飛行機♪( ´▽`)

スクリーンショット 2016-03-10 6.20.00

 

これで、あなたの「トップへ戻るボタン」が可愛く・カッコよくカスタマイズ出来ているハズ!

 

ちょー簡単ですよね(*^o^*)

 

ちなみに、スマホの表示ではこんな感じ♪

スクリーンショット 2016-03-10 7.17.29

 

パソコンの表示よりすこーし大きな感じはしますが、記事を読むときはスクロールするので全く問題はなしです\(^o^)/

 

まとめ

 

ということで、簡単2ステップ!で「トップへ戻るボタン」をカスタマイズすることが出来ました♪

 

これでまた、自分らしいサイトに近付きましたね♪( ´▽`)

 

嬉しい〜!!!

 

これからも、自分らしくカスタマイズしていきたいです。

 

本当に、Simplicity大好きです(*^o^*)

 

この記事を読んでいただき、どうもありがとうございました!!

 

またお会いしましょう。

タイトルとURLをコピーしました