HOME編集方法

テンプレートの編集(はじめに)

ホームページビルダーで編集される方の設定

ファイルを開く前に下記の設定を行って下さい。
設定をしないとレイアウトが崩れてしまうなどのおそれがありますので、必ず設定を行って下さい。
※例:ホームページビルダー v14

  1. 上部にあるメニュー部分の「ツール」→「オプション」の中の「ファイル」タブを開いて下さい。
    「DOCTYPEを出力する」と「HTMLソースにGENERATORを組み込む」という部分、2か所のチェックを外して下さい。

  2. 上部にあるメニュー部分の「ツール」→「オプション」の中の「ソース編集」タブを開いて下さい。
    「出力文字」「タグ」とあるのですが、その部分を「小文字」に設定して下さい。

  3. 上部にあるメニュー部分の「ツール」→「オプション」の中の「一般」タブを開いて下さい。
    「HTMLソースを自動整形する」と「HTML構文エラーを自動修復する」という部分、2か所のチェックを外して下さい。

    ※コメント部分を見やすいようにスペースをあけてありますが、「自動整形」してしまうとその部分が詰まってしまいますので、こちらも設定して下さい。

  4. 上部にあるメニュー部分の「ツール」→「オプション」の中の「表示」タブを開いて下さい。
    「編集記号」の「コメント、スクリプト記号」という部分のチェックを外して下さい。

    ※コメントやスクリプトがあると「ページ編集」の時に、その部分にマークが入ってしまいます。
    見ずらいようでしたらこちらも設定して下さい。


最初の設定

ホームページビルダーで編集される方は、HTMLソース部分を開き設定して下さい。

<title>部分に「あなたのホームページ名」を入れて下さい。

<title>ホームページの名前</title>

<meta name="description" 部分に「サイトの説明」を入れて下さい。

<meta name="description" content="サイトの説明をお書き下さい"/>

<meta name="keywords" 部分に「サイトに関係するキーワード」を入れて下さい。

<meta name="keywords" content="キーワード1,キーワード2,キーワード3"/>


FLASHメニュー部分の設定

FLASHメニューの編集は、テキストファイル「flash_template04.txt」で行って下さい。
※FLASHファイル「flash_template04.swf」自体を編集するのではありません。

Winでしたらメモ帳、テキストエディタで編集して下さい。ホームページビルダーでは編集出来ません。

テキストファイル内【flash_template04.txt】
グレーの背景部分の「&」「変数名」は変更削除をしないで下さい。

/* ▼画像表示部分の設定▼ */
//画像枚数を設定(表示する枚数に設定して下さい)
&imgMax=2&

//画像表示切り替わり時間
&imgTime=5&

//「画像枚数を設定」の数に合わせてこちらも設定して下さい。
&img1=images/img1.jpg&
&img2=images/img2.jpg&

※以下省略

※この部分 →「 // 」・「 /* */ 」はコメント部分となりますので削除しても大丈夫です。

※こちらのFLASHを表示するには「swfobject.js」「flash_template04_noflash.js」
「flash_template04.swf」「flash_template04.txt」その他、表示する画像ファイルが必要となります。
全てサーバーに転送して下さい。

このページのトップへ

Flashを表示出来ない環境での設定

Flashを表示出来ない環境での設定(メイン画像)

メインの静止画像部分の設定はサイズ幅900px、高250pxになっています。

ソース部分は下記のようになります。 <div id="main">〜</div>


Flashを表示出来ない環境での設定(メニューボタン)

現在は1個のメニューボタンのサイズは幅148px、高40px、メニューボタン6個の設定になっています。

ソース部分は下記のようになります。 <ul id="navigation">〜</ul>

※「images」ファルダ内に右のメニューボタン(template04_3bt.png)→
入っております。
ご自分のサイト用に名前入れをしてメニューボタンを作成して設定して下さい。

テンプレートの編集(スタイルシートでの編集)

スタイルシートでの編集方法

色・サイズ・背景に使用している画像などの変更はスタイルシート(style.css)で行います。
ホームページビルダーより「スタイルシートマネージャ」でも編集する事も出来ますが、メモ帳などで開くと各項目部分に「/*コメント*/」が書いてありますので、編集しやすいと思います。

テンプレートの編集(HTMLファイルでの編集)

段落タグ

テキスト部分は段落タグ<P>~</p>で囲んで下さい。

文章を段落タグ<P>~</p>で囲むと、段落間に約1行分のスペースが空きます。

このテキスト部分のように罫線を表示させるには<p>を<p class ="line">とする事で表示されます。

このページのトップへ

トップ部分の編集

トップメニュー

ソース部分は下記のようになります。 <ul id="topmenu">〜</ul>

<li>〜</li>が1つのメニュー部分となります。
トップメニュー項目を増やすには下記の部分を <ul id="topmenu">〜</ul> の間に入れて下さい。

最後の部分は<li>を<li class="last">として下さい。


このページのトップへ

サイド部分の編集

サイド部分のボックス

ソース部分は下記のようになります。 <div class="box">〜</div>

サイド部分で<div class="box">〜</div>を使用すると、そのボックスに枠が表示されます。


サイドメニュー

ソース部分は下記のようになります。 <div class="sideboxmenu"><ul id="sidemenu">〜</ul></div>

<li>〜</li>が1つのメニュー部分となります。
サイドメニュー項目を増やすには下記の部分を <ul id="sidemenu">〜</ul> の間に入れて下さい。

サイドメニュー部分でリンクをしない項目部分には、<li>の部分を<li class="nolink">として下さい。


サイドリンク

ソース部分は下記のようになります。 <ul class="sidelink">〜</ul>

<li>〜</li>が1つのリンク部分となります。
リンク項目を増やすには下記の部分を <ul id="sidelink">〜</ul> の間に入れて下さい。

バナー画像でのリンクの場合【画像幅サイズ200pxまで】

テキストリンクの場合
<li>の部分を<li class="textlink">とすると、テキストの先頭に画像が表示されます。

このページのトップへ

メイン部分の編集

メイン部分のボックス

ソース部分は下記のようになります。 <div class="box">〜</div>

メイン部分で<div class="box">〜</div>を使用すると、そのボックスに枠が表示されます。


テキストボックス(更新履歴|What's New)部分の設定

ソース部分は下記のようになります。 <ul class="textbox">〜</ul>

<li class="date">〜</li><li class="text">〜</li>が1つの項目部分となります。


イメージボックス アルバム(画像を並べて表示)部分の設定

ソース部分は下記のようになります。 <div class="imagebox">〜</div>

<li>〜</li>が1つの画像部分となります。
項目を増やすには下記の部分を <ul class="imagebox_album">〜</ul> の間に入れて下さい。

※画像の枠はスタイルシートで設定していますので、画像自体に枠はついておりません。


イメージボックス ライト(画像を右側に表示)部分の設定

ソース部分は下記のようになります。<div class="imagebox">〜</div>

※画像の枠はスタイルシートで設定していますので、画像自体に枠はついておりません。


イメージボックス レフト(画像を左側に表示)部分の設定

ソース部分は下記のようになります。<div class="imagebox">〜</div>

※画像の枠はスタイルシートで設定していますので、画像自体に枠はついておりません。


ボックス 2カラム部分の設定

ソース部分は下記のようになります。 <div class="box2column">〜</div>

<div class="box2column_left">〜</div>は左に表示される部分です。
<div class="box2column_right">〜</div>は右に表示される部分です。


トピックパス(パンくずリスト)部分の設定

ソース部分は下記のようになります。 <div id="topic-path">〜</div>

<a href="#">~</a>部分は右サイドに画像「>」が表示されます。
リンク設定がない表示しているページ名部分は、必ず強調タグ<strong>~</strong>で囲んで下さい。


このページのトップへ

メイン部分の編集(リンクページで使用しているスタイル)

アバウトリンクの設定

ソース部分は下記のようになります。 <table class="style_b" ..... >〜</table>

<tr><th>〜</th><td>〜</td></tr>が1つの項目部分となります。
項目を増やすには下記の部分を<table class="style_b" ..... >〜</table> の間に入れて下さい。


リンクボックスの設定【バナー画像使用|バナー画像幅200px使用】

ソース部分は下記のようになります。 <dl class="linkbox-ba200">〜</dl>

<dl class="linkbox-ba200">〜</dl>が1つのサイト部分です。


リンクボックスの設定【バナー画像使用|バナー画像幅88px使用】

ソース部分は下記のようになります。 <dl class="linkbox-ba88">〜</dl>

<dl class="linkbox-ba88">〜</dl>が1つのサイト部分です。


リンクボックスの設定【バナー画像使用しない|テキストのみ】

ソース部分は下記のようになります。 <dl class="linkbox-nobanner">〜</dl>

<dl class="linkbox-nobanner">〜</dl>が1つのサイト部分です。


リンクバナーボックスの設定【バナー画像を並べて表示|テキストなし】

ソース部分は下記のようになります。 <ul class="linkbanner">〜</ul>

<li>〜</li>が1つの画像部分となります。
項目を増やすには下記の部分を <ul class="linkbanner">〜</ul> の間に入れて下さい。

このページのトップへ

メイン部分の編集(プロフィールページで使用しているスタイル)

プロフィールの設定

ソース部分は下記のようになります。 <table class="style_a" ..... >〜</table>

<tr><th>〜</th><td>〜</td></tr>が1つの項目部分となります。
項目を増やすには下記の部分を<table class="style_a" ..... >〜</table> の間に入れて下さい。

このページのトップへ

フッター部分の編集

フッターメニューの設定

ソース部分は下記のようになります。 <ul id="footermenu">〜</ul>

<li>〜</li>が1つのメニュー部分となります。
メニュー項目を増やすには下記の部分を <ul id="footermenu">〜</ul> の間に入れて下さい。

最後の部分は<li>を<li class="last">として下さい。

このページのトップへ