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

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

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

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

画像をFTPでアップする
1. ロリポップのFTPでアップする方法！
フッターfooter.phpの「ページトップへ戻る」を書き換える
1. 使っているテーマが親テーマの場合のHTML
2. 使ってるテーマが子テーマの場合のHTMLコード
CSSを書き換える
1. 画像の幅をCSSで指定する
画像サイズを試した結果、幅80px位が良いかも！？
1. トップへ戻るボタン。横幅50px、80px、100pxにした時の見え方
  1. 原寸大♪80pxと100pxを見比べてみる
画像が表示されないっ、反映されない原因は？
1. 画像が表示されないときの対処法
2. 画像サイズを変えたのに、反映してない時の対処法
さいごに

画像をFTPでアップする

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

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

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

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

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

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

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

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

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

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

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

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

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

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

管理画面のダッシュボードより
外観
テーマの編集
フッター（footer.php）

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

<!-- ページトップへ戻る -->
<div id="page-top"><a href="#wrapper" class="fa fa-angle-up"></a></div>
<!-- ページトップへ戻る　終わり -->

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

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

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

<!-- ページトップへ戻る -->
<div id="page-top"><a href="#wrapper"><img src="<?php echo get_template_directory_uri(); ?>/images/pagetop.png" alt="トップに戻るボタン" /></a></div>
<!-- ページトップへ戻る　終わり -->

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

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

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

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

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

<!-- ページトップへ戻る -->
<div id="page-top"><a href="#wrapper"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/pagetop.png" alt="トップに戻るボタン" /></a></div>
<!-- ページトップへ戻る　終わり -->

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

ポイント

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

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

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

CSSを書き換える

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

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

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

#page-top {
    position: fixed;
    z-index: 9999;
    bottom: 20px;
    right: 0px;
    font-size: 12px;
}
#page-top a {
    background: #665e53;
    text-decoration: none;
    color: #fff;
    padding: 10px;
    text-align: center;
    display: block;
    -moz-opacity: 0.3;
    opacity: 0.3;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
    color: #fff;
}

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

#page-top {
    position: fixed;
    bottom: 20px;
    right: 0px;
}

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

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

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

参考pagetopを画像にする｜WPbySTINGER

画像の幅をCSSで指定する

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

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

/* 画像の横幅を指定：スマホ・タブレットの時 */
#page-top a img {
	width: 40px;
	height: auto;
}
/* 画面の横幅768px以上の場合：画像の横幅 */
@media screen and (min-width: 768px) {
	#page-top a img {
		width: 60px;
	}
}