アメブロで長くなってしまったブログのために目次
この記事を読むのに必要な時間は約 40 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)
目次を使うと時短できます！
HTMLで目次をつくる
よくコンテンツ上部に目次を表示されてるブロガーも多いですね
WordPressならプラグインなどを使って簡単に導入できたりしますが、アメブロの場合はそうもいかないので作成方法を知らないとできなかったりします。
今回は、HTMLで目次を作る方法を解説しながら進めていきます。
下記がシンプルなタイプのサンプルになります。
なぜ、目次を作るの？
自分で作るのが苦手な方は、テンプレートを配布しています。
→ テンプレートをもらう
ただの目次より装飾してみる
シンプルな目次をHTMLで作るって簡単ですが・・・
ちょっと装飾してみたい
やはり見栄えも大事かなって思うわけです。
HTMLだけでなくCSSも少し入れて見やすくしてみます。
囲み枠やリストタグの工夫など
順番に解説していきます。
タグについての解説
Sample tag1
<div style=”background:#eeeeff; padding:10px; border-radius: 10px; border: 2px dotted #0000ff;”><h4>Sample tag</h4>
<ul style=”list-style-image: url(‘先頭の画像のアドレス’);”>
<li><a href=”#abc”>ここにテキスト</a></li>
<li><a href=”#”>ここにテキスト</a></li>
<li><a href=”#”>ここにテキスト</a></li>
<li><a href=”#”>ここにテキスト</a></li>
<li><a href=”#”>ここにテキスト</a></li>
</ul>
</div>
途中を省略します。
<a name=”abc”></a>
<h2>ここにテキスト</h2>
コンテンツ
Sample tag2
<div style=”background:#eeeeff; padding:10px; border-radius: 10px; border: 2px dotted #0000ff;”><h4>Sample tag</h4>
<ol style=”list-style-type: upper-latin”>
<li><a href=”#abc”>ここにテキスト</a></li>
<li><a href=”#”>ここにテキスト</a></li>
<li><a href=”#”>ここにテキスト</a></li>
<li><a href=”#”>ここにテキスト</a></li>
<li><a href=”#”>ここにテキスト</a></li>
</ol>
</div>
途中を省略します。
<a name=”abc”></a>
<h2>ここにテキスト</h2>
上記のようなタグになります。
実際に１と２がどう表示されるのかサンプルを表示してみます。
また、他のサンプルは少し変更してみました。
Sample Tag1(list-style-image)
Sample Tag3(list-style-type: square;)
いかがでしょうか？
基本的に奇数のサンプルがULタグをCSSで装飾しています。
また、偶数はOLタグをCSSで装飾しています。
style属性でCSSを指定してアメブロでも使えるようにしています。
どちらもstyle=”list-style-type:*****;”という部分でアスタリスクの部分を変更しています。
アンカーのルール
基本的に下記のように使います。
<a href=”#666″>ここにテキスト</a>
ここでいつものアンカーと違うのがお分かりだと思いますが・・・
href=”開くページアドレス”・・・・・通常のリンク
なのに上記では、#666 となっていますね。
この＃の後は、任意に指定できます。
しかし、飛ばしたい場所に
<a name=”666″></a>
上記のようにHTMLエディターで入れておきます。
この場合にタグ間にテキストや画像を入れる必要ありません。
＃○○○とname=”○○○”
○○○の部分が同じであるということ
外部のページからその場所に直接リンクさせることも可能です。
書き方
<a href=”ページのアドレス#xyz” target=”_blank”>ここに飛ばしたい！</a>
上記のように書くと直接そこの場所までジャンプさせることが可能になります。
いかがでしょうか？
タグがわかるといろんな装飾や工夫が可能になります。
基本的には、タグ本来の意味に沿う使い方がベストですが・・・
目次サンプルシンプルタイプ
シンプルに単純な目次サンプルです。左が表示例で右がHTMLタグになっています。（スマホの方は、上下になりますが・・・）
<div style=”background:#eeeeff; padding:10px; border-radius: 10px; border: 2px dotted #0000ff;”><h4>Sample tag1</h4>
<ul>
<li><a href=”#aaa”>ここにテキスト</a></li>
<li><a href=”#bbb”>ここにテキスト</a></li>
<li><a href=”#ccc”>ここにテキスト</a></li>
<li><a href=”#ddd”>ここにテキスト</a></li>
<li><a href=”#123″>ここにテキスト</a></li>
</ul>
</div>
<div style=”background: #eeeeff; padding: 10px; border-radius: 10px; border: 2px dotted #0000ff;”>
<h4>Sample tag2</h4>
<ul style=”list-style-type: none;”>
<li><a href=”#aaa”>ここにテキスト</a></li>
<li><a href=”#bbb”>ここにテキスト</a></li>
<li><a href=”#ccc”>ここにテキスト</a></li>
<li><a href=”#ddd”>ここにテキスト</a></li>
<li><a href=”#123″>ここにテキスト</a></li>
</ul>
</div>
<div style=”background: #eeeeff; padding: 10px; border-radius: 10px; border: 2px dotted #0000ff;”>
<h4>Sample tag3</h4>
<ul style=”list-style-type: disc;”>
<li><a href=”#aaa”>ここにテキスト</a></li>
<li><a href=”#bbb”>ここにテキスト</a></li>
<li><a href=”#ccc”>ここにテキスト</a></li>
<li><a href=”#ddd”>ここにテキスト</a></li>
<li><a href=”#123″>ここにテキスト</a></li>
</ul>
</div>
<div style=”background: #eeeeff; padding: 10px; border-radius: 10px; border: 2px dotted #0000ff;”>
<h4>Sample tag4</h4>
<ul style=”list-style-type: square;”>
<li><a href=”#aaa”>ここにテキスト</a></li>
<li><a href=”#bbb”>ここにテキスト</a></li>
<li><a href=”#ccc”>ここにテキスト</a></li>
<li><a href=”#ddd”>ここにテキスト</a></li>
<li><a href=”#123″>ここにテキスト</a></li>
</ul>
</div>
<div style=”background: #eeeeff; padding: 10px; border-radius: 10px; border: 2px dotted #0000ff;”>
<h4>Sample tag5</h4>
<ol style=”list-style-type: lower-roman;”>
<li><a href=”#xyz”>ここにテキスト</a></li>
<li><a href=”#999″>ここにテキスト</a></li>
<li><a href=”#888″>ここにテキスト</a></li>
<li><a href=”#777″>ここにテキスト</a></li>
<li><a href=”#666″>ここにテキスト</a></li>
</ol>
</div>
<div style=”background: #eeeeff; padding: 10px; border-radius: 10px; border: 2px dotted #0000ff;”>
<h4>Sample tag6</h4>
<ol style=”list-style-type: upper-roman;”>
<li><a href=”#xyz”>ここにテキスト</a></li>
<li><a href=”#999″>ここにテキスト</a></li>
<li><a href=”#888″>ここにテキスト</a></li>
<li><a href=”#777″>ここにテキスト</a></li>
<li><a href=”#666″>ここにテキスト</a></li>
</ol>
</div>
<div style=”background: #eeeeff; padding: 10px; border-radius: 10px; border: 2px dotted #0000ff;”>
<h4>Sample tag7</h4>
<ol style=”list-style-type: lower-greek;”>
<li><a href=”#xyz”>ここにテキスト</a></li>
<li><a href=”#999″>ここにテキスト</a></li>
<li><a href=”#888″>ここにテキスト</a></li>
<li><a href=”#777″>ここにテキスト</a></li>
<li><a href=”#666″>ここにテキスト</a></li>
</ol>
</div>
<div style=”background: #eeeeff; padding: 10px; border-radius: 10px; border: 2px dotted #0000ff;”>
<h4>Sample tag8</h4>
<ol style=”list-style-type: decimal;”>
<li><a href=”#xyz”>ここにテキスト</a></li>
<li><a href=”#999″>ここにテキスト</a></li>
<li><a href=”#888″>ここにテキスト</a></li>
<li><a href=”#777″>ここにテキスト</a></li>
<li><a href=”#666″>ここにテキスト</a></li>
</ol>
</div>
<div style=”background: #eeeeff; padding: 10px; border-radius: 10px; border: 2px dotted #0000ff;”>
<h4>Sample tag9</h4>
<ol style=”list-style-type: decimal-leading-zero;”>
<li><a href=”#xyz”>ここにテキスト</a></li>
<li><a href=”#999″>ここにテキスト</a></li>
<li><a href=”#888″>ここにテキスト</a></li>
<li><a href=”#777″>ここにテキスト</a></li>
<li><a href=”#666″>ここにテキスト</a></li>
</ol>
</div>
<div style=”background: #eeeeff; padding: 10px; border-radius: 10px; border: 2px dotted #0000ff;”>
<h4>Sample tag10</h4>
<ol style=”list-style-type: lower-latin;”>
<li><a href=”#xyz”>ここにテキスト</a></li>
<li><a href=”#999″>ここにテキスト</a></li>
<li><a href=”#888″>ここにテキスト</a></li>
<li><a href=”#777″>ここにテキスト</a></li>
<li><a href=”#666″>ここにテキスト</a></li>
</ol>
</div>
目次サンプル複合型
リストタグを合わせて入れ子にする方法を使っております。
左が表示例で右がHTMLタグになっています。（スマホの方は、上下になりますが・・・）
<div style=”background:#eeeeff; padding:10px; border-radius: 10px; border: 2px dotted #0000ff;”>
<h3>目 次</h3>
<ul style=”list-style-image: url(‘http://social908.com/facebook/wp-content/uploads/2018/10/01.png’);”>
<li><a href=”#”>はじめに</a></li>
<li><a href=”#”>講義</a>
<ul style=”list-style-image: url(‘http://social908.com/facebook/wp-content/uploads/2018/10/02.png’);”>
<li><a href=”#”>アメブロカスタマイズ講習</a></li>
<li><a href=”#”>WordPress講習初級</a></li>
</ul>
</li>
<li><a href=”#”>レンタルサーバー</a>
<ul style=”list-style-image: url(‘http://social908.com/facebook/wp-content/uploads/2018/10/02.png’);”>
<li><a href=”#”>非SSL(http://)</a></li>
<li><a href=”#”>SSL(https://)</a></li>
</ul>
</li>
<li><a href=”#”>お客様の声</a></li>
<li><a href=”#”>お問い合わせ</a></li>
</ul>
</div>
<div style=”background:#eeeeff; padding:10px; border-radius: 10px; border: 2px dotted #0000ff;”>
<h3>目 次</h3>
<ul style=”list-style-image: url(‘https://wp908.com/wp-content/uploads/2018/10/01.png’);”>
<li><a href=”#”>はじめに</a></li>
<li><a href=”#”>講義</a>
<ol style=”list-style-type: decimal”>
<li><a href=”#”>アメブロカスタマイズ講習</a></li>
<li><a href=”#”>WordPress講習初級</a></li>
</ol>
</li>
<li><a href=”#”>レンタルサーバー</a>
<ol style=”list-style-type: decimal-leading-zero”>
<li><a href=”#”>非SSL(http://)</a></li>
<li><a href=”#”>SSL(https://)</a></li>
</ol>
</li>
<li><a href=”#”>お客様の声</a></li>
<li><a href=”#”>お問い合わせ</a></li>
</ul>
</div>
<div style=”background: #eeeeff; padding: 10px; border-radius: 10px; border: 2px dotted #0000ff;”>
<h3>目 次</h3>
<ul style=”list-style-image: url(‘https://wp908.com/wp-content/uploads/2018/10/01.png’);”>
<li><a href=””#””>はじめに</a></li>
<li><a href=””#””>講義</a>
<ol style=”list-style-type: upper-roman”>
<li><a href=””#””>アメブロカスタマイズ講習</a></li>
<li><a href=””#””>WordPress講習初級</a></li>
</ol></li>
<li><a href=””#””>レンタルサーバー</a>
<ol style=”list-style-type: upper-roman”>
<li><a href=””#””>非SSL(http://)</a></li>
<li><a href=””#””>SSL(https://)</a></li>
</ol></li>
<li><a href=””#””>お客様の声</a></li>
<li><a href=””#””>お問い合わせ</a></li>
</ul>
</div>
とまぁこんな感じで目次タグについて書きましたが、基本的にアメブロでは記事は40000字の文字数制限あるのであまり長くは書けないという事は、知っておいてください。
WEBのことならくまはちＬＡＢにお任せください。
 |
 |
 |
 |
くまはちLABのご利用ありがとうございます！ |
Evernoteに保存