在WordPress博客上创建用户友好的目录表的方法

易于读者阅读的目录表

目次表.png

为创建目录表的HTML/CSS代码

自身が使っている目次表は、下記の例示の要領でコードで利用しています。

<div style="display: inline-block; background: #008000; padding: 5px 10px; color: #ffffff;"><strong>目次</strong></div>
<div style="background: #ffffff; padding: 10px; border: 5px solid #008000;"><a href="#a">◇ h1など見出しタグと目次併用の効果</a> <br />
 ○ <a href="#a1">wordpressブログ見栄え改善には目次を利用する</a><br />
 ○ <a href="#a2">ワードプレスブログでの目次の使い方</a><br />
 ○ <a href="#a3">目次とh1など見出しとのレイアウト</a><br />
<a href="#b">◇ 目次からh1やh2、h3見出しリンクでSEO対策</a><br />
 ○ <a href="#b1">ブログ記事の目次と見出しを紐付ける</a><br />
 ○ <a href="#b2">ワードプレス記事目次リンクのビジュアルエディタでの作り方</a><br />
 ○ <a href="#b3">wordpress目次リンクhtmlでの作り方</a><br />
<a href="#c">◇ ブログの印象は目次で決まる</a><br />
 ○ <a href="#c1">来訪者は目次で読み続けるか否かを判断する</a><br />
 ○ <a href="#c2">wordpress目次作成にはhtmlとプラグインがある</a></div>

只需根据文章内容对每个字符串部分进行更改,便可以将其用作目录表的模板。

此外,您还可以使用目录中的#a1等锚链接功能,通过链接到标题,可以跳转到文本部分。

创建目录和标题链接的方法

目次表と見出しリンク.png

为了将之前在目录表中注册的#a1与之链接,这里需要在锚点框中输入”a1″。

通过这样做,只需点击目录中的“使用目录来改善WordPress博客的外观”一项,即可跳转到页面内的标题“使用目录来改善WordPress博客的外观”,让读者能够立即快速移动到他们想看的部分。

广告
将在 10 秒后关闭
bannerAds