WPテーマ「ライオンメディア」に簡単にTOPに戻るボタンを設置
WordPressテーマに最近では標準でついているTOPに戻るボタンを
設置しようかと思いHTMLとCSSを使いTOPに戻るボタンを設置
することにしましたが、意外と簡単に設置出来ましたので紹介します。
上記画像の右下に表示されているのがTOPに戻るボタンで、
動作も確認済みです。
他のパターンも試しましたがフッターをグラデーションカラーに
変更したので見えずらくなったのでとりあえずこのボタンを選択しました。
ただ現在はAMPの関係で最近AMPエラーが２つぐらいのコードを
記述したせいで大量にエラーが出ているのでAMPエラーが消えた頃に
またTOPに戻るボタンを設置しようかと思いますので、AMPに
対応しているサイトでは恐らく２つほどのエラーが出ると思うので
自分で解決するかこちらのページの追記を待ってもらえるといいです。
ただTOPに戻るボタンは全ページに影響するので大量にAMPエラーが
出る可能性があることを覚悟で、自己責任で行ってください。
※こちらではWordPressテーマ「ライオンメディア」でのカスタム報告
になりますが、他のテーマでも使えるかも知れませんので自己責任でお願いします。
ただAMPに対応してないサイトなら大丈夫だと思いますし、HTMLとCSSでも
エラーが出なかったのでJSを使ったカスタムもいけそうです。
以前もTOPに戻るボタンの設置も試みましたがCSSなどのコードでエラーが
出ていたので採用しなかったですが、参考にはなりそうなのでコードを
見比べてAMPのエラーが直せるように頑張るつもりです。
AMPのエラーの確認をすれば良かったのですが、AMPのエラーがさらに
エラーが増える可能性があるのでエラーの特定はまだしていませんが
AMPのエラーが追加されていたら確認します。
現在出ているAMPエラーは対処済みなので数日中には０に戻るでしょう。
重要
現在、テーマを有料Wordpressテーマ「THE THOR（ザ・トール）」に変更したため
プラグインを停止した影響で余計なショートコードが入っていますので注意してください。
WPテーマにFont Awesome4.7.0を導入しよう
まずはFont Awesome4.7.0を使用するので当サイトで使用している
プラグインを導入するかHEADにコードを入力する必要があります。
関連記事
光るボタンとBetter Font Awesome(プラグイン）を導入してみました。クリック率を上昇するのに役立つかも…
こちらを高度な設定のHEADにコピーしてください。
[code lang=”html”]<link href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet” >[/code]テーマでFont Awesome4.7.0が使えるかの確認はこちらのコードを
投稿画面でテキストに切り替えてビジュアルに変更して
アイコンが表示されたら使えるとの事なので確認して下さい。
[code lang=”html”]<i class=”fa fa-twitter” aria-hidden=”true”></i>[/code]ライオンメディアにもアイコンが入っていたと思いますので確認ください。
IcomoonかFont Awesomeが何個か入っていたはずなので表示されない場合
プラグインを導入するかHEADにコードを入れましょう。
恐らくAMPページでは現状ではFont Awesome4.7.0しか使えないのでは
ないかと考えていますのでFont Awesome4.7.0を使用した方が良いかと思います、
間違っていたらすいませんが、有名なテーマで新しいテーマでもFont Awesome4.7.0
を使っていることからバージョン５.2.０には対応してないかと思います。
WordPressにTOPに戻るボタンを設置しよう
今回はこちらのサイトのコードを使用させてもらいTOPに戻るボタン
をライオンメディアに設置していきます。
恐らくライオンブログでも同じだと思うので大丈夫だと思います。
今回は一番上の画像のTOPに戻るのデザインのコードのサンプルコード
になりますので、デザインは下記のページの好きなデザインを
お試しください。
参考サイトのページ
最近のホームページはページをスクロールすると右下にページトップに戻るボタンが出てくるのが当たり前になっていますよね。ここ…
こちらのHTMLのコードとCSSのコードを使い設置します。
アイコンの変更やカラーなどはお好みでカスタムすると良いでしょう。
高度な設定のBODYに入れます。
[code lang=”html”]<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>
[/code]
追加CSSに入れます。
[code lang=”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;
}
[/code]
一応コードを記載しましたが参考ページのHTML・CSS・JSを
確認しながらコードをいれましょう。
WordPressにTOPページに戻るボタンを設置 まとめ
まだAMPページではエラーが出るようなので外してますがいずれ設置予定
なので気が向いたときや時間に余裕がある時によく研究してライオンメディアに
TOPに戻るボタンを設置したいと思いますが、ライオンメディアをお使いの方で
AMPエラーが出ないように設置出来た方がいたら教えてくれれば閲覧にいきます。
ライオンメディアから有料テーマなどに変更される方もいるのでライオンメディア使いや
ライオンブログ使いの方で協力して有料テーマに負けないように協力してカスタムして
いきましょう。
正直、TOPに戻るボタンは一応テーマの真ん中についているのと、個人的にTOPに
戻るボタンを押すこともないですし、飾りの一部だと思っているのですが、
かなり凝ったアニメーション処理をするボタンなどや画像を使ったボタンなど
ありますので参考にしながら色々とチャレンジしたいと思います。
