AMPページ画像が表示されない場合、通常ページを閲覧ください。
BACKtoTOP?

WordPressにTOPに戻るボタンを簡単設置する(ライオンメディア)

WPテーマ「ライオンメディア」に簡単にTOPに戻るボタンを設置

 

TOPに戻るボタン

WordPressテーマに最近では標準でついているTOPに戻るボタンを

設置しようかと思いHTMLとCSSを使いTOPに戻るボタンを設置

することにしましたが、意外と簡単に設置出来ましたので紹介します。

上記画像の右下に表示されているのがTOPに戻るボタンで、

動作も確認済みです。

他のパターンも試しましたがフッターをグラデーションカラーに

変更したので見えずらくなったのでとりあえずこのボタンを選択しました。

 

ただ現在はAMPの関係で最近AMPエラーが2つぐらいのコードを

記述したせいで大量にエラーが出ているのでAMPエラーが消えた頃に

またTOPに戻るボタンを設置しようかと思いますので、AMPに

対応しているサイトでは恐らく2つほどのエラーが出ると思うので

自分で解決するかこちらのページの追記を待ってもらえるといいです。

ただTOPに戻るボタンは全ページに影響するので大量にAMPエラーが

出る可能性があることを覚悟で、自己責任で行ってください。

 

※こちらではWordPressテーマ「ライオンメディア」でのカスタム報告

になりますが、他のテーマでも使えるかも知れませんので自己責任でお願いします。

ただAMPに対応してないサイトなら大丈夫だと思いますし、HTMLとCSSでも

エラーが出なかったのでJSを使ったカスタムもいけそうです。

 

以前もTOPに戻るボタンの設置も試みましたがCSSなどのコードでエラーが

出ていたので採用しなかったですが、参考にはなりそうなのでコードを

見比べてAMPのエラーが直せるように頑張るつもりです。

AMPのエラーの確認をすれば良かったのですが、AMPのエラーがさらに

エラーが増える可能性があるのでエラーの特定はまだしていませんが

AMPのエラーが追加されていたら確認します。

現在出ているAMPエラーは対処済みなので数日中には0に戻るでしょう。

 

WPテーマにFont Awesome4.7.0を導入しよう

 

まずはFont Awesome4.7.0を使用するので当サイトで使用している

プラグインを導入するかHEADにコードを入力する必要があります。

 

関連記事

 

初心者ブログから成功へ

光るボタンとBetter Font Awesome(プラグイン)を導入してみました。クリック率を上昇するのに役立つかも…

 

こちらを高度な設定のHEADにコピーしてください。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >

テーマでFont Awesome4.7.0が使えるかの確認はこちらのコードを

投稿画面でテキストに切り替えてビジュアルに変更して

アイコンが表示されたら使えるとの事なので確認して下さい。

<i class="fa fa-twitter" aria-hidden="true"></i>

ライオンメディアにもアイコンが入っていたと思いますので確認ください。

IcomoonかFont Awesomeが何個か入っていたはずなので表示されない場合

プラグインを導入するかHEADにコードを入れましょう。

 

恐らくAMPページでは現状ではFont Awesome4.7.0しか使えないのでは

ないかと考えていますのでFont Awesome4.7.0を使用した方が良いかと思います、

間違っていたらすいませんが、有名なテーマで新しいテーマでもFont Awesome4.7.0

を使っていることからバージョン5.2.0には対応してないかと思います。

 

WordPressにTOPに戻るボタンを設置しよう

 

今回はこちらのサイトのコードを使用させてもらいTOPに戻るボタン

をライオンメディアに設置していきます。

恐らくライオンブログでも同じだと思うので大丈夫だと思います。

今回は一番上の画像のTOPに戻るのデザインのコードのサンプルコード

になりますので、デザインは下記のページの好きなデザインを

お試しください。

 

参考サイトのページ

 

最近のホームページはページをスクロールすると右下にページトップに戻るボタンが出てくるのが当たり前になっていますよね。ここ…

 

こちらのHTMLのコードとCSSのコードを使い設置します。

アイコンの変更やカラーなどはお好みでカスタムすると良いでしょう。

 

高度な設定のBODYに入れます。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" ><div id="page_top"><a href="#"></a></div>

 

追加CSSに入れます。

#page_top{  width: 50px;  height: 50px;  position: fixed;  right: 0;  bottom: 0;  background: #ef3f98;  opacity: 0.6;  border-radius: 50%;}#page_top a{  position: relative;  display: block;  width: 50px;  height: 50px;  text-decoration: none;}#page_top a::before{  font-family: FontAwesome;  content: '\f106';  font-size: 25px;  color: #fff;  position: absolute;  width: 25px;  height: 25px;  top: 0;  bottom: 0;  right: 0;  left: 0;  margin: auto;  text-align: center;}

一応コードを記載しましたが参考ページのHTML・CSS・JSを

確認しながらコードをいれましょう。

 

WordPressにTOPページに戻るボタンを設置 まとめ

 

まだAMPページではエラーが出るようなので外してますがいずれ設置予定

なので気が向いたときや時間に余裕がある時によく研究してライオンメディアに

TOPに戻るボタンを設置したいと思いますが、ライオンメディアをお使いの方で

AMPエラーが出ないように設置出来た方がいたら教えてくれれば閲覧にいきます。

 

ライオンメディアから有料テーマなどに変更される方もいるのでライオンメディア使いや

ライオンブログ使いの方で協力して有料テーマに負けないように協力してカスタムして

いきましょう。

正直、TOPに戻るボタンは一応テーマの真ん中についているのと、個人的にTOPに

戻るボタンを押すこともないですし、飾りの一部だと思っているのですが、

かなり凝ったアニメーション処理をするボタンなどや画像を使ったボタンなど

ありますので参考にしながら色々とチャレンジしたいと思います。

THE THOR(CTA)当サイトで使用中の有料Wordpressテーマ「THE THOR(ザ・トール)」
高機能なテーマになっていてSEOや集客に強いテーマになっています。
標準でAMP・PWAに対応し、カスタム投稿などにも対応していて自由度も高く
標準使いでもプロの作成したようなデザインが出来ます。
テーマのダウンロードはこちらからどうぞ!
詳細を公式ホームページで見る
BACKtoTOP?
最新情報をチェックしよう!
広告