サムネール・ページの作り方
ビルダー起動
ファイル→標準モードで新規作成ページタイトルを入れる
画面上の「BODY」▼をクリック→BODY の属性→ページ情報タグ→ページタイトル→「紫陽花」と 入力→ＯＫ表の挿入
表の挿入→6 行 1 列→ＯＫ ＜１行目＞ 属性→表タブ→表の幅：750px→Enter 属性→セルタブ→セルの高さ：120px→Enter ＜２行目＞ 属性→セルタブ→セルの高さ：50px→Enter セルの横分割→クリック→クリック ＜左側＞セルタブ→セルの幅：200px→Enter ＜中央＞セルタブ→セルの幅：350px→Enter ＜右側＞セルタブ→セルの幅：200px→Enter ＜３行目＞ 属性→セルタブ→セルの高さ：250px→Enter ＜４行目＞ ＜５行目＞ 属性→セルタブ→セルの高さ：50px→Enter ＜６行目＞ 属性→セルタブ→セルの高さ：50px→Enter 背景色を設定 表の下の空白部分をクリック→背景/文字色のタブ→色指定 背景→クリック→その他→16 進→R:cc、G:cc、U:cc 文字→クリック→その他→16 進→R:5a、G: 5a、U: 5a 罫線の幅、セルの余白、枠の幅をゼロ（0）に設定 属性→表タブ→罫線の幅：0px→Enter 属性→表タブ→セルの余白：0px→Enter 属性→表タブ→枠の幅：0px→Enter 位置揃え→中央揃え 名前をつけて保存→ファイル名：ajisai.html→フォルダ→kiso3-1 を選択→保存タイトル画像の挿入
＜１行目＞ タイトル挿入セルの選択→属性→セルタブ→参照→タイトル画像（30title.jpg）選択→開く ＜２行目＞ ＜左側＞ 挿入セルの選択→属性→セルタブ→参照→タイトル画像（30kazari.png）選択→開く→右揃え ＜右側＞ 挿入セルの選択→画像ファイルの挿入→タイトル画像（30kazari.png）選択→開く→左揃え ＜中央＞ 「雨上がり の 散歩道」をメモ帳（ajisai サムネール.txt）から選択→右クリック→コピー →貼り付け→「雨上がり の 散歩道」を選択→右クリック→スタイルの設定→フォント：サイ ズ→予約後→ピクセルに直す→28px フォントタブ→フォントの候補→「ms」と入力→「MSP 明朝」を選択→左側の「追加」をクリ ック→文字の属性：太さ→「太い」を選択 文字のレイアウトタブ→水平方向の配置を選択→中央揃え→ＯＫ ＜３行目＞ 挿入セルの選択→メニューバー：挿入→ファイル→その他のファイル→ファイルの種類→すべての ファイル→ファイルの場所：HP 基礎→基礎班サムネール素材→開く→メモ帳「ajisai.txt」を選択 →開く→ファイルの挿入：「改行位置を保持」を選択→ＯＫ 「学名：Hydrangea 花期：初夏」を選択→ツールバー：標準▼をクリック→「見出し 3」を選択→改 行マークを Delete キーで 2 回押下して消す 本文を選択→右クリック→スタイルの設定→フォントタブ→フォント：サイズ→予約後→ピクセル に直す→18px フォントタブ→フォントの候補→「ms」と入力→「MSP 明朝」を選択→左側の「追加」をクリック 文字のレイアウトタブ→水平方向の配置を選択→中央揃え→ＯＫ→ 行間→予約後→パーセントに直す→150→ レイアウト→「4 方向ともに同じ値」から→「左方向」を選択→パディング：30px→「右方向」を 選択→パディング：30px→ＯＫ→改行マークを Delete キーで 1 回押下して消す上書き保存
ツールバー：上書き保存→表示されたボックスで出ているファイルをすべて選択（ファイル名に日本語 がないか確認）→「参照」をクリック→「image」を選択してダブルクリック→「image」が大文字「IMAGE」 になるまでダブルクリック→ＯＫ→保存 ＜４行目＞ サムネールを挿入するセル（4 行目）を選択→挿入→画像効果→サムネール→ドキュメント→基礎 HP→基礎班サムネール素材→挿入する画像を全て選択→次へ→サムネール作成ウィザード→「自分 で設定する」を選択→サムネール全体の配置：中央配置→「自分で設定する」の下の「設定」をク リック→横一列に配置するサムネール：「4」 サムネールの大きさと揃え：「128」→「幅を揃える」を選択 リンク先の写真の大きさ：「そのままの大きさ」を選択 →ＯＫ→次へ リンク先の設定：「ページ（P）」（元の大きさの画像を貼り付けたページを作成したそのページ へのリンクを設定します）を選択→ ページの保存先：「参照」をクリック→「image」を選択してダブルクリック→「image」が大 文字「IMAGE」になるまでダブルクリック→ＯＫ→ 「現在のページの背景/文字色を使用する」にチェックを入れる→「リンク先ファイル編集モ ード」が「標準」になっていることを確認→「プレビュー」ボタンをクリックして画像の確認 →完了
サムネールの左右に余白を作成する
サムネールのセルを選択→右下の点線の直ぐ上にマウスを合わせてクリック→右下の隅にカーソル が点滅→ツールバー：列の追加→左へ追加→属性：セルタブ→セルの幅：38px→ツールバー：列の追 加→右へ追加→ 属性：セルタブ→セルの幅：38px→Enter→ツールバー：列の追加→右へ追加→ 属性：セルタブ→セルの幅：38px→Enter→ツールバー：列の追加→右へ追加→ 属性：セルタブ→セルの幅：38px→Enter→ツールバー：列の追加→右へ追加→ 属性：セルタブ→セルの幅：38px→Enter→ 属性：表タブ→表の幅：750px Enterサムネールの下にタイトル分のセルを作成する
サムネールのセルを選択→ツールバー：行の追加→下へ追加→ 属性：セルタブ→セルの高さ：30px→Enter→ 属性：セルタブ→セルの高さ：30px→Enterサムネールのタイトルを記入して完成
メモ帳：「ajisai サムネール.txt」からコピー＆貼り付け上書き保存
ツールバー：上書き保存→表示されたボックスで出ているファイルをすべて選択（ファイル名に日本語 がないか確認）→「参照」をクリック→「image」を選択してダブルクリック→「image」が大文字「IMAGE」 になるまでダブルクリック→ＯＫ→保存リンクを貼る
サムネール画像を右クリック→「リンク先ページを開く」を選択→リンク先の画像ページが開くリンク先の画像に額縁を作る
ツールバーの「スタイルシートマネージャーの表示」を選択→外部スタイルシートの追加→参照→ファ イルの場所：「image」→開く→ファイル名を入力する（何でも良い）：「ajisai」と入力→開く→ＯＫスタイルシート情報：新しく作って出来たスタイルシート（file://…）を選択→真ん中の下の「追加」 をクリック→ スタイル設定ボックスが表示される→HTML タグ名：半角で「img」と入力→レイアウト→ボーダー→予 約語→ピクセルに変更→幅：30px→スタイル：浮き出し→色設定→ユーザー定義→その他→（R:5ｂ、 G:5ｂ、U:5ｂ）→ＯＫ→ＯＫ→閉じる（額縁の出来上り）→ ツールバーの「スタイルシートマネージャーの表示」を選択→スタイルシート情報：新しく作って出来 たスタイルシート（file://…）を選択→真ん中の下の「追加」をクリック→ スタイル設定ボックスが表示される→HTML タグ名：半角で「td」と入力→ フォント→フォントサイズ：28px→フォントの候補：MSP 明朝→追加→文字の属性：太い 色と背景→前景色▼ユーザー定義→その他：16 進（5A 5A 5A）設定→ＯＫ→ＯＫ→閉じる
画像タイトルを書き直す
メモ帳（ajisai サムネール.txt）から「紫陽花」を選択→右クリック→コピー→貼り付け→ブラウザ で確認額縁の上に余白を作る
ツールバーの「スタイルシートマネージャーの表示」を選択→スタイルシート情報：新しく作って出来 たスタイルシート（file://…）を選択→真ん中の下の「追加」をクリック→ スタイル設定ボックスが表示される→HTML タグ名：半角で「body」と入力→ レイアウト→上方向→パディング：50px→ＯＫ→閉じる（額の上に余白が出来る）→下に２行の追加をし、最下行に「BACK」を入力する
画面タイトル「紫陽花」の右横をクリック→ツールバー：「行の追加」を 2 回クリック→ 上の行を選択→セルタブ→セルの高さ：50px→Enter→ 下の行を選択→セルタブ→セルの高さ：30px→Enter→メモ帳（ajisai サムネール.txt）から「BACK」 を選択→右クリック→コピー→貼り付けサムネール・ページにリンクの設定をする
「BACK」を選択→右クリック→リンクの挿入→参照→「ajisai.html」を選択→開く→ＯＫ→プレビュ ーで確認（「BACK」をクリックしてサムネール・ページに戻れば成功）→ページ編集→上書き保存（ツ ールバー：上書き保存）→ビルダーの画面を右上の「下の×」で閉じる残りの額縁のないサムネールも同様にリンクの設定をする
次の額縁のないサムネールを右クリック→「リンク先ページを開く」を選択→リンク先の画像ページが 開く→ツールバーの「スタイルシートマネージャーの表示」を選択→外部スタイルシートの追加→参照 →「ajisai.css」を選択→開く→ＯＫ→閉じる 画像タイトルを選択→消す→メモ帳（ajisai サムネール.txt）から「水色 も 綺麗・・・」を選択→ 右クリック→コピー→貼り付け画面タイトル「水色 も 綺麗・・・」の右横をクリック→ツールバー：「行の追加」を 2 回クリック→ 上の行を選択→セルタブ→セルの高さ：50px→Enter→ 下の行を選択→セルタブ→セルの高さ：30px→Enter→メモ帳（ajisai サムネール.txt）から「BACK」 を選択→右クリック→コピー→貼り付け 「BACK」を選択→右クリック→リンクの挿入→参照→「ajisai.html」を選択→開く→ＯＫ→プレビュ ーで確認（「BACK」をクリックしてサムネール・ページに戻れば成功）→ページ編集→上書き保存（ツ ールバー：上書き保存）→ビルダーの画面を右上の「下の×」で閉じる 以降、繰り返し ＜５行目＞ メモ帳（ajisai サムネール.txt）から「サムネイルクリックすると別画面で大きな画像が表示され ます。」を選択→右クリック→コピー→貼り付け ツールバー：標準▼をクリック→「見出し 4」を選択→ツールバー：中央揃え→ツールバー：下揃え ＜６行目＞ ６行目のセルを選択→表の挿入：１行３列→ ＜左側＞ セルタブ→セルの幅：250px、セルの高さ：50px→ 表タブ→表の幅：750px、罫線の幅：0px、セル内の余白：0px、枠の幅：0px→ 画像ファイルの挿入→基礎班サムネール素材→ＢＡＣＫボタン→開く→右揃え ＜中央＞ セルタブ→セルの幅：250px、セルの高さ：50px→ 表タブ→表の幅：750px、罫線の幅：0px、セル内の余白：0px、枠の幅：0px→ 画像ファイルの挿入→基礎班サムネール素材→ＨＯＭＥボタン→開く→中央揃え ＜右側＞ セルタブ→セルの幅：250px、セルの高さ：50px→ 表タブ→表の幅：750px、罫線の幅：0px、セル内の余白：0px、枠の幅：0px→ 画像ファイルの挿入→基礎班サムネール素材→ＮＥＸＴボタン→開く→左揃え ツールバー：上書き保存→表示されたボックスで出ているファイルをすべて選択（ファイル名に日本語 がないか確認）→「参照」をクリック→「image」を選択してダブルクリック→「image」が大文字「IMAGE」 になるまでダブルクリック→ＯＫ→保存
