スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[ --/-- ] スポンサー広告 | トラックバック(-) | コメント(-)

Q.ヤプ画の中にリンク(C-MAP)を貼りたんだけど…[3]

A.
それは、クリッカブルマップ(イメージマップ)機能をつかうことによって可能となります。
画像の中にクリック位置を指定するのが難しいのです。
ですが、ソフト(ツール)などをつかうと簡単にできるようになります。

よく使われているフリー(無料)ソフトを紹介します。
MapLinker
C-MAP

以下、テンプレート修正方法


1.
クリッカブルマップ作成ソフトを使い、マップ指定位置を指定するHTMLを作成します。
使用画像+クリックする位置により座標位置が違ってくるためサンプルは省略します。

2.
クリッカブルマップのHTMLは

<IMG src="画像UTL" usemap="#i-MAP(半角英数の名前なんでもOK)" border="0">
<MAP name="i-MAP(上のusemapで付けたの#を抜いた名前)">
<AREA shape="
" coords="座標を指定" href="リンク先URL" target="" alt="リンク先の名前">
<AREA shape="
" coords="座標を指定" href="リンク先URL" target="" alt="リンク先の名前">
<AREA shape="
" coords="座標を指定" href="リンク先URL" target="" alt="リンク先の名前">
</MAP>


というようになっています。
ブログ内のリンクはを_topとし同窓とし、新たに窓を表示させたいときはを_blankとします。
で画像の区切り方を指定します。(矩形=RECT、円形=CIRCLE、多角形=POLY となります。)

3.
メインテンプレートの17行目付近に
<div class="blog_title"><a href="{$BlogUrl$}">{$BlogName$}</a></div>
というのがあります。

アーカイブテンプレートは20行目付近、1記事テンプレートは21行目付近になります。

4.
3.の赤文字のところを2.に置き換えます。

実際にやってみると
<div class="blog_title"><IMG src="画像UTL" usemap="#i-MAP(半角英数の名前なんでもOK)" border="0">
<IMG src="画像UTL" usemap="#i-MAP(半角英数の名前なんでもOK)" border="0">
<MAP name="i-MAP(上のusemapで付けたの#を抜いた名前)">
<AREA shape="
" coords="座標を指定" href="リンク先URL" target="" alt="リンク先の名前">
<AREA shape="
" coords="座標を指定" href="リンク先URL" target="" alt="リンク先の名前">
<AREA shape="
" coords="座標を指定" href="リンク先URL" target="" alt="リンク先の名前">
</MAP>
</div>
こんな感じになります。

ヤプ画(ブログタイトル画像)全体に貼っていたブログへのリンクは入れないほうがいいです。
スポンサーサイト
[ 04/01 ] [画像(ヤプ画・ブログタイトル)]3カラムpink | トラックバック(-) | コメント(-)

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。