【Business Pressカスタマイズ】ページトップに戻るボタンをカスタマイズする方法

ワードプレスの無料テーマ「Business Press」では、ページトップに戻るボタンが標準装備されておりますが、今回はそれのカスタマイズです。

「Business Press」では、少しスクロールしたところで、右下にグレーで半透明の上に戻るボタンが出現します。

こんな感じです。

これで十分とは思いますが、もっと濃くしたい！とか、丸くしたい！とか、簡単なカスタマイズで実現したと思います。

Contents

追加CSSでカスタマイズ

ダッシュボード「外観」＞「カスタマイズ」をクリックし、さらに「追加CSS」をクリックして、以下のコードを追加すると、

.back-to-top {
    background: #000;
    border-radius: 50%;
}
.back-to-top:before {
    color: #fff;
}

黒丸に白い矢印の上に戻るボタンになります。

例えば、四角く青いボタンにしたければ、以下のように。

.back-to-top {
    background: #000080;
    border-radius: 0;
}

こんな感じになります。

以上、「Business Press」のページトップに戻るボタンのカスタマイズでした。

「追加CSS」で簡単にデザインを変えることが出来ますのでお試ししていただけばと思います。