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

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

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

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

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

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

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

当サイトのスマホ版では最近まで「オートページャー」を使っていましたが、なんだかうまく動かなくなってしまったようなので、いい代替案が見つかるまでは普通のページネーションに戻すことにしました。

なるべくシンプルな形にしたかったので、「前へ」「次へ」リンクだけのページネーションにしてみました。色々調べたので、今回は備忘録として書き残しておきます。

【2015年7月29日 追記】
ソースコード変更

以前に日々の業務やWeb制作に役立つ！おすすめChromeプラグイン12 | Design Colorという記事を書きましたが、ブラウザに依存しないブックマークレットも日々のお仕事には欠かせませんよね。

今回は、サイト分析やWeb制作、ブログの執筆など様々なシーンで活躍してくれるブックマークレットをご紹介します！お仕事のスピードがアップするかもしれませんよ！

以前に「SNSボタンをオリジナルデザインに！設置方法＆シェア数の取得方法まとめ」という記事を書いたのですが、それは普通のPHPファイルで設置する方法でしたので、今回はWordpressにオリジナルSNSボタンを設置する方法をご紹介します。

WordpressでURLを取得するところなどが少々独特でしたので、シェア数の取得から表示までの流れを備忘録として書き残しておこうと思います。プラグインなしで実装することができます！

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

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

【2015年6月11日 追記】
file_get_contents()の注意点を追記＆ソースコード変更

3〜4月は春テーマでしたが、今日からまた通常テーマに戻します〜！みなさん「Page Plugin」への移行はお済みでしょうか？今までブログには「Like Box」を設置していたのですが、2015年6月23日でLike Boxは動かなくなってしまいます。

また、今回の仕様変更は「いいね！」ボタンも差し替え対象となっているとの情報を聞き、重い腰を上げて移行してみました。導入がとても簡単だったので、今回は手順を備忘録として残しておきます！

Web制作の技術の移り変わりは本当にスピーディーですよね。Sass、Grunt、gulp、Git…などなど。覚える事が多すぎてそろそろ頭がパンクしそう…と思っていたそんな折、Design Spiceのヒロさんに本書を献本いただけたので、さっそく私も読んで学習させていただきました！

今回は、本書の全体の構成や、個人的に参考になった部分などを含めてレビューしていきます！

このブログにはトップページに公式のSNSボタンを設置しています。…が、先日それが原因で「サイトが重くなってしまっているよ」と無料写真素材サイト「ぱくたそ」のエンジニアでもあるYuu（@regret_raym）さんに教えていただきました。

言われてみれば全くもって当然のことだったのですが、多分ご指摘いただかなかったらずっと気づかないままだったので、記事として残していおこうと思います。