RSSを購読する
follow us in feedly
ふかふか交易所 | ネットの情報をわかりやすくお届け!
RSSを購読する
follow us in feedly

ニュータウンシリーズ まとめ

マインクラフト関連記事 まとめ

VR関連記事 まとめ

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ下部へ

ホームページカテゴリ 新着記事

サイト内検索

過去7日間の人気記事

  • 総合
  • ゲーム
  • 動画
  • ホームページ

ホーム > ホームページカテゴリー No.21 ~ No.30 > 記事No.27

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

← 前の記事

次の記事 →

mokuji

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

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

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

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

目次の設置

サンプル

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



■ ターゲット1


  ・サブターゲット1


  ・サブターゲット2


  ・サブターゲット3


■ ターゲット2


設置方法

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

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


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

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


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

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

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


関連記事はこちら


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


過去7日間の人気記事

マインクラフト関連記事 まとめ

VR関連記事 まとめ

Aviutl(動画編集)関連記事まとめ

AR関連記事 まとめ

ご意見・ご質問等は 掲示板へ!

コメントを公開されたくない場合は メッセージフォームへ!


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

©Copyright fukafuka295.jp 2016 All rights reserved.

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ上部へ