Facebookのタイムラインをホームページなどに埋め込んだ時、例えば、スマホでのみ非表示にしたい場合などがある。
ただし、単純にCSSに display: none; と表示しても効かなかったりする。
非表示にする場合は、スタイルシートに下記を記述すること。
div.fb_iframe_widget,
div.fb_iframe_widget iframe[style],
div.fb_iframe_widget span {
display: none;
}
そのままコピペでOK。
スマホでのみ適用する場合は、レスポンシブにするといい。下の関連記事を参照。
レスポンシブデザインの簡単な説明は
レスポンシブ（スマホ用とPC用で自動的に変える方法）で実装するを参照の事。
レスポンシブデザインとは、簡単に言うとメディアの幅によって、CSSの挙動を制御すること。
今まではiPadだったらこのページ、iPhoneだったらこのページという風に、スマホサイト、タブレットサイト、PCサイトを別々に用意していた。
 
しかし、これではiPhoneでデカい画面のスマホが出てきたらどうするの？
小さいブラウザウィンドウで見ているPCはバカでかいPC用ページで表示、という問題には対応できない。
そこで、端末が何かにかかわらず、メディアの幅（ブラウザ・スマホ画面の幅）によって見え方を変えようというわけだ。
で、レスポンシブ（スマホ用とPC用で自動的に変える方法）で実装するの後半にも書いてある通り、メディアアンカーを使っていく。
でも、スマホでもPCサイトに切り替えたい！というニーズもある。
こういった場合には、レスポンシブサイトに対応した、PCサイト/スマホサイトの切り替えスイッチが欲しい。
CSSの中に、「画面が600ピクセル以上の場合はこれ、600ピクセル以下の場合はこれ」と記述しているので、これを切り替えるためには、メディアの幅が変わったと思わせればいい。
用意するものは3つ。
jquery-1.5.min.js
switch.screen.js
jquery.cookie.js
こちらから右クリックで保存したり、ダウンロードすることもできるし、どこかから探してきてくれてもOK。
なお、jqueryは1.5以外でも結構動作する。
まず、switch.screen.jsの3行目
$(“head”).append(“<meta name=’viewport’ content=”
+($.cookie(“switchScreen”) == 1 ?
“‘width=951, initial-scale=1.0′” :
“‘width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0′”)
+” />”);$(document).ready(function() {
$(“#btnPC, #btnSP”).click(function() {
$.cookie(“switchScreen”, $(this).attr(“id”) == “btnPC” ? 1 : 0);
location.reload();
return false;
});
});
“‘width=951, … の部分をメディアアンカーの幅に合わせる。
上記の例の場合、「メディア(スマホの画面)の幅を951pxとして考えてね」ということなので、仮に小さいスマホであっても、レスポンシブのPCサイトのスタイルシートが適用される。
そしてサーバーの適当な位置へアップロード。
下記、コード例では、jsフォルダへアップロードした場合の記述。
<head>…</head>の間に、下記コードをコピペ。
<head>
…
<script type=”text/javascript” src=”js/jquery-1.5.min.js”></script>
<script type=”text/javascript” src=”js/jquery.cookie.js”></script>
<script type=”text/javascript” src=”js/switch.screen.js”></script>
…
</head>
切り替えスイッチ（リンク）を設置したい場所に、下記コードをコピペ。
<p class=”switch”><a id=”btnPC” href=”#”>PCページへ</a><a id=”btnSP” href=”#”>スマホページへ</a></p>
以上。
使用例：
http://rakuichi-b.com/
パソコンのブラウザの画面幅を小さくしたり大きくしたりして確認できる。
なお、上記のサイト例では切り替えボタンはスマホでのみ有効となっている。
ECCUBE 2.11.4-2.13系まで確認
ECCUBEのスマホサイトのカスタマイズ。元々完成度はかなり高いが、少しカスタマイズしてみた。
文字リンクの色。まず、
/ドメイン名/user_data/css/common.css
a:link
とかを変えても何もスマホサイトには影響しない。
ソースを辿ってみると、どうやら、
/ドメイン名/user_data/packages/sphone/css/jqm.css
の一番下。
.ui-link:link
の部分でスマホサイトのリンクの色を制御している。
うーむ。分かりにくい！
