2016/11/08

トップに戻るボタンを画像に変更するカスタマイズ方法

トップに戻るボタンのカスタマイズ。初心者がコピペで簡単に出来るように、CSSとHTMLを書いてます。Stinger5(forLadys)Gush、Simplicityなら対応、確認済。

人気の無料テーマは、似たものになりがちだから、個性を表現して、戻るボタンに画像を入れると、ブログに愛着もわきます。画像が準備できたら、ブログをより自分らしく装飾していきましょう!

最後に、時短に役立つ失敗例も書いてるので見て下さい!早速始めていきましょう^^

スポンサーリンク

画像をFTPでアップする

アップする画像の名前をpage-topとしてください。画像の拡張子は.pngで説明しますが、.jpgを使っているなら、HTMLにpage-top.jpgと指定してください。

FTPソフトを使って、使っているテーマ内に画像をアップします。パスは、下記のとおりです。

  • ドメイン
  • public_html(エックスサーバーの場合)
  • wp-content
  • themes
  • 使ってるテーマ(stinger5ver20140902)
  • images(画像フォルダ)
    • imagesの中にpage-top.pngをアップする

トップに戻るボタンのアップロード:FFFTPソフトにて

使ってるテーマのimagesフォルダの中にpage-topの画像をアップすればOK!

ロリポップのFTPでアップする方法!

ロリポップはFFFTPを使わなくても、画像をアップすることができます。サーバー上で直接アップするのは、以外と便利なので手順を書いていきますねっ。

※テーマによってディレクトリ(保管場所)が変わる事、サーバーによって仕様が違うでしょうから他サーバーさんは参考まで。

ブログのドメインの下の階層にあるimagesフォルダに画像をアップしてくださいね。選択する順番(手順)は下記です。

  • ドメインをクリック
  • wp-content
  • themes
  • stinger5ver20140902(使ってるテーマ)
  • images(画像フォルダ)
  • アップロード

画像をFTPでアップする手順です。

※子テーマを使ってる場合は、その子テーマ内の「images」ファイル内にアップしてくださいねっ。

  • 「ファイルを選択する」で、画像を選択。
  • アップロードするファイルを確認後、「アップロードする」を選択

画像をFTPでアップする手順の続きです。

stinger5 ver20141227 での設定ですが、他のテーマでも同様ですので参考まで。

フッターfooter.phpの「ページトップへ戻る」を書き換える

トップへ戻るボタンは、フッターに記載があり、そこにあるトップに戻るリンク内にあるボタンの表示を、画像に差し替えます。footer.phpを触るので、簡易的にでもバックアップをとってください^^

  1. 管理画面のダッシュボードより
  2. 外観
  3. テーマの編集
  4. フッター(footer.php)

トップへ戻るボタン、footer.phpを書き換える場所など参考画面

下記のトップへ戻る記載を探してください。

これを、次のコードに書き換えます。

使っているテーマが親テーマの場合のHTML

子テーマを使ってるなら、次を見てくださいね。テーマが親テーマの場合、下記コードになります。

コードの画像imgを反映させるHTMLタグ内<img src=”ここに画像のURLを入れる“/>感じになります。WordPressの関数を書いてます。

LINK「get template directory uri、get stylesheet directory uri」関数の違いは親テーマと子テーマのディレクトリ

※拡張子.pngの場合は、pagetop.png、違う場合は、pagetop.jpgなど変更する。

使ってるテーマが子テーマの場合のHTMLコード

子テーマのとき、子テーマ「images」ファイルの「pagetop.png」へアップしてるので下記コードをコピペしてセットしてください。

alt=””は代替テキストですので、どんな画像かを表すものなので、alt=”トップに戻るボタン”としてます。

ポイント♪

※拡張子.pngの場合は、pagetop.png、違う場合は、pagetop.jpgなど変更する。

サーバーにアップした画像ファイル名、footer.phpに記載するボタンの画像ファイル名を統一する

※下に注意事項あります♪(ひらがなで書いたら、エラーでた件)

CSSを書き換える

テーマの編集画面の右側のずーっと下にスタイルシート (style.css)がありますので、クリックしてCSSのコードを変更していきましょう♪

#page-topを探します。場所は、大体、真ん中より下!?位かなぁ!?CtrlFキーで右上の検索窓から#page-topを検索して見つけると早いですねっ。

トップへ戻るボタン、スタイルシートの記載の変更の様子

上記画像の記載コードは、下のコードになります。

見つかったら、下記記載▼コードに変更し、最後にファイルを更新をクリックしたら完了です♪

rightやbottomの数値は、要素の検証を使ってリアルタイムで確認しながら、お好みの数値に変えてください。スマホビューでもご確認くださいねっ。

LINK初心者が要素の検証でカスタマイズできる方法!HTMLとCSS入門編

CSSの”position: fixed;”コードの参考させていただきたページ

参考pagetopを画像にする|WPbySTINGER

画像の幅をCSSで指定する

画像の編集が大変だったので、CSSで変更するように追記します。スマホの場合横幅widthを40pxに設定しました。画像によってサイズを変えたいでしょうから、好みの数字に変更してくださいね。

@メディアスクリーンは、PCビュー画面の横幅768px以上の大きな画面のときの横幅を上書き指定してます。※高さは横幅にあわせるようにオートを指定。

画像サイズを試した結果、幅80px位が良いかも!?

画像のサイズはどれ位が良いのか気になるところですよねっ。30、40、50、80、100など色々試しました。100pxにしたらPCでは、見栄えが良かったんですよねっ。でも、スマホでみたら「バンッ!!」って感じでちょっと大きですねっ。

文章読む時に目に入ってしまう印象でしたっ。個人的に、画像サイズ80px位?から試してみても良いかもって思います。 ※参考まで、次の画像みてくださいねぇ♪

トップへ戻るボタン。横幅50px、80px、100pxにした時の見え方

画像を入れると画像も目立たせたい反面、肝心の文章を読むときに邪魔にならないかが問題になってきますよねっ。。トップへ戻るボタンサイズは、左から

  • 縦:39px、横: 50px
  • 縦:80px、横:113px
  • 縦:79px、横:100 px

スマホで見たトップへ戻るボタンのサイズ比べ

縦に高いとちょっと大きくって読むのに邪魔って感じる人も居るかもしれませんねっ。それに、スクロールするとき間違って戻るボタンをタップしたら・・嫌すぎますし、色々考慮しないとダメですねぇ。

原寸大♪80pxと100pxを見比べてみる

左側に画像ありますが、Topに戻るボタンイメージとして、スマホで確認してもらえたらわかりやすいです♪参考画像は80pxだと、こんな具合。

トップに戻るボタン ロボット80px原寸大参考まで

上▲サイズ: 80px × 113px

下▼サイズ: 80px × 63px

トップに戻るボタン 星80px原寸大参考まで

参考画像▼トップに戻るボタン100pxだと、こんな感じ。

ロボット100px原寸大参考まで

上▲サイズ: 100px × 141px

下▼サイズ: 100px × 79px

トップに戻るボタン 星100px原寸大参考まで

画像が表示されないっ、反映されない原因は?

画像の名前を日本語で書いてフッターのHTMLにその日本語の名前を付けた時、画像は下記スクショみたいに反映されませんでしたっ。でも壊れた画像をクリックしたら、topに戻ります。

失敗例)戻るボタン.png

名前を日本語で書いた時表示されない。FTPにアップした画像が表示されていない様子です。

日本語のファイル名では、画像が反映しないんですねっ。画像がurlになったとき、ファイル名の日本語が文字化けをおこして、ファイル名とHTMLが一致しないからです。

日本語でアップしたらURLが変わって、該当ファイルが見あたらず、画像に壊れた絵が表示されたんですねっ。

画像が表示されないときの対処法

PCに画像ファイルを保存するとき、漢字やひらがなで書いてた名前をローマ字に変えます。要はサーバーにアップするとき英字を使えば良いんですっ。

サーバーのFTPのimagesフォルダ内の画像ファイル名と、footer.phpの名前が同じで且つ、ローマ字にしておけば表示されます。

footer.php、トップへ戻るボタン、画像ファイルの名前変更はどこ?ココ!って画像。

LINKブログの画像が壊れた?表示されない5つの原因!リンク切れの対処法

画像サイズを変えたのに、反映してない時の対処法

色々な画像を試して変えた後、画像が反映しないっ・・。新しい画像をアップしたのにどうして反映してないの!?ってなりますよね。ブラウザが画像をお取置きしちゃってる状態なんですねっ。

画像のキャッシュをクリアすれば反映されるのでお試しくださいねっ!

LINKカスタマイズ時のキャッシュを削除!ワンクリで手間省けるChrome拡張機能「Incognito This!」

さいごに

お気に入り画像のトップへ戻るボタンをつけて、ブログ生活・カスタマイズを楽しんでくださいねっ!

それでは、かうたっくでした^^

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー