• RSS
[HTML]スマホサイトでお世話になる <meta name=”viewport”> の設定のまとめ

meta viewport は、デバイスに応じてウィンドウの幅や高さを調整できたり、画面を拡大縮小率を調整したりと、表示領域を設定する上で重要なメタデータです。

特に、スマートホンやiPad などのタブレット向けにサイトを構築したり最適化する際に、<head> 内に meta viewport を設定しておかないと上手く収まってくれません。
続きを読む

[JS]レスポンシブWEBデザイン対応のjQuery スライダープラグイン「bxSlider」

jQuery ベースのコンテンツスライダーには色々ありますが、今回紹介させていただく「bxSlider」は設置が簡単で、自動再生やフェードインによる画像切り替えなどのカスタマイズも手軽にできる便利なプラグインです。

また、レンスポンシブWEBデザイン対応なのでスマフォやタブレットでも使える所も嬉しいですね。
続きを読む

[WP]カテゴリの順番を自由に変更できるWordPressプラグイン「Category Order」

WordPRessのカテゴリを自由に並べ替えたいと思っても、固定ページのように「順序欄に数字を入れて調整…」のような機能はありません。

カテゴリの順番を入れ替えるプラグインは色々ありますが、シンプル且つ、ドラッグ & ドロップで並び替えるという直感的で分かりやすい操作のWordPressプラグイン Category Order がイチ押しです。
続きを読む

[Mac]WEBサイトのページキャプチャを撮るなら「Paparazzi!」

クライアント向けにサイトを作っていると、案件によっては「デモページのキャプチャを撮ってパワポに貼って…」なんて作業があるのですが、

画面ごとに地道にキャプチャを撮るとフォトショで加工するのが面倒なので、ページのキャプチャをいい感じに撮ってくれるMac のアプリケーション「Paparazzi!」を使うと作業は捗ります。
続きを読む

[JS]イメージマップでロールオーバー時の画像を変更する方法

<img> <map> <area> によりイメージマップを利用する上で、「マウスを乗せた画像に変化を付けてリンクであることを分かりやすくしたい!」という要望に応えるカスタマイズです。

Javascript を利用すれば、ロールオーバー時の画像を変更することが可能です。
続きを読む

[WP]記事の1件目や偶数件目、奇数件目などに個別の処理を施す方法

WordPressで「記事の1件目にだけ広告を表示する」みたいなことをするための方法です。

記事の1件目に広告を挟むような特定の処理を入れたりできる他、1件目の記事にだけ特別なクラスを指定することもできます。

また、偶数件数や奇数件数の記事、ループで回した最後の記事に対しても特別なクラスを指定することができるなど、デザインの自由度がかなり上がるカスタマイズです。
続きを読む

[Mac]Mac のローカルIPアドレスを確認する方法

Mac のローカルIPアドレスを確認する方法です。

「Snow Leopard」や「Mountain Lion」共通の確認方法です。

OSのバージョン(例えばTiger とか)によっては微妙に確認場所が異なりますが、「システム環境設定」→「ネットワーク」から確認する方法は同じです。
続きを読む

[JS]javascriptでユーザーエージェントを判定して、ブラウザ毎に振分処理を行う方法

個人的には、ブラウザ判定を行う場合はPHPで行うことが多いのですが、PHPが使えない(.htmlファイルなど)場合にjavascript でユーザーエージェントを調べて、ブラウザ別に処理を行う方法が使えます。

ブラウザ情報を返す処理だけでなく、IE6の時は body にie6 のクラスを振る、なんてこともできます。
続きを読む

[WP]お問い合わせフォーム用WordPressプラグイン「Contact Form 7」の基本設定

WordPressでブログや企業サイトを構築する上で、お問い合わせフォームを設置する際に便利なプラグインが Contact Form 7 です。

拡張機能も色々あり、カスタマイズ次第で使い勝手もかなり向上する定番のプラグインですが、今回はまず Contact Form 7 の基本的な設定方法に絞って紹介させていただきます。
続きを読む

OGPの設定方法とFacebookデバッガー の利用方法

OGPとは「Open Graph Protocol」の略で、Facebook などのSNSで使われる共通の仕様(記述方式)です。

Facebookの「いいね」や mixi の「チェック」など、ブログやサイトを問わずSNSボタンを置く事が当たり前のようになりましたが、そこで重要になるのがこの「OGP」です。

ウェページの大量のソースコードの中から、シェアしたい情報をSNSのプログラム側に的確に拾ってもらうのは困難であるため、記事のタイトルや画像、記事の内容などを <meta> タグ内に指定しておくことで、SNS側に「このウェブページの内容は○○です」と明示することができます。
続きを読む

[JS]<table> をレスポンシブWEBデザイン対応させるjQueryプラグイン「FooTable」

ホームページやWEBサイトを作っていると、<table> を使った表組みというのはまだまだ健在です。

しかし、iPad やスマホでサイトを見る機会も増えたことで、今までのようなPCサイト向けに表示させていた <table> をレスポンシブWEBデザイン対応させることが多くなってきていると思います。
続きを読む

[WP]固定ページの順番や階層を変更できるWordPressプラグイン「pageMash」

ドラッグ & ドロップの操作で手軽に固定ページの順番を変更できるWordPressプラグイン pageMash のご紹介です。

WordPressで企業サイトを構築するに当たり、「会社概要」「プライバシーポリシー」などの定番コンテンツは固定ページを利用することが多いと思います。

グローバルメニュー等に固定ページのリンクを出力するとなると、ページの順番を自由に並べたくなりますますが、1ページ毎に順番を手打ちで変えていくのは面倒です。
続きを読む

[CSS]CSS で印刷時のページ分割(改ページ)を行う方法

WEbページを印刷する場合、

「なんでここでページ分割されるの??」

なんてことがよく起こりますが、CSS の page-break-beforepage-break-after を使えば、ページ分割(改ページ)位置を指定してあげることができます。
続きを読む

[CSS]角丸をIE8以下でも利用できるようになる「border-radius.htc」の使い方と注意点

IE8以下のバージョンで「角丸」を実現させる方法は、PIE.htcIE-CSS3.htc などを使う方法もありますが、今回紹介させていただく border-radius.htc を使う方法もあります。

名前の通り border-radius のプロパティに特化した HTCファイルです。
続きを読む