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

STORK トップへ戻るボタン カスタマイズ
おかぴー

こんにちは!
WEBデザイナーのおかぴー(@blueokap)です。

当ブログは、挫折しないブログ作りと収益化を応援するブログです!

詳しくはこちらをどうぞ!

 

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

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

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

 

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

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

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

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

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

 

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

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

 


編集するファイル

 

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

  1. footer.php
  2. CSS

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

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

カスタマイズする前に
カスタマイズをするときは、子テーマを使ってバックアップをとってから行ってください。

CSSを貼り付ける場所はこちらから。

 

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タグについて詳しい設定方法を知りたい方はこちらをどうぞ↓^^

ワードプレスで画像の圧縮・alt設定・貼り付けを効率的に行う方法

2018.11.27

 

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

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

ただ、少し小さいなぁと感じる場合は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
    →矢印の大きさを変更できます。
    →パソコンでも、このコードを追記してあげれば矢印の大きさを変更は可能です。

 

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

当ブログのカスタマイズコード

/*パソコン*/
#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を使い、薄い影をボタン下に付けた

 

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

トップへ戻るボタン 猫

 

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

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

ではまた!

ブログ作り、何から始めたらいいか迷っている人へ

WordPressの設定、記事作り、収益化も・・・ブログと一言で言ってもやることいっぱい、どれから手をつけたらいいか分からない・・・

実は、デザインを整えるのも、ブログの方向性が決まってから進めるのがおすすめ!

一度自分のブログを俯瞰して(全体を上から見る)どんな方向性にすればいいかを見直す機会を作ることの重要性を解説。

同時に、あなたのブログ作りを加速させる「リサーチ」「ターゲット理解」「考える力」を鍛えよう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください