音と手仕事 ときどきゲーム        

はてなブログで見たままとHTML編集で文章中にリンクを張る方法

スポンサーリンク

適当な説明ですが参考になれば幸いです。

 

(今は見たままで見出しと文章をかいています)

 

追記(20170404)

ってここまで書いて気付いてしまった。

見出しタグさえHTML的に正しければ 上のバーにある目次ってやつで 目次ができるということを。。。。

それ以外の場所にリンクを張る方法ということで↓下の記事は参照してください

あまりにも恥ずかしかったらそのうち記事消すかも。。。。

-------------------------------

 

HTML編集でアンカーリンクを張る方法。

 

例えば

目次 

  1. 一つ目の文章
  2. 二つ目の文章

 

 こんな感じでリスト表示をするとしますね。

んで

 

一つ目の文章

一個目の文章だよー 適当だよー

 

二つ目の文章

二つ目の文章だよー もっと適当だよー

 

この一個目と二個目にリンクを張りたいとする 。

ここまでの文章を書いたら HTML編集というところを開く。

 そうすると

<p>適当な説明ですが参考になれば幸いです。</p>
<p> </p>
<p>(今は見たままで見出しと文章をかいています)</p>
<h4>HTML編集でアンカーリンクを張る方法。</h4>
<p> </p>
<p>例えば</p>
<p><strong>目次 </strong></p>
<ol>
<li>一つ目の文章</li>
<li>二つ目の文章</li>
</ol>
<p> </p>
<p> こんな感じでリスト表示をするとしますね。</p>
<p>んで</p>
<p> </p>
<h4>一つ目の文章</h4>
<p>一個目の文章だよー 適当だよー</p>
<p> </p>
<h4>二つ目の文章</h4>
<p>二つ目の文章だよー もっと適当だよー</p>
<p> </p>
<p>この一個目と二個目にリンクを張りたいとする 。</p>
<p>ここまでの文章を書いたら HTML編集というところを開く。</p>

こんなふうに表示されると思います。 

  1. 一つ目の文章 と書いてあるところから 一つ目の文章と書いてあるところに

 リンクをはりたいとします。

<p>適当な説明ですが参考になれば幸いです。</p>
<p> </p>
<p>(今は見たままで見出しと文章をかいています)</p>
<h4>HTML編集でアンカーリンクを張る方法。</h4>
<p> </p>
<p>例えば</p>
<p><strong>目次 </strong></p>
<ol>
<li>一つ目の文章</li>

この一番下のリストタグ

<li>一つ目の文章</li>

のところに

<li> <a href="#一個目">一つ目の文章</a></li>

これで書き換えます。これがリンク元になります。

<p>適当な説明ですが参考になれば幸いです。</p>
<p> </p>
<p>(今は見たままで見出しと文章をかいています)</p>
<h4>HTML編集でアンカーリンクを張る方法。</h4>
<p> </p>
<p>例えば</p>
<p><strong>目次 </strong></p>
<ol>
<li> <a href="#一個目">一つ目の文章</a></li>
<li>二つ目の文章</li>
</ol>
<p> </p>
<p> こんな感じでリスト表示をするとしますね。</p>
<p>んで</p>
<p> </p>
<h4>一つ目の文章</h4>
<p>一個目の文章だよー 適当だよー</p>

 

でリンク先は 一番下から二番目の

<h4>一つ目の文章</h4>

 

というところに張りたいのでリンク先を指定します

<h4 id="一個目">一つ目の文章</h4>

 

つまり

<p>適当な説明ですが参考になれば幸いです。</p>
<p> </p>
<p>(今は見たままで見出しと文章をかいています)</p>
<h4>HTML編集でアンカーリンクを張る方法。</h4>
<p> </p>
<p>例えば</p>
<p><strong>目次 </strong></p>
<ol>
<li> <a href="#一個目">一つ目の文章</a></li>
<li>二つ目の文章</li>
</ol>
<p> </p>
<p> こんな感じでリスト表示をするとしますね。</p>
<p>んで</p>
<p> </p>
<h4 id="一個目">一つ目の文章</h4>
<p>一個目の文章だよー 適当だよー</p>
<p> </p>
<h4>二つ目の文章</h4>
<p>二つ目の文章だよー もっと適当だよー</p>
<p> </p>
<p>この一個目と二個目にリンクを張りたいとする 。</p>
<p>ここまでの文章を書いたら HTML編集というところを開く。</p>

こんな感じにすれば リンク元からリンク先に飛ぶことができます。

 

じゃあ 簡単な作例を。

目次 

  1. インドに行きたい
  2. カレーを食べまくりたい

インドに行きたい

日本は寒いのでインドに行きたくてしょうがないのである。

こたつを背負って出勤できないからにはそれは必然である。

 

カレーを食べまくりたい

インドはスパイス文化である。ある程度美味しいカリーを作るためには最低四つのスパイスが必要である

 

<p><strong>目次 </strong></p>
<ol>
<li><a href="#india">インドに行きたい</a></li>
<li><a href="#カレー">カレーを食べまくりたい</a></li>
</ol>
<h4 id="india">インドに行きたい</h4>
<p>日本は寒いのでインドに行きたくてしょうがないのである。</p>
<p>こたつを背負って出勤できないからにはそれは必然である。</p>
<p> </p>
<h4 id="カレー">カレーを食べまくりたい</h4>
<p>インドはスパイス文化である。ある程度美味しいカリーを作るためには最低四つのスパイスが必要である</p>

 

 こんな感じ。お試しあれ。一個目は英語でindia 二個目は日本語でカレーにしてみましたが問題なくリンク先に飛ぶことができます。文字を入れ替えて貼り付けてみてください。

多分できるはず。

 

・・・・・・そしてもっとわかりやすいところがあるので同じタイトルとかで検索してください。。←説明ベタ 精進します。