【STORK】トップへ戻るボタンを好きな画像にカスタマイズしよう!

おかぴーおかぴー

こんにちは、WEBデザイナーのおかぴーです!

絵を描く仕事をしたかった僕が、WEBデザイナーになった理由はこちらのプロフィールへ。稼げるブログを作りたい人はこちらへ。

今回の記事では、テーマ「STORK」で、右下にあるトップへ戻るボタンを好きな画像に変えてみたいと思います!

デフォルトだと、こんな感じですね↓

STORK トップへ戻るボタン カスタマイズ

 

当ブログでは、こんな画像にして遊んでます(笑)↓

STORK トップへ戻るボタン カスタマイズ

みみこみみこ
遊びますね〜w
でも、そういう好奇心を失わないのが若さを保つ秘訣ですよ!
おかぴーおかぴー
・・わ、若いもん!←(精神年齢w)

デフォルトでは、Font Awesomeという便利なアイコン集の矢印アイコンを使い、CSSのコードで透明度を下げて設定しているんですが、

僕の場合、カスタマイズしたのはこの4つの項目です↓

  • 画像に変更
  • 幅・高さをデフォルトより大きく
  • 背景色を変更
  • 薄い影を付けて立体的に

 

ちょっとした遊び心を加えるだけで、ブログ作りがもっと楽しくなりますよ!

では、さっそくカスタマイズ方法を書いていきますね!

 

編集するファイル

 

このカスタマイズで編集するのは、この2つです。

  1. footer.php
  2. CSS

 

ちなみに、画像の幅や色など、細かな箇所を変えない場合はCSSは編集する必要はありませんので、footer.phpだけで十分です。

もし、画像を設定して、細かい箇所を調整をしたい場合はCSSもカスタマイズしましょう。

『カスタマイズする前に』 カスタマイズをするときは、子テーマを使って、バックアップをとってから行ってください。functions.phpも必ず子テーマにインストールして、そちらを作業で使用してください。

 

footer.phpを編集する

 

「外観>テーマの編集」から子テーマを選び、footer.phpを開きます。

すると、2行目にこのようなコードがあるはずです。

STORK トップへ戻るボタン カスタマイズ

<a href="#header" title="ページトップへ"><i class="fa fa-chevron-up"></i></a>

 

<a href="#header" title="ページトップへ">〜</a>で囲まれてる、

<i class="fa fa-chevron-up"></i>

こちらを↓

<img src="【あなたのアップロードした画像のURL】">

に変えるだけ!

 

具体的には、僕のブログではこのように画像を指定しています↓

<a href="#header" title="ページトップへ">
<img src="https://okap01.com/wp-content/uploads/2019/09/top-icon3.png" alt="topへ戻る"></a>

 

『画像のURLとは?』
WordPressでは、画像をアップロードすると自然とURLが決定します。
そのURLをコピペして設定するだけでできるので簡単です!

 

URLの確認方法はこちら↓

 

①メディア>ライブラリを開く

メディアURL 確認方法

 

②URLをコピペします

メディアURL 確認方法

 

余談ですが、下の代替テキストに文言を入れてあげると、Googleが画像がどんな意味か?を認識できるようになります。

「altタグ」(オルトタグ)と言いますが、SEOで良い評価をもらうためにも設定しておくことが推奨されていますので、設定していない方は、ついでに設定しておきましょう。

altタグについて詳しい設定方法を知りたい方はこちらをどうぞ↓^^

合わせて読みたい

おかぴー こんにちは、WEBデザイナーのおかぴーです! 絵を描く仕事をしたかった僕が、WEBデザイナーになった理由はこちらのプロフィールへ。稼げるブログを作りたい人はこちらへ。 今回は、ワードプレスで画像の[…]

画像のアップロード方法

 

編集したら保存ボタンを押して確認してみてください。

これで画像が表示されたと思います!

ただ、少し小さいなぁと感じる場合はCSSで幅を変えてみましょう!

 

CSSを編集する

 

今回は、僕のカスタマイズ例を参考に書いていきますね。

まず、デフォルトの設定はこうなっています↓

/*パソコンの場合*/
#page-top a{
background-repeat: no-repeat;
text-decoration: none;
width: 55px;
height: 55px;
border-radius: 50%;
text-align: center;
line-height: 55px;
background: rgba(51, 51, 51, 0.5);
padding: 0;
display: block;
color: #fff;
}

/*スマホの場合*/
@media only screen and (max-width: 767px){
background-repeat: no-repeat;
text-decoration: none;
width: 42px;
height: 42px;
line-height: 41px;
font-size: 0.85em;
}

 

デフォルトで設定されているコードを少しだけ解説します^^

  • width・height
    →幅と高さを指定。基本的に両方は同じ数値で。
  • border-radius
    →枠の丸さを指定。0%だと角が四角になる。
  • text-align
    →centerで、矢印が中央に来るように指定。
  • line-height
    →高さと数字を合わせることで、真ん中に矢印が表示される。
  • background
    →ボタンの背景色を指定。デフォルトでは薄いグレーになってます。
    →rgba(51, 51, 51, 0.5)の、左3つのカラーコードで色を指定。0.5が透明度を指定しています。
    →透明度:0は透明度100%=見えない。1で透明度0。0.5は半透明。
  • color
    →矢印の色を指定。

 

※スマホの場合のみ↓

  • font-size
    →矢印の大きさを変更できます。
    →パソコンでも、このコードを追記してあげれば矢印の大きさを変更は可能です。

 

そして、以前の僕のブログ(STORK)でのカスタマイズはこんな感じになっています↓

/*パソコン*/
#page-top a{
width:100px;/*幅を100pxに*/
height:100px;/*高さを100pxに*/
background:#ffc805;/*背景色をオレンジ色に*/
box-shadow:0 5px 8px rgba(0,0,0,.3);/*ボタンに影をつける*/
}

/*スマホのときはデフォルトより5pxだけ大きく表示*/
@media screen and (max-width:768px){
#page-top a{
width:60px;
height:60px;
}
}

 

  • スマホで幅・高さを5pxずつ大きくし、60pxに変更
    →パソコンでは幅・高さを100pxにした
  • 背景色をオレンジ色(#ffc805)にして外枠の色を変更した
  • box-shadowを使い、薄い影をボタン下に付けた

 

これで、立体感のあるトップへ戻るボタンの完成です!

トップへ戻るボタン 猫

 

ボタンから飛び出して、この子もすごいはしゃいでますが(笑)、こういったカスタマイズはオリジナリティが出て、ブログが装飾されていく感じがして楽しいですね!

ぜひ、あなたのブログにも楽しさが一つでも増えますように^^

ではまた!

>2020/4/5 テーマ「THE THOR」でリニューアル!

2020/4/5 テーマ「THE THOR」でリニューアル!

2年近く「STORK」を愛用してきた当ブログは、これから「THE THOR」でデザインも新たに生まれ変わりました。(STORK、今までありがとう!)

これからも当ブログではブログ作りに役立つ情報を発信していきます。よろしくお願いします(o^^o)

CTR IMG