[Blogger][スマホ非表示]Vaster2 上に戻るボタンをふたたび設置

希望通りの動きができたので、ふたたび上に戻るボタンを設置しました。

ただ、初心者の作ったものなのでこれが正解がどうかはわかりません。

以前の記事、アドセンスの上にボタンがのって誤タップしたりするのが嫌だったので一旦はずしていましたが、スマホのときに、ボタンを表示させないようにすることができたので、やり方を書いておきます。

まずボタンの用意

ここを参考に英語 15+ Back To Top Buttons! Add to Blogger https://www.mybloggerguides.com/15-back-to-top-button-for-blogger/

日本語解説 コピペで簡単！「ページの先頭へ戻るボタン」を設置する方法 | メモ取り！こういう感じのコードをまず作る

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEcKVJi7kLASowdBDEKRiVkKkXQngawIJj8UMtXtdrN0WBqYj4WhnncFYzaBz9Q-DZGpcUTst1VSoi0Mg-7A9oELZBGgbJ71iQxOceQV2G1REFLxb0PSdp5T3pH2Q2g1-RIBTeJLQ4UtMv/s1600/back-to-top-button-style-7.png" height="48" width="48" /></a>

class="top-button"を追加する

これにclass="top-button" を追加する(top-button の部分は、かぶらなければ他の文字でもOK)

<a class="top-button" rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEcKVJi7kLASowdBDEKRiVkKkXQngawIJj8UMtXtdrN0WBqYj4WhnncFYzaBz9Q-DZGpcUTst1VSoi0Mg-7A9oELZBGgbJ71iQxOceQV2G1REFLxb0PSdp5T3pH2Q2g1-RIBTeJLQ4UtMv/s1600/back-to-top-button-style-7.png" height="48" width="48" /></a>

このコードを、レイアウト画面でガジェットを追加をクリック。

HTML/JavaScriptを選択して、コンテンツの中に上のコードをコピペ、保存をクリック。

タイトルはないほうがいいと思います。

HTMLの編集

HTMLを編集します。必ずバックアップを取ってから作業してください。

テーマ==>HTMLの編集。Ctrl + fでレスポンシブデザインを検索

@media screen and (max-width: 768px){  の下あたりに

.top-button{
display:none;
}

を追加で記述。テーマを保存をクリック。

これで完成です。

最後に

class="" を追加して、レスポンシブデザインのところにそのclassをdisplay:none; を使って非表示にする。 知っている人から見れば他のやり方があるのでしょうが、初心者にはこれが限界でした。

でも、検索をして手を動かして、試行錯誤もいい経験になりました。