＜コピペ用＞はてなブログでなくてもできる、記事内リンクの作り方
はてなブログで書いてみて、嬉しかったのは
記事内のリンクが簡単にはれるところです。
「目次」と「見出し」の機能がすばらしすぎる✨
これを、手動で作ってみましょう！
はてなブログ以外のブログサービスでも使えます。
はてなブログの見出しの便利さよ。
ぜひ、他の無料ブログサービスを使っている方にも分かち合いたい。
そしてコピペできたらきっと自分も便利。
はてなブログだって、目次以外に記事内リンクがはれたらすっごく便利でおもしろいはず。
そんなわけで、「HTML編集モード」で
記事内リンクをはる方法をご紹介したいと思います！
記事内リンクの書き方はこちらで学んでいます
記事内リンクの書き方は、
ドットインストールさんの「HTML入門」の#14で学習しています。
これを復習しながらやっていきましょう。
構成
最初に構成をイメージしましょう。
先に目次があって、次に本文があるというイメージです。
目次をクリックすると、本文の見出しのほうにジャンプできるようにしたいと思います。
（イメージ）
今回は、クッキーの作り方のページを作ってみましょう。
目次のほうにはパウンド記号をつける
まず、目次のほうを書いていきます。
リンクはaタグを使います。
<a href="">必要な道具</a>
見出しにしたいものにはパウンド記号を書きます。
<a href="#tools">必要な道具</a>
このコードを、「HTML編集画面」に書くと、次のようにリンクがはられた文字が出てきます。
↑↑
この時点ではクリックしても、まだどこにも飛びません。
次は、ジャンプする先の見出しを書いていきます。
見出しのほうにはidをつける
見出しのほうにはidをつけます。
たとえば
<h2 id="tools">必要な道具</h2>
のように。
idは一つしかないから、必ずそこにジャンプできるからかな？
はてなブログの場合は、大見出しがh3なので
今回はそれよりも１段階小さい、h4で試してみようと思います。
<h4 id="tools">必要な道具</h4>
では、実際に書いてみよう
目次を書く
まずは見出しのほうを書いてみます。
- 道具
- 材料
- 作り方
の手順で書くとします。
<a href="#tools">必要な道具</a>
<a href="#stuff">材料</a>
<a href="#procedure">作り方</a>
見やすくなるように、これを四角で囲いましょう。
<div style="border:3px solid #ccc;padding:10px;">
<a href="#tools">必要な道具</a>
<a href="#stuff">材料</a>
<a href="#procedure">作り方</a>
</div>
今回は、3pxの実践、薄いグレーの線を
10pxの余白をつけて弾きたいと思います。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
ちなみに、 四角で囲うコピペ用コードはこちらの記事でもご紹介しています。
この記事をコピペすれば、いろんな枠線で記事を囲えます♪
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
見出しを書く
目次と同じように、見出しも書きます。
<h4 id="tools">必要な道具</h4>
<h4 id="stuff">材料</h4>
<h4 id="procedure">作り方</h4>
本文を書く
見出しだけだと、「飛べた実感」が薄いので（笑）
本文も書き加えてみます。
今回はリストにします。
まずは必要な道具。
<h4 id="tools">必要な道具</h4>
<ul>
<li>ボウル</li>
<li>ゴムベラ</li>
<li>泡立て器</li>
<li>はかり</li>
<li>オーブン</li>
<li>オーブンシート</li>
</ul>
こんな感じかな。（足りなくてもつっこみはなしでお願いします）
つぎは、材料です。
<h4 id="stuff">材料</h4>
<ul>
<li>砂糖</li><li>バター</li>
<li>小麦粉</li>
<li>卵</li>
<li>バニラオイル</li>
</ul>
「このレシピのクッキーは好きじゃない」とかはなしですよ！（笑）
そして、作り方。こちらは番号付きのリスト「ol」ですね。
<h4 id="procedure">作り方</h4>
<ol>
<li>室温にしたバターをふわふわになるまで混ぜます。</li>
<li>砂糖を入れてさらにすり混ぜます</li>
<li>卵を入れてふわふわになるまで混ぜます</li>
<li>バニラオイルを入れてすり混ぜます</li>
<li>小麦粉をふるい入れて、さっくりと混ぜます。こねこねしないこと！</li>
<li>手で丸めます。</li>
<li>180度に予熱しておいたオーブンで15分焼きます</li>
</ol>
こんな感じにしてみましたーー＾皿＾
手で丸める簡単クッキーですえ！
HTML編集画面にはってみる
これらを、HTML編集画面にはってみましょう。ちょっと長いですがはりつけてみます。
すると、このような感じになります。
必要な道具
- ボウル
- ゴムベラ
- 泡立て器
- はかり
- オーブン
- オーブンシート
材料
- 砂糖
- バター
- 小麦粉
- 卵
- バニラオイル
作り方
- 室温にしたバターをふわふわになるまで混ぜます。
- 砂糖を入れてさらにすり混ぜます
- 卵を入れてふわふわになるまで混ぜます
- バニラオイルを入れてすり混ぜます
- 小麦粉をふるい入れて、さっくりと混ぜます。こねこねしないこと！
- 手で丸めます。
- 180度に予熱しておいたオーブンで15分焼きます
こんな見た目になります！
見出しの文字をクリックすると、本文の見出しにジャンプします。
ちなみに、aタグはインライン要素なので見出しが横並びになってしまっています。
縦にしてみましょう。
今回はpタグで囲んでみます。
<div style="border:3px solid #ccc;padding:10px;">
<p><a href="#tools">必要な道具</a></p>
<p><a href="#stuff">材料</a></p>
<p><a href="#procedure">作り方</a></p>
</div>
HTML編集画面にはると、こうなります。
リストにするとこんな感じになります。
<div style="border:3px solid #ccc;padding:10px;">
<ul>
<li><a href="#tools">必要な道具</a></li>
<li><a href="#stuff">材料</a></li>
<li><a href="#procedure">作り方</a></li>
</ul>
</div>
それぞれ、文字をクリックするとジャンプできるようになっています。
これで、はてなブログじゃなくても記事内リンクが作られるようになります！
また、はてなブログでも、記事内で記事を入れ子構造にしたいときなどには
おもしろいかもしれません。
コピペで記事内リンクを作ることを楽しんでいただけると嬉しいです！
これでまたひとつ便利になりました。私が（キリッ）
