• RSS
FacebookやTwitterなどのロゴ画像がベクトルデータでダウンロードできる 「LogoEPS」

LogoEPS」というサイトには、FacebookやTwitter、Google、Youtube、Appleなどの有名企業やサービスのロゴ画像が大量に掲載されており、それらロゴ画像がAI形式や、EPS形式などのベクトルデータでダウンロードすることができます。
続きを読む

[JS]IEでも CSS3の Media Queries を対応させるスクリプト「css3-mediaqueries.js」

なんて素敵なスクリプト! さすがGoogle先生!!!

最近はレスポンシブWEBデザインのサイトも増えてきましたので、ブラウザの幅やデバイスによってサイトの見せ方を変える必要もあるんです。

例えば、一見普通のPCサイトと思いきや、ブラウザの幅を縮めてみるとスマフォでもちゃんと収まって見えるように最適化されてある!!!みたいな。

これを実現する方法として CSS3 の Media Queries を利用する訳ですが、ここでもやっぱりIE がすんなり話を通してくれません > <;

ですので、IEでも Media Queries を利用するために、Google Code で公開されている css3-mediaqueries.js を利用します。
続きを読む

[WP]ログインフォームをメンテナンス画面として使用できるプラグイン「Maintenance by fruitfulcode」

公開前や改修中のページを見られたはマズい…なんて時に、サイトへアクセスしたユーザーに「ただ今メンテナンス中です」のメッセージを表示させることも多いと思います。

WordPressの場合、メンテナンスページの設定管理ができる「Maintenance Mode」というプラグインもありますが、WordPressのバージョンが 3.5 になってから個人的には「Maintenance by fruitfulcode」というプラグインを利用するようになりました。
続きを読む

[CSS]マウスでドラッグした際の文字を選択範囲の色(ハイライトカラー)を変更する方法

マウスカーソルでテキストをグイーッとなぞると、選択範囲がハイライト表示されます。

通常、この選択範囲のハイライトカラーは青色で、たまにピンクや赤色などになっているサイトやを見かけますが、CSS3 の擬似要素 selection を用いることで、このハイライトカラーを変更することができます。
続きを読む

[JS]IEでもプレースホルダ を利用できるjQueryプラグイン「jQuery ah-placeholder」

HTML5 で強化された form の placeholder 属性は、javascript を使わなくてもプレースホルダを使える優れものですが、これがやっぱりIE には対応していない > <;

placeholder のIE対応となると、何だかんだでjavascript のお世話にならないといけないので矛盾しますが、jQueryプラグイン「ah-placeholder.js」を使えば実現可能です。
続きを読む

[WP]WordPressでショートコードを実行せずに記事本文にそのまま表示させる方法

WordPressに関するブログを書く際に、例えば

「こんなショートコードを書いてください!」

と言って、投稿ページでそのまま [[contact-form-7]] などと書いてしまえば、そのショートコードが実行されてしまいます。
続きを読む

画像の読み込みを遅延させるjQueryプラグイン「Lazy Load Plugin for jQuery」

img 要素の画像を遅延ロードさせることができるjQuery プラグイン「Lazy Load Plugin for jQuery」。

ブログで大量の画像を掲載しているような場合は、ページのスクロールに合わせて画像を読み込む(遅延ロード)ようにしてくれる Lazy Load Plugin を利用すると良いかもしれません。
続きを読む

[JS]FacebookやTwitter、はてブなどのソーシャルボタンを非同期で読み込む方法

Facebookの「いいね」やTwitterの「ツイート」、Google +1の「+1」などの各種ソーシャルボタンの読み込みを非同期にすることで、ページの表示速度を向上させる方法です。

Facebook、Twitter、Goolge +1 の他にも Google Analytics、はてブ などを全部まとめて非同期にすることができます。
続きを読む

[WP]WordPress で不要なカスタムフィールドを削除できるプラグイン「Delete Custom Fields」

WordPress のブログを長く運営していると、

「間違って登録してしまった」
「昔は使っていたけど今は使わなくなった」

などの理由で、不要なカスタムフィールドが溜まってしまうなんて経験もあるのではないかと思いますが、

今回はそのような使わなくなったカスタムフィールドを、データベースを直接触ることなく「Delete Custom Fields」というプラグインを利用して削除する方法をご紹介します。
続きを読む

[CSS]背景画像のサイズを変更できるプロパティ「background-size」

CSS で背景画像を使う際、今までは画像ファイルを適切な大きさにリサイズする必要がありましたが、CSS3 からは背景画像の幅・高さを拡大・縮小できるプロパティ background-size を使うことができます。

background-image: で背景画像を指定して、background-size: で背景画像のサイズを調整してあげます。
続きを読む

[Fla]Swfobject 利用時の wmode 属性を transparent に設定する方法

Flash ムービーを設置したサイトで、例えば
「グローバルナビのドロップダウンメニューの要素がフラッシュの『下』に隠れてしまう」
「Lightbox で画像を立ち上げたら、拡大画像がFlash ファイルよりも『下』に表示される」
なんて経験をされた方もいらっしゃるのではないかと思いますが、

今回はSwfobject を使ってFlash ムービーを表示させる上で、このレイヤーの問題をどのように解決するかについて、回避方法をまとめました。
続きを読む

[WP]リンク切れチェック用のWordPressプラグイン「Broken Link Checker」

WordPressでブログやサイトを作る際に「外部リンク」を貼ることは多いと思いますが、

「リンク先のページがなくなった」
「リンク先のページURLが変更になった」

など、某かの理由でエラーになったリンクを検出してくれるWordPressプラグインが Broken Link Checker です。
続きを読む

[CSS]iPad、iPhone 5 向けレスポンシブWEBデザインに必要な Media Queries のまとめ

レスポンシブWEBデザインへの対応で頻繁に使うCSS の Media Queries ですが、条件分岐のやり方をよく忘れるので整理しました。

「iPad」「iPhone」「iPhone 5」の端末別に加えて、「ブラウザ幅」での条件分岐もまとめています。
続きを読む

[PHP]PHPでiPad、iPhoneのユーザーエージェントを判別して振分処理を行う方法

WEBサイトを閲覧する環境もだいぶ変わってきまして、

今ではPC以外のスマートフォン、iPadによるアクセスも増えてきました。

今までPCでの閲覧に適したサイトデザインだったので、iPadやiPhone見ても正常に見えないよ!!ということもあると思いますが、それぞれのデバイス別に最適化するのもちょっと面倒…
続きを読む