シャンパンNIGHT with 紺碧な朝顔sethtml・cssサポート

ヘッダー編集

ページ上部、右上の文字列を変更する場合は、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に書き換える。

ulBoxの編集

• 単語記述1文章記述1
• 単語記述2文章記述2
• 単語記述3文章記述3

↑上記の3項目は、em要素の1番最初の文字が大きく表示される。よってこの項目はhtmlファイルをメモ帳で開いて<!--見出し1の編集▼-->の直下は以下のように編集する。

<ul>
<li><em>任意の単語記述1</em>文章記述1</li>
<li><em>任意の単語記述2</em>文章記述2</li>
<li><em>任意の単語記述3</em>文章記述3</li>
</ul>

olBox1の編集

1. テキスト
2. テキスト
3. テキスト

↑上記の項目を増やす時は、htmlをメモ帳で開いて<!--olBox1内の項目追加▼-->の後に以下を記述をする。

<li>テキスト</li>

olBox2の編集

1. テキスト
2. テキスト
3. テキスト

↑上記の項目を増やす時は、htmlをメモ帳で開いて<!--olBox2内の項目追加▼-->の後に以下を記述をする。

<li>テキスト</li>

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要素等のブロックレベル要素なら代替可。