ふかふか交易所 - ネットコンテンツから日々のお役立ち情報まで

ふかふか交易所 | ネットコンテンツや日々のお役立ち情報まで
RSSを購読する
follow us in feedly
トップ ゲーム 動画 HP・ブログ お金・クレカ お問い合わせ サイトマップ ページ下部へ

HP・ブログカテゴリ 新着記事

HP・ブログカテゴリ 新着記事

サイト内検索

総合ランキング

ホーム > HP・ブログカテゴリー No.21 ~ No.30 > 記事No.27

ホームページの記事上部にシンプルな目次を簡単に設置する方法

← 前の記事

次の記事 →

mokuji

ホームページやブログの記事ページに"あった方が良い"ものの一つとして「目次」が挙げられます。

よくWordpressを使ったサイトで以下のような目次を見かけると思います。

目次があることにより訪問者は一目で記事の構成を理解することができ、特定の箇所へ簡単に移動することが出来るため"ページの離脱率""再訪問率"の改善が見込まれます。

そこで今回は、シンプルで使いやすい目次(スマホ表示にも対応)をコピペするだけで超簡単に設置する方法についてご紹介します。

目次の設置

サンプル

ちなみに今回設置する目次は以下のようなものになります。試しにクリックしてみてください。



■ ターゲット1


  ・サブターゲット1


  ・サブターゲット2


  ・サブターゲット3


■ ターゲット2


設置方法

設置したいページのhtmlの設置したい箇所に以下のコードを貼り付けしてください。

※実際に設置する際は、目次の各項目のid値と対応する移動先のid値を同じにしてください。(例えば"#1"の移動先の要素にはid="1"を与えてください)


そして目次のスタイルを整えるために、以下のコードをCSSに貼り付けてください。

※"display:inline-block;"で文字の長さに合わせて枠の幅が変化するようにしています。文字色や背景の色はご自由に設定してください。


以上で目次の設置は完了です!インラインブロック化しているため、スマホのレスポンシブ表示にも対応しています。

※移動先までスムーズにスクロールさせたい場合は、以下の記事を参考にしてください。

ページ内リンクをスムーズスクロールで滑らかに移動させる方法(jQuery)


この記事を読んだ人はコチラも見ています

HP・ブログ関連の人気記事

関連記事はこちら


  ■ 一言コメントをどうぞ!(100字まで)


総合ランキング

HP・ブログ関連カテゴリの人気記事

ご意見や質問などは気軽にメッセージフォームへ!


hp_blog_top
HP・ブログ制作ノウハウまとめ
movie_top
動画制作ノウハウまとめ
money_top
お金・クレカ記事まとめ
minecraft_top
マインクラフト記事まとめ

当サイトについて  月極広告の募集

©Copyright fukafuka295.jp 2016 All rights reserved.

トップ ゲーム 動画 HP・ブログ お金・クレカ お問い合わせ サイトマップ ページ上部へ