【Stork19カスタマイズ】TOPへ戻るボタンをカスタマイズ!!

Luca

みなさん、STORK19を使用していると他のブログを見たときに「あっ STORK19っぽいな」と感じるときありませんか?

私は特に「TOPへ戻るボタン」を見たときにそう感じます。
サイトの雰囲気は、カスタマイズ機能である程度差別化できると思います。
ですが、TOPへ戻るボタンは変更できないのでSTORK19を使っているサイトは同じデザインで表示されることになります。

なので、今回はTOPへ戻るボタンをカスタマイズしました。
カスタマイズ後のボタンは、スクロールして確認してみてください。

TOPへ戻るボタンとは

「TOPへ戻るボタン」は、ユーザーがウェブページをスクロールダウンした際、一クリックでページの最上部に戻ることができる便利な機能です。このボタンはユーザビリティの向上に貢献し、サイトのナビゲーションを容易にします。

ボタンのカスタマイズ

TOPへ戻るボタンのカスタマイズはCSSのみで可能です。
今回は、ボタン形状、ボタン色、矢印形状の3つを変更しました。

CSS編集

編集内容は以下の通りです。
このコードをそのまま貼り付けるとこのサイトと同じボタンになります。

貼り付け箇所は
①「外観」>「カスタマイズ」>「追加CSS」
②「外観」>「テーマファイルエディタ」>「style.css」
style.cssを使用する場合は必ず【stork19_custom】が選択されていることを確認してください。

#page-top .pt-button {
	border-radius: 50%;
	border: 1px solid #f4f3f9;
	background: #537aaaaa no-repeat;
}
#page-top .pt-button:hover {
	background: #e96c46aa;
}

#page-top .pt-button::before {
	content:'\f102';
}

簡単にコードの説明を
2行目:ボタン形状
3行目:枠線
4行目:ボタン色
7行目:ホバー時のボタン色
11行目:矢印

11行目の矢印はFontAwesomeのUnicodeを使用します。

FontAwesome

まずはFontAwesomeにアクセスします。

アクセス後は、検索>Freeをクリック

Freeのアイコンから好きなアイコンを探します。(PROが使える方はPROのアイコンでも大丈夫です)
気に入ったアイコンを見つけたらUnicodeをコピーします。
右上のfから始まる数字です。

コードをコピーしたらCSSを変更します。
変更箇所は、11行目のクォーテーションのあいだです。
content:’¥***‘;

CSSに記載する際には \(バックスラッシュ)は ¥(半角円マーク)になります。

まとめ

今回は「TOPへ戻るボタン」をカスタマイズしました。
CSSのみの変更なので自由度があまり高くはありませんが、印象は大きく変わると思います。
記事を読む時には、常に見えているボタンなので少しでもサイトにあっている方がいいですよね。