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

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

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

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

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

stork19

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

 

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

[sitecard subtitle=関連記事 url=https://okap01.com/stork-customize-back-to-top-btn target=]

 

「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を貼り付ける方法はこちらの記事でまとめています↓

[sitecard subtitle=関連記事 url=https://okap01.com/edit-css target=]

 

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

 

赤文字で「画像の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)

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

おまけ

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

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

みみこ

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

おかぴー

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

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

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

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

ってなります(笑)

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

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

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

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

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

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

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

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

それなら、

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

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

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

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

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

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

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

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

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

↓↓↓

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

コメント

コメントする

CAPTCHA


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

目次