過去のニュース

1、表示させたい先のページソースを開き、表示させたい箇所の少し上で一番近くにある　<div id=" ">　の記述を探します。

 【例１】

<div id="cc-m-10977296221" class="j-module n j-hgrid ">

下記のように<div と id=" が離れている場合のありますが、赤い文字の記述をコピーすれば大丈夫です。

【例２】

<div class="j-module n j-text" id="cc-m-12742908988">

２、赤い文字の記述をコピーします。

３、表示元の表記したい部分でコンテンツの追記を開き、更に…その他のコンテンツ＆アドオンを開きます。

４、</> ウィジェット /ＨＴＭＬを開き下記を記述します。（赤文字のところは、２でコピーしたものを貼り付けて完了です。）

<a href="https://表示先ページのアドレス/#cc-m-10977296921">表示元の文章</a> 

※Jimdo のテンプレートを使ってプラスα するならHTMLだけ（</> ウィジェット /ＨＴＭＬ）で表現できる方法を使った方が簡単です！以下の本を参考にオリジナルのページをつくりましょう！

１、ナビゲーションの編集で「画像」のページをつくり、目隠しをしておきます。

２、画像のページに表示させたい画像を追加して名前を付けます。

複数の画像を使用するときは、フォトギャラリーで画像を追加しリスト表示で名前をつけると便利です。

３、画像のページをＷＥＢ表示させソースを開き、画像の名前後にある"http～      "までアドレスをコピーします。

【例】

alt="画像名" class="" data-src-width="734" data-src-height="727" data-src="https://image.jimcdn.com/app/cms/image/transf/none/path/s6e4b058ba716a830/image/i3eb096436103effa/version/1483491497/E7%A6%8F%E6%B8%A1%E4%BD%9C%E5%9B%B3.png" data-image-id="8286832436"/>    

４、画像を表示させたい位置で、コンテンツの追加を開き、</>を選択し下記を記述します。

<center>

    <p>

        <img src=

        "画像の名前の後にある画像アドレス（３でコピーしたアドレスを貼り付ける）"

        width="画像の全体の横幅をピクセル表記（例800）" height="画像全体の縦幅をピクセル表記（例820）" border="0" usemap="#menumap" alt="イメージマップ画像" /> <map name="menumap" id="menumap">

            <area shape="rect" coords="一部画像の位置を座標でピクセル表記（例400,150,750,270）" href="リンク先のアドレス" alt="リンク先のページ名" />

           </map>

    </p>

</center>

※ピクセル座標位を指定すると時は下記を参考にしてください。

丸の指定や階段状の指定もできますので、次回に公開します！

スマートフォンでも反応しますが、この画像はレスポンシブにはならないのでスマートフォンのサイズを考えて使いましょう！！

JIMDOで画像の一部をクリックしてリンク先を表示させる方法

で書いた画像の設定の仕方を使って画像アドレスを下記のように記述してください。

<a href="リンク先のアドレス">

<img src="最初に表示される画像のアドレス" border=0 

onmouseover=this.src='カーソルを乗せたときに表示される画像のアドレス' 

onmouseout=this.src='カーソルを離したときに表示される画像のアドレス'>

</a>

※但し、スマートフォンでは反応しませんし、この画像はレスポンシブ対応しません。