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

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

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

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

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

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

↑デフォルトだとこんな感じなので、

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

↑こんな画像に変更してみようと思います。

みみこ

遊びますね〜w
でも、そういう好奇心を失わないのが若さを保つ秘訣ですよ!

おかぴー

わ・若いもん!

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

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

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

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

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

目次

編集するファイル

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

STEP
footer.php
STEP
CSS

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

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

カスタマイズするときは、子テーマを使って、バックアップを取ってから行ってください。
カスタマイズは必ず自己責任でお願いいたします。

footer.phpを編集する

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

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

STORK トップへ戻るボタン カスタマイズ
<a href="#header" title="ページトップへ"><i class="fa fa-chevron-up"></i></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確認方法はこちら↓

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

メディアURL 確認方法

②URLをコピペします

メディアURL 確認方法

余談ですが、下の代替テキストに文言を入れてあげるとGoogleが画像がどんな意味か?を認識できるようになります。
「altタグ」(オルトタグ)と言いますが、SEOで良い評価をもらうためにも設定しておくことが推奨されていますので、設定していない方はついでに設定しておきましょう。

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

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

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

ただ、少し小さいなぁと感じる場合は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を使い、薄い影をボタン下に付けた

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

トップへ戻るボタン 猫

こういったカスタマイズはオリジナリティが出て、ブログが装飾されていく感じがして楽しいですね!

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

ではまた!

おまけ

ブログを作っていると、ふと

「見た目をもっとカッコよくしたい」「おしゃれでキレイな感じにしたい」っていう衝動が来ませんか?

みみこ

あるあるですね(笑)なんかしっくりこないなーとか、
でも、どう作っていいか操作も含めて分からないことがあります。

おかぴー

そんな時は、WEBデザインの勉強を少しだけでもいいので、
やってみるのもいいと思います^^

僕は見た目が納得がいくものが作れると、モチベーションが上がります。

よーし!また記事を書こうかな〜って思えるし、書いたものを見返して

「 はぁぁぁぁ〜(*´꒳`*)ウキウキ 」

ってなります(笑)

僕がこのブログを通して知り合った方は、みなさん自分のブログの見た目(デザイン性)とか、作り込み(WordPressの操作)に悩んでいる方が多かったです。

僕自身も初めはWordPressの管理画面からよく分からなくて、どこをいじったら何が変わるのか?もそうだし、

色を変えたり大きさ変えたり、基本的な内容でも何時間もかかったことがありました。

知り合った方のお悩みを聞いて改めて感じたことは、

そもそもWordPressでブログを作る=WEBデザインの知識が多少なり必要になるということです。

デザイン知識然り、コーディング知識しかり。。

でも、WEBデザインの勉強と言ってもその範囲はめちゃくちゃ広いし、ぶっちゃけ終わりはありません。

専門用語も多いし、だからと言って初心者の人が幅広く手を出して勉強するのも大変です。(ゴールを見失います)

それなら、

WEBデザイン初心者の人でも、モチベーションが爆上がりできるような必要範囲を絞ったブログ制作の教材があったらいいんじゃないか?と思ったんですが、どうでしょうか?(*^^*)

具体的には、こんな内容を盛り込む予定です↓

  • WEBデザインの知識を活かして魅力的なメインビジュアル(ブログのメイン画像・アイキャッチ画像)を楽しみながら作れるようになれる
  • カスタマイズが一定レベルでできるようになれる
  • パソコン自体の知識も身に付く
  • 程よい範囲のWEB知識がつくから、情報リテラシー(※)が高くなる
  • 登録してくれた方それぞれのお悩みに特化した、特別コンテンツを受け取れる

※情報リテラシー:世の中にあふれる多くの情報を、適切に活用できる能力

これから作っていくことになるのですが、

提供開始まで先行登録してくれた方には別途プレゼントもお送りしたいと考えています

最新の知識を受け取ることができますし、

登録してくれた方それぞれのお悩みに応じたコンテンツの提供ができることも、このLINEの一つの魅力かなと。

少しでも作れるよ〜って人にも、ためになる内容を盛り込む予定もあるので、興味がある方はLINE登録してもらえると嬉しいです^^

↓↓↓

チェックしてね
「お気軽にどうぞ〜」
よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメント一覧 (4件)

  • とても興味深いカスタマイズ方法を詳しく載せてくださり、ありがとうございます!
    ただ、現在のSTORKのフッターを見てみると、HTMLタグのようなものは見当たらず、
    echo ”;
    dynamic_sidebar( ‘footer1’ );
    echo ”;
    となっていました。この場合、画像に変えることは難しいでしょうか?
    自分なりに試してみても、ロールバック?されたなどエラーになってしまい変更ができません。

    お忙しいところ恐れ入りますが、画像に差し替える方法をご教示いただけますと幸いです。

    • Okoさん、こんばんは!
      コメントありがとうございます(o^^o)

      なるほど、自分の今のSTORK内にもdynamic_sidebar(‘footer1’);という記載はありますが、
      可能であれば、一度footer.php内のコードなどを確認させて頂きたいのですが。
      他にもお伺いしたい点もあるので、そちらも含め別途メールでご連絡しますので返信もらえると嬉しいです!

      よろしくお願いします。

  • はじめまして!お尋ねしたいのですが、ストークでこのトップに戻るボタンを非表示にする方法はあるのでしょうか?

    他のテーマだと、チェックを外すだけで簡単にできるようなのですが、ストークではどのようにするのか調べても出てきません。

    直接関係ない質問で申し訳ないです。もしご存じなら教えていただけますでしょうか。

    • はじめまして!

      ご返信とても遅くなりすみません。
      確かにチェックで表示・非表示を切り替えるものはなさそうでしたので、CSSのコードを使って見えなくする方法が一番いいと思います。

      こちらのコードを「外観>カスタマイズ>追加CSS」にコピペして、非表示にできると思いますよ。

      #page-top.pt-active{
      display:none;
      }

コメントする

CAPTCHA


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

目次