コメントするスマホサイトなどで非表示にしたい場合Facebookのタイムラインをホームページなどに埋め込んだ時、例えば、スマホでのみ非表示にしたい場合などがある。表示しても効かなかったりする。非表示にする場合は、スタイルシートに下記を記述すること。none;}そのままコピペでOK。スマホでのみ適用する場合は、レスポンシブにするといい。関連記事:facebookタイムラインをスマホサイトでレスポンシブにする。スマホ・パソコン・Web関連レスポンシブのviewportをクリックで切り替える方法。コメントするviewportをボタンのクリックで切り替える方法レスポンシブデザインの簡単な説明はレスポンシブ(スマホ用とPC用で自動的に変える方法)で実装するを参照の事。レスポンシブデザインとは、簡単に言うとメディアの幅によって、CSSの挙動を制御すること。今まではiPadだったらこのページ、iPhoneだったらこのページという風に、スマホサイト、タブレットサイト、PCサイトを別々に用意していた。&nbspしかし、これではiPhoneでデカい画面のスマホが出てきたらどうするの?小さいブラウザウィンドウで見ているPCはバカでかいPC用ページで表示、という問題には対応できない。そこで、端末が何かにかかわらず、メディアの幅(ブラウザ・スマホ画面の幅)によって見え方を変えようというわけだ。レスポンシブ(スマホ用とPC用で自動的に変える方法)で実装するの後半にも書いてある通り、メディアアンカーを使っていく。スマホでもPCサイトに切り替えたい!というニーズもある。いった場合には、レスポンシブサイトに対応した、PCサイト/スマホサイトの切り替えスイッチが欲しい。レスポンシブに置いて、PC/スマホの切り替えとはつまり?CSSの中に、「画面が600ピクセル以上の場合はこれ、600ピクセル以下の場合はこれ」と記述しているので、これを切り替えるためには、メディアの幅が変わったと思わせればいい。jquery-1.5.min.jsswitch.screen.jsjquery.cookie.jsこちらから右クリックで保存したり、ダウンロードすることもできるし、どこかから探してきてくれてもOK。jqueryは1.5以外でも結構動作する。部分をメディアアンカーの幅に合わせる。上記の例の場合、「メディア(スマホの画面)の幅を951pxとして考えてね」ということなので、仮に小さいスマホであっても、レスポンシブのPCサイトのスタイルシートが適用される。サーバーの適当な位置へアップロード。下記、コード例では、jsフォルダへアップロードした場合の記述。HTMLのソース<head>...</head>の間に、下記コードをコピペ。src=”js/switch.screen.js”></script>...</head>切り替えスイッチ(リンク)を設置したい場所に、下記コードをコピペ。href=”#”>スマホページへ</a></p>以上。使用例:http://rakuichi-b.com/パソコンのブラウザの画面幅を小さくしたり大きくしたりして確認できる。上記のサイト例では切り替えボタンはスマホでのみ有効となっている。スマホサイトのカスタマイズ。2.11.4-2.13系まで確認ECCUBEのスマホサイトのカスタマイズ。完成度はかなり高いが、少しカスタマイズしてみた。/ドメイン名/user_data/css/common.cssa:linkとかを変えても何もスマホサイトには影響しない。ソースを辿ってみると、どうやら、/ドメイン名/user_data/packages/sphone/css/jqm.cssの一番下。.ui-link:linkの部分でスマホサイトのリンクの色を制御している。分かりにくい!CSSECCUBEカートサーバースマホサイト明日試したくなるカスタマイズ、ネットな日々に役立つ小技と、たまに旅行の妄想と。