ヘッダー編集
ページ上部、右上の文字列を変更する場合は、htmlファイルのheader要素のタイトルのResponsive Web Designを任意の文字列に書き換える。htmlファイル内↓
<!--右上文字列編集▼-->
<header id="top" title="Responsive Web Design">
※黄色枠のサイズ調整はcssファイル内/* *******右上のサイズ調整 */直下のwidthプロパティとmargin-rightプロパティで調整。
ページ上部、左上のリンク編集
※初期状態は以下になっています。
<!--左上リンク編集▼-->
<p id="topnav">
<a href="./">Home</a>
</p>
./にリンク先urlを記述
Homeにリンクテキストを記述
ページ左上の文字列、Valid html5 & css3 CSS Only NO Scriptを変更する場合は、cssファイル内
/* *******▼左上文字列編集 */直下、contentプロパティの以下の箇所を変更する文字に書き換える。
"Valid html5 & css3 CSS Only NO Script"
※英数字以外の日本語文字はUnicodeに変換する必要があります。
※変換例:あ > \3042
※変換ツールはNJ-CLUCKER様がオススメです。
ヘッダー画像は夜景を省いた代替画像があります。
代替画像のサンプル画を見る
*サンプル画は元画像よりも画質を大幅に下げています。
現在のヘッダー画像を代替画像に変更する場合はcssファイルをメモ帳で開いて
/* *******ヘッダー画像変更 */ 直下と
/* *******ヘッダー画像変更スマホ用 */ 直下にある以下の箇所を編集。
background:(img/01.png)をimg/01-2.pngに書き換える。
» Page Top
olBox1の編集
- テキスト
- テキスト
- テキスト
↑上記の項目を増やす時は、htmlをメモ帳で開いて<!--olBox1内の項目追加▼-->の後に以下を記述をする。
<li>テキスト</li>
» Page Top
olBox2の編集
- テキスト
- テキスト
- テキスト
↑上記の項目を増やす時は、htmlをメモ帳で開いて<!--olBox2内の項目追加▼-->の後に以下を記述をする。
<li>テキスト</li>
» Page Top
Box追加する場合
3パターンあります。
» パターン1は最初の1文字が大きくなるリスト付きのBox(前述のulBox)
» パターン2は数字リスト付きのBox(前述のolBox1とolBox2)
» パターン3はリスト無しのBox(本Boxと前述のヘッダー編集の青色背景が無いタイプ)
パターン1を追加する場合はhtml内<!--Box追加スペース1~3▼-->の後に以下を記述。
<section class="about">
<h2>見出し</h2>
ulbox項目で説明したコードを記述。
</section>
パターン2を追加する場合はhtml内<!--Box追加スペース1~3▼-->の後に以下を記述。
※●箇所には他のBoxと重複しない英数字を記述。
<section id="contents0●">
<h2>見出し</h2>
<ol>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ol>
</section>
パターン3を追加する場合はhtml内<!--Box追加スペース1~3▼-->の後に以下を記述
<section class="box">
<h2>見出し</h2>
<div>
テキスト
</div>
</section>
※div要素はdl要素、p要素、figure要素等のブロックレベル要素なら代替可。
» Page Top