最近、会社のサイトをリニューアルする機会があったんですが、サムネイルのサイズがみんなバラバラ！ってことがあったんですよね。今まではそれを横幅だけ揃えて高さはバラバラなまま表示してたりして、なんだか統一感のないデザインだったんですが、そんな悩みを解決してくれるcssを覚えたので、メモとして書き残しておきます！

画像の可変幅にも対応できているので、レスポンシブWebデザインにも使えますよ！

ぼかした画像を背面全体に敷くデザインを、Photoshopを使わずCSSで実装するための備忘録です。

CSSフィルターでブラー(blur)エフェクト使うと、背景画像を敷いた要素だけでなく中身の要素にまでエフェクトがかかってしまうので、背面要素のみにブラーエフェクトを加えて画像をぼかす方法をご紹介します！

先日、会社で口コミやレビューなどのレーティング評価の星(★)を実装する機会があったのでメモします。画像を使わずCSSのみで表現できるのでカスタマイズしやすく、便利だと思います！

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

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

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

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

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

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

お仕事では思わぬミスでファイルが消えてしまったり上書きされてしまうのを防ぐため、データは基本的にDropbox上に置いています。ですが、Dropbox上のファイルをXAMPPなどのローカルサーバーで確認したい！という時もあるんですよね…。

そんな時、とっても便利な「シンボリックリンク」という技を覚えたので、今回は作り方を書き残しておこうと思います。

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

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

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

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