stinger5「ページトップへ戻る」のカスタマイズ

stinger 5カスタマイズ, ページトップへ戻るstinger 5, ページトップへ戻る

stinger5

stinger5「ページトップへ戻る」のカスタマイズ

stinger5の「ページトップへ戻る」のボタンをカスタマイズしてみました。

  • 現在テーマはghsh2を使用してますが、別ブログにてstinger5で運営中
  • ここで紹介するstinger5のカスタマイズは、私の備忘録です
  • stinger5はカスタマイズ用のテーマ作りになっていると思います
  • バックアップは忘れずに!!!

以下記事はワードプレス(WP)や、テーマのgush2をカスタマイズしたやり方等を忘れないために書き留めた備忘録です

これらを参考にカスタマイズする時は、自己責任でお願いいたします。

ソースコードを変更する場合は、FTPソフトを使ってサーバーにアップ。または各サーバーのオプション(ファイルマネージャー)等(例はさくらサー
バーです)でカスタマイズを行ってください。

stinger5のデフォルトの「ページトップへ戻る」のボタンは以下の画像です。

stinger5022

なんかあまり目立ちませんよね!!!

まあ~ 目立ちすぎるのも困りますが・・・。

そこでさり気なくカスタマイズしてみました。

 

 

stinger5 ページトップ カスタマイズ

子テーマ内のフッター (footer.php)を開きます。

ワードプレスの「テーマ編集」を開いて、子テーマの「footer.php」を選択し
ます。(またはテーマ内の「footer.php」)
開いたら下記コードを探します。

[php]
<?php bloginfo(‘description’); ?>
</p>
<p class=”copy”>Copyright&copy;
<?php bloginfo(‘name’);?>
,
<?php the_date(‘Y’);?>
All Rights Reserved.</p>
</footer>
</div>
<!– /#wrapper –>
<!– ページトップへ戻る –>
<div id=”page-top”><a href=”#wrapper” class=”fa fa-angle-up”></a></div>
<!– ページトップへ戻る 終わり –>
<?php wp_enqueue_script(‘base’,get_bloginfo(‘template_url’) . ‘/js/base.js’, array()); ?>

<?php if(is_mobile()) { //PCのみ追尾広告のjs読み込み ?>
<?php } else { ?>
<?php wp_enqueue_script(‘scroll’,get_bloginfo(‘template_url’) . ‘/js/scroll.js’, array()); ?>
<?php } ?>
[/php]

 

上記コード内の
[php]
<!– ページトップへ戻る –>
<div id=”page-top”><a href=”#wrapper” class=”fa fa-angle-up”></a></div>
<!– ページトップへ戻る 終わり –>
[/php]

のコードのうち

[php]
<div id=”page-top”><a href=”#wrapper” class=”fa fa-angle-up”></a></div>」
[/php]

のコードを
[php]
<div id=”page-top”><a href=”#wrapper”>↑<br>PAGE TOP</a></div>
[/php]
に変更した。

 

子テーマのスタイルシート(style.css)を開きます

ワードプレスの「テーマ編集」を開いて、子テーマの「スタイルシート(styl
e.css)」を選択します。(またはテーマ内の「スタイルシート(style.cs
s)」)

スタイルシート(style.css)に下記コードを追記します。

[css]
/*—————————–
「ページトップへ戻る」のカスタマイズ
——————————*/

#page-top {
position: fixed;
z-index: 9999;
bottom: 0;
font-size: 12px;
}
#page-top a {
color: #fff;
background-color: #00f;
border-radius: 15px 15px 0 0;
padding: 10px;
}
#page-top a:hover {
text-decoration: none;
background: #999;
color: #f00;
}
[/css]

 

まとめ

カスタマイズの画像です。

stinger5023

デフォルトではちょっと判らなかったので、少し目立つようにカスタマイズし
てみました。