WordPress「SWELL」カスタマイズ|トップへ戻るボタンを透明orグラデーションにする。

WordPress「SWELL」カスタマイズ|トップへ戻るボタンを透明orグラデーションにする。

2019 12/11

今回はWordPressテーマ「SWELL」のカスタマイズとして、トップへ戻るボタンを透明orグラデーションにする方法について解説していきます。

SWELLのデフォルト設定ではトップへ戻るボタン四角にするか丸にするかは選べるものの、色自体は「白いボタン」で決まっていると思います(設定を見落としていたらすみません…)。

そこで、個人的にここの色や透明度を変えたいと思う節があったのでカスタマイズに踏み込んだのですが、当サイトでは以下のようにトップへ戻るボタンの背景色が「透明」になるように設定してみました

カスタマイズ後
画像

ちょっとわかりにくいですが、このようにボタンを通して背景にある文字が透けて見えるようになります。特にスマホで閲覧した際にわかりやすいと思います。

基本的には白いボタンでも十分に見やすくて良いのですが、当サイトのようにヘッダー部分を透過していたり「透明度」を意識したブログにおいては馴染みやすいデザインとなっているので、もしよかったら参考に取り入れてみてくださいね。

グラデーションカラーも合わせて紹介しているので、こちらも合わせて参考にしてもらえればと思います。

カスタマイズの際には子テーマを導入しておくことと、あくまで自己責任でお願いします(※エラーなどがあれば気軽にお問い合わせくださいね)。

目次

カスタマイズコードをコピーする

まずはカスタマイズコードをコピーしていきましょう、今回は背景透過ボタンに加えてグラデーションボタンの実装バージョンも用意したので自由に選んでもらえればと思います。

トップへ戻るボタンを背景透過

画像
/*トップへ戻るボタンを背景透過*/
#pagetop {
    background: rgba(0,0,0,0);
}

トップへ戻るボタンをグラデーションに(オレンジ)

画像
/*トップへ戻るボタンをグラデーションに*/
#pagetop {
    background: #FF8008;
    background: -webkit-linear-gradient(to right, #FFC837, #FF8008);
    background: linear-gradient(to right, #FFC837, #FF8008);
    color: #ffffff;
    border: none;
}

トップへ戻るボタンをグラデーションに(水色)

画像
/*トップへ戻るボタンをグラデーションに*/
#pagetop {
    background: #B2FEFA;
    background: -webkit-linear-gradient(to right, #0ED2F7, #B2FEFA);
    background: linear-gradient(to right, #0ED2F7, #B2FEFA);
    color: #ffffff;
    border: none;
}

トップへ戻るボタンをグラデーションに(ピンク)

画像
/*トップへ戻るボタンをグラデーションに*/
#pagetop {
    background: #FFAFBD;
    background: -webkit-linear-gradient(to left, #ffc3a0, #FFAFBD);
    background: linear-gradient(to left, #ffc3a0, #FFAFBD);
    color: #ffffff;
    border: none;
}

トップへ戻るボタンをグラデーションに(緑)

画像
/*トップへ戻るボタンをグラデーションに*/
#pagetop {
    background: #76b852;
    background: -webkit-linear-gradient(to left, #8DC26F, #76b852);
    background: linear-gradient(to left, #8DC26F, #76b852);
    color: #ffffff;
    border: none;
}

トップへ戻るボタンをグラデーションに(紺)

画像
/*トップへ戻るボタンをグラデーションに*/
#pagetop {
    background: #141E30;
    background: -webkit-linear-gradient(to left, #243B55, #141E30);
    background: linear-gradient(to left, #243B55, #141E30);
    color: #ffffff;
    border: none;
}

カスタマイズコードを貼り付ける

上記カスタマイズコードの中から1つを選んでコピーしたら、SWELL子テーマのスタイルシートに貼り付けます。

コードを貼り付ける場所

実際にコードを貼り付ける場所については、WordPressの管理画面から「外観→テーマエディター→スタイルシート(style.css)」に貼り付けていきましょう。

画像

実際にサイト上で確認する

コードを貼り付け「ファイルを更新」ボタンをクリックしたら、実際に記事の中にツイートを埋め込んでみましょう。これでカスタマイズは完了です。

カスタマイズがうまく反映されていない場合には、「コントロールキー(Ctrl)」「F5」を同時に押してキャッシュを削除した上でページを更新してみてください。

まとめ

ということで今回は、トップへ戻るボタンを透明にしたりグラデーションカラーにする方法について紹介しました。

トップへ戻るボタンはコンテンツそのものに比べるとそこまで大きな役割があるわけではないので、明らかに目立つ色やサイトに合わない色にするのは避けたいところですが、こういった細かい部分にもこだわってサイトデザインをカスタマイズしていくのもブログ運営の楽しみの1つでもあるでしょう。

カラーコードの部分を変更すれば他の色も試せますし「SWELL」以外のWordPressテーマにも応用可能なので、何か少しでも参考になれば嬉しいです。

この記事も読まれています

目次