生成したWebページには、各ページの上部と下部にページ送りなどナビゲーション用のリンクが挿入されます。
これをカスタマイズするには、ナビゲーションブロックに付けられ属性名を利用します（記事本文のHTML 参照）。
「画面サイズによる表示切替」の表示例のように枠囲みで表示するには、次のように上下ナビゲーションブロックの内の <a> タグに対して枠囲みの指定をします。
/* ナビゲーションリンクに枠線を付ける */
div.nav-bottom a , /* ボトムナビゲーションの a タグ用 */
div.nav-top a { /* トップナビゲーションの a タグ用 */
font-size:.8em; /* ボタン内の文字サイズ */
padding:0.3em 0.5em; /* ボタン内の空き */
border: 1px #6666FF solid; /* ボタンの囲み罫 */
color:#666; /* ボタン内の文字色 */
}
これだけでは、ナビゲーションブロック内に余裕がないので、ナビゲーションブロック内の余白や、本文との境界線を指定します。
/* トップナビゲーションプロック */
div.nav-top {
width: 100%; /* ブロックの幅 100% */
height:1.8em; /* ブロックの高さ */
padding-top:0.5em; /* ブロック内上の空き */
border-bottom: #999 1px solid; /* ブロックに下線を付ける */
}
/* ボトムナビゲーションブロック */
div.nav-bottom {
clear : both; /* 本文のフロート指定に影響されないようにする */
margin: 0; /* マージンリセット */
width: 100%; /* ブロックの幅 100% */
padding-top:0.4em; /* ブロック内上の空き */
padding-bottom:0.3em; /* ブロック内上の空き */
border-top: #999 1px solid; /* ブロックに上線を付ける */
}
次のように指定することでトップナビゲーションに「操作説明書」などのタイトル文字列を追加できます。
/* トップナビゲーションにタイトルを付ける */
div.nav-top:before{
content:"操作説明書"; /* タイトルテキスト */
white-space: pre; /* 連続する空白をそのまま出す */
font-family: san-serif; /* タイトルテキストのフォントファミリー */
font-weight: bold; /* タイトルテキストを強調表示にする */
font-size: 1.2em; /* タイトルテキストの文字サイズ */
float:right; /* タイトルテキストを右寄せにする */
color:#555; /* タイトルテキストの文字色
margin: 0; /* マージンリセット */
}
メニューアイコンを生成すると、画面が狭いときにメニューアイコンが表示されるため、トップナビゲーションの表示が右にずれ、タイトル文字列の右側切れるので、次のように指定して調整します。
/* 画面が狭いとき、
目次ボタンとナビゲーションが重ならないようにしたために、
テキストの右側が切れるのを防ぐ */
@media screen and (max-width: 768px) { /* 画面が狭いとき */
body.add-toc-menu-icon div.nav-top:before{
padding-right:1.8em;
}
}
次のように指定することで、ボトムナビゲーションに copyright などを表示できます。
/* ボトムナビゲーションブロックに copyright を入れる */
div.nav-bottom:after{
content:"\A \A Copyright 2011-2017\00A9 Antenna House, Inc. All rights reserved.\A Antenna House is a trademark of Antenna House, Inc.\A \A"; /* copyright テキスト */
white-space: pre-wrap; /* 半角空白をそのまま出し、右端で自動折り返しする */
font-size: 0.8em; /* テキストの文字サイズ */
}
ナビゲーションや目次は、本文を印刷する際には不要です。次のように指定すると、印刷時にナビゲーションや目次が出力されません。
/* 目次とナビゲーションを印刷しない */
@media print {
div.toc-menu-area-pc,
div.nav-top ,
div.nav-bottom {
display:none;
}
}