渋谷で働く営業本部長のブログ

渋谷で働く営業本部長のブログ

はてなブログ:LINE ボタンの PC での非表示化

f:id:ss17935:20180929093513j:image

 

以前、LINE シェアボタンをスマホのみに表示したい事を書きました。

そうしたら先週、えんでぃさんがコードを書いてくれました。

実際には

スマホ/タブレットの時にのみ LINE シェアボタンを表示します。”

 

↓ 以下がコメント欄に頂いた内容

***

■無料ユーザ機能で、LINEボタンをスマホ/タブレットの時だけ表示させる方法

◇原理
 1. CSSでボタンを非表示にできます (display: none;)
 2. 画面サイズによって適用するCSSを区別することができます (@media ~~)
※PROユーザ機能で、スマホ専用にHTMLを書く方法でも実現できます

◇変更箇所
最終的に、以下のコードを「デザインCSS」に追記すれば、PC表示時のみLINEボタンを非表示にできると思います。
(私の環境では動きました)

/* ディスプレイサイズが920pxを超える場合、つまりPCのみLINEボタン非表示 */
@media screen and (min-width:920px) {
    .share-flat .line-button {
        display: none;
    }
}

***

私はこのコードをデザインCSSにコピペしただけです。

すると写真の通り、スマホの場合にのみ LINE ボタンが表示されるようになりました。

えんでぃさん、ありがとうございました。m(_ _)m

ついでに、グローバルナビに InstagramGoogle+ へのリンクも追加してみました。

しかし、Google+ のトップページは味気ないですねぇ。

なんとかならんのか?

٩(๑`^´๑)۶

 

↓ ランキングに参加しています。よろしければポチポチして下さい。m(_ _)m

にほんブログ村 ライフスタイルブログ マキシマリストへ