2013年10月

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

retinaディスプレイの端末をcssで判別する

retinaかどうかってcssで判別できるって知った。

@media (-webkit-min-device-pixel-ratio: 2){
hogehoge

-webkit-device-pixel-ratioというのを2にすると2倍の解像度をもつretinaのときにhogehogeを読み込む。

でもこれから出てくる端末は2倍とは限らない。
3倍とか2.1倍とか出てくるかもしれない。そういうときのために

-webkit-min-device-pixel-ratio:2とする。

minがついてるから、2倍以上ってこと。


こうすれば、retinaの端末のときだけ2倍にでかくした画像をcssで読み込ませることができるね。

ただし作業量は増えるよ。

 

FacebookのLikebox(いいねボックス)のレスポンシブ対応

FacebookのLikeboxを設置してほしいっていう依頼、たまにあります。

こういうやつ↓
24

これ、Facebook developerページで作成するんですが、
 
作成するときに、widthとheightを入れますよね。

だから当然、横幅と縦幅が固定になりますよね。

すると、レスポンシブサイト制作で、スマホでみたときには、崩れる(はみでる)ことになります。



例えば横幅700pxでlikeboxを作ったときに、 スマホで見ても700pxなので、横がぶちぬかれて飛び出してしまいます。

それを解消するcssがこちらのサイトで紹介されてました。
http://mbdb.jp/hacks/facebook/likebox-responsive-customize-css.html 

 
これに少しだけ追加して
レスポンシブ用にまとめましたので、手順を書きます。 


①Like boxはHTML5で作る

Developerページで、横幅やら縦幅やらをPC用に設定して、GET CODEボタンを押すと、
以下みたいなウィンドウが出てきます。(201310現在)

01

上の方でHTML5とかIFRAMEとか選べます。

これをHTML5にします。

ソースが2つに分かれて出てきますが、気にするこたーない。
両方ともそのまま続けてコピペして、サイトで表示したいところに貼ります。



②スクリプトをdivで囲む。

cssで整形したいから、言われなくても囲むと思いますけど
こんな風にします。

HTML
<div id="facebookLikeBox">
ここにコピペしたスクリプトを貼る
</div>



③そしてスマホが読み込む用のCSSでwidth100%を指定する

CSS

#facebookLikeBox{margin:0 10px;}
#facebookLikeBox .fbcomments,
#facebookLikeBox .fb_iframe_widget,
#facebookLikeBox .fb_iframe_widget[style],
#facebookLikeBox .fb_iframe_widget iframe[style],
#facebookLikeBox .fbcomments iframe[style],
#facebookLikeBox .fb_iframe_widget span{
    width: 100% !important;
    height:250px !important;
}
 
↑コピペでOK

呼び出される中身のいろんなやつらにwidth:100%を指定します。

上記のcssは、スマホで読み込む用のcssなので、一番外側を

@media screen and (max-width: 640px) {
ホニャーラー

でかこってます。 

スマホでみたときにlikeboxの横幅が縮んで100%になりますが、heightはそのままで、中身が全部表示されないので、臨機応変に、height:250pxとか高さしていして調整します。

(ここは結構ざっくりで、ランドスケープモードにしたり、アンドロイドなどのいろんなサイズの端末でみたときに、若干高さが余ったり足りなかったりしますけど。。)

 

ところでLikeboxってマーケティング的に集客効果あるんですかね??

効果出たって話を僕は聞いたことがないんですけども。


 
記事検索

リモキュー

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

https://twitter.com/tacshock
タグクラウド
QRコード
QRコード
  • ライブドアブログ