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
WordPressのイメージマップにSmartArtを使う時の手順 | 思いだし にっき
サイトアイコン 思いだし にっき

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

<p><img class&equals;"aligncenter size-medium wp-image-11196" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;SmartArt-300x126&period;png" alt&equals;"" width&equals;"300" height&equals;"126" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>前回ExcelのSmartArtを使って写真入り画像を作りました。<&sol;p>&NewLine;<p>今回は続きになります。<&sol;p>&NewLine;<p>作った画像をWordPressでクリッカブルマップにしてリンクをつけます。<&sol;p>&NewLine;<p>SmartArtは、使いようでなかなか便利な機能です。<&sol;p>&NewLine;<p>分類では、こういう場面で使う、というような振り分けがされていますが、それは無視して(^^;<&sol;p>&NewLine;<p>主に遊び中心で写真やイラストを挿入してさまざまな場面で使っています。<&sol;p>&NewLine;<p><&excl;--more--><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>ひとつのソフトだけで使うのはもったいないので、組み合わせて利用しています。<&sol;p>&NewLine;<p>アイデア次第でいろんなことができますよ。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>ペイントでSmartArtの図を開く<&sol;h2>&NewLine;<p>前回は、SmartArtグラフィックをペイントに貼りつけたところまでです。<&sol;p>&NewLine;<p>保存したと思いますので、まずペイントに読み込みます。<&sol;p>&NewLine;<p>ペイントを使ってクリッカブルマップ(イメージマップ)の座標を指定します。<&sol;p>&NewLine;<p>これから調べる座標をメモしておいて、WordPressに記述していきます。<&sol;p>&NewLine;<p>さて・・<br &sol;>&NewLine;ペイントを起動して、「開く」からファイルを指定してもよいのですが、簡単な方法を使ってみましょう。<&sol;p>&NewLine;<p>WordやExcelのファイルだと、保存場所を開いて、ファイルをダブルクリックすればよいのですが、画像の場合は開くためのソフトが一つとは限らないので、そのままダブルクリックで開くと意図しないソフトが起動してしまうことがあります。<&sol;p>&NewLine;<p>なので、右クリックで簡単に開く方法を使ってみます。<&sol;p>&NewLine;<p>SmartArtグラフィックを保存した場所を開きます。<&sol;p>&NewLine;<p>保存した画像の上で右クリックします。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-4960" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;crmap01&period;png" alt&equals;"右クリックメニューで開く" width&equals;"601" height&equals;"328" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>表示されたメニューから「プログラムから開く」&Implies;「ペイント」と指定すると、ペイントが起動して画像が表示されます。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4957 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;crmap02&period;png" alt&equals;"" width&equals;"600" height&equals;"458" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>図の座標の調べ方<&sol;h2>&NewLine;<p>イメージマップの座標の決め方は次のようになっています。<&sol;p>&NewLine;<div class&equals;"su-note" style&equals;"border-color&colon;&num;e5e5d1&semi;border-radius&colon;2px&semi;-moz-border-radius&colon;2px&semi;-webkit-border-radius&colon;2px&semi;"><div class&equals;"su-note-inner su-u-clearfix su-u-trim" style&equals;"background-color&colon;&num;ffffeb&semi;border-color&colon;&num;ffffff&semi;color&colon;&num;090101&semi;border-radius&colon;2px&semi;-moz-border-radius&colon;2px&semi;-webkit-border-radius&colon;2px&semi;"><strong>・リンクを四角形にするのに必要な座標<&sol;strong><&sol;p>&NewLine;<p>「左上の座標&lpar;X&comma;Y&rpar; &comma; 右下の座標&lpar;X&comma;Y&rpar;」&lpar;合計4つの値&rpar;を指定します。<&sol;p>&NewLine;<p><strong>・リンクを多角形にするのに必要な座標<&sol;strong><&sol;p>&NewLine;<p>「すべての点の座標&lpar;X&comma;Y&rpar;」を必要なだけ順番に指定します。<&sol;p>&NewLine;<p><strong>・リンクを円形にするのに必要な座標<&sol;strong><&sol;p>&NewLine;<p>「中心の座標&lpar;X&comma;Y&rpar; &comma; 半径」&lpar;合計3つの値&rpar;を指定します。<br &sol;>&NewLine;<&sol;div><&sol;div>&NewLine;<p>例では多角形になるので、全ての点の座標を順番に指定することになります。<&sol;p>&NewLine;<p>なので例えば図の左上 にある犬の図形でいえば、図の番号の位置の座標が必要になります<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4933 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;Excel13&period;png" alt&equals;"座標" width&equals;"210" height&equals;"204" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>座標を調べるには、知りたい座標位置にマウスを合わせます(ポイントする)<br &sol;>&NewLine;合わせた時にペイントの画面の下、ステータスバーにマウスポインタのXY軸の数値が表示されます。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4946 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;Excel26&period;png" alt&equals;"座標の調べ方" width&equals;"489" height&equals;"401" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>犬の図の座標は次のようになりました。<&sol;p>&NewLine;<p>① 47・84<br &sol;>&NewLine;② 133・84<br &sol;>&NewLine;③ 167・150<br &sol;>&NewLine;④ 135・215<br &sol;>&NewLine;⑤ 47・215<br &sol;>&NewLine;⑥ 14・150<&sol;p>&NewLine;<p>この座標をメモしておきます。<&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;<h2>WordPressにクリッカブルマップの記述をする<&sol;h2>&NewLine;<p>WordPressを起動して、ダッシュボードから「投稿」&Implies;「新規追加」をクリックします。<&sol;p>&NewLine;<p>投稿モードは「テキスト」です。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4958 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;crmap03&period;png" alt&equals;"WordPressに挿入" width&equals;"582" height&equals;"363" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>SmartArtで作成した画像をWordPressのメディアに追加します。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4934 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;Excel14&period;png" alt&equals;"メディアの追加" width&equals;"605" height&equals;"432" &sol;><&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;2035&period;html">こちら<&sol;a> にもありますが、ここで作ったStinger3画像で具体的なやり方をご紹介します。<&sol;p>&NewLine;<p>リンクは写真の部分の3か所だけに設定しました。<&sol;p>&NewLine;<p>ちなみに画像ファイル名は「imgmap&lowbar;test」としました。<&sol;p>&NewLine;<p>この画像ファイルをイメージマップとして使うためにはmap名というのをつけなければいけません。<&sol;p>&NewLine;<p>このマップ名がなければ、この画像は単なる画像を挿入しただけになってしまいます。<&sol;p>&NewLine;<p>なんでもいいんですが、例では簡単に「tmap」としました。<&sol;p>&NewLine;<p>このマップ名を<strong><span style&equals;"color&colon; &num;ff0000&semi;">WordPressに読み込んだ画像に設定<&sol;span><&sol;strong>してあげます。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h3>実際の操作<&sol;h3>&NewLine;<p>①WordPressの投稿画面「テキストモード」で画像を読み込みます。<&sol;p>&NewLine;<p>先にメディアに追加してある画像を挿入します。<br &sol;>&NewLine;(追加していなかった場合はここで追加でもOK)<&sol;p>&NewLine;<p>WordPressでは画像を読み込むと次のようになります。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4935 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;Excel15&period;png" alt&equals;"WordPressの投稿" width&equals;"637" height&equals;"230" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>オレンジの線の部分は、読み込んでから自分で入力します。<&sol;p>&NewLine;<p>拡大すると下図のようになります。<&sol;p>&NewLine;<p>「メディアを追加」で画像を読み込んだら、図の赤枠の部分を追加入力します。<&sol;p>&NewLine;<p>先ほど決めたマップ名ですね。<&sol;p>&NewLine;<p><strong><span style&equals;"color&colon; &num;ff0000&semi;">マップ名の前には「&num;」を付けます。<&sol;span><&sol;strong><&sol;p>&NewLine;<p>これによって、この画像はイメージマップとして使いますよぉ~ということになるんですね。<&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-4959 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;crmap04&period;png" alt&equals;"" width&equals;"630" height&equals;"124" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>画像の設定ができたら、イメージマップのリンクの記述をしていきます。<&sol;p>&NewLine;<p>記述は最初に<br &sol;>&NewLine;これからマップを使用します、宣言とでもいいますか、それをします。<&sol;p>&NewLine;<p>それが、この記述<&sol;p>&NewLine;<p><strong> &lt&semi;map name&equals;&&num;8221&semi;tmap&&num;8221&semi;&gt&semi; <&sol;strong>←マップの名前を指定します。<&sol;p>&NewLine;<p>※ここには&num;はつけません。<&sol;p>&NewLine;<p>この後に、形状や座標を記述していきます。<&sol;p>&NewLine;<p>図の範囲を指定し、そこにリンクを貼ります。<&sol;p>&NewLine;<p><strong><span style&equals;"color&colon; &num;3366ff&semi;">area shape&equals;&&num;8221&semi;形状&&num;8221&semi;<&sol;span><&sol;strong><&sol;p>&NewLine;<p>●形状を指定します。<&sol;p>&NewLine;<div class&equals;"su-note" style&equals;"border-color&colon;&num;d1e2a9&semi;border-radius&colon;2px&semi;-moz-border-radius&colon;2px&semi;-webkit-border-radius&colon;2px&semi;"><div class&equals;"su-note-inner su-u-clearfix su-u-trim" style&equals;"background-color&colon;&num;ebfcc3&semi;border-color&colon;&num;ffffff&semi;color&colon;&num;090101&semi;border-radius&colon;2px&semi;-moz-border-radius&colon;2px&semi;-webkit-border-radius&colon;2px&semi;">&NewLine; 四角形=rect<&sol;p>&NewLine;<p> 丸型&equals;circle<&sol;p>&NewLine;<p> 多角形&equals;poly<&sol;div><&sol;div>&NewLine;<strong><span style&equals;"color&colon; &num;3366ff&semi;">coords&equals;&&num;8221&semi;座標&&num;8221&semi;<&sol;span><&sol;strong><&sol;p>&NewLine;<p>●座標を指定します。<&sol;p>&NewLine;<p><strong><span style&equals;"color&colon; &num;3366ff&semi;">href&equals;&&num;8221&semi;リンク先URL&&num;8221&semi;<&sol;span><&sol;strong><&sol;p>&NewLine;<p>●リンク先を指定します<&sol;p>&NewLine;<p>となります<&sol;p>&NewLine;<p><strong>&lt&semi;&sol;map&gt&semi; <&sol;strong> ←マップ終わり<&sol;p>&NewLine;<p>&lt&semi;map name&equals;&&num;8221&semi;tmap&&num;8221&semi;&gt&semi;と&lt&semi;&sol;map&gt&semi;の間に好きなだけ、リンクしたい部分を指定していきます。<&sol;p>&NewLine;<p>例の図で3か所の写真の入った図形の記述は次のようになります。<&sol;p>&NewLine;<p>多角形の場合の形状はpolyです<&sol;p>&NewLine;<p>実際の記述は次のようになります。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4936 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;Excel16&period;png" alt&equals;"イメージマップ記述" width&equals;"641" height&equals;"274" &sol;><&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;<p><strong>記述のしかた <&sol;strong>実際の記述例は次のようになります。<&sol;p>&NewLine;<div class&equals;"su-note" style&equals;"border-color&colon;&num;e0d9e5&semi;border-radius&colon;2px&semi;-moz-border-radius&colon;2px&semi;-webkit-border-radius&colon;2px&semi;"><div class&equals;"su-note-inner su-u-clearfix su-u-trim" style&equals;"background-color&colon;&num;faf3ff&semi;border-color&colon;&num;ffffff&semi;color&colon;&num;090101&semi;border-radius&colon;2px&semi;-moz-border-radius&colon;2px&semi;-webkit-border-radius&colon;2px&semi;">&NewLine;&lt&semi;map name&equals;&&num;8221&semi;マップ名&&num;8221&semi;&gt&semi; ←マップ名を指定してマップ開始<&sol;p>&NewLine;<p>&lt&semi;area shape&equals;&&num;8221&semi;形状&&num;8221&semi; coords&equals;&&num;8221&semi;座標&&num;8221&semi; href&equals;&&num;8221&semi;リンク先URL&&num;8221&semi; &sol;&gt&semi; 1つ目<&sol;p>&NewLine;<p>&lt&semi;area shape&equals;&&num;8221&semi;形状&&num;8221&semi; coords&equals;&&num;8221&semi;座標&&num;8221&semi; href&equals;&&num;8221&semi;リンク先URL&&num;8221&semi; &sol;&gt&semi; 2つ目<&sol;p>&NewLine;<p>&lt&semi;area shape&equals;&&num;8221&semi;形状&&num;8221&semi; coords&equals;&&num;8221&semi;座標&&num;8221&semi; href&equals;&&num;8221&semi;リンク先URL&&num;8221&semi; &sol;&gt&semi; 3つ目<&sol;p>&NewLine;<p>&lt&semi;&sol;map&gt&semi; ←マップここまで<&sol;p>&NewLine;<&sol;div><&sol;div>&NewLine;<p>プレビュー画面で見ると次のようになります<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4937 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;Excel17&period;png" alt&equals;"プレビュー" width&equals;"480" height&equals;"378" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&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-4970 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;crmap06&period;png" alt&equals;"記述のところが空白" width&equals;"545" height&equals;"698" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>イメージマップの画像を挿入して、画像のすぐ下などに多くのリンクを設定して記述すると、その部分に空間ができます。<&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-4971 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;crmap07&period;png" alt&equals;"記述を移動" width&equals;"515" height&equals;"409" &sol;><&sol;p>&NewLine;<p><center><br &sol;>&NewLine;<img class&equals;"alignnone size-full wp-image-1337" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;yajirusi&period;png" alt&equals;"" width&equals;"54" height&equals;"58" &sol;><&sol;center><&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-4972 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;11&sol;crmap08&period;png" alt&equals;"空白が移動した" width&equals;"539" height&equals;"675" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>SmartArtをクリッカブルマップとして使う手順まとめ<&sol;h2>&NewLine;<p>今回活用としてExcelのSmartArtで写真入りの図形を作り、それにリンクを指定してみましたが、クリッカブルマップ(イメージマップ)はいろいろ使えますよね。<&sol;p>&NewLine;<p>文字のリンクだけでも十分ですが、たまには、作りながら楽しめるこんなものもいかがでしょうか?(^^)<&sol;p>&NewLine;<p>※スマホでズレる場合の解決方法をUPしました。<&sol;p>&NewLine;<p><a href&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;8171&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener"><strong>イメージマップがスマホでずれる!プラグインで簡単解決<&sol;strong><&sol;a><&sol;p>&NewLine;<p>前の記事へ <a href&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;4921&period;html">Excelを利用したオリジナル画像でクリッカブルマップ作り<&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>&nbsp&semi;<&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;<p>&nbsp&semi;<&sol;p>&NewLine;&NewLine;

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