GeneratePressテーマ「上に移動ボタン」（Back to Top Button）スタイルを変更する

上に移動（Back to Top）ボタンは、 Avada, Enfold, Newspaper など、いくつかの WordPress テーマのオプションとして提供されます。 GeneratePressテーマでも上に移動ボタンを表示したり、非表示にするオプションが含まれています。 この記事では、GeneratePressテーマの上に移動ボタンの色などのスタイルを変更する方法について説明します。

WordPress GeneratePressテーマの上に移動ボタン（Back to Top Button）スタイルを変更する

使用している WordPress テーマで「上に移動」（または「上にスクロール」）ボタンを提供する場合、テーマオプションを使用すると、が、もしテーマでは、この機能を提供していない場合には、 WPFront Scroll Topのような無料 WordPress プラグインをインストールして使用することができます。

GeneratePressテーマの上に移動ボタン（Back to Top Button）設定

このブログで使用されているGeneratePressテーマの場合 無料版でもBack to Topボタンを表示するためのオプションが提供されます。 しかし、カラーを変更するには、 プレミアムバージョン（GP Premium）を使用したり、CSSを使用してください。

「上に移動」ボタンは、 ルックス>飾る> Layout> Footerで有効または無効にすることができます。 （「外見」と「飾る」は WordPress バージョンに応じて、「テーマのデザイン "と"ユーザー定義 "と表示されることがあります。）

有効にしますを選択すると、活性化され、 無効にしますを選択すると、「上に移動」ボタンが無効になって表示されません。

ボタンを変更する

上に移動ボタンは、基本的に画面の右下に表示されます。 ボタンの位置は、CSSコードを使用して移動が可能です。

/* GeneratePress 테마의 위로 이동 버튼 위치 변경하기 */
.generate-back-to-top,
.generate-back-to-top:visited {
    bottom: 30px; /* 30px from the bottom of your screen, 화면 하단에서 30px */
    left: 30px; /* 30px from the left of your screen, 화면 왼쪽에서 30px */
}

上記の例では、デフォルトの 右：30px;를 左：30px;に置き換えました。

ユーザーCSSコードは ルックス>飾る>追加CSSで追加したり、チャイルドテーマのスタイルシートファイルに入力することができます。

色を変更する

GeneratePressテーマの 有料版を利用する場合には、 ルックス>飾る> Colors> FooterでBack to Topボタンの色を変更することができます。

背景色、テキストの色、マウスを上げたとき、背景色とテキストの色を指定することができます。

無料版を使用している場合には、単純なCSSでボタンバックグラウンドカラーをはじめとするスタイルを変更することができます。

/* GeneratePress 테마의 Back to Top 버튼 컬러 변경하기 */
.generate-back-to-top,
.generate-back-to-top:visited {
    background-color: rgba( 0, 0, 0, 0.4 ); /* rgba 또는 hex */
    color: #FFFFFF;
}

/* the button when you hover/click it */
/* 마우스를 올리거나 클릭할 경우의 버튼 스타일 */

.generate-back-to-top:hover,
.generate-back-to-top:focus {
    background-color: rgba( 0, 0, 0, 0.6 ); /* rgba 또는 hex */
    color: #FFFFFF;
}

その他のスタイル

他にも、CSSを少し知ること簡単にボタンのスタイルを必要に応じて変更することができます。

.generate-back-to-top,
.generate-back-to-top:visited {
    border-radius: 3px; /* how round the button is, 버튼 라운드 */
    line-height: 40px; /* how tall it is, 높이 */
    width: 40px; /* how wide it is, 너비 */
}

上部までスクロールする速度を変更する

クリックしたときのボタンがページの上部までスクロールするのにかかる時間を単純なフィルタを使用して設定することができます。

add_filter( 'generate_back_to_top_scroll_speed', 'tu_back_to_top_scroll_speed' );
function tu_back_to_top_scroll_speed() {
    return 400; // milliseconds, 밀리초
}

PHPコードは、チャイルドテーマの関数ファイル（のfunctions.php）に追加することができます。

ボタンが表示されるページの上部までの距離を変更する

基本的に「上に移動」ボタンは、ページ上端から300px以下にスクロールするときに表示されます。 この値を、簡単なフィルタを使用して変更することができます。

add_filter( 'generate_back_to_top_start_scroll', 'tu_back_to_top_start_scroll' );
function tu_back_to_top_start_scroll() {
    return 300; // 300px from the top, 상단으로부터 300px
}

同様チャイルドテーマの関数ファイルにPHPコードを追加するようにします。 チャイルドテーマ（子テーマ）を使用せずに親のテーマに直接コードを入れる場合は、今後のテーマが更新されると修正と追加が消えます。

おわりに

以上で WordPress GeneratePressテーマで「上に移動」ボタンのスタイルを変更する方法について説明しました。 テーマオプションを使用して設定が可能な場合には、オプションを介して設定し、そうでない場合には、基本的なCSSを介して制御が可能です。

GeneratePressは速度が速いテーマに評価されています。 サイトの速度が重要な、またはシンプルなサイトを運営したい場合、まともなテーマです。

ボタンアイコンなどを変更するなど、より詳細な設定を必要に応じてプラグインを使用することができますが、このような機能のために、別のプラグインをインストールすることはあまり望ましくないことです。

参照

• GeneratePressテーマフックを使用する
• WordPress GeneratePressテーマサイドバーの幅を調整する方法