2014年5月13日火曜日

Facebook広告用、OGP画像の最適サイズメモ。2014.05.13現在

Facebookの仕様がコロコロ変わるのであくまで現時点でのメモ。

・上記の画像の設定でいけそうですが
OGP画像推奨サイズは600×315px以上、1200×630pxらしいです。

参考サイト：FacebookのOGP画像の仕様がまた変更。ニュースフィードでもタイムラインでも欠けないようにする方法。（スマホ対応！最新版　※9.21追記）

ほぼ同じだと思いますが広告用の画像は広告の種類によって最適なサイズが違うらしい。
参考サイト：【Facebook最新情報】広告・リンク投稿の画像表示を最適化！画像を大きく＆クリック率を上げるために必要な設定基準はコレ！

※書き出す画像の形式は.pngが推奨。.jpgで書きだした時Facebook側の圧縮で画像が荒れたので。

2014年2月19日水曜日

[CSS3]使ったら面白いかもマウスジェスチャーで動くアニメーション

[CSS]重なった複数のパネルを扇状にアニメーションで優雅に開くスタイルシートのテクニック

demo

[JS]このホバーエフェクト楽しい！シールのようにぺらっとめくるスクリプト -Sticker.js

demo

2014年2月13日木曜日

[JS]デモがめちゃ楽しい！jQuery不要でスクロールにあわせて要素をアニメーションで表示するスクリプト -WOW.js

参考サイト：http://coliss.com/articles/build-websites/operation/javascript/js-wow.html

2014年1月21日火曜日

スマートフォンサイト制作メモ

スマートフォンサイト、ブラウザチェック環境

・SDK android(エミュレータ)
・Android SDK の高速化方法

・Google Chromeの標準機能でユーザーエージェント切り替え

参考サイト

「1分で使える！Google Chromeならスマホのブラウザチェック機能はデベロッパーツールに標準装備」

ROOM9

「スマホでLightboxのようなモーダルウィンドウを再現、動画やhtmlも読み込み可：Boxer」

・iOS7になって変わったブラウザ表示サイズ、スマホサイトファーストビューなど。

iOSとAndroidのフォント指定について

iOSはヒラギノ角ゴかヒラギノ明朝W3,W6
Androidは以下
・4.0以降　日本語フォントはモトヤフォントの「MTLc3m.ttf - モトヤLシーダ3等幅」「MTLmr3m.ttf - モトヤLマルベリ3等幅」の2つでボールドののフォントが無い。
英語フォントは「Roboto」

・3.X以前
「Droid Sans」

<参考サイト>
・Web Tips
「スマートフォンを考慮したフォント指定の検討」

・たき備忘録
「Android 4.0で採用された｢モトヤフォント｣とは？」

<参考サイト>
・All about 「Androidスマートフォンエミュレータの使い方」
http://allabout.co.jp/gm/gc/381225/

・「スマートフォン向けサイト作成にあたっての基本概要」
http://www.u-ziq.com/blog/2011/01/post_61.html

・スマートフォンサイトをデザインする上で知っておくべき10のTIPS
http://blog.webcreativepark.net/2011/06/16-103025.html

スマートフォンサイトスライドショーまとめ(iPhone,Android)

01.FlexSlider 2

・フリック対応
・横スライド
・レスポンシブ
・iPhone,Android多分可
・ボタンの位置が変えやすい
参考URL：FlexSlider 2

02.Nivo Slider（をレスポンシブにしたものby LIG）

・フリック非対応
・色々なスライド方法あり
・レスポンシブ
・iPhone,Android多分可
・ボタンの位置が変えやすい
参考URL：スマホサイトに入れると使いやすくなる！おすすめjQuery4選！｜LIG

03.Swipeshow

普通の縦横固定のスライドショー
・フリック対応
・横スライド
・iPhone,Android多分可
参考URL：Swipeshow

2014年1月10日金曜日

マウススクロールでアニメーションするJSまとめ。

０１.スクロールに応じて画を切替えるJS
(画像が切り替えで動くアニメーションを動かす事ができる)

スクロールに応じて動くアニメーションをつくる方法

０２.jQueryで横スクロールのアニメーションするサイトを作る方法
マウスホイールにも対応。ページの先頭ピッタリに（左に寄せて）移動してくれる。
※スマホ、タブレットのタッチデバイスに対応はしていないので何か考える必要あり。

０３.パララックスというか、スクロールでアニメーションさせるjQueryプラグイン「ScrollTween.js」
skrollr.jsというタッチデバイスにも対応しスクロールアニメーションできるJSライブラリがあるのだが、こちらのほうが軽量でPCブラウザならIE7も対応しているのでメモ。

DEMO

2013年12月9日月曜日

facebook シェアボタン設置まとめ 2013 12月

1.<html>に以下のコードを入れる。
（html5バージョン、何故入れるかは忘れました。）

2.ogpを設定する。
（※アプリIDが無くても動きますがアプリIDを取得するとfacebookアプリのインサイトで情報が見れるようになります。アナリティクス的に調べることが出来る。）

3.facebook開発者ツールでサイトURLを入れて以下の2つのコードを
取得する。
https://developers.facebook.com/docs/plugins/share-button/

・facebook SDK※アプリIDなしバージョン（<body>直下に置く）

・facebookボタンのリンク（ボタンを置きたい好きな場所に置く）

4.htmlに<ul><li>などで並べる。無理な時は<table>レイアウトにする。

5.IE8以下対策、現在のシェアボタンのコードはhtml5用でIE8に対応していないので
条件分岐させてIE8以下用のコードを用意する。

<table id="sns_btn_box">
<tr>
<td><p class="fb-share-button" data-href="サイトURL" data-type="button_count">
</p>
</td>
<td><a href="https://twitter.com/share" class="twitter-share-button" data-url="サイトURL" data-lang="ja">ツイート</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td>
</tr>
</table>

6.シェアした時の画像はpngでないと荒れる。
画像の大きさは公式では1500×1500とか
みたいですが、スマホ用でシェアした時の最大サイズが500いくつだったので600px×600pxで用意すればバッチリなはず。

<参考URL>