Warning: Constant POST_PLUGIN_LIBRARY already defined in /home/pasora/pasona-sp.com/public_html/wp-content/plugins/similar-posts/similar-posts.php on line 27
クリッカブルマップの活用例 Excelを利用したオリジナル画像の作り方 | 思いだし にっき
サイトアイコン 思いだし にっき

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

<p><img class&equals;"aligncenter size-medium wp-image-11199" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;SmartArt2-300x198&period;png" alt&equals;"" width&equals;"300" height&equals;"198" &sol;><&sol;p>&NewLine;<p>以前、1枚の画像から複数の場所へリンクできるクリッカブルマップ(イメージマップ)の作り方をご紹介しましたが、その活用例のご紹介です。<&sol;p>&NewLine;<p>WordやExcelの機能を利用して画像を作る方法です。<&sol;p>&NewLine;<p>以前の記事では、初心者の方には、今一つわかりにくいのではということもありましたので、今回は細かい手順を図解入りで書いてみました。<&sol;p>&NewLine;<p>長くなってししまいましたので、2回に分けました。<&sol;p>&NewLine;<p>前半でExcelでの画像の作成方法。<br &sol;>&NewLine;後半でWordPressにイメージマップを設定する方法になります。<&sol;p>&NewLine;<p><&excl;--more-->  <&sol;p>&NewLine;<h2>イメージマップに使う画像をExcelの機能で作る<&sol;h2>&NewLine;<p>イメージマップというと、思い浮かぶのは、サイトに地図が表示されていてそこから地域をクリツクすると詳細なページにジャンプするというものではないでしょうか?<&sol;p>&NewLine;<p>1枚の画像はもちろんですが、いろいろな写真やイラストが組み合わされているものでも、それがⅠつのものであれば、通常はどこをクリックしても、その画像に対して貼られているⅠつのリンク先に行くだけです。<&sol;p>&NewLine;<p>このイメージマップの面白いところは、<strong><span style&equals;"color&colon; &num;ff0000&semi;">1枚の画像で<&sol;span><&sol;strong>、図形でも写真でも、<strong><span style&equals;"color&colon; &num;ff0000&semi;">クリックする場所によって、違うリンク先を指定できる<&sol;span><&sol;strong>というものです。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>イメージマップの作り方はこちらをご覧ください<&sol;p>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;2023&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener">1枚の画像で複数リンク!WordPressでイメージマップを作ってみた<&sol;a><&sol;p>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;2035&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener">1枚の画像で複数リンク!その2イメージマップの作り方手順<&sol;a><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>活用のしかたは、さまざまありますが今回は1枚の写真や画像ではなく、図形を組み合わせたものにリンクを貼ってみたいと思います。<&sol;p>&NewLine;<p>用意する図形はもちろん自分で好きに描いても使えますが、苦手な方でも簡単に利用できるWordやExcelの機能を使ってみます。<&sol;p>&NewLine;<p>どちらのソフトでもあるいはPowerPointでも同様です。<br &sol;>&NewLine;例ではExcelを使ってみます。<&sol;p>&NewLine;<p>実際に使った活用例はこちらにあります。<br &sol;>&NewLine;参考までに。<&sol;p>&NewLine;<p><a href&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;4902&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener">大掃除はじめて物語まとめ!どこからやるのか順番とやり方とポイント<&sol;a><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h3>ExcelのSmartArtグラフィックの使い方<&sol;h3>&NewLine;<p>WordやExcelには「<strong><span style&equals;"color&colon; &num;3366ff&semi;">SmartArt<&sol;span><&sol;strong>」という(用途によって図形を組み合わせたひな形のようなもの)図形を簡単に利用する機能があります。<&sol;p>&NewLine;<p>試しに一つ取り込んでみます。<&sol;p>&NewLine;<p>Excelを起動したら、リボンの「挿入」タブから「SmartArt」という項目のボタンを探します。<&sol;p>&NewLine;<p>クリックすると「SmartArtグラフィックの選択」ダイアログボックスが表示されます。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4922 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;Excel01&period;png" alt&equals;"SmartArtグラフィック" width&equals;"640" height&equals;"433" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>左側が分類、中央がSmartArtグラフィックの図形、右側が選んだものの詳細が表示されるスペースになっています。<&sol;p>&NewLine;<p>中央の一覧から使いたい図をクリックして、選択します。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4923 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;Excel02&period;png" alt&equals;"図を選択" width&equals;"298" height&equals;"381" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>選んだSmartArtが、画像の挿入ができる場合は図の下の説明に表示されています。<&sol;p>&NewLine;<p>テキストは文字入力のことですが、ここにも画像は挿入できます。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h3>SmartArt グラフィックの図形に写真を挿入<&sol;h3>&NewLine;<p><img class&equals;"size-full wp-image-4938 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;Excel18&period;png" alt&equals;"SmartArtの挿入" width&equals;"465" height&equals;"243" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>例として、上の図のようなSmartArtグラフィックを選択しました。<&sol;p>&NewLine;<p>図形を選んで「OK」をクリックすると、Excelのワークシートに下記のように図形が表示されます。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4939 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;Excel19&period;png" alt&equals;"挿入" width&equals;"602" height&equals;"303" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>図形の中に図のようなマーク↓があればクリックするだけで写真やイラストが挿入できます。<&sol;p>&NewLine;<p><img class&equals;"aligncenter wp-image-4928 size-full" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;Excel07&period;png" alt&equals;"挿入ボタン" width&equals;"44" height&equals;"41" &sol;><&sol;p>&NewLine;<p>図形に画像を挿入してみます。<br &sol;>&NewLine;画像をいれたい位置の図の「画像の挿入ボタン」をクリックします。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4924 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;Excel03&period;png" alt&equals;"写真の挿入" width&equals;"639" height&equals;"287" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>「図の挿入」ダイアログボックスが表示されます。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4941 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;Excel20&period;png" alt&equals;"挿入ダイアログボックス" width&equals;"415" height&equals;"253" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>使いたい画像が保存してある場所を指定して画像を選び、挿入します。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4942 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;Excel21&period;png" alt&equals;"写真の挿入" width&equals;"383" height&equals;"286" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>ボタンをクリックした図形のところに画像が挿入されます。<&sol;p>&NewLine;<p>画像の挿入ウインドウから使いたい画像をクリックすると、図形に合わせて画像が挿入されます。<&sol;p>&NewLine;<p>横長や縦長の画像は図形の大きさに左右され変形してしまうので、事前に挿入する図形の形に近い縦横比にしておくことをお薦めします。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4943 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;Excel22&period;png" alt&equals;"縦長横長写真" width&equals;"578" height&equals;"370" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>※図のような縦長、横長の写真をそのまま図形に取り込むと次のようになってしまいます<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4944 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;Excel23&period;png" alt&equals;"変形した写真" width&equals;"395" height&equals;"250" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>図形の大きさはほぼ正方形なので、写真もトリミングなどして正方形に近い物にしておきます。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;&NewLine;<&excl;-- WP QUADS v&period; 2&period;0&period;92 Shortcode Ad -->&NewLine;<div class&equals;"quads-location quads-ad" id&equals;"quads-ad" style&equals;"">&NewLine;<&sol;div>&NewLine;&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h3>図の挿入ボタンがない場合<&sol;h3>&NewLine;<p>[テキスト]となっているところなどに画像を入れる場合は、先に画像を読み込んでおきます。<&sol;p>&NewLine;<p>SmartArtに、<strong><span style&equals;"color&colon; &num;ff0000&semi;">ただコピペしても貼りつけることはできません<&sol;span><&sol;strong>。<&sol;p>&NewLine;<p>写真を読み込み、SmartArtとは別のところに挿入しておきます<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4925 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;Excel04&period;png" alt&equals;"写真を別のところに挿入" width&equals;"540" height&equals;"404" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>読み込んだ画像の上で右クリックし、表示されるメニューから「切り取り」をクリックします。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>次に画像を挿入したいSmartArtの図形の上で右クリックし「貼りつけ」をクリックします。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4926 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;Excel05&period;png" alt&equals;"貼り付け" width&equals;"530" height&equals;"327" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>これで選んだ図形の中に画像が挿入されます。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4927 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;Excel06&period;png" alt&equals;"図形に挿入された" width&equals;"476" height&equals;"336" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>SmartArtが選ばれているとリボンに「SmartArtツール」タブが表示されます。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4945 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;Excel24&period;png" alt&equals;"リボンのツール" width&equals;"405" height&equals;"91" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>その中の「デザイン」や「書式」タブをクリックすると、いろいろな設定ができます。<&sol;p>&NewLine;<p>図形や線の色など好みのものにできます<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4940 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;Excel25&period;png" alt&equals;"SmartArtの選択時" width&equals;"392" height&equals;"288" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>他に写真やイラストを入れたり、文字を入力したりして、SmartArtを完成させます。<&sol;p>&NewLine;<p>これがイメージマップの1枚の図になります。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4929 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;Excel08&period;png" alt&equals;"SmartArt完成" width&equals;"479" height&equals;"322" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>SmartArtをイメージマップ用の図として使う<&sol;h2>&NewLine;<p>それでは、出来上がったSmartArtの図形をクリッカブルマップとして使うための準備をします。<&sol;p>&NewLine;<p>SmartArtをクリックするとまわりに水色の枠がつきます。<&sol;p>&NewLine;<p>これはSmartArtが選択されている印です。<&sol;p>&NewLine;<p>SmartArtの上で右クリックして、メニューから「切り取り」をクリックします。<&sol;p>&NewLine;<p>Windowsの「アクセサリ」から「ペイント」を起動します。<&sol;p>&NewLine;<p>切り取ったSmartArtグラフィックをペイントに貼りつけます。<&sol;p>&NewLine;<p>貼りつけた紙のサイズが画面下のステータスバーに表示されています。<&sol;p>&NewLine;<p>全体の大きさを調整します。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4930 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;Excel09&period;png" alt&equals;"ペイントに貼り付け" width&equals;"478" height&equals;"377" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>図のように左に余白が多すぎる場合などは選択されている状態で左にドラッグで移動します。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4931 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;6b66acb13f736b297ee1f0b2216d49ba&period;png" alt&equals;"大きさを整える" width&equals;"478" height&equals;"415" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>余分なところを削除します。<&sol;p>&NewLine;<p>図形の選択の点線の外でクリックしてからドキュメント(紙)の大きさをドラッグで縮めます。<&sol;p>&NewLine;<p>※これは、WordPressに持っていくときの画像の大きさになります。<&sol;p>&NewLine;<p>ここで、まず画像を保存します。<&sol;p>&NewLine;<p>保存の名前は半角英数でつけます。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4932 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;Excel11&period;png" alt&equals;"保存" width&equals;"488" height&equals;"444" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>ここまでは、WordPressのイメージマップで使う画像の作り方になります。<&sol;p>&NewLine;<p>Excelやwordの機能で簡単に図形を使った画像が作れました。<&sol;p>&NewLine;<p>続きでは、実際にペイントで座標を調べて、WordPressでイメージマップを作るところの詳細をご紹介します。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>イメージマップの活用Excelで画像を作る例まとめ<&sol;h2>&NewLine;<p>WordPressでも、ExcelやWordなど、他のソフトを利用していろいろ活用ができます。<&sol;p>&NewLine;<p>こんなことがしたい、あんなことがしたいと思ったら、どうすればできるか、考えるのも楽しいものです(^^)<&sol;p>&NewLine;<p>クリッカブルマップの実際の設定は次回に続きますが、以前も記事をかいているので、それで理解できた方はやてみてください。<&sol;p>&NewLine;<p>続きへ <a href&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;4956&period;html">WordPressのイメージマップにSmartArtを使う時の手順<&sol;a><&sol;p>&NewLine;<p style&equals;"text-align&colon; right&semi;"><a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;page-1472&period;html"><span style&equals;"color&colon; &num;0066cc&semi;">WordPress一覧へ<&sol;span><&sol;a><&sol;p>&NewLine;<p><img src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;02&sol;Excelbenri-&lowbar;s&period;png" &sol;>エクセル便利技一覧へ<&sol;p>&NewLine;<p><a href&equals;"&sol;&sol;www&period;blogmura&period;com&sol;ranking&period;html"><img src&equals;"&sol;&sol;www&period;blogmura&period;com&sol;img&sol;www88&lowbar;31&period;gif" alt&equals;"" width&equals;"88" height&equals;"31" border&equals;"0" &sol;><&sol;a><br &sol;>&NewLine;<a href&equals;"&sol;&sol;www&period;blogmura&period;com&sol;ranking&period;html">にほんブログ村<&sol;a><&sol;p>&NewLine;&NewLine;

モバイルバージョンを終了