レスポンシブWebデザインは、ひとつのソースでPCやスマホなど様々なデバイスでの見え方を最適化できるのでとても便利ですが、ワンソースなだけにデザインを反映させるのが難しい時ってありますよね。例えばデザイン上、PC版とスマホ版でそれぞれ表示する画像を変えたいとか…。

最近レスポンシブのサイトを作る機会が多かったので、レスポンシブWebデザイン対応案件の時に私がよく使うjQueryをまとめてみました。今回はサンプルも作ってみましたので、照らし合わせながら読んで下さいね。

先日、お仕事でスマホサイトを制作する際、「スマホで公式のSNSボタンを並べると表示が重いんだよな…大きさもバラバラだし。」と考え、オリジナルデザインのSNSボタンを設置してみました。ボタンを設置すること自体は簡単なんですが、やっぱり一緒にシェア数も表示したいですよね。

自分でシェア数の取得方法とボタンの設置方法をそれぞれ調べるのが大変だったので、備忘録も兼ねて記事にしようと思います。

【2016年8月28日 追記】
Facebookの仕様変更のためソースを一部変更

【2015年10月2日 追記】
ツイート数を取得する「count.json」が提供終了

【2015年6月16日 追記】
file_get_contents()の注意点を追記＆カウント数取得のソースコード変更

【2015年3月25日 追記】
Google+のカウント数の取得方法を変更

お久しぶりです！スマホサイトを制作していて、たった一行でとても便利なコードなのに、「あれ、なんだっけ…」と、ど忘れすることがいくつかあったので、今回は忘れないためにメモしておこうと思います！

今回はサンプルも作ってみました！

最近、お仕事でGoogleマップのiframeをスマートフォンで最適な大きさで表示させるにあたり、色々と悩みました。

そんな時発見した「lifehacker」さんの記事で、紹介されていたレスポンシブに対応させる方法が一番よさそうでしたので、備忘録として書き残しておきます。

このテーマをスマホ対応させた際、「jQuery.autopager」というプラグインを使ってオートページャーを実装してみました。

画面遷移を少なくしてくれるので重宝していますが、次のページが読み込まれる間に何も表示されないと「あれ？」と不安になってしまいますよね。

というわけで、次のページが読み込まれる間に表示される「ローディングアイコン」を実装してみましたので、今回はその導入方法などをご紹介します！

先日WordPressでスマートフォン用テーマを作成した際に、どのような流れで作成したのかをざっくりまとめてみました。

「手描きスケッチ」「DropBoxで作業する」など、WordPress以外でスマートフォンサイトを作るときも大体同じ流れで行うので、これを機に書き留めておこうと思います。

前々から時間を見つけてチマチマと着手していたスマホ対応がようやく完成しました！「いまさらかよ！」という声が聞こえてきそうです…(＞_＜)

以前は「WPtouch」というプラグインでPC版とスマホ版を切り替えていましたが、ようやくプラグインを卒業してモバイル版オリジナルテーマを作成しました。

今回は、ブログのスマホ対応のご報告を兼ねてスマホサイト作成時に自分なりに意識したポイントや、その際参考にさせていただいた記事などをご紹介します！