【保存版】告知をスマホだけ表示する方法！～新css編集～

スマホ版ではサイドバーがないので

告知は全て毎回記事で書かなければいけない

と思います。

でもＰＣ版にはサイドバーがあるのでいらないですよね？

今日はそんなお悩みを解決する

アメブロのカスタマイズ方法です！

スマホだけ表示してＰＣでは表示しない

方法で

ＰＣ版のデザインがスッキリします♪

この記事の最下部に

アメブロカスタマイズ告知用に制作した画像が

スマホで見てる方だけに今見えています。

ＰＣで見ている方には何も見えていないと思いますので

キャプチャを貼りますね。

↑こんな画像が一番下に表示されています。

大層なキャッチフレーズが書いてあります　笑

やり方は簡単！

ソースです。

新css編集のテンプレでの設定方法です。

■スマホだけ表示css設定

.skin-blogMainInner.skin-bgMain #sp-only{display: none;}

■スマホだけ表示したいhtml

<div id="sp_only">ここにスマホだけ表示したい内容</div>

上記だけで

スマホだけ表示。が可能です。

メディアクエリでもＯＫだと思いますが

今回はPC独自のclassに紐づけています

ぜひお試しください

• 
• 
• 
• 
•