WEBデザイナー・WEBコーダーのMEMO的ブログ

HTML・CSS・ipad・iphoneで実際に遭遇した問題と対処法。

FacebookのWelcomeページをiframeで呼び出したときの高さを決める。

最近流行のFacebook

Facebookページの顔となるWelcomeページをiframeで呼び出す場合、
ページが長いとiframe内でスクロールバーが出てしまいます。

iframeをページの高さにあわせて伸ばし、
スクロールがでないようにしましょう。

<head></head>内にスクリプトを追加。
 
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script language="JavaScript">
FB.init({
appId: 'アプリID',(※アプリのIDにかえましょう~)
status: true,
cookie: true,
xfbml: true
});
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
 
 
<body>の下に追加。

 <div id="fb-root"></div>
<script>
FB.Canvas.setSize({ width: 520, height: 1614 });
</script>

高さはページにあわせて変更しましょう~


ちなみに <div id="fb-root"></div>が抜けていると
IE7で高さがでません~。

モンスターハンターをはじめました!

ついに・・・ついに私もモンスターハンター3rdを始めました!
いざ狩りの世界へ・・・!!!

キャラ決めに要した時間は、1時間30分・・。
力入れすぎたw

女子にしました。
上品な感じの女の子にしたんですが、
いきなり温泉で大また開いてどっぷりつかってました。
男勝りな態度にびっくり・・。
動作が・・完全に男だ・・・。
もっとアクティブな感じにすればよかったw

まぁ・・・・・・・・

慣れるだろう!!!

Tweetボタンがファイヤーフォックスでうまく表示されない

Tweetボタンがファイヤーフォックスでうまく表示されない。

管理しているサイトでtweetボタンをつけてるのですが、
そこでちょっとした表示の問題が・・。

クロームやIEでは普通にボタンとして表示されるのですが、ファイヤーフォックスだけ、テキストリンクのようになってしまっていました。

公式のツイートボタン配布ページから作ったのに~~なおらーん(。→ˇ艸←)って方は解決法をドウゾ。

~~解決法~~

■文字コードを指定する記述を追加する。

今までのボタン記述に・・
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="kyotonolunch">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>


charset="utf-8を追加するだけ。

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="kyotonolunch">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js" charset="utf-8”></script>

なおりました(♥´∀` ♥)ホ・・

便利なjs!iphoneでフリックできるようになるギャラリー風のjs

jsでつまづいている時に、すごいの見つけました。

http://blog.kaleido-jp.net/web/%E3%83%95%E3%83%AA%E3%83%83%E3%82%AF%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89/

iphoneで指でフリック(スライドみたいなの)できて、
一定時間で自動でも写真が切り替わる!

実装も簡単でした~。

ボタンにしたかったので、リンクつけたんですが、タッチすると
指でフリックしたと認識されて、真中の画像とかだと左右に移動しちゃいます・・。
長押しすれば大丈夫なんですが、
不安定。

もともとボタン用じゃないんでしょうがないんですが><

でもかなりやりたいことに近いjsに出会えたので、感動しました◎

IEでborderが出ない~解決法~

なんか忙しくて久しぶりの更新!

IEでborderが出ない。ってことに遭遇しまシた。
ドラッグしたり、そのborderのあたりをカチカチしてるとたまーにでたり・・
となんだかハッキリしない感じ。

IEのバグらしいんですが

わかりやすく言うと

contentsっていうボックスにborderをかけたけど
その中でfloatしていると
contentsのborderはfloatしてる所だけでないよ~

っていうバグ・・・・

本来ならば、図(上)のようになるんですが、
IEだけ図(下)のようになっちゃいます・・
img01



なんか前もあったなーと思いつつ・・思い出せなかったのでいろいろ調べると
単純なことでした。
解決法は

contentsに幅を入れる!

それだけです!

なんかいつもいれてるのに、今回はすっぽ抜けていたみたい。
にしてもIEどうにかならんかねー;

撲滅シタイ!

祇園祭りに行ってきやした。

木曜日から、土曜日まで3日連続の祇園祭り、仕事帰りの屋台夕食!

はじめての本格祇園祭参加・・・&ホコ天・・・^^
この道も屋台でるの!?ってくらい屋台の列!

そして何より

人が・・

多すぎだ!!


すごいすごいとは聞いていたが、
あそこまで人が来るとはおもわなんだー(☉౪ ⊙)
電車もすごい・・・


今年の屋台おいしカッタランキング



1位 肉巻きおにぎり
2位 はしまき
3位 かき氷(マンゴーミルク)

ですな!

日曜日は本番の鉾巡行ですたが、

まじですごく暑かったので。。。家でニコ動(鬼畜王マリオ)見ながら引きこもってマシタ。

なんか最近だめだ・・暑過ぎておかしくなる;;

仕事が手につかん・・






春終り

春がおわり・・
会社でのfacebookの熱もさめました・・(*^ω^*)

来年は一体何に燃える春になるのやら・・。

今からどきどき・・(@Α@)

Androidでvewpointを指定するjs

iphoneではmetaタグでviewpointを設定できるが、
Androidではこのmetaタグがきかない。

ので、

jsで実装します。
head内のscriptを記述している所に以下を追記。
widthを320で固定にしたかったので以下のように記述しました。


$(window).bind('resize load', function(){
	$("html").css("zoom" , $(window).width()/320 );
});

twitter @Anywhereを設置する。

@Anywhereとは・・


自分のサイトに、 JavaScript のみでユーザー情報の表示やつぶやきの投稿、

ユーザー認証などの機能を実装できる API です。


使い方をやさしく説明してくれてます。

http://wpxtreme.jp/how-to-use-twitter-at-anywhere-with-wordpress

http://osprey74.com/archives/841




facebookをつくる。

春だからか・・・
会社の皆でfacebook をはじめよう!

ということでfacebookを始めました。
自社で管理しているサイトのfacebookページ(ファンページ)を作成しよう!

と燃える社長。

今月めちゃくちゃ忙しいのに、

facebookページ制作組に入隊させられたわたし。

いやー・・時間がない;w;)))

さらにイイネ!ボタンをサイトに付けよう!ということで、作業が降りてきた。
あんまりこういう分野は得意じゃないんですが、流行っているから、調べれば
すぐにイイネ!ボタンの設置の仕方が出てきますね!

設置方法は意外と簡単◎


 というサイトから、

いいねボタンを設置したいURLを記入。
幅などお好みで設定。


getcodeを押したらソースが表示されるので、
それをページに埋め込むだけ。

サイトは英語だけど、見慣れた語句ばっかりなので、
そんなに難しくないはず。

ボタンの中の文字は海外の人には【like】で日本では【いいね!】と
ちゃんと表示がわかれてくれるんだって。

でもほんとに!
ここ最近!

facebook ページばっかり見てて
ちょっと嫌いになってきた・・w

Amazonライブリンク
プロフィール
SERCH
ギャラリー
  • IEでborderが出ない~解決法~
  • ライブドアブログ
WEBデザイナー・WEBコーダーのMEMO的ブログ