「上に戻る」をスマホだけ非表示にした【はてなブログ】

どうも、平熱系男子のにしです。こんばんは！

台風１３号が近づいているということで、仕事を早めに切り上げてブログカスタマイズしております。

今日はヘッダー画像差し替えと「上に戻る」の設置をしました。

「上に戻る」は、クリックしたら一瞬で上に戻れるという優れもの。記事を読み進めていったら表示されます。

ＰＣなら右下の何もない所に出てくるんですが、スマホだとこんな感じの表示になりました。

なんか、本文と被ってますね・・・右手でスワイプしたら間違って押しちゃいそうです。

うーん、これだったら表示しない方がいいかな～。

当ブログはレスポンシブデザインです。ＰＣで設定したデザインがスマホ用のページでは最適化されて表示されます。でも、これじゃあちょっと(笑)

なので、今回は「上に戻る」をスマホだけ非表示にします（はてなブログ用です）。

やり方を簡単に説明しますね。

まずは任意のクラス名を決めます。「上に戻る」を非表示にしたいから、return-topにしますね。

そしてＣＳＳに次のコードを記述します。

@media screen and (max-width: 480px){

.return-top{ display: none;}

}

で、最後にフッターなどに記述されている「上に戻る」のコードをdivで囲ってやります。

<div class="return-top">上に戻るのコード</div>

こんな感じ。

これでＰＣには表示されたまま、スマホには表示されなくなるでしょう。

このやり方は任意のクラス名を指定すれば他のコンテンツに応用できるので、良かったらやってみてください。

これで当ブログは大体のカスタマイズが終わりました。ブログカスタマイズは求めだしたらキリがありません。テキトーな妥協点を見つけて終わりにした方が良いですね。

それか、適宜改善していくか・・・。

これから台風が来るようなので、皆さまくれぐれもお気をつけてくださいませ。

それではまた！('ω')ノ