STINGER

STINGER PLUS2のページトップボタンを画像に変えて個性を出すためのカスタマイズ

投稿日: 更新日: 2017年11月21日

STINGER PLUS2のカスタマイズ記事もけっこう増えてきたでででーさん(@d3_dayo) です!

 
前回のSTINGER PLUS2カスタマイズ記事では、トップページなどのページ下に表示されるページネーション(ページ送りボタン)のカスタマイズを紹介しました。

そして今回は、よくページ右下に表示されているクリック or タップすると一気にページトップまで戻してくれるボタンを好きな画像に差し替えて、サイトデザインに個性を出すカスタマイズを紹介したいと思います。
 
記事タイトルではSTINGER PLUS2と銘打っていますが、今回のカスタマイズは旧バージョンのSTINGERでもOKです!(STINGER PLUSやSTINGER7で確認済みです)
 
 

スポンサーリンク

STINGER PLUS2

ダウンロード及び規約
STINGER PLUS2は上記のリンクからダウンロードすることができます。
 
 

完成図

今回紹介するカスタマイズを実際にテスト環境で施してみたので、まずは完成図としてスクリーンショットをお見せしたいと思います。
 
・PCでの表示

 
・スマホでの表示

 
上の画像はサンプルとしてFLAT ICON DESIGN様からお借りしたロケットを使っていますが、これはご自身の好きな画像へと自由に差し替えることができます。
 
 

事前にやるべきこと

footer.phpにサクッとコードを追加してSTINGER PLUS2にページトップボタンを表示する | カキタクナッタラ
これまでのSTIGNERシリーズではデフォルトでページトップボタンが右下に表示されていましたが、STINGER PLUS2では機能として実装はされているもののデフォルトでは非表示になっているので、まずは上の記事に記載した手順でページトップボタンを表示する必要があります。
 
 

ページトップボタンのカスタマイズ手順

さて、まずは上に貼った記事の手順でこのように…
 

 
右下にページトップボタンが表示されるようになったら、ボタンを画像に差し替えるカスタマイズをしていきます。
 
今回のカスタマイズではfooter.phpstyle.cssを編集するため、作業の前には元の状態へと戻せるように事前のバックアップを強くオススメします!
 

ボタンとして使う画像を用意する

まずはボタンとして使うための画像を用意する必要があります。この記事冒頭に貼った完成図では100×100の半透明PNG画像をボタンとして使用しています。
 
サイズはこの100×100くらいまでがちょうどいいと思います(これより小さくても良いと思う)画像はなるべくなら半透明のほうがコンテンツの邪魔にならないような気はしますね…。
 
半透明画像の作り方については、PowerPointなんかでも作れますので専用の画像編集ソフトをお持ちでない方にはオススメです!
【パワポ】PowerPointで簡単にできる半透明の画像を作る方法をご紹介します | カキタクナッタラ
ここから先の手順解説は、基本的に100×100の半透明画像を用意したという前提で進めていきます。
 

画像をサーバーにアップロードする

用意した画像をFTPでサーバー上のWordPressファイル内以下の階層にアップロードします。
 
/wp-content/themes/使用しているテーマ/images
 

footer.phpを書き換える

サーバーにボタンとして使用する画像をアップロードしたら、footer.phpを一部書き換えます。ファイルへのアクセスはWordPressの管理画面から外観→テーマの編集です。
 
まずはfooter.phpの中から…
footer.phpにサクッとコードを追加してSTINGER PLUS2にページトップボタンを表示する | カキタクナッタラ
この記事で紹介した、ページトップボタンを表示するための以下のコードを探し出します。

このコードを以下の通りに書き換えます。

footer.phpでの作業は以上です。
 

CSSで見た目を調整する

上記のfooter.phpでの書き換えを保存した時点でボタンがデフォルトのものからアップロードした画像へと切り替わったかと思いますが、このままだとボタンに最初から設定されている背景色がついたままかと思いますので、以下のCSSをstyle.cssに追記します。

背景色をなくすと同時にボタンが表示される位置も少し調整してみました(100×100の画像に置き換えた前提で指定してるので位置が変だと思った場合には、お好みで数値を変えるなり記述をなくすなりしてください!)
 
あとはおまけとして、ページトップボタンにマウスオーバーした際の拡大効果のCSSも貼っておきます。

こちらはお好みでstyle.cssに追記して使ってください。
 
 

まとめ

以上の手順でページトップボタンを画像に差し替えるカスタマイズの完了です。
 
画像によっては華やかすぎてメインコンテンツの邪魔になってしまう可能性もありますが(このブログのようにw)さりげない感じの画像ならサイトデザインに個性を出すためのスパイスになるのではないかと思います。
 
カスタマイズ手順も決して難しくはなく基本的にコピペでできるので、ぜひお試しあれ!
 
 
以下の記事ではこれまでにブログで紹介したSTINGER PLUS2カスタマイズ記事をまとめています!今回の記事で紹介したカスタマイズ以外にもいろいろと弄れる部分はありますので、こちらもどうぞご覧ください!
 
【誰でも簡単】これまでに書いたSTINGER PLUS2のカスタマイズ記事まとめ | カキタクナッタラ

でででーさん

2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。基本的に毎日更新。ウェブ・スマホなどIT関連のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。

あなたにオススメ