2019/06/07
この『テンプレート』や『コンテンツ』『ピックアップ』で使用しているアイキャッチ風の目次の紹介です。
アイキャッチ風の目次例
サンプルでは３つ目の項目を仮に『カテゴリー』としてみました。
目次ページ表示例
『タイトル１』をクリックしてみます。
コンテンツ表示例
ナビ下の画像をページタイトルとして使用しています。キャッチフレーズの部分を目次へのリンクにすることでパンくずリストも兼ねています。
HTMLサンプル
カテゴリー
category.html (コピペ出来ます)
<!DOCTYPE html>
<html dir="ltr" lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0">
<title>Sample Inc | カテゴリー</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<link rel="stylesheet" href="prism.css" type="text/css" media="screen">
<link rel="stylesheet" href="sub.css" type="text/css" media="screen">
<link rel="stylesheet" href="popup.css" type="text/css" media="screen">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->
<script src="js/jquery1.7.2.min.js"></script>
<script src="js/script.js"></script>
<script src="js/prism.js"></script>
<script>
jQuery(function(){
var topBtn = jQuery('#re-top');
topBtn.hide(); //最初は非表示
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 700) { //700以上、下にスクロールされた時
topBtn.fadeIn(""); //表示
} else { //それ意外は
topBtn.fadeOut(""); //非表示
}
});
});
</script>
<script>
jQuery(function(){
jQuery('a[href^=#]').click(function() {
var speed = 500;
var href= jQuery(this).attr("href");
if(href == '#content') return; //Twenty Seventeen（追加箇所）
var target = jQuery(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>
</head>
<body>
<div id="wrapper">
<header id="header">
<h1>ホームページサンプル株式会社のサイトです</h1>
<!-- ロゴ -->
<div class="logo">
<a href="index.html"><img src="images/logo.png" width="60" height="60" alt="Sample site" /><p>Company Name<span>Your Company Slogan</span></p></a>
</div>
<!-- / ロゴ -->
<!-- 電話番号+受付時間 -->
<div class="info">
<p class="tel"><span>電話:</span> 012-3456-7890</p>
<p class="open">受付時間: 平日 AM 10:00 〜 PM 5:00</p>
</div>
<!-- / 電話番号+受付時間 -->
</header>
<!-- メインナビゲーション -->
<nav id="mainNav">
<a class="menu" id="menu"><span>MENU</span></a>
<div class="panel">
<ul>
<li><a href="index.html"><strong>トップページ</strong><span>Top</span></a></li>
<li><a href="subpage.html"><strong>ごあいさつ</strong><span>Greeting</span></a></li>
<li class="active"><a href="category.html"><strong>カテゴリー</strong><span>Category</span></a></li>
<li><a href="subpage.html"><strong>弊社の取り組み</strong><span>Approach</span></a></li>
<li><a href="subpage.html"><strong>会社情報</strong><span>Company</span></a></li>
<li class="last"><a href="subpage.html"><strong>お問い合わせ</strong><span>Contact</span></a></li>
</ul>
</div>
</nav>
<!-- / メインナビゲーション -->
<!-- コンテンツ -->
<!-- メイン画像 -->
<div id="mainBanner">
<img src="images/mainImg2.jpg" width="922" height="182" alt="">
<div class="slogan">
<h2>カテゴリー</h2>
<p>Category</p>
</div>
</div>
<!-- / メイン画像 -->
<div id="main2">
<article class="non">
<p>カテゴリー 一覧のサンプルです。</p>
</article>
</div>
<!-- 3カラム -->
<section class="gridWrapper">
<article class="grid">
<div class="box">
<img src="images/top_m1.jpg" width="260" height="113" alt="">
<h3 class="gr1"><a href="sample1.html" target="b_blank">タイトル１</a></h3>
<p>タイトル１の簡単な説明文。タイトル１の簡単な説明文。</p>
<p class="readmore"><a href="sample1.html">詳細を確認する</a></p>
</div>
</article>
<article class="grid">
<div class="box">
<img src="images/top_m2.jpg" width="260" height="113" alt="">
<h3 class="gr1"><a href="sample1.html" target="b_blank">タイトル２</a></h3>
<p>タイトル２の簡単な説明文。タイトル２の簡単な説明文。</p>
<p class="readmore"><a href="sample1.html">詳細を確認する</a></p>
</div>
</article>
<article class="grid">
<div class="box">
<img src="images/top_m3.jpg" width="260" height="113" alt="">
<h3 class="gr1"><a href="sample1.html" target="b_blank">タイトル３</a></h3>
<p>タイトル３の簡単な説明文。タイトル３の簡単な説明文。</p>
<p class="readmore"><a href="sample1.html">詳細を確認する</a></p>
</div>
</article>
</section>
<!-- / 3カラム -->
<!-- / コンテンツ -->
<div id="re-top">
<a href="#" class="re-topB">TOP</a>
</div>
<!-- フッター -->
<footer id="footer">
<!-- 左側 -->
<div id="info" class="grid">
<!-- ロゴ -->
<div class="logo">
<a href="index.html"><img src="images/logo.png" width="45" height="45" alt="Sample site"><p>Company Name<br><span>Your Company Slogan</span></p></a>
</div>
<!-- / ロゴ -->
<!-- 電話番号+受付時間 -->
<div class="info">
<p class="tel"><span>電話:</span> 012-3456-7890</p>
<p class="open">受付時間: 平日 AM 10:00 〜 PM 5:00</p>
</div>
<!-- / 電話番号+受付時間 -->
</div>
<!-- / 左側 -->
<!-- 右側 ナビゲーション -->
<ul class="footnav">
<li><a href="subpage.html">eco・環境事業</a></li>
<li><a href="subpage.html">コンピュータ事業</a></li>
<li><a href="subpage.html">飲食店事業</a></li>
<li><a href="subpage.html">介護・医療事業</a></li>
<li><a href="subpage.html">ごあいさつ</a></li>
<li><a href="subpage.html">サービス概要</a></li>
<li><a href="subpage.html">会社情報</a></li>
<li><a href="subpage.html">お問い合わせ</a></li>
<li><a href="subpage.html">サイトマップ</a></li>
</ul>
<!-- / 右側 ナビゲーション -->
</footer>
<!-- / フッター -->
<address>Copyright © <script type="text/javascript">myDate = new Date() ;myYear = myDate.getFullYear ();document.write(myYear);</script> Sample Inc. All Rights Reserved. Design by <a href="https://f-tpl.com" target="_blank" rel="nofollow">https://f-tpl.com</a></address>
</div>
</body>
</html>
タイトル１
sample1.html (コピペ出来ます)
<!DOCTYPE html>
<html dir="ltr" lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0">
<title>Sample Inc | タイトル１</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<link rel="stylesheet" href="prism.css" type="text/css" media="screen">
<link rel="stylesheet" href="sub.css" type="text/css" media="screen">
<link rel="stylesheet" href="popup.css" type="text/css" media="screen">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->
<script src="js/jquery1.7.2.min.js"></script>
<script src="js/script.js"></script>
<script src="js/prism.js"></script>
<script>
jQuery(function(){
var topBtn = jQuery('#re-top');
topBtn.hide(); //最初は非表示
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 700) { //700以上、下にスクロールされた時
topBtn.fadeIn(""); //表示
} else { //それ意外は
topBtn.fadeOut(""); //非表示
}
});
});
</script>
<script>
jQuery(function(){
jQuery('a[href^=#]').click(function() {
var speed = 500;
var href= jQuery(this).attr("href");
if(href == '#content') return; //Twenty Seventeen（追加箇所）
var target = jQuery(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>
</head>
<body id="subpage">
<div id="wrapper">
<header id="header">
<h1>ホームページサンプル株式会社のサイトです</h1>
<!-- ロゴ -->
<div class="logo">
<a href="index.html"><img src="images/logo.png" width="60" height="60" alt="Sample site" /><p>Company Name<span>Your Company Slogan</span></p></a>
</div>
<!-- / ロゴ -->
<!-- 電話番号+受付時間 -->
<div class="info">
<p class="tel"><span>電話:</span> 012-3456-7890</p>
<p class="open">受付時間: 平日 AM 10:00 〜 PM 5:00</p>
</div>
<!-- / 電話番号+受付時間 -->
</header>
<!-- メインナビゲーション -->
<nav id="mainNav">
<a class="menu" id="menu"><span>MENU</span></a>
<div class="panel">
<ul>
<li><a href="index.html"><strong>トップページ</strong><span>Top</span></a></li>
<li><a href="subpage.html"><strong>ごあいさつ</strong><span>Greeting</span></a></li>
<li class="active"><a href="category.html"><strong>カテゴリー</strong><span>Category</span></a></li>
<li><a href="subpage.html"><strong>弊社の取り組み</strong><span>Approach</span></a></li>
<li><a href="subpage.html"><strong>会社情報</strong><span>Company</span></a></li>
<li class="last"><a href="subpage.html"><strong>お問い合わせ</strong><span>Contact</span></a></li>
</ul>
</div>
</nav>
<!-- / メインナビゲーション -->
<!-- コンテンツ -->
<section id="main2">
<!-- メイン画像 -->
<div id="mainBanner">
<img src="images/mainImg2.jpg" width="922" height="140" alt="">
<div class="slogan">
<h2>タイトル１</h2>
<p><a href="category.html">カテゴリー</a>＞</p>
</div>
</div>
<!-- / メイン画像 -->
<section class="content">
<h3 class="heading">ホームページサンプル株式会社の取り組み</h3>
<article>
<img src="images/sample1.jpg" width="217" height="140" alt="" class="alignright border" />
<p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす。革新的な技術で世の中を動かす。</p>
</article>
</section>
<section class="content">
<h3 class="heading">ホームページサンプル株式会社の取り組み</h3>
<article>
<img src="images/sample2.jpg" width="217" height="140" alt="" class="alignleft border" />
<p>革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。</p>
<p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす。革新的な技術で世の中を動かす。</p>
</article>
</section>
<section class="content">
<h3 class="heading">会社概要</h3>
<article>
<table class="table">
<tr>
<th>会社名</th>
<td>ホームページサンプル株式会社（英語表記 Homepage sample Inc.）</td>
</tr>
<tr>
<th>設立</th>
<td>平成10年1月10日</td>
</tr>
<tr>
<th>事業内容</th>
<td>IT・マーケティング・福祉など</td>
</tr>
<tr>
<th>住所</th>
<td>〒012-3456 見本県見本市サンプル1-2</td>
</tr>
<tr>
<th>電話番号</th>
<td>0123-4567-89012</td>
</tr>
<tr>
<th>メールアドレス</th>
<td>info@example.com</td>
</tr>
</table>
</article>
</section>
<section class="content" id="gallery">
<h3 class="heading">写真ギャラリー</h3>
<article>
<figure class="grid"><a href="subpage.html"><img src="images/gallery1.jpg" width="217" height="140" alt=""></a></figure>
<figure class="grid"><a href="subpage.html"><img src="images/gallery2.jpg" width="217" height="140" alt=""></a></figure>
<figure class="grid"><a href="subpage.html"><img src="images/gallery3.jpg" width="217" height="140" alt=""></a></figure>
<figure class="grid"><a href="subpage.html"><img src="images/gallery4.jpg" width="217" height="140" alt=""></a></figure>
<figure class="grid"><a href="subpage.html"><img src="images/gallery5.jpg" width="217" height="140" alt=""></a></figure>
<figure class="grid"><a href="subpage.html"><img src="images/gallery6.jpg" width="217" height="140" alt=""></a></figure>
</article>
</section>
</section>
<!-- / コンテンツ -->
<div id="re-top">
<a href="#" class="re-topB">TOP</a>
</div>
<!-- フッター -->
<footer id="footer">
<!-- 左側 -->
<div id="info" class="grid">
<!-- ロゴ -->
<div class="logo">
<a href="index.html"><img src="images/logo.png" width="45" height="45" alt="Sample site"><p>Company Name<br><span>Your Company Slogan</span></p></a>
</div>
<!-- / ロゴ -->
<!-- 電話番号+受付時間 -->
<div class="info">
<p class="tel"><span>電話:</span> 012-3456-7890</p>
<p class="open">受付時間: 平日 AM 10:00 〜 PM 5:00</p>
</div>
<!-- / 電話番号+受付時間 -->
</div>
<!-- / 左側 -->
<!-- 右側 ナビゲーション -->
<ul class="footnav">
<li><a href="subpage.html">eco・環境事業</a></li>
<li><a href="subpage.html">コンピュータ事業</a></li>
<li><a href="subpage.html">飲食店事業</a></li>
<li><a href="subpage.html">介護・医療事業</a></li>
<li><a href="subpage.html">ごあいさつ</a></li>
<li><a href="subpage.html">サービス概要</a></li>
<li><a href="subpage.html">会社情報</a></li>
<li><a href="subpage.html">お問い合わせ</a></li>
<li><a href="subpage.html">サイトマップ</a></li>
</ul>
<!-- / 右側 ナビゲーション -->
</footer>
<!-- / フッター -->
<address>Copyright © <script type="text/javascript">myDate = new Date() ;myYear = myDate.getFullYear ();document.write(myYear);</script> Sample Inc. All Rights Reserved. Design by <a href="https://f-tpl.com" target="_blank" rel="nofollow">https://f-tpl.com</a></address>
</div>
</body>
</html>