*

クリッカブルマップの活用例 Excelを利用したオリジナル画像の作り方

公開日: : 最終更新日:2018/04/04 Excel

以前、1枚の画像から複数の場所へリンクできるクリッカブルマップ(イメージマップ)の作り方をご紹介しましたが、その活用例のご紹介です。

WordやExcelの機能を利用して画像を作る方法です。

以前の記事では、初心者の方には、今一つわかりにくいのではということもありましたので、今回は細かい手順を図解入りで書いてみました。

長くなってししまいましたので、2回に分けました。

前半でExcelでの画像の作成方法。
後半でWordPressにイメージマップを設定する方法になります。

スポンサーリンク
  

イメージマップに使う画像をExcelの機能で作る


イメージマップというと、思い浮かぶのは、サイトに地図が表示されていてそこから地域をクリツクすると詳細なページにジャンプするというものではないでしょうか?

1枚の画像はもちろんですが、いろいろな写真やイラストが組み合わされているものでも、それがⅠつのものであれば、通常はどこをクリックしても、その画像に対して貼られているⅠつのリンク先に行くだけです。

このイメージマップの面白いところは、1枚の画像で、図形でも写真でも、クリックする場所によって、違うリンク先を指定できるというものです。

活用のしかたは、さまざまありますが今回は1枚の写真や画像ではなく、図形を組み合わせたものにリンクを貼ってみたいと思います。

用意する図形はもちろん自分で好きに描いても使えますが、苦手な方でも簡単に利用できるWordやExcelの機能を使ってみます。

どちらのソフトでもあるいはPowerPointでも同様です。
例ではExcelを使ってみます。

実際に使った活用例はこちらにあります。
参考までに。

大掃除はじめて物語まとめ!どこからやるのか順番とやり方とポイント

ExcelのSmartArtグラフィックの使い方


WordやExcelには「SmartArt」という(用途によって図形を組み合わせたひな形のようなもの)図形を簡単に利用する機能があります。

試しに一つ取り込んでみます。

Excelを起動したら、リボンの「挿入」タブから「SmartArt」という項目のボタンを探します。

クリックすると「SmartArtグラフィックの選択」ダイアログボックスが表示されます。

SmartArtグラフィック
左側が分類、中央がSmartArtグラフィックの図形、右側が選んだものの詳細が表示されるスペースになっています。

中央の一覧から使いたい図をクリックして、選択します。

図を選択
選んだSmartArtが、画像の挿入ができる場合は図の下の説明に表示されています。

テキストは文字入力のことですが、ここにも画像は挿入できます。

SmartArt グラフィックの図形に写真を挿入


SmartArtの挿入
例として、上の図のようなSmartArtグラフィックを選択しました。

図形を選んで「OK」をクリックすると、Excelのワークシートに下記のように図形が表示されます。

挿入
図形の中に図のようなマークがあればクリックするだけで写真やイラストが挿入できます。

挿入ボタン
図形に画像を挿入してみます。
画像をいれたい位置の図の「画像の挿入ボタン」をクリックします。

写真の挿入
「図の挿入」ダイアログボックスが表示されます。

挿入ダイアログボックス
使いたい画像が保存してある場所を指定して画像を選び、挿入します。

写真の挿入
ボタンをクリックした図形のところに画像が挿入されます。

画像の挿入ウインドウから使いたい画像をクリックすると、図形に合わせて画像が挿入されます。

横長や縦長の画像は図形の大きさに左右され変形してしまうので、事前に挿入する図形の形に近い縦横比にしておくことをお薦めします。

縦長横長写真
※図のような縦長、横長の写真をそのまま図形に取り込むと次のようになってしまいます

変形した写真
図形の大きさはほぼ正方形なので、写真もトリミングなどして正方形に近い物にしておきます。

図の挿入ボタンがない場合

[テキスト]となっているところなどに画像を入れる場合は、先に画像を読み込んでおきます。

SmartArtに、ただコピペしても貼りつけることはできません

写真を読み込み、SmartArtとは別のところに挿入しておきます

写真を別のところに挿入
読み込んだ画像の上で右クリックし、表示されるメニューから「切り取り」をクリックします。

次に画像を挿入したいSmartArtの図形の上で右クリックし「貼りつけ」をクリックします。

貼り付け
これで選んだ図形の中に画像が挿入されます。

図形に挿入された
SmartArtが選ばれているとリボンに「SmartArtツール」タブが表示されます。

リボンのツール
その中の「デザイン」や「書式」タブをクリックすると、いろいろな設定ができます。

図形や線の色など好みのものにできます

SmartArtの選択時
他に写真やイラストを入れたり、文字を入力したりして、SmartArtを完成させます。

これがイメージマップの1枚の図になります。

SmartArt完成
スポンサーリンク


SmartArtをイメージマップ用の図として使う


それでは、出来上がったSmartArtの図形をクリッカブルマップとして使うための準備をします。

SmartArtをクリックするとまわりに水色の枠がつきます。

これはSmartArtが選択されている印です。

SmartArtの上で右クリックして、メニューから「切り取り」をクリックします。

Windowsの「アクセサリ」から「ペイント」を起動します。

切り取ったSmartArtグラフィックをペイントに貼りつけます。

貼りつけた紙のサイズが画面下のステータスバーに表示されています。

全体の大きさを調整します。

ペイントに貼り付け
図のように左に余白が多すぎる場合などは選択されている状態で左にドラッグで移動します。

大きさを整える
余分なところを削除します。

図形の選択の点線の外でクリックしてからドキュメント(紙)の大きさをドラッグで縮めます。

※これは、WordPressに持っていくときの画像の大きさになります。

ここで、まず画像を保存します。

保存の名前は半角英数でつけます。

保存
ここまでは、WordPressのイメージマップで使う画像の作り方になります。

Excelやwordの機能で簡単に図形を使った画像が作れました。

続きでは、実際にペイントで座標を調べて、WordPressでイメージマップを作るところの詳細をご紹介します。

イメージマップの活用Excelで画像を作る例まとめ


WordPressでも、ExcelやWordなど、他のソフトを利用していろいろ活用ができます。

こんなことがしたい、あんなことがしたいと思ったら、どうすればできるか、考えるのも楽しいものです(^^)

クリッカブルマップの実際の設定は次回に続きますが、以前も記事をかいているので、それで理解できた方はやてみてください。

続きへ WordPressのイメージマップにSmartArtを使う時の手順

WordPress一覧へ


エクセル便利技一覧へ

スポンサーリンク




スポンサーリンク




Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


知っていますか?盆踊りをする意味 その起源と由来とは?

8月のお盆の時期になると、どこからともなく太鼓の音が聞こえてき

今年の祇園際のスケジュールや山鉾巡業の日程は?祇園祭のはじまり

京都の祇園祭は、大阪の天神祭、東京の神田祭とともに、日本の三大祭の一つ

てるてる坊主の歌は元の歌詞とは違う?雨降りを願うのはふるふる坊主?

おなじみの童謡は数々あるけれど、この時期、梅雨時になるとやっぱりなにげ

知っていますか?すだれには実はこんな効果があったこと

梅雨が明けると、日に日に暑さが増していきます。 そして、エアコン

浴衣で周りと差をつける 男性の浴衣の基本の着方で粋な夏を

鬱陶しい梅雨がいけば、夏がやってきますね。 夏と言えば、花火やバ

→もっと見る

  • こんにちは。波空です

    好きなことを自由にやりたくて
    アフィリエイトにチャレンジ中

    好きなものは
    アニメ・漫画・ゲーム・お絵描き・
    映画を観ること・パソコンで遊ぶこと
    ・チョコレート・中島みゆきさんの歌・・

    やりたいことは・・
    空を飛びたい・馬に乗って自由に
    走り回りたい・猫を飼いたい・・

    いろいろあるけど、
    まずは資金と自由な時間を確保
    しないと進まない。
    日々どうしたらできるか考えながら
    リアル仕事に追われています。

PAGE TOP ↑