Archive for 9月, 2015

画像内に複数リンクを設定する

9月 18th, 2015



img要素map要素area要素、この3つの要素を組み合わせることで、イメージマップを設定することができます。

※イメージマップとは、1つの画像内に複数のリンク先を設定できる機能のことです。


サンプル


<img src="map.gif" alt="サンプル" usemap="#sample">

<map name="sample">
<area shape="rect" coords="22,11,122,62" href="map1.html" alt="リンク1">
<area shape="circle" coords="184,86,30" href="map2.html" alt="リンク2">
<area shape="poly" coords="87,78,30,110,81,139,69,113" href="map3.html" alt="リンク3">
<area shape="default" href="map4.html" alt="リンク4">
</map>


【イメージマップ作成の流れ】

イメージマップは、画像を埋め込むimg要素、マップを定義するmap要素、リンク領域を設定するarea要素、この3種類の要素で構成されています。

  1. まず、イメージマップに使用する画像を用意して、それをimg要素で読み込みます。
  2. map要素name=”” を追加して、任意のマップ名(半角英数字)を指定します。
  3. img要素usemap=”” を追加して、2. で指定したマップ名をハッシュ( # )に続けて記述します。(このマップ名によって、画像とリンクの設定が関連付けられることになります)
  4. map要素の中に、area要素を必要な数だけ配置します。
  5. area要素に、shape=””(リンク領域の形状)、coords=””(リンク領域の座標)、href=””(リンク先のURI)、alt=””(代替テキスト)を追加して、それぞれの設定を行います。

【img要素の設定】

<img src="map.gif" alt="サンプル" usemap="#sample">

属性 説明
src=”” URI イメージマップに使用する画像のURIを指定
alt=”” テキスト 代替テキストを指定
usemap=”” #マップ名 ハッシュ( # )に続けてマップ名を指定

img要素には、src属性alt属性が必須となります。

【map要素の設定】

<map name="sample"></map>

属性 説明
name=”” マップ名 任意のマップ名を指定

map要素にはname属性が必須となります。

このname属性で指定したマップ名を、img要素usemap属性内に記述します。

【area要素の設定】

<area shape="rect" coords="22,11,122,62" href="map1.html" alt="リンク1">

属性 説明
shape=”” リンク領域の形状を指定
rect 四角形 (初期値)
circle 円形
poly 多角形
default 画像全体 (リンク領域が設定されていないエリア)
※defaultの指定は、IEでは対応していないようです。
coords=”” リンク領域の座標をピクセル数で指定
座標(X,Y) rectの場合 … 左上の角と右下の角の座標を指定 (X,Y,X,Y)
circleの場合 … 中心点の座標と半径を指定 (X,Y,半径)
polyの場合 … すべての角の座標を指定 (X,Y,X,Y …)
defaultの場合 … coords属性の指定は不要
href=”” URI リンク先のURIを指定
nohref 値は不要 その領域にリンクを設定しない (href属性の代わりに使用)
alt=”” テキスト 代替テキストを指定

area要素にはalt属性が必須となります。

shape=””default が指定されたarea要素は、他のarea要素よりも後に配置する必要があります。(領域が重なっている場合は、先に指定した領域が優先されるので)


【座標の指定方法】

リンク領域の形状により、座標の指定方法は異なります。

[座標の例] [イメージマップの例]

例えば、上記の画像を使用した場合は、座標の指定内容は以下のようになります。

※座標の指定は、カンマ( , )で区切って記述していきます。

rect(四角形)の場合 … 左上の角と右下の角の座標を指定 (X,Y,X,Y)
coords="22,11,122,62"

circleの場合 … 中心点の座標と半径を指定 (X,Y,半径)
coords="184,86,30"

polyの場合 … すべての角の座標を指定 (X,Y,X,Y …)
coords="87,78,30,110,81,139,69,113"

【座標の割り出し方】

画像を編集できるソフトがあれば、簡単に割り出すことができます。Windowsの場合は、付属している「ペイント」でも座標を調べることが可能です。

以下は、ペイントを使用したときの例です。調べたい位置にカーソルを合わせると、右下にその位置の座標が表示されます。

[ペイントを使用した例]


使用例


<p><img src="map.gif" alt="サンプル" border="0" width="221" height="145" usemap="#sample"></p>

<map name="sample">
<area shape="rect" coords="22,11,122,62" href="map1.html" alt="リンク1">
<area shape="circle" coords="184,86,30" href="map2.html" alt="リンク2">
<area shape="poly" coords="87,78,30,110,81,139,69,113" href="map3.html" alt="リンク3">
<area shape="default" href="map4.html" alt="リンク4">
</map>

表示例

サンプル

リンク1 リンク2 リンク3 リンク4

■黒い領域だけにリンクを設定した例


<p><img src="map.gif" alt="サンプル" border="0" width="221" height="145" usemap="#sample2"></p>

<map name="sample2">
<area shape="rect" coords="22,11,122,62" nohref alt="">
<area shape="circle" coords="184,86,30" nohref alt="">
<area shape="poly" coords="87,78,30,110,81,139,69,113" nohref alt="">
<area shape="rect" coords="0,0,221,145" href="map4.html" alt="リンク">
</map>

表示例

サンプル

http://www.tagindex.com/html_tag/img/img_map.html

 



メールの入力確認項目を追加 / Contact Form 7

9月 16th, 2015

問合せフォームにメールアドレスの確認項目を追加するには
外観テーマ編集に入り、右メニューにある「テーマのための関数 functions.php」を編集します。

下のコードを追加します。

add_filter( 'wpcf7_validate_email', 'wpcf7_text_validation_filter_extend', 11, 2 );
add_filter( 'wpcf7_validate_email*', 'wpcf7_text_validation_filter_extend', 11, 2 );
function wpcf7_text_validation_filter_extend( $result, $tag ) {
$type = $tag['type'];
$name = $tag['name'];
$_POST[$name] = trim( strtr( (string) $_POST[$name], "\n", " " ) );
if ( 'email' == $type || 'email*' == $type ) {
if (preg_match('/(.*)_confirm$/', $name, $matches)){
$target_name = $matches[1];
if ($_POST[$name] != $_POST[$target_name]) {
$result['valid'] = false;
$result['reason'][$name] = '確認用のメールアドレスが一致していません';
}
}
}
return $result;
}

そして、お問い合わせからContact Form 7の設定画面に入り、次のようなショートコードを、左のフォーム枠内に記述します。

メールアドレス:

[email* your-email]

メールアドレス (確認用)

[email* your-email_confirm]

後は右上の保存をクリックして完了です。

【Contact Form 7】パイプを使って送信先を選択可能に

9月 14th, 2015

パイプを使って送信先を選択可能に Contact Form 7 日本語

パイプを使って送信先を選択可能に
あなたが会社のサイトのウェブマスターになった場面を想像してください。そのサイト上に、送信者が宛先を選択できる仕組みのコンタクトフォームを設置することになったとしましょう。わかりやすい例として会社の CEO (ceo@example.com)、営業担当(sales@example.com)、サポート担当(support@example.com) の3つから宛先を選択できることにします。

こういったコンタクトフォームは、Contact Form 7 の基本的な機能を使っても実現することは可能でした。まずドロップダウンメニューかラジオボタンを設置して(つまり次のようなフォームタグをフォームのテンプレート内に挿入するわけですが):

[select your-recipient “ceo@example.com”
“sales@example.com”
“support@example.com”]

次にこれに対応するメールタグ [your-recipient] を 宛先: の項目に入力します。こうすることでメールは送信者が選んだアドレスに送信されることになります。

ところが、これには問題がありまして、この方法を用いた場合、選択するメールアドレスがインターネットに公開されることになり、簡単にスパムのターゲットにされてしまうという好ましくない事態を招いてしまいます。

というような事情で、データは公開したくないがそのデータを選択対象としては使いたいというニーズを安全に満たす必要が出てきたわけですが、パイプ (‘|’) のサポートはまさにこの目的のためにあるのです。

先述のドロップダウンメニューのタグを次のように変更しましょう:

[select your-recipient “CEO|ceo@example.com”
“Sales|sales@example.com”
“Support|support@example.com”]

オプションの値の中でパイプ文字 (‘|’) が使われている場合、外部に公開されるのはパイプより前の部分だけになり、一方メールの中で使われるのはパイプより後の部分になります。

oED82lNSzqKHZTMb-96418

パイプ文字より後の値を得るには、フォームタグに対応した通常のメールタグ(上の例の場合では [your-recipient])をメールのテンプレートに設置します。パイプより前の値を得るには、[_raw_{項目名}](上の例の場合では [_raw_your-recipient])が使えます。

パイプをこの機能で使うことができるのはドロップダウンメニュー、ラジオボタン、チェックボックスの場合に限られます。もしこの機能が好きにはなれなくて無効にしたい場合は、WPCF7_USE_PIPE 定数を false として定義すればそうなります。