Photoshopいらず!CSSで画像を中央トリミングする方法(レスポンシブ対応)

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

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

続きを読む

CSSで背景画像だけにブラー(ぼかし)エフェクトを加える方法

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

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

続きを読む
SNSボタンをオリジナルデザインに!設置方法&シェア数の取得方法まとめ

SNSボタンをオリジナルデザインに!設置方法&シェア数の取得方法まとめ

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

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

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

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

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

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

続きを読む
制作物の確認・共有やバックアップに便利!シンボリックリンクを使おう

制作物の確認・共有やバックアップに便利!シンボリックリンクを使おう

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

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

続きを読む
たった1行!スマホサイトのコーディング時に役立つ小技8(サンプルあり)

たった1行!スマホサイトのコーディング時に役立つ小技8(サンプルあり)

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

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

続きを読む
Googleマップをスマートフォンでも最適な大きさで表示しよう!

Googleマップをスマートフォンでも最適な大きさで表示しよう!

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

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

続きを読む
トップに戻る