<p>ã¤ã¡ã¼ã¸ããããã¹ããã§ã¯ä½ç½®ãããã¦ãã¾ããäºæãã¬ã¨ããã«ãªã³ã¯ãã¦ããã¨ããç¾è±¡ãèµ·ãã¾ããã</p>
<p>ã³ã¡ã³ããããã ãjQuery RWD Image Mapsãã©ã°ã¤ã³ã®å°å ¥ã§ããã解æ¶ã§ããã®ã§åå¿é²ã¨ãã¦æ¸ãã¾ããã</p>
<p><!--more--></p>
<p> ;</p>
<h2>対å¦</h2>
<p>ã¬ã¹ãã³ã·ã対å¿ã«ããããã®æ¹æ³ããªãµã¼ãããã¨jQuery RWDã¤ã¡ã¼ã¸ããã</p>
<p>ã使ç¨ããã¨ããè¨äºãããããåºã¦ãã¾ããã</p>
<p>ãã¼ã¸å ã«jQueryã¨ãã¦ã³ãã¼ããããã¡ã¤ã«ãèªè¾¼ãã¨ãããã®ã§ãã</p>
<p>ãã©ã°ã¤ã³ã ã¨ããã®ã§ããªã«ã¶ãã«ãç¡ç²¾è ã®ç§ã¨ãã¦ã¯ã</p>
<p>ãããªé¢åãããªãã§ãããã¤ãã®ãã©ã°ã¤ã³å°å ¥æé </p>
<p>ããã·ã¥ãã¼ã⇒ãã©ã°ã¤ã³⇒æ°è¦è¿½å ⇒ãã©ã°ã¤ã³ãæ¤ç´¢⇒ã¤ã³ã¹ãã¼ã«⇒æå¹åã</p>
<p>ãã§ããããããªãã®ããªï¼ã¨ã</p>
<p>ã¨ã«ãã試ãã«ããã©ã°ã¤ã³ãæ¤ç´¢ãã¦ã¿ã¾ããï¼ï¼¾ï¼¾ï¼ï¼</p>
<p>åºã¦ããã®ã¯<strong>Responsive Image Maps</strong>ãä¸ã¤ã ãã</p>
<p>ï¼æ¥ã«ã¡ãçµã£ã¦ããã¯æ°ãå¢ãã¦ãã¾ããã･･･ï¼</p>
<p>ãï½ããã©ããªãã ããã¨ãéçºè ã®ãã¼ã¸ãè¦ãã¨ã説æã«</p>
<p>ï¼å¼ç¨ï¼</p>
<blockquote>
<p>ããã®ãã©ã°ã¤ã³ã¯WordPressã§ä½¿ç¨ããããã®RWD Image Maps jQueryãã©ã°ã¤ã³ãåã«ããã±ã¼ã¸åããWordPressãã¼ãã«å¯¾å¿ããã¤ã¡ã¼ã¸ããããä½æããç°¡åãªæ¹æ³ãæä¾ãã¾ããã</p>
</blockquote>
<p>ã¨ããã¾ããã</p>
<p>ãµããã§ã¯ããããã¤ã³ã¹ãã¼ã«ãã¦æå¹åããã°ï¼¯ï¼«ï¼<br />
ããã ãã§ã¯ãã¡ãªãããªã®ã§æ´ã«</p>
<p>ãJAVASCRIPTè¦å<br />
è¨ãã¾ã§ããªããã¨ã§ãããRWD Image Mapsã®jQueryãã©ã°ã¤ã³ã§ã¯ãã¦ã¼ã¶ã¼ã®ãã©ã¦ã¶ã§javascriptãæå¹ã«ãã¦éæ³ãåãããå¿ è¦ãããã¾ããã</p>
<p>ãRWDã¤ã¡ã¼ã¸ãããjQueryãã©ã°ã¤ã³èªä½ï¼WordPressã©ããã¼ã§ã¯ãªãï¼ã«é¢ãã質åãåé¡ãããå ´åã¯ãGitHubã®jQuery RWD Image Mapsãã©ã°ã¤ã³ãã¼ã¸ãåç §ãã¦ãã ãããã</p>
<p>ã»ã»ã»ã¨ã«ãã試ãã¦ã¿ã¾ããï¼ï¼¾ï½ï¼¾ï¼ï¼</p>
<p> ;</p>
<h2>Responsive Image Mapsã®ã¤ã³ã¹ãã¼ã«ã¨æå¹å</h2>
<p>é常ã®ãã©ã°ã¤ã³ã®å°å ¥æé ã§WordPressã®ããã·ã¥ãã¼ããã</p>
<p>ããã©ã°ã¤ã³ã⇒ãæ°è¦è¿½å ã⇒ãRWD Image Mapsãã¨å ¥ãã¦æ¤ç´¢</p>
<p> ;</p>
<p><img class="aligncenter size-full wp-image-8172" src="https://www.pasona-sp.com/wp-content/uploads/2018/09/rwd2.png" alt="" width="441" height="534" /></p>
<p> ;</p>
<p>ã¤ã³ã¹ãã¼ã«ããããæå¹åããã¯ãªãã¯ãã¾ãã</p>
<p>ãã©ã°ã¤ã³ã«è¿½å ããã¾ããã</p>
<p><img class="aligncenter size-full wp-image-8173" src="https://www.pasona-sp.com/wp-content/uploads/2018/09/rwd1.png" alt="" width="449" height="135" /></p>
<p> ;</p>
<p>å®è¡ã³ã¼ããè¨è¿°ããå¿ è¦ãããããã§ãã</p>
<p>ã¯ãªãã«ãã«ãããã使ã£ã¦ãããã¼ã¸ã®æå¾ã«ä»¥ä¸ãè¨è¿°ã</p>
<p>æ¸ãå ãããã®</p>
<div class="su-note" style="border-color:#dae3e4;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;"><div class="su-note-inner su-u-clearfix su-u-trim" style="background-color:#f4fdfe;border-color:#ffffff;color:#090101;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;"><;script>;<br />
$(document).ready(function(e) {<br />
$(&#8216;img[usemap]&#8217;).rwdImageMaps();<br />
});<br />
<;/script>;<br />
</div></div>
<p>ã¯ãªãã«ãã«ããã(ã¤ã¡ã¼ã¸ããã)ãä½ãéã«ã¯ãç»åãå寸大ã«å¯¾ãã¦è¨å®ããã¦ããå¿ è¦ãããã¾ãã</p>
<p><strong>座æ¨ãã¨ã£ãç»åã®ãµã¤ãºã§ã¡ãã£ã¢ã©ã¤ãã©ãªã«ã¢ãããã¼ã</strong>ãã¾ãã</p>
<p>大ããããç»åã¯ç¸®å°ãããã¨ã座æ¨ãããã¦ãã¾ãã¾ãã</p>
<p>使ã£ã¦ãããã¼ããªã©ã§éãã¨æãã¾ãããç§ã®å ´åã¯Stinger3ã§ãã</p>
<p>å ç»åãå°ã大ããã£ãããã§ãã</p>
<p>ã¡ãã£ã¢ã«ã¢ããããç»åã確èªããã¨ããã«ãµã¤ãºã«ããã®ã«ãå°ã縮å°ããã¦ãã¾ããã</p>
<p>ãªã®ã§ãå ç»åãå°ãããã¦ã座æ¨ãåãç´ãã¦ã¢ããããã¨æ¹åããã¾ããã</p>
<p>ã¹ããã§ãããã®ã¯ç¢ºèªãã¦ããªãã£ãã®ã§ãã°ããæ°ã¥ããã«ãã¾ãããã</p>
<p>ã³ã¡ã³ããããã ããºã¬ã確èªï¼ï¼ï¼ï¼</p>
<p>ãã®ãã©ã°ã¤ã³ãå°å ¥ã§è§£æ±ºãã¾ããï¼ï¼¾ï¼¾ï¼ããææãããã¨ããããã¾ããã</p>
<p>ããã§ã¹ããã§ãã¡ããã¨æå®ããã¨ããã«ãªã³ã¯ããã¾ããï¼ï¼¾ï¼¾ï¼</p>
<p> ;</p>
<h2>ã¤ã¡ã¼ã¸ããããã¹ããã§ãããããããã«</h2>
<div class="sb-type-drop">
	<div class="sb-subtype-a">
		<div class="sb-speaker">
			<div class="sb-icon">
				<img src="https://www.pasona-sp.com/wp-content/plugins/speech-bubble/img/s_j1.png" class="sb-icon">
			</div>
			<div class="sb-name">波空</div>
		</div>
		<div class="sb-content">
			<div class="sb-speech-bubble"> ä»ã®ãã¼ã¸ã§ãã¤ã¡ã¼ã¸ãããã¯ãããã使ã£ã¦ãã¾ãã</div>
		</div>
	</div>
</div>
<div class="sb-type-drop">
	<div class="sb-subtype-b">
		<div class="sb-speaker">
			<div class="sb-icon">
				<img src="https://www.pasona-sp.com/wp-content/plugins/speech-bubble/img/icon_n2.png" class="sb-icon">
			</div>
			<div class="sb-name">ç«ã«ãã</div>
		</div>
		<div class="sb-content">
			<div class="sb-speech-bubble">ã¤ã¡ã¼ã¸ãããã®ãããã¼ã¸å ¨é¨ã«è¨è¿°ããããã«ãï¼ </div>
		</div>
	</div>
</div>
<div class="sb-type-drop">
	<div class="sb-subtype-a">
		<div class="sb-speaker">
			<div class="sb-icon">
				<img src="https://www.pasona-sp.com/wp-content/plugins/speech-bubble/img/s_j1.png" class="sb-icon">
			</div>
			<div class="sb-name">波空</div>
		</div>
		<div class="sb-content">
			<div class="sb-speech-bubble">ãæåã¯å ¨é¨ã®ãã¼ã¸ã«è¨è¿°ããã®ã<br />
(ï¿£Дï¿£;)ããªãã¦æã£ã¦ãããã©ï½¥ï½¥ï½¥<br />
1ã¤ã®ãã¼ã¸ã«æ¸ãã ãã§ããããã§ãã</div>
		</div>
	</div>
</div>
<div class="sb-type-drop">
	<div class="sb-subtype-b">
		<div class="sb-speaker">
			<div class="sb-icon">
				<img src="https://www.pasona-sp.com/wp-content/plugins/speech-bubble/img/icon_n2.png" class="sb-icon">
			</div>
			<div class="sb-name">ç«ã«ãã</div>
		</div>
		<div class="sb-content">
			<div class="sb-speech-bubble"> ããã£ãã«ãããç¡ç²¾ãªæ³¢ç©ºã«ã¯å¤§å¤ãªãã¨ã ããã«ãï¼ï¼¾ï½ï¼¾ï¼</div>
		</div>
	</div>
</div>
<div class="sb-type-drop">
	<div class="sb-subtype-a">
		<div class="sb-speaker">
			<div class="sb-icon">
				<img src="https://www.pasona-sp.com/wp-content/plugins/speech-bubble/img/s_j1.png" class="sb-icon">
			</div>
			<div class="sb-name">波空</div>
		</div>
		<div class="sb-content">
			<div class="sb-speech-bubble"> ä¸å¿è©¦ãã«ã¹ããã¨ã¿ãã¬ããã§ãã¯ãªãã«ãã«ãããã使ã£ã¦ãããã¼ã¸ãã¿ã¦ã¿ã¾ããã<br />
ï¼ï¼¾ï¼¾ï¼<br />
å ¨é¨ï¼¯ï¼«ã§ãï¼</div>
		</div>
	</div>
</div>
<p> ;</p>
<p><a href="//www.blogmura.com/ranking.html"><img src="//www.blogmura.com/img/www88_31.gif" alt="" width="88" height="31" border="0" /></a><br />
<a href="//www.blogmura.com/ranking.html">ã«ã»ãããã°æ</a></p>


イメージマップがスマホでずれる！プラグインで簡単解決
