【STORK19】トップへ戻るボタンを画像に変更するカスタマイズ

STORK19 トップへ戻るボタン
おかぴーおかぴー

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

プロフィールはこちら。ブログデザインと組み合わせて効果的な収益化が目指せるこちらの記事もおすすめです^^

最近、STORKで新しいテーマ「STORK19」がリリースされましたね。

stork19

引用:STORK19公式ホームページ

 

以前こちらの記事で、「STORK」のトップへ戻るボタンを画像に変えたカスタマイズをご紹介していたのですが、↓

あわせて読みたい
【STORK】トップへ戻るボタンを好きな画像にカスタマイズしよう! STORKのテーマで、「トップへ戻るボタン」を好きな画像に変更します。具体的には、「画像・大きさ・背景色を変更して、うっすら影をつける」カスタマイズ!オリジナリティ溢れるボタンに変えてみるのも楽しいですよ!

 

「STORK19を持っていて、このテーマでも画像にしたいので教えていただけませんか?」と、

ブログのコメント欄からご質問が届きまして、

前の記事の方法だとうまく行かなかったので今回追記の記事ということで新しく作成しました。

 

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

 

 

目次

ご相談内容

 

OkoさんOkoさん

とても興味深い「カスタマイズ方法」を詳しく載せてくださり、ありがとうございます!
ただ、現在のSTORKのフッターを見てみると、HTMLタグのようなものは見当たらず、

この場合、画像に変えることは難しいでしょうか?
自分なりに試してみても、ロールバック?されたなどエラーになってしまい変更ができません。

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

おかぴーおかぴー

Okoさん、はじめまして!

ご覧いただいた記事は現在販売されている「STORK19」ではなく、1つ前の「STORK」なのでうまく行かないようです。

それでは、一緒にカスタマイズしてみましょー!

 

ちなみに、完成形はこちらです↓

<パソコン画面>

STORK19 トップへ戻るボタン

↓↓↓

<カスタマイズ後>

STORK19 トップへ戻るボタン

 

<スマホ画面>

STORK19 トップへ戻るボタン

↓↓↓

<カスタマイズ後>

STORK19 トップへ戻るボタン

 

こんな感じに、「グレー背景+矢印」の状態から好きな画像にカスタマイズしました!

ちなみに、スマホだけパソコンより小さく設定しています。

おかぴーおかぴー
ちなみにOkoさんには言ってなかったですけど、ブログに使われてるクマのイラスト、個人的に気に入ってます(笑)

 

 

カスタマイズするファイル

今回は、「CSS」ファイルにコードを追記してカスタマイズします!

 

#page-top a{
background: url(画像のURL);
background-repeat: no-repeat;
width: 120px;
height: 120px;
border-radius: 90%;
background-position: center center;
background-size: cover;
display: inline-block;
}

 

貼り付ける場所は、「外観>カスタマイズ」の中にある「追加CSS」の一番下に追記してみてください^^

追加CSSを貼り付ける方法はこちらの記事でまとめています↓

あわせて読みたい
直接テーマを編集せずにワードプレスでCSSをコピペする手順はこちら ブログに慣れている人なら、さくっと分かりますけど、最初は全く未知の領域ですよね。今回はブログ初心者の方にもわかりやすいように、CSSをカスタマイズするためにワードプレスのどこを操作すればいいのかを解説していきたいと思います。

 

おかぴーおかぴー
コードがそれぞれどんな意味か?
詳細は後ほど解説しますね。

 

赤文字で「画像のURL」と書いてあるところに、WordPressにアップした画像のURLを直接入力します。

例えば、僕のブログでアップしてた画像を使う場合↓

トップへ戻る

 

赤枠のURLをコピーして、そのまま貼り付けましょう。

stork19

 

この画像であれば、下のURLになります。

あわせて読みたい

↓これを踏まえて、さっきのコードはこうなります。

#page-top a{
background: url(https://okap01.com/wp-content/uploads/2019/09/top-icon.png);
background-repeat: no-repeat;
width: 120px;
height: 120px;
border-radius: 90%;
background-position: center center;
background-size: cover;
display: inline-block;
}

 

  • background:url(画像のURL);
    →背景画像を指定します。
  • background-repeat: no-repeat;
    →ボタンは背景画像として表示して今回設定をしていて、
    「no-repeat」により、リピートしないで表示することで大きさに関わらず画像は1つのみ表示されるようになります。
  • width、height
    →画像の大きさを指定します。
    縦横を同じサイズにする場合、両方とも同じ数字になります。
  • border-radius
    →画像の枠を丸くするためのコード。
    90%と指定することで、まん丸の形にできます。
  • background-position:center center;
    →背景の位置を調整します。
    上にも書きましたが、背景画像として今回設定しているため、この指定でど真ん中に表示するように指定できます。
  • background-size:cover;
    →縦横の大きさに対して、ぴったし表示するためのコードです。

「width:120px;」、「height:120px;」

→この数字はあなたの好きなサイズにしてください。

スマホのサイズも変えたい人もいると思うので、こちらからどうぞ↓

 

 

スマホのサイズを変更する場合

今説明してきたコードは、パソコンサイズの指定方法なので、

スマホは別のコードで指定が必要です。

 

それがこちら↓

@media screen and (max-width:767px){
#page-top a{
background: url(https://okap01.com/wp-content/uploads/2019/09/top-icon.png);
background-repeat: no-repeat;
width: 48px;
height: 48px;
border-radius: 90%;
background-position: center center;
background-size: cover;
display: inline-block;
}
}

 

パソコンとのコードと違うのは、
  • @media screen and (max-width:767px){}
    →横幅767pxまでの場合に適用させる指定コードが追加されてます。
    これで各CSSを囲ってあげると、スマホとタブレットあたりのディスプレイサイズで表示した場合に適用させることができます
  • ※逆に、min-width:768pxとすれば、768px以上のディスプレイサイズで適用できます。
    →パソコンは適用させずに、スマホ・タブレットにだけ指定したい場合はこっちを使うことが多いです。
  • 本当に「スマホだけ」「タブレットはパソコンサイズでいい」場合は、「max-width:480px」にするといいです。
  • width、height
    →それぞれ48pxのサイズで設定しています。
それ以外は同じものなので、スマホのサイズとパソコンのサイズを別々に設定したい場合は両方「追加CSS」に追記しましょうー!

サイズを小さくして、横の位置がずれてしまった場合

その場合は、このコードで位置を調整することができます↓

#page-top{
  right:20px;
}
デフォルトだと右の端っこから「20px」だけズレてボタンが表示されているのですが、ここを「10px」にした場合、右から「10px」の位置に移動します。

Okoさんの感想

OkoさんOkoさん

昨日教えていただいたコードですが、見事キレイに反映されました!
本当に、スゴイのひと言に尽きます。
またスマホは小さめのサイズがいいと思い直していたところだったので、そちらの訂正コードも教えていただき嬉しいです。
ご丁寧な解説までありがとうございます (^ ^)

これまで若干の試行錯誤を経て、ピースがハマった感じで感動しています。
お忙しいところ、ご丁寧に対応いただき誠にありがとうございました!
今後もおかぴーさんのブログを参考にさせていただきます。
(ちなみに、「Twitter横幅訂正の記事」で「はみ出てしまっているやんけー」という言葉に親近感を抱きました!)

では、今後も本業のWEBデザイナーのお仕事、ブログ運営頑張ってください。
陰ながら応援しております。
改めまして、この度は大変お世話になりありがとうございました m(_ _)m

おかぴーおかぴー
ご希望に添えてよかったです!
また気軽にご相談してくださいね!そしてブログとお仕事、頑張ってくださいー(o^^o)

まとめ

これで「STORK19」のテーマで、トップへ戻るボタンを画像に変えることができました!

同じシリーズのテーマでも、新しくリリースされたものでは構成されているコードの書き方は異なるので、「そのままコピペでOK!」とはなりませんね^^;

 

いやー、つくづく今回、カスタマイズはテーマがあるだけ数があるんだなぁと感じました。

もしあなたもやりたいカスタマイズがあって、思うように設定ができないのであればお気軽にコメントかお問い合わせフォームから連絡ください(o^^o)

あなたのお力になれると思いますのでー。

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

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

目次