【Simplicity2】「トップへ戻る」を丸ボタンに変更等カスタマイズしたい!

【Simplicity2】の投稿ページや固定ページで下へスクロールさせると表示される「トップへ戻る」ボタンを色々とカスタマイズする方法を書きたいと思います。

矢印のアイコンを変える

現在デフォルトで設定されている「トップへ戻る」ボタンは、下記のような感じです。

矢印部分を別のものに変えたいと思います。

[ダッシュボード]の[外観]から[カスタマイズ]を押します。

「レイアウト(全体・リスト)」を押します。

「トップへ戻るボタンのアイコン(デフォルト:fa-angle-double-up)」部分までスクロールします。ほぼ一番下です。

おそらくデフォルトでチェックはついていると思いますが、万が一「トップへ戻るボタンの表示 トップへ戻るボタンを表示するか。」にチェックが入っていない場合は、チェックします。

現在のアイコンは「fa-angle-double-up」です。

アイコンはFont Awesomeを使っています。
詳しくは下記記事もありますので、よかったらご覧ください。

【Simplicity】Webアイコンフォント『Font Awesome』の使い方
Font Awesomeはサイト上で使われるようなさまざまなアイコンを「Webフォント」として利用できるようにしたものです。【Simplicity】でも使われていますので、ちょっと変えたいなというときの方法を書きたいと思います。 ...

下記のFont Awesomeサイトにいきます。

All 929 Awesome Icons

いろんな種類のアイコンのリストが表示されると思います。

「angle-up」にしてみます。クリックします。

「angle-up」が表示されたら、左下のほうを見ます。

設定するアイコン名は「fa-angle-up」です。

これを「fa-angle-double-up」と差し替えます。

アイコンが変わりました。

「fa-arrow-circle-up」にしてみます。

「fa-arrow-up」にしてみます。

「fa-caret-up」にしてみます。

「fa-rocket」にしてみます。

こんな具合に自由にFont Awesomeサイトから選んで設定すればよいかと思います。

画像にする

オリジナルの画像を設定することもできます。

例えばこんな画像を用意します。

ECサイト・ネットショップ素材を無料でダウンロードできる「EC design(デザイン)」さんで配布されているイラストです。

「トップへ戻るボタンに画像を指定」の「画像を設定」ボタンを押して、画像を設定します。

画像がアップされた状態です。

表示されました。

アイコンを大きくする

少しサイズを大きくしたい場合は、管理画面からの修正ではできず、スタイルシートに命令を追加します。
子テーマのstyle.cssに下記を追加します。

#page-top .fa-2x {
    font-size: 4em;
}
@charset "UTF-8";

/*!
Theme Name: Simplicity2 child
Template:   simplicity2
Version:    20161002
*/

/* Simplicity子テーマ用のスタイルを書く */

#page-top .fa-2x {
    font-size: 4em;
}

子テーマのstyle.cssをアップします。
少し大きくなったと思います。

長方形から丸ボタンにする

デフォルトの「トップへ戻る」ボタンは、長方形ですが、丸にしたい場合があると思います。
こちらも管理画面からはできず、style.cssをいじります。
親テーマにあるstyle.cssの1560行目あたりをみます。

/************************************
** TOPへ戻るボタン(Go to top)
************************************/
#page-top{
  position:fixed;
  display:none;
  right: 10px;
  bottom: 10px;
}

#page-top a{
  color:#fff;
  padding:7px;
  text-decoration:none;
  display:block;
  cursor:pointer;
  text-align:center;
  background-color: #aaa;
  line-height:100%;
  border-radius: 4px;
  font-size:11px;
}

「#page-top a」のborder-radius: 4px;を50%にします。

#page-top a{
border-radius: 50%;
}

さらにこのままだといじつな丸になるので、padding:7px;を調整します。

#page-top a{
border-radius: 50%;
padding:7px 14px;
}

これを子テーマのstyle.cssにいれます。

@charset "UTF-8";

/*!
Theme Name: Simplicity2 child
Template:   simplicity2
Version:    20161002
*/

/* Simplicity子テーマ用のスタイルを書く */

#page-top .fa-2x {
    font-size: 4em;
}

#page-top a{
border-radius: 50%;
padding:7px 14px;
}

子テーマには修正する部分だけを入れればOKです。それ以外は親テーマのスタイルが読み込まれます。
子テーマのstyle.cssをアップします。
丸くなったと思います。

もし違うアイコンを使い、丸くならない場合はpadding:7px 14px;の14pxを違う数字にして試してみましょう。
例えば「fa-arrow-circle-up」にすると楕円です。

padding:7px 10px;くらいにしてみます。

丸くなったと思います。

文字を入れたい場合

「TOP」などボタンにテキストを入れたい場合もあると思います。
こちらは、button-go-to-top.phpをいじることになります。
まずは親テーマにあるbutton-go-to-top.phpを子テーマフォルダにコピーして入れます。
基本的に子テーマには一部のphpしか入っていませんので、修正したいphpが発生した場合、親テーマからコピーして子テーマフォルダに入れてから修正をします。

<?php
//////////////////////////////////
// トップへ戻るボタンのテンプレート
//////////////////////////////////
if ( is_go_to_top_button_visible()  ): //トップへ戻るボタンを表示するか?>
<div id="page-top">
  <?php if ( get_go_to_top_button_image() ): //カスタマイザーでトップへ戻る画像が指定されている時 ?>
    <a id="move-page-top" class="move-page-top-image"><img src="<?php echo get_go_to_top_button_image(); ?>" alt="<?php _e( 'トップへ戻る', 'simplicity2' ) ?>"></a>
  <?php else: ?>
    <a id="move-page-top"><span class="fa <?php echo get_go_to_top_button_icon_font(); //Font Awesomeアイコンフォントの取得 ?> fa-2x"></span></a>
  <?php endif ?>

</div>
<?php endif; ?>

この中の

<a id="move-page-top"><span class="fa <?php echo get_go_to_top_button_icon_font(); //Font Awesomeアイコンフォントの取得 ?> fa-2x"></span></a>

を下記に差し替えます。

<a id="move-page-top"><span class="fa <?php echo get_go_to_top_button_icon_font(); //Font Awesomeアイコンフォントの取得 ?> fa-2x"></span><br />TOP</a>

子テーマのbutton-go-to-top.phpをアップします。

文字を入れたからか、楕円になりました。
padding:7px 19px;くらいにしてみます。

これで丸くなったと思います。

コメント