ロゴ
【note:検索上位を狙うブログ理論】一騎当千SEO

【マナブログコピー(WordPressテーマ)】ページTOP(最上部)に戻るボタンを設置する方法

その他の追加設定

こんにちは、ごま吉(@Lv1gomakichi)です。

この記事では、ページ最上部(TOP)に戻るためのボタン設置方法をご紹介します。

注意念のため必ずコードのBackupを取っておいてください。※トラブル等あった場合は責任は負えませんので必ず自己責任でお願いします。

【Manablog Copy】ページTOP(最上部)に戻るボタンを設置する方法

ページTOPに戻るボタンを設置する方法は以下です。
※動きの無いシンプルなボタンです。

PCプレビュー


スマホプレビュー

設置手順は以下です。
管理画面外観テーマエディターfooter.phpを開きます。

<div class="continer">の手前辺りに下記のタグを設置します。

<p id="page-top"><a href="#"><i class="fas fa-caret-square-up"></i><br>TOP</a></p>

次に、カスタマイザー追加CSSに下記のコードを追記します。

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 50px;
    padding: 	10px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
	font-size:15px;
}
#page-top a:hover {
    text-decoration: none;
    background: #212121;
}

ヌルヌルっと動くボタンのカスタム

こちらのブログで細かなカスタマイズが紹介されていましたので、ヌルヌルっと動かしたい人はオススメ(´ε` )

画像提供:Freepik – jp.freepik.com によって作成された business ベクトル

\将来につながるプログラミング/

エンジニアとして活躍したい人
プログラミング未経験でも安心
WordPressにもっと詳しくなれる
無料体験レッスン受講後に受講料が1万円引に!




注目こちらも合わせてどうぞ▼
アフィリエイトを始めるための手順を紹介しています。マナブログコピーのカスタマイズが終わったら『ASP登録』をしましょう。

note


注目こちらも合わせてどうぞ▼
アフィリエイト初心者向けに【月3,000円を稼ぐ着実なSEO】をテーマにnote執筆しました。マナブログコピーと合わせて運用すると効果大です。

note

人気記事【マナブログコピー(WordPressテーマ)】文字装飾プラグインの設定