html

イメージマップ(クリッカブルマップ)の作り方とまとめ

イメージマップ(クリッカブルマップ)は画像の一部分をリンク設定できます。
昔からある機能ですが、私の場合、FireworksやDreamweaverでしか設定したことがなかったので仕組みがよくわかっていませんでした。

このたび久々にこのイメージマップを使う機会があったので改めて勉強してみました。

イメージマップ(クリッカブルマップ)の構成

イメージマップ(クリッカブルマップ)の構成はimg要素、map要素,area要素 の三つだけです。

img要素は、通常の画像を表示するのと同様で
<img src=”images/imagemap.png”>
これに、イメージマップ属性を追加します。

<img src=”images/imagemap.png” usemap=”#Map”>

usemap=””
イメージマップの名前を指定,
複数イメージマップがある場合は重複しない名前、
アンカーのように「#」をつけます。

この後、画像のどの部分にイメージマップ(リンク)を付けるかを指定します。

map要素にはイメージマップの名前を指定

img要素に指定した名前です

area要素は、どの部分にリンクするかの形状や座標、リンク先を指定

■shape

リンクの形を指定できます。
rect    四角形
poly  多角形
circle 円

■リンクの形が四角の場合[rect]

shape = “rect”

coords=”101,234,147,277″

左上の座標XY(101,234)と右下の座標XY(147,277)を指定します

■リンクの形が多角形の場合[poly]

 

shape = “poly”

coords = “79,158,80,147,81,146,132,127,149,158,128,187,86,187,79,157”

すべての点の座標XY指定します。
上記の場合は、八角形のリンクになります。

■リンクの形が円形の場合[circle]

shape = “circle”

coords=”187,58,27″

円の中心の座標XY(187,58)と半径(27px)を指定します

画像の座標を調べるのが面倒な場合は、ジェネレータでソースを生成!

いまどきは便利なものを作ってくれる人がいて本当にありがたいです。

Imagemap が作成できるジェネレーター
日本人の方が作られているので日本語です。

HTML Imagemap Generator
http://labs.d-s-b.jp/ImagemapGenerator/

海外製のイメージマップジェネレータです

HTML Map Creator
http://www.html-map.com/

SSLセキュアなページでこのページには安全でない他のリソースが含まれています。と出た場合の対処法

SSLを設定して、ページをアップしたに、このようなメッセージが表示されることが

「このページには安全でない他のリソースが含まれています。このリソースは送信中に他のユーザーから見られる可能性があります。また、悪意のあるユーザーによって改変されページの見た目が変わる可能性もあります。」

安全でないコンテンツ

SSLのページなのに、http://からはじまるセキュアでない通信を行っているもの(たいてはimgタグやjavascriptなどのリンク)があるとこのように表示されてしまいます。

折角SSLを設置したのにこれではもったいないし、見てくれたユーザーさんにも不安を与えてしまうのでちゃんと対処した方が良いですね。

でもソースを見ただけではすぐに原因がわからない場合も多いです。
そんな時にはGoogle Chromeデベロッパーツールですぐに確認できます♪

デベロッパーツールを開いた後、コンソールを選択すると以下のようにメッセージが表示されるのでhttpsでリクエストしたけどセキュアじゃない画像があるからhttpsで設定しなおした方が良いみたいなメッセージ?
ここを修正すれば解決だと思います。

安全でないコンテンツ確認

この場合はjqueryでスライドしている画像がhttp://~で設定されているのが原因でした。

ここをhttpsに設定しなおせばよいですね

そうすればGoogleさんのように鍵のマークが表示され暗号化されています。と表示されます。

google SSL

Facebook OGP ,Twitter Cards のOGP設定のまとめ

OGP(Open Graph Protocol)とは
シェアしてもらった時にそのページのタイトル、説明文、サムネを指定できるタグ。
Facebook,Twitter,Google+,mixiなどSNSで使えます。

The Open Graph protocol
http://ogp.me/

Facebook OGPの設定

OGPを使うことを宣言する

にprefix属性を付けて記述します。

og:
fb:
article:

のあとは必ず半角スペースが必要

og: OpenGraph のプロパティ
fb: Facebookのプロパティ
article: OGPのオブジェクトタイプ

articleはブログやサイト記事などのページ

必須プロパティの設定

og:title
ページのタイトル

og:type
オブジェクトタイプ

・website 一般的なサイトのトップページ
・article ブログやサイトのページ

og:url

そのページのURLを絶対パスで

og:image

シェアされたときに表示する画像のURL(絶対パス)

オプションプロパティ

og:site_name
サイト名

 

og:description
ページの説明meta descriptionと同様

 

Facebook用の設定

fb:app_id
FacebookのアプリケーションID(15文字の半角数字)

fb:app_idのほかにfb:adminsも使用可能だが推奨されてない

Facebook用OGP設定が正しいかどうか確認できるデバッグページ

Debugger (要ログイン)
https://developers.facebook.com/tools/debug/

Twitter Cards

ツイートにタイトル・概要・サムネを表示させることができます

Twitterカード
https://dev.twitter.com/ja/cards/overview

 

カードの種類(必須)twitter:card

種類がいくつかあるみたいだけど普通のサイトならsummaryでよいみたいです。

Cardの種類

Summary Card summary ブログ記事や製品情報、レストラン情報などWebサイトの情報を表示
Summary Card witd Large Image summary_large_image  summary cardの画像が大きく表示される版
Photo Card photo  写真が表示されるカード
Gallery Card gallery  4枚の写真を表示できるカード
App Card app  アプリの詳細情報を表示できるカード
Player Card player  ストリーミング再生ができるカード、特別な承認作業が必要なよう
Product Card product  製品情報を表示できるカード、写真のほか在庫情報や価格なども表示できる

詳細はTwitterデベロッパーページにあります。サンプルタグもあり。
https://dev.twitter.com/cards/types/summary

アカウント(必須)twitter:site

サイトのTwitterアカウントを指定します。

タイトル(必須)twitter:title

タイトルは70文字まで

概要(必須)twitter:description

 

検証して申請

上記タグを設定したら、下記ページでタグを検証して申請します。

Card validator
https://cards-dev.twitter.com/validator

html5,CSS3でサイト制作するときにお世話になるjavascriptライブラリ(主にIE対応)

IE8以下はhtml5を認識しない、css3にも対応していないのでjavascriptライブラリにお世話になります。

そのまとめ。

html5shiv.js

https://github.com/aFarkas/html5shiv

html5から導入されたタグ(header,footer,section,article,asideなど)はIE8以下では認識されない。
それらをIE8でも解釈させるためのjavascript ライブラリ。

 

respond.js
https://github.com/scottjehl/Respond

scottjehl Respond · GitHub

Media Queries(max-widthとmin-width)を解釈可能にするpolyfill

 

selectivizr
https://github.com/keithclark/selectivizr

Selectivizr   CSS3 pseudo class and attribute selectors for IE 6 8

CSS3をIE8以下でも認識させるためのjavascriptライブラリ「Selectivizr」
疑似クラス・擬似要素(の一部)が利用可能に。

Selectivizrを使う上での注意

  • jQuery,prototype,YUIなどのJavaScriptライブラリが必須
  • CSSソースはlink要素を使って読み込む

 

modernizr
http://modernizr.com/

Modernizr  the feature detection library for HTML5 CSS3

ブラウザで対応している機能をCSS,Javascriptで確認できる。

リンクの周りの点線(or線)を消す

リンクをクリックしたときにでるまわりの点線?
IEやFirefoxで表示される。これを表示させたくない場合は

とすると消せるそうなんですが、tabキーを使ってリンクを移動している人たちにとっては、その点線が見えないと、どこを移動しているかわからないのでとても不便だそうです。

ただイメージマップ(クリッカブルマップ)のリンクには、スタイルシードだけでは効かなかったような。。。
(未確認)
その場合は、アンカーにonfocus属性を追記すると消えます。

 

レスポンシブレイアウトの基本設定

サイトをレスポンシブにする場合にまず最初に設定することのまとめ。

ブレークポイントを決める

レイアウトを切替る画面サイズを決めます。
PC・タブレット・スマートフォンそれぞれに対応したレイアウトにするなら

PC向け       768px以上
タブレット向け   768pxまで
スマートフォン   480pxまで

こんな感じでしょうか。

ちょっと使わないとすぐ忘れてしまうので、iphoneなどのデバイスの解像度を一覧にまとめておきます。

 

端末 画面サイズ(inch) 画面解像度(px) デバイスピクセル比 ブラウザサイズ
iPhone4 3.5インチ 640 x 960 2.0 320 x 480
iPhone5/5s 4インチ 640 x 1136 2.0 320 x 568
iPhone6 4.7インチ 750 x 1334 2.0 375 x 667
iPhone6 plus 5.5インチ 1080 x 1920 2.0 414 x 738
iPad mini 9.7インチ 1536 x 2048 2.0 768 x 1024
iPad 7.9インチ 1536 x 2048 2.0 768 x 1024

View Portの設定

実際のHTMLファイルにviewportの設定をします。

 IE8以下の対応

IE8以下ではhtml5やメディアクエリーに対応していないため、javascriptを設定します。

html5shiv.jsを入れる

 https://code.google.com/p/html5shiv/

css3-mediaqueries.jsを入れる

https://code.google.com/p/css3-mediaqueries-js/

 CSSの設定

ブレイクポイントをしていたサイズに応じてmedea queryを設定します。

もっと細かく設定するなら

メディアクエリーの記述方法には、

・モバイルファーストか
・PCファーストか
という考え方の違いで記述方法も変わってくると思います。

Internet Explorer 互換表示にさせない

Internet Explorer の互換表示とは、新しいバージョンのIEで崩れてしまったホームページを以前と同じように表示させる機能。

IE11では非推奨になりました。

つい最近知ったのは、イントラネットでは最初から互換表示になるようになっているこ。これはIE11でもそのようです。

互換表示モードにならないようにするには、metaタグを追加します。

にする必要はもうないのかな?

chrome=1 は、Internet Explorerの古いバージョンでGoogle ChromeのJavaScriptとレンダリングエンジンを動かすためのオープンソースのプラグインChrome Frameがインストールされていれば、それを有効にする。。。という事だと思います。使ってないので詳しくは不明^^;

ただ、Chrome Frameももうアップデートの予定はなく、開発終了したそうです。