クリッカブルマップ(イメージマップ)の作成方法!

クリッカブルマップ(イメージマップ)の作成方法!

こんにちは。Webデザイナーのotarieです (。-_-。)
今回はクリッカブルマップ(イメージマップ)を使う機会があったので、クリッカブルマップ(イメージマップ)の作成方法について学んだことを書きます。

画像1枚をまるごとリンクにするのではなく、画像の一部分だけをリンクにしたい。画像内の複数の部分に違うリンク先を指定したい。と思ったアレ。クリックする場所によってリンク先が違う指定をしている絵や画像をクリッカブルマップ(イメージマップ)と言います。

このクリッカブルマップ。初めましての時はとても難しく考えていたのですが、3つの要素を指定するだけで簡単にできたのでご紹介します。
その3つが「img要素」、「map要素」、「area要素」です。
1つづつ見ていきます。
 
 
STEP1「img要素」

img要素は、通常の指定と同様で
<img src=”img/xxxxx.png”>
これに、クリッカブルマップの属性を追加します。

usemap属性:クリッカブルマップの名前を、頭に「#」を入れ指定してあげます。
・src属性:画像ファイルを指定してあげます。
・alt属性:代替テキストを指定してあげます。
 
 
STEP2「map要素」

先ほどのimg要素に指定したクリッカブルマップの名前を使ってmap名を指定してあげます。

 
 
STEP3「area要素」

area要素は少しだけ複雑になります。先ほど指定したmap要素の中に入れていきます。
画像のどの部分にリンクさせるかを形と座標と共に指定してあげます。
指定の詳しい内容は下で説明します。

■「shape=””」 領域の形

 rect:四角形
 circle:円形
 poly:多角形
 default:画像全体

■「coords=””」 領域の座標

 座標(x,yなど)
 rect:左上と右下の角の座標(x,y,x,y)
 circle:中心点の座標と半径(x,y,半径)
 poly:全ての角の座標(x,y,x,y,x,y,x,y,…)
 default:coords属性は指定できない

■「href=””」 リンク先の指定

 URL:リンク先のURL

■「alt=””」 代替テキスト

 テキスト:マップが表示できない場合のリンクテキスト

この3つの指定をしてあげるだけでできるんです!簡単ですよね!
では全部を指定したサンプルコードを書きます。

 
 
STEP4「座標指定」の方法

では、座標はどうやって指定するのか?ここです。ここが面倒です!(´-`).。oO
Photoshopで座標を調べてもいいのですが、ここで私は便利なものを紹介します。
その名も・・・・! 

HTML Imagemap Generator!!!!

この便利なジェネレーターに座標を指定したい画像をポイっ!
そして指定したい形を選んで、絵の上でドラックして形を合わせて。。。。。
指定していくと、右側に自動的にコードが書かれ、座標も入れ込んでくれる本当に便利なジェネレーターで、強く、強くオススメします!!
あとはこのソースコードをコピペすれば簡単に指定できますよ^^

いかがでしたか?
また次回をお楽しみに〜

 

 

 

 

1週間で作成したアプリをリリースしました!

勉強の一環で新人君が1週間で作ったアプリです!(`・ω・´)
タップで雲を傾けて星っぽい何かが落ちないようにするゲームです!

週間ランキング機能もついてるよ!
ちなみに今の一位はこれを作った新人君本人だよ!開発チーム誰も勝てへん!
225ははっきり言って異常です

ダウンロードしてぜひ遊んでみてね!^o^

 

 

 

 

 

NightCloudのダウンロードはこちら!

App Storeからダウンロード googleplayからダウンロード

OGP対応のホームページ制作について

OGP対応のホームページ制作について

こんにちは。
WEB制作をしているセリーナと申します。
今回はWEB制作時によく依頼されるOGPについてお話ししたいと思います。

OGPとは??
いきなり、OGPと言われてもなんだこれは?と思う方もいらっしゃると思いますが、
Open Graph Protocolの略で、SNS(facebookやLINEなど)上で張り付けたURL内容を簡易的に表示させる仕組みです。
依頼される方の中では「facebookにURL張り付けたときのアレ」と言う方もいます。
表示させたいページにOGPのタグを設定しておくと、URLが張り付けられたときに指定された画像やタイトル、説明文descriptionが表示され、SNS発信する方にとってはページの簡易部分が伝わり便利な機能です。

Open Graph Protocolのイメージ
Open Graph Protocolのイメージ

では、どのようなタグをページ埋め込むか。
HTMLの<head>~~</head>の中に

このタグを入れます!

基本的に会社様のよりご依頼を受けることが多いので

の部分はcompanyとすることが多いです。

また、ここで使う画像の大きさは、1200x624pxで私は作っています。
どうやら比率が決まっているようで、その規格にあっていないとうまく拾ってくれないようです。

また、完成したURLをfacebookに張り付けてOGPも更新したのに変わらない!とおっしゃる方もいます。
そうなると、何回更新しても変わりません。
それは、faceebookがそのURLのOGPを記録してしまったために起こるので
その記録を消さなければいけません。

では、どうするのか。

https://developers.facebook.com/tools/debug/
ここのシェアデバッガーを使います。

facebookシェアデバッガー
facebookシェアデバッガー

まず、更新したいURLを
入力部分にいれ、右側の「デバッグ」ボタンを押します。
そうすると、そのURL(ページ)のOGP部分が表示され、一覧に表示されます。
(ここで、エラーがあった場合にはエラーが表示されます。)
そこで見れるのは、おそらく古い情報なので、次に、
「もう一度スクレイピング」というボタンをクリックします。

そうすると、新しいOGP部分が読み取られ、
最新版となり、その後、新に投稿部分にURLを入れると切り替わります。
更新されなくて悩んでいたから、ぜひ、このデバッガーを使って更新してみてくださいね。

【Unity】プログラミングなしでロゴをフェードアニメーションする方法!

Unity 5.5になってロゴのフェードアニメーションがPlayerSettingsから設定できるようになったみたいです!

設定方法


PlayetSettingを開いて下の方までスクロールするとSplash Imageという項目があります
ここにあるVirtual Reality Splash Imageにロゴにしたい画像を入れます!

背景の設定

続いて背景の設定です。
上のままだと薄いグレーの背景に真四角の白いロゴが出てかっこ悪いので背景を白にします!
Splash Imageという項目の下の方にBack Groundの設定があるので、背景にしたい画像を入れて終了!

ロゴを出す順番

Unity無料ユーザーはUnityロゴを外せないですが、順番を変えることができるようになりました!
上と同じくSplash Imageという項目の中にLogosというのがあるので、
そこのDraw ModeをAll Sequentialに変更したらUnity Logoが出てくるので後は2つのロゴをドラッグで移動すればおkです!

ちなみに横の数字はフェードから消えるまでの秒数ですが、Unityロゴは2秒以下には設定できません>A<

今まではフェード用のスクリプトを作って、シーンにオブジェクトを追加して〜とかとかやっていたのですが、これでプログラミングなし!オブジェクトなし!でロゴのフェードアニメーションできるので、やっていない方は是非試してみてください〜^o^

ついに・・・新作アプリ?!

どうもデザイナーのtaeminです(^-^*)/コンチャ!
開発チームみんなで回しているこのブログですが、みんなクオリティの高いブログを書くのでどんどんハードルが上がっていってる気がします・・・\(;゚∇゚)/

どんな内容を書こうかな?と毎回悩む私なのですが、、、
今回ご報告できる事が・・・!

ついに・・・!

新作アプリの自社制作&リリースが決定しました!

ちょっとした暇つぶしに最適な手軽に出来るスマホアプリです(╹◡╹)♡
デザイナーであるわたくしtaeminがデザイン面を担当させていただきますよ٩( ‘ω’ )و
リリース間近になったらまたお知らせするので続報をお待ちください~!