PETAPETA!!とは

画像内リンク（クリッカブルマップ）のHTMLソースコードを自動生成します。Webブラウザ上ですぐにお使いいただけます。

詳しい紹介と活用例をみる!!

使い方

画像の選択

画像ファイルをドラッグ＆ドロップするか、ドロップエリアをクリックしてファイル選択ダイアログから選択してください。
対応している画像ファイルはJPEGとPNG、サイズは1MBまでです。

リンクのエリアを決める

ツールバーから図形アイコンを選択してください。
矩形および正円は、ドラッグ＆ドロップで描くことができます。もう一度アイコンを押すと描画モードを終了します。
多角形は、クリックで頂点を描いた後にもう一度多角形アイコンを押す（描画モードを終了する）ことで形が確定します。 描いた図形を削除するときは、描画モードを終了して削除する図形を選択します。削除アイコンを押して図形を削除してください。

リンク情報の登録

ツールバーからリンクアイコンを選択してください。次に、リンクを設定したい図形エリアをクリックするとウィンドウが開きます。
そのエリアに設定したいURLやAltの情報を入力して「DONE」ボタンを押してください。

HTMLの表示

画面右上の「HTML表示」をクリックするとイメージマップがHTML形式で表示されます。HTMLソースコードはコピーしてお使いいただけます。

導入例

Wordpress

投稿の編集には「テキスト」モードをご利用ください。

「メディアを追加」からリンクの作成に使用した画像をアップロードして、投稿に挿入します。 PETAPETA!!で作成したHTMLソースコードを全てコピーして、投稿にペーストします。 ペーストしたソースコード先頭の<img>から

usemap="#xxxxxxxx-aaaa-bbbb-cccc-000000000000"

部分を、先に挿入した<img>へコピーします。 usemapをコピーできたらPETAPETA!!からペースとした<img>は不要です。消してください。 クリッカブルマップの完成です!!

コンタクト

ぜひ、ご利用の感想や機能へのご意見などを フィードバック へお寄せください。
返信をご希望の場合は お問い合わせ からお願いいたします。