一つの記事でボリュームが大きくなりすぎたら目次があった方が解りやすくてえんかのと思い、「よし、俺も目次を付けるぞ！」と一念発起してGoogle先生に教えを請う事にした。
視覚的に解りやすい様に枠を付けて、目次をクリックしてページ内ジャンプもさせるような構造にしたい！
読者にとっては目次をがあると記事の概要が解りやすいじゃろうし、俺的には「あーっ、俺、HTMLいじってる。」「HTMLいじってる俺ってカッコええ。」「そうそう、あれはHTMLいじってんだよね～。（自慢げに人に話す）」と言う自己満足も味わえて一石二鳥じゃわい。
この記事にも今回調べた知識を総動員して目次を付けた。と言うても基本はコピペで、俺がいじったのは色を変えたくらいじゃけどの。
枠が作れるHTMLタグの種類
wordpressには自動で目次を作成してくれる「Table of Contents Plus」と言う便利なプラグインがあるんじゃけど、俺のブログには目次が必要な長い記事もあんまりないし、最初に書いたように「俺、HTMLいじってる！」って自己満足も欲しいけん、手動で目次を作成する事にした。
先ずは目次を納める枠を決めんといかんのじゃけど、参った・・・ちょっと調べただけで枠を作成できるHTMLタグが5種類も出てきた。<p>、<div>、<span>、<fieldset>、<table>のHTMLタグが使えるようじゃ。ちなみに<span>以外はどのタグを使っても見た目は殆ど同じ状態に表示される。
もっと他にもあるんかもしれんけど、目次で使うなら<div>ってタグが無難なようじゃ。HTMLタグには様々な用途や意味合いがある様で、間違った使い方をするのはあまり良くないらしい。
間違った使い方をすると何が良くないんか俺にはハッキリいて全く解らんけど、調べるのが面倒じゃけん「目次は<div>が無難」って情報を得た時点で思考を停止した。（SEO的に駄目なんか？気になったらいつか調べるかもしれんけど、多分調べんじゃろうの）
せっかくじゃけん、枠を作成できる5種類のタグについてググッて得た情報をまとめておく。
<p>タグ
改行した後に1行空白ができるタグ。目次の枠として使うなら見た目上は<div>タグとの違いは全くない。ただし、装飾する事が推奨されとらんけん、枠を付けたり色を変えたりするならコレは使わん方がええ見たい。じゃけど、なんで駄目なん？？
<p>タグで目次を作るとこんな感じ。
↓ ↓ ↓ ↓ ↓
目次
01-SAMPLE
02-SAMPLE
03-SAMPLE
<div>タグ
何個か参考にブログ見たんじゃけど、目次には大体この<div>タグが使用されとった。プラグインの「Table of Contents Plus」で作成された目次も<div>タグで記述されとったけん、コレを使えば全く問題ないじゃろうと判断した。このタグは「汎用のブロック要素」と言う物らしい。
<div>タグで目次を作るとこんな感じ。（<p>タグと見た目は全く同じ。ソースを見んと違いが解らん。）
↓ ↓ ↓ ↓ ↓
01-SAMPLE
02-SAMPLE
03-SAMPLE
<span>タグ
コレは装飾OKじゃけん枠が付けれて色も変えれるんじゃけど、目次として使うのには向いとらん。これで目次を作ろうとして、改行したら枠が分割されておかしくなった。
<span>タグで目次を作るとこんな風になってしまう。
↓ ↓ ↓ ↓ ↓
目次
01-SAMPLE
02-SAMPLE
03-SAMPLE
このタグは目次の様に広い空間で使用する物ではなくて、下の例の様に文章の一部を装飾する時に使用するタグじゃ。
例 ABCDEFGH
「CDEF」部分に<span>タグを使用しとる。こんな感じで使うようじゃの。
<fieldset>タグ
これは見た目がええなと思うたんじゃけど、目次で使うとる人は見かけんかった。どうやら「フォーム要素をグループ化する」時にこのタグを使う様なんじゃけど、どういう事なんかサッパリ解らん。目次として使っても良さそうじゃけど・・・
<fieldset>タグで目次を作るとこんな感じ。
↓ ↓ ↓ ↓ ↓
<table>タグ
これは表を作成する時に使うタグなんじゃけど、これ、1セルだけでも使用出来るけん、目次を作るのにも利用できそうじゃ。
wordpressのプラグイン「TinyMCE Advanced」をインストールしとったら、わざわざHTMLを打ち込まんでも「ビジュアルエディタ」のツールバーから表（テーブル）を挿入できて様々な装飾（文字、背景の大きさや色変更等）が可能じゃ。
<table>タグで目次を作るとこんな感じ。
↓ ↓ ↓ ↓ ↓
|
目次 |
<div>タグを使って目次を作成する方法
<div>タグを使って目次を作るコードは下記の様になる。
<div style=”border: 1px solid #000; padding: 10px; width: 200px; background-color: #ccffff;”>目次<br />
01-SAMPLE<br />
02-SAMPLE<br />
03-SAMPLE</div>
このコードを「テキストエディタ」で書き込むと下記 の様な表示となる。
01-SAMPLE
02-SAMPLE
03-SAMPLE
装飾（スタイル属性）を以下に個別に説明する。
（カスタマイズできる量が多すぎて全て書ききれんけん、かなり大雑把に書いとる。興味があったら自分で調べてみてくれ。色々できる事がもっと他にもたくさんある。）
border: 1px solid #000;
border（枠）が、太さ1px（1ピクセル）、線種がsolid(実線)、色が#000(黒色)という意味となっとる。
- border-radiusを使用すれば枠の角に丸みを付ける事ができる。
- 枠を太くしたければpxの数値を増やす。
- 線種は実線(solid)、点線(dotted)、破線(dashed)、二重線(double)等がある。
- 色はカラーコード表でググれ！
padding: 10px;
枠内の余白を10pxに指定。
width: 200px;
枠の横幅を200pxに指定。
background-color: #ccffff;
背景の色を#ccffffに指定。色はカラーコード表でググるべし。
目次をクリックして読みたい所にページ内ジャンプさせる方法はまた今度
せっかく作った目次、どうせならもっと便利にしてやりたい。
本の目次はページを確認したらそのページまでめくる必要があるんじゃけど、WEBサイト上の目次はクリックしたらその場所まで一気に飛んでいく便利な機能がある。それが「ページ内ジャンプ」じゃ。
要はリンクね。コレを同一ページ内でリンクを貼ってそこに飛ばすには、リンク先のジャンプしたい場所に「アンカーテキスト」を作成する必要があるんじゃけど、それはまた次回に記事にしたいと思う。
ぺージ内ジャンプさせる方法の記事を書いたで ↓ ↓ ↓
「WordPressで目次のページ内ジャンプ設定方法」
最後に
HTMLは調べだしたらきりが無い。HTMLのバージョンによっても挙動が違うし、う～む難しい・・・。まあ、そこらへんの勉強は適当にやってあんまり深みにはまらんようにしとこうかの。
ちょっと使うのに調べただけじゃけど、奥が深すぎる・・・。HTMLを余裕で使う人とかほんまに尊敬してしまうわい。
悪い← 評価 → 良い
(3 投票, 平均: 5.00 / 5)
読み込み中...
