<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>ブロックエディター | もんたの雑記ブログ</title>
	<atom:link href="https://monta0000.com/tag/%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%a8%e3%83%87%e3%82%a3%e3%82%bf%e3%83%bc/feed/" rel="self" type="application/rss+xml" />
	<link>https://monta0000.com</link>
	<description></description>
	<lastBuildDate>Tue, 13 Dec 2022 16:35:27 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://monta0000.com/wp-content/uploads/2022/10/s_f_flower2381-100x100.jpg</url>
	<title>ブロックエディター | もんたの雑記ブログ</title>
	<link>https://monta0000.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>【初心者】他ページやページ内の特定の場所にジャンプする方法！ワードプレスのブロックエディター用</title>
		<link>https://monta0000.com/jump-to-page/</link>
					<comments>https://monta0000.com/jump-to-page/#respond</comments>
		
		<dc:creator><![CDATA[もんた]]></dc:creator>
		<pubDate>Sun, 11 Dec 2022 21:10:39 +0000</pubDate>
				<category><![CDATA[ワードプレス]]></category>
		<category><![CDATA[ブロックエディター]]></category>
		<category><![CDATA[ページ内リンク]]></category>
		<guid isPermaLink="false">https://monta0000.com/?p=4318</guid>

					<description><![CDATA[目次 他ページやページ内の【特定の場所】にジャンプ(リンク)する方法他ページやページ内の特定の場所にジャンプする方法は簡単です！実際にやってみましょう！同じページ内にジャンプ(リンク)する違うページ内の指定の場所にジャン [&#8230;]]]></description>
										<content:encoded><![CDATA[

  <div id="toc" class="toc tnt-disc toc-center tnt-disc border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">他ページやページ内の【特定の場所】にジャンプ(リンク)する方法</a></li><li><a href="#toc2" tabindex="0">他ページやページ内の特定の場所にジャンプする方法は簡単です！</a><ol><li><a href="#toc3" tabindex="0">今いるページ(ジャンプ元)には、このタグを貼ります</a></li><li><a href="#toc4" tabindex="0">飛んだ先のページ(ジャンプ先)には、このタグを貼ります。(これをアンカータグといいます)</a></li></ol></li><li><a href="#toc5" tabindex="0">実際にやってみましょう！</a><ol><li><a href="#toc6" tabindex="0">同じページ内にジャンプ(リンク)する</a></li></ol></li><li><a href="#toc7" tabindex="0">違うページ内の指定の場所にジャンプ(リンク)する方法</a><ol><li><a href="#toc8" tabindex="0">飛んだ先(ジャンプ先)の指定したい場所(到達地点)に貼る方法</a></li><li><a href="#toc9" tabindex="0">今いるページ(ジャンプ元)の出発地点に貼る方法</a></li></ol></li><li><a href="#toc10" tabindex="0">ID名について</a></li></ol>
    </div>
  </div>

<h2 class="has-text-align-center wp-block-heading"><span id="toc1">他ページやページ内の【特定の場所】にジャンプ(リンク)する方法</span></h2>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
<p class="has-watery-yellow-background-color has-background wp-block-paragraph">ワードプレスの<span class="bold-green"><strong>ブロックエディター</strong></span>を使う方法です。<span class="bold-green"><strong>初心者向け</strong></span>です。<br>自分用のメモでもあります。<br>情報が足りなくて間違えている可能性もあります。<br>もっと詳しい方法は検索するとたくさん出てくるのでそちらを参照してください。<br><br><span class="bold-red">他に適切な方法があるかもしれません</span>ので、初心者が学んだ一つの方法として自己責任で参考にしてくださいませm(_ _)m</p>
</div>



<h2 class="has-text-align-center wp-block-heading"><span id="toc2">他ページやページ内の特定の場所にジャンプする方法は簡単です！</span></h2>



<p class="wp-block-paragraph">特定の場所にジャンプするには、「ジャンプ元」と「ジャンプ先」それぞれにタグを貼る必要があります。<br><span class="bold-red"><strong>プラグイン不要です！</strong></span></p>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
<h3 class="has-text-align-center has-key-color-background-color has-background wp-block-heading"><span id="toc3">今いるページ(ジャンプ元)には、このタグを貼ります</span></h3>



<p class="wp-block-paragraph"></p>



<p class="has-text-align-center has-watery-yellow-background-color has-background wp-block-paragraph">＜「カスタムHTML」で貼る場合＞</p>



<pre class="wp-block-code"><code>&lt;a href="<span class="bold-red">リンクしたいページのアドレス</span><span class="bold-green">#飛んだ先のID</span>"&gt;<span class="bold-blue">ここにリンクテキストを入れる</span>&lt;/a&gt;</code></pre>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p class="has-text-align-center has-watery-yellow-background-color has-background wp-block-paragraph">＜「リンク」で貼る場合＞　※こちらを推奨</p>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
<p class="wp-block-paragraph"><span class="bold-red">リンクしたいページのアドレス</span><span class="bold-green">#飛んだ先のID</span></p>
</div>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p class="wp-block-paragraph"><br><strong>ブロックエディターの<span class="marker">「カスタムHTML」</span>を使って貼る。<span class="marker">「リンク」</span>として貼り付ける。<br>両方の方法で出来ます。</strong><br>(※<span class="bold-green">#</span>←このハッシュタグを忘れないでください。)<br><br>試したところ、<span class="marker">「カスタムHTML」</span>で貼った場合は、<span style="text-decoration: underline" class="underline">貼り付けたリンクテキストの後に文字を続けて入れたり、位置を動かせなかった</span>ので、<span class="bold-red">後に文字を入れたり、位置などを調節する場合は<span class="marker">「リンク」</span>として貼り付る</span>といいみたいです。<br><br>というか、リンクが簡単なのであえて「カスタムHTML」で貼る必要は無いみたいですね。</p>
</div>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<div style="height:0px" aria-hidden="true" class="wp-block-spacer"></div>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
<h3 class="has-text-align-center has-key-color-background-color has-background wp-block-heading"><span id="toc4">飛んだ先のページ(ジャンプ先)には、このタグを貼ります。<br>(これをアンカータグといいます)</span></h3>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p class="wp-block-paragraph">アンカータグ↓</p>



<pre class="wp-block-code"><code>&lt;div id="〇〇〇"&gt;</code></pre>



<p class="wp-block-paragraph"><br><span class="bold-green">〇〇〇</span>がIDです。<br><span class="bold-green">IDは、任意のIDを決めて</span>貼ってください。<br>IDに使える文字にはルールがあります。<a href="#ID">ページの下のほうで説明</a>していますので参照してください。</p>



<h4 class="has-text-align-center has-key-color-background-color has-background wp-block-heading">「カスタムHTML」から貼る方法</h4>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p class="has-text-align-left has-watery-yellow-background-color has-background wp-block-paragraph"><br>■ID(の入ったアンカータグ)を<span class="marker">「カスタムHTML」</span>を使って貼り付けます。<br>左上のブロック挿入ツール(+ボタンのマーク)から「カスタムHTML」ブロックを呼び出して使います。<br><br>飛んだ先のページ内の<span class="bold-green">指定したい場所</span>に&lt;div id=&#8221;〇〇〇&#8221;&gt;と貼り付けます。<br><br><span class="fz-16px">(※ちなみに、リンクから貼り付け出来ないか？と、試して見ましたが、出来ないみたいです)</span><br></p>



<div id="jump-mihon1"></div>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<h4 class="has-text-align-center has-key-color-background-color has-background wp-block-heading">「高度な設定」から貼る方法もあります。簡単です！</h4>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="1024" height="530" src="https://monta0000.com/wp-content/uploads/2022/12/page-jump1-1024x530.png" alt="" class="wp-image-4521" srcset="https://monta0000.com/wp-content/uploads/2022/12/page-jump1-1024x530.png 1024w, https://monta0000.com/wp-content/uploads/2022/12/page-jump1-300x155.png 300w, https://monta0000.com/wp-content/uploads/2022/12/page-jump1-768x398.png 768w, https://monta0000.com/wp-content/uploads/2022/12/page-jump1-1536x795.png 1536w, https://monta0000.com/wp-content/uploads/2022/12/page-jump1.png 1709w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p class="has-watery-yellow-background-color has-background wp-block-paragraph">①IDを入れたい場所の<span class="bold-green">段階をクリックして選択した状態</span>で、<br>(※上の画像の<span style="text-decoration: underline" class="underline">「テスト、ジャンプ」</span>という文字のところです)<br><br>②右側の設定画面を開いて、一番下までスクロールすると、<span class="bold-green">「高度な設定」</span>という項目が出てくるのでクリックします。</p>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="534" src="https://monta0000.com/wp-content/uploads/2022/12/page-jump2-1024x534.png" alt="" class="wp-image-4522" srcset="https://monta0000.com/wp-content/uploads/2022/12/page-jump2-1024x534.png 1024w, https://monta0000.com/wp-content/uploads/2022/12/page-jump2-300x156.png 300w, https://monta0000.com/wp-content/uploads/2022/12/page-jump2-768x400.png 768w, https://monta0000.com/wp-content/uploads/2022/12/page-jump2-1536x800.png 1536w, https://monta0000.com/wp-content/uploads/2022/12/page-jump2.png 1710w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p class="has-watery-yellow-background-color has-background wp-block-paragraph">③<span class="bold-green">「HTMLアンカー」</span>の項目が出てくるので、そこに<span class="bold-red">IDを入力</span>する。<br>ここでは「test」と入力しました。(※ここでは<span class="bold-red">#</span>←このハッシュタグは使いません！)<br><br>④更新ボタンを押して更新(保存)する。<br><br><br><br><a href="https://monta0000.com/sample-page/#test">テスト</a><br>↑このリンクから、別のページ(サンプルのページ)のアンカータグのある場所にジャンプしますので確認してみてください。<br><br>ジャンプしましたか？<br><br></p>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
<p class="has-ex-d-background-color has-background wp-block-paragraph"><br>この方法のデメリットは編集画面で、<span class="bold-red">どこにID(HTML アンカー)を設定したのか見えにくい</span>というところです。<br>その段階をクリックしないと出て来ないので、場所を忘れてしまいそうです。。<br><br>HTMLで貼り付ければ、編集画面にHTMLのブロックが出ているので分かりやすいです。<br>クリックするまで隠れている場合もありますが、気づきやすいです。<br></p>
</div>
</div>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="has-text-align-center wp-block-heading"><span id="toc5">実際にやってみましょう！</span></h2>



<h3 class="has-text-align-center wp-block-heading"><span id="toc6">同じページ内にジャンプ(リンク)する</span></h3>



<p class="wp-block-paragraph"><br>同じページ内にジャンプするならば、ページのアドレスは無しで、IDの【<span class="bold-green">＃〇〇〇</span>】だけでいいです。<br><br>例：IDを仮にabcとします。<br></p>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
<p class="has-watery-yellow-background-color has-background wp-block-paragraph"><span class="bold-red">#</span><span class="bold-green">abc</span><br><br>ジャンプの元のタグには、ハッシュタグを付けます。<br><br><span class="bold-green">abc</span><br>ジャンプ先のタグには、ハッシュタグはいりません。</p>
</div>



<p class="has-text-align-left has-watery-yellow-background-color has-background wp-block-paragraph">＜注意ポイント！＞<br><br>ジャンプ元のタグには、<br><span class="bold-red">#</span>abc ←この[<span class="bold-red">#</span>]ハッシュタグを入れる！</p>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<h4 class="has-text-align-center has-key-color-background-color has-background wp-block-heading">同じページ内の<span class="bold-red">指定したい場所(到達地点)</span>に貼る方法</h4>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p class="has-text-align-center has-ex-c-background-color has-background wp-block-paragraph">同じページ内の指定したい場所(到達地点)に、このタグを貼ります。<br>(これをアンカータグといいます)</p>



<p class="wp-block-paragraph">例：IDを仮にabcとします。<br><br>これがアンカータグです↓</p>



<pre class="wp-block-code"><code>&lt;div id="abc"&gt;</code></pre>



<p class="has-watery-yellow-background-color has-background wp-block-paragraph"><br>■<span class="bold-red">指定したい場所(到達地点)</span>にアンカータグを貼ります。<br><br>左上のブロック挿入ツール(+ボタンのマーク)から「カスタムHTML」ブロックを呼び出します。<br><span class="marker">「カスタムHTML」</span>から「&lt;div id=&#8221;abc&#8221;&gt;」を、貼り付けます。<br><br>※プレビューすると消えたように見えますが、ちゃんと貼られていますので大丈夫です。<br></p>



<p class="has-watery-yellow-background-color has-background wp-block-paragraph"><br>■<a href="#jump-mihon1" data-type="internal">こちらの説明の方法</a>でも簡単に貼れます。(※「高度な設定」を使う方法)<br></p>
</div>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
<p class="wp-block-paragraph"> 下の記事は「高度な設定」を使って<span style="text-decoration-line: underline;" class="underline">同じページ内にジャンプする方法</span>です。他のサイト様ですが、参考になります。<br><br>このページで分からなかった場合は参考にしてみてください。<br><a rel="noopener" target="_blank" href="https://nobukostyle.com/anchor-link/">ワードプレスのブロックエディタで超絶簡単！ページ内リンクの設置方法 | YOUR COLORs WEB</a>  </p>
</div>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<h4 class="has-text-align-center has-key-color-background-color has-background wp-block-heading">同じページ内の<span class="bold-red">出発地点</span>に貼る方法</h4>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p class="has-text-align-center has-ex-c-background-color has-background wp-block-paragraph">＜カスタムHTML＞で貼る場合 ※推奨しません。</p>



<p class="wp-block-paragraph">このタグ↓</p>



<pre class="wp-block-code"><code>&lt;a href="<span class="bold-green">#abc</span>"&gt;<span class="bold-blue">ここにリンクテキストを入れる</span>&lt;/a&gt;</code></pre>



<p class="wp-block-paragraph"></p>



<p class="has-watery-yellow-background-color has-background wp-block-paragraph"><br>ブロックエディターで<span class="marker">「カスタムHTML」</span>を呼び出して「&lt;a href=&#8221;<span class="bold-green">#abc</span>&#8220;&gt;<span class="bold-blue">ここにリンクテキストを入れる</span>&lt;/a&gt;」を貼り付けます。<br>(※ジャンプ元のタグなので、<span class="bold-red">#</span>abc ←この[<span class="bold-red">#</span>]ハッシュタグを入れる！)<br></p>



<p class="wp-block-paragraph">この下の方に、サンプルとして、アンカータグの&lt;div id=&#8221;abc&#8221;&gt;を貼ってあります。<br><br>↓クリックするとアンカータグがある<span class="bold-red">「ここだよ！」</span>のところまで飛びますのでクリックしてみてください。</p>



<a href="#abc">ここにリンクテキストを入れる</a>



<div style="height:500px" aria-hidden="true" class="wp-block-spacer"></div>



<div id="abc"></div>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
<p class="has-watery-yellow-background-color has-background wp-block-paragraph"><span class="bold-red">「ここだよ！」</span>　ここまで飛びましたか？&#x1f60a;</p>
</div>



<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>



<p class="wp-block-paragraph"><br></p>



<hr class="wp-block-separator has-text-color has-ex-e-color has-alpha-channel-opacity has-ex-e-background-color has-background is-style-wide"/>



<p class="has-text-align-center wp-block-paragraph"> </p>



<p class="has-text-align-center has-ex-c-background-color has-background wp-block-paragraph">＜リンク＞から貼る場合　※こちらを推奨します。</p>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
<p class="wp-block-paragraph"><span class="bold-green">#abc</span></p>
</div>



<p class="wp-block-paragraph"><br><span class="marker-blue">ctrl + K</span> を同時に押すと、リンクの入力ウィンドウが呼び出せます。<br><br>リンクのアドレスに「<span class="bold-green">#abc</span>」を入力しました。<br>リンクテキストを入れます。<br>仮に「リンクテキスト」として入れてみました。<br><br><a href="#abc">リンクテキスト</a><br><br>飛びましたか？<br><br><br>お好きな方法で貼ってみてください。</p>
</div>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="has-text-align-center has-key-color-background-color has-background wp-block-heading"><span id="toc7">違うページ内の<span class="bold-red">指定の場所にジャンプ</span>(リンク)する方法</span></h2>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p class="has-watery-yellow-background-color has-background wp-block-paragraph">他のページの<span class="bold-green">指定</span><span class="bold-green">の場所</span>に飛ぶなら【<span class="bold-red">リンクしたいページのアドレス</span><span class="bold-green">#飛んだ先のID】</span>を入れます。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="has-text-align-center has-key-color-background-color has-background wp-block-heading"><span id="toc8"><span class="bold-red">飛んだ先(ジャンプ先)の指定したい場所(到達地点)</span>に貼る方法</span></h3>



<p class="wp-block-paragraph"></p>



<p class="has-text-align-center has-ex-c-background-color has-background wp-block-paragraph">飛んだ先(ジャンプ先)の<span class="bold-red">指定したい場所(到達地点)</span>にこのタグを貼ります↓<br>(これをアンカータグといいます)</p>



<p class="wp-block-paragraph">例：IDをabcに設定した場合。</p>



<p class="wp-block-paragraph">これがアンカータグ↓</p>



<pre class="wp-block-code"><code>&lt;div id="<span class="bold-green">abc</span>"&gt;</code></pre>



<p class="has-watery-yellow-background-color has-background wp-block-paragraph"><br>ID(アンカータグ)は、<span class="marker">「カスタムHTML」</span>を使って「&lt;div id=&#8221;<span class="bold-green">abc</span>&#8220;&gt;」を貼り付けます。<br><span class="fz-16px">(※リンクから</span><span class="fz-16px">も</span><span class="fz-16px">貼り付け出来ないか？と、試して見ましたが、出来ないみたいです)</span><br></p>



<p class="wp-block-paragraph">飛んだ先のページ内の<span class="bold-green">指定したい場所</span>に&lt;div id=&#8221;<span class="bold-green">abc</span>&#8220;&gt;と貼り付けました。<br>↓<br>こちらのサンプルのページに【abc】のIDを指定してあります。<br><a href="https://monta0000.com/sample-page/">https://monta0000.com/sample-page/</a><br></p>



<hr class="wp-block-separator has-text-color has-ex-e-color has-alpha-channel-opacity has-ex-e-background-color has-background is-style-wide"/>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="has-text-align-center has-key-color-background-color has-background wp-block-heading"><span id="toc9"><span class="bold-red">今いるページ(ジャンプ元)の出発地点</span>に貼る方法</span></h3>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p class="has-text-align-center has-ex-c-background-color has-background wp-block-paragraph">＜カスタムHTML＞から貼る場合は、このタグを貼ります。</p>



<p class="has-text-align-center wp-block-paragraph"><span class="bold-red">今いるページ(ジャンプ元)の出発地点</span>にこのタグを貼ります↓</p>



<pre class="wp-block-code"><code>&lt;a href="<span class="bold-red">リンクしたいページのアドレス</span><span class="bold-green">#飛んだ先のID</span>"&gt;<span class="bold-blue">ここにリンクテキストを入れる</span>&lt;/a&gt;</code></pre>



<p class="wp-block-paragraph"><br>↓こちらのサンプルのページに【abc】のIDを指定してあります。<br><a href="https://monta0000.com/sample-page/">https://monta0000.com/sample-page/</a><br>なので…<br><br><span class="marker">「カスタムHTML」</span>で、今いるページにこのようなタグを貼ります↓</p>



<pre class="wp-block-code"><code>&lt;a href="<span class="bold-red">https://monta0000.com/sample-page/</span><span class="bold-green">#abc</span>"&gt;<span class="bold-blue">他ページabcの場所に移動</span>&lt;/a&gt;</code></pre>



<p class="wp-block-paragraph"></p>



<p class="has-watery-yellow-background-color has-background wp-block-paragraph">＜手順＞<br><br>ブロックエディターで<span class="marker">「カスタムHTML」</span>を呼び出して、「&lt;a href=&#8221;<span class="bold-red">https://monta0000.com/sample-page/</span><span class="bold-green">#abc</span>&#8220;&gt;<span class="bold-blue">他ページabcの場所に移動</span>&lt;/a&gt;」を貼り付けました。<br><br>(※ジャンプ元のタグには、<span class="bold-red">#</span>abc ←この[<span class="bold-red">#</span>]ハッシュタグをいれる！)</p>



<p class="wp-block-paragraph">実際に貼るとこうなります↓クリックしてみてください。</p>



<a href="https://monta0000.com/sample-page/#abc">他ページ[#abc]の場所に移動</a>



<p class="wp-block-paragraph"><br>サンプルページの指定の場所に飛びましたか？</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<hr class="wp-block-separator has-text-color has-ex-e-color has-alpha-channel-opacity has-ex-e-background-color has-background is-style-wide"/>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p class="has-text-align-center has-ex-c-background-color has-background wp-block-paragraph">＜リンク＞から貼る場合は、このタグを貼ります。※こちらを推奨</p>



<p class="has-text-align-center wp-block-paragraph"><span class="bold-red">今いるページ(ジャンプ元)の出発地点</span>にこのタグを貼ります↓</p>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
<p class="wp-block-paragraph"><span class="bold-red">リンクしたいページのアドレス</span><span class="bold-green">#飛んだ先のID</span></p>
</div>



<p class="wp-block-paragraph">このようなタグを貼り付けます↓</p>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
<p class="wp-block-paragraph"><span class="bold-red">https://monta0000.com/sample-page/</span><span class="bold-green">#abc</span></p>
</div>



<p class="wp-block-paragraph"></p>



<p class="has-watery-yellow-background-color has-background wp-block-paragraph">＜手順＞<br><br><span class="marker-blue">ctrl + K</span> を同時に押すと、リンクのアドレスの入力ウィンドウが呼び出せます。<br><br>「<span class="bold-red">https://monta0000.com/sample-page/</span><span class="bold-green">#abc</span>」をアドレスに入力します。<br><br>テキストには「他ページabcの場所に移動」を入力します。<br><br></p>



<p class="wp-block-paragraph">↓こちらがサンプルのリンクです。クリックしてみてください。<br><a href="https://monta0000.com/sample-page/#abc">他ページabcの場所に移動</a><br><br><br>サンプルページの指定の場所に飛びましたか？<br></p>
</div>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
<p class="wp-block-paragraph"><br>これを書いた後で、<span class="bold-red">他に簡単な方法を見つけました！</span>ので書き足し修正しました。<br><br>簡単な方法とは、「高度な設定」からIDを指定する方法です。<br>(※私はHTMLとリンクから貼る方法しか知りませんでした)<br><br>下の記事は「高度な設定」を使って<span style="text-decoration: underline" class="underline">同じページ内にジャンプする方法</span>です。他のサイト様ですが、参考になりました。</p>



<p class="has-watery-yellow-background-color has-background wp-block-paragraph"><a rel="noopener" target="_blank" href="https://nobukostyle.com/anchor-link/">ワードプレスのブロックエディタで超絶簡単！ページ内リンクの設置方法 | YOUR COLORs WEB</a></p>



<p class="wp-block-paragraph">こちらも簡単です！<br><br>お好きな方法で行ってくださいませ…m(_ _)m<br></p>
</div>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p class="has-watery-yellow-background-color has-background wp-block-paragraph">こちらのサイトは<span class="bold-red">ページ内アンカーに飛ぶ時に、ゆっくりスクロールする方法</span>の参考になりました。<br><a rel="noopener" target="_blank" href="https://tcd-theme.com/2019/11/anchor-link.html">【初心者向け】プラグイン不要でスムースにスクロール。WordPressでページ内リンク（アンカーリンク）を設置する方法。 | ワードプレステーマTCD</a></p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<div id="ID"></div>



<h2 class="has-text-align-center wp-block-heading"><span id="toc10">ID名について</span></h2>



<p class="has-text-align-center has-ex-c-background-color has-background wp-block-paragraph">ID名の付け方には、決まりがあります！</p>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
<p class="wp-block-paragraph">1つのIDは、同じページ内で1ヵ所にだけ使用できます。（重複させてはダメ！）</p>



<p class="wp-block-paragraph">使用できる文字は、半角の英数字、ハイフン（&nbsp;<code>-</code>&nbsp;）、アンダーバー（&nbsp;<code>_</code>&nbsp;）、コロン（&nbsp;<code>:</code>&nbsp;）、ピリオド（&nbsp;<code>.</code>&nbsp;）、です。（ハイフン以外の記号は使わない方が無難。）</p>



<p class="wp-block-paragraph"><span class="bold-green">アルファベット</span>で始めること！（数字や記号で始めてはダメ。）</p>



<p class="wp-block-paragraph">大文字と小文字の区別があります。</p>
</div>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p class="has-watery-yellow-background-color has-background wp-block-paragraph">ここのページでは、ワードプレスのブロックエディターを使う方法に限ります。<br><br>このページは<span class="bold-red">初心者向け</span>です。自分用のメモでもあります。<br><br>もっと詳しい方法は検索するとたくさん出てくるのでそちらを参照してください。<br><br><span class="bold-red">他に適切な方法があるかもしれません</span>ので、一つの方法として自己責任で参考にしてくださいませm(_ _)m</p>
]]></content:encoded>
					
					<wfw:commentRss>https://monta0000.com/jump-to-page/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
