長くなってしまったブログのために目次

この記事を読むのに必要な時間は約 24 分です。

[/wc_column] [/wc_row]

 

<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(‘http://social908.com/facebook/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(‘http://social908.com/facebook/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字の文字数制限あるのであまり長くは書けないという事は、知っておいてください。
 

アメブロのことならくまはちLABにお任せください。

サービス 制作事例

お問い合わせ

この記事が気に入ったらいいね!
お願いします!

The following two tabs change content below.
くまはちLAB
神戸市にて事務所を構えSNSを活用したアメブロやWordPressの活用法をメインにリスト化を初心者の方でもできるパッケージの開発等を手がける。 オーナーくまはちは、パソコン歴30年ホームページ制作歴20年。 自身もアメブロやFC2・WordPressなどいろいろなブログサービスを活用しながら仕事に結びつく方法としてメルマガ・LINE@などの登録などで潜在見込み客を見込み客に見込み客をお客様にする方法を開発。 ブログからだけでなくFacebookやTwitterからの集客も継続して行っております。 お問い合わせは、FacebookメッセージからでもOKですよ。 やってきた中で痛切に感じるのは、我々制作会社は、提案できるのは当然のこととして個人事業主や企業のためになるWEBコンサルティングができなければダメだなっていうのがこれまでの結果です。 制作などの良し悪しを決めるのは、事前のヒアリングとどれだけクライアントならではの良さを引き出せるのかということなのです。
くまはちLAB

最新記事 by くまはちLAB (全て見る)