stinger5「ページトップへ戻る」のカスタマイズ 2
前回カスタマイズした「ページトップへ戻る」は、はじめてのカスタマイズで目立ちすぎず記事に邪魔にならないようカスタマイズしてみたが、なんかイマイチだったのでチョコット変えてみた。
「ページトップへ戻る」をカスタマイズ 2を紹介および解説してます。
現在のカスタマイズ 1のコード
- ここで紹介するstinger5のカスタマイズは、私の備忘録です。
- バックアップは忘れずに!!!
以下記事はワードプレス(WP)や、テーマのstinger5をカスタマイズしたやり方等を忘れないために書き留めた備忘録です
これらを参考にカスタマイズする時は、自己責任でお願いします。
ソースコードを変更する場合は、FTPソフトを使ってサーバーにアップ。または各サーバーのオプション(ファイルマネージャー)等(例はさくらサーバーです)でカスタマイズを行ってください。
[php]
<!– ページトップへ戻る –>
<?php if(is_mobile()) { ?>
<?php } else { ?>
<div id=”page-top”><a href=”#wrapper”>↑<br>PAGE TOP</a></div>
<?php } ?>
<!– ページトップへ戻る 終わり –>
[/php]
でした。
これじゃ~矢印が少し判りづらいと思い、アイコンフォントにした。
子テーマ内のフッター (footer.php)を開きます。
上記コード内の
[php]
<div id=”page-top”><a href=”#wrapper”>↑<br>PAGE TOP</a></div>
[/php]
を削除して下記コードを追加した。
[php]
<div id=”page-top”><a href=”#wrapper” class=”fa fa-hand-o-up”><br><br>PAGE<br>TOP</a></div>
[/php]
スタイルシート(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]
これを今回は以下のように変更した。
[css]
/*———————————-
「ページトップへ戻る」のカスタマイズ 2
———————————–*/
#page-top {
position: fixed;
z-index: 9999;
bottom: 0;
font-size: 15px;
}
#page-top a {
color: #fff;
background-color: #00f;
border-radius: 15px 15px 0 0;
padding: 10px;
}
#page-top a:hover {
text-decoration: none;
background: #111;
color: #fff;
}
[/css]
まとめ
今回のカスタマイズも「目立ちすぎず記事に邪魔にならないよう」をコンセプトにカスタマイズしてみましたが、アイコンフォントにして判りやすいようにして見た。
まあ~、前回よりましかなあ~。
コメント