「ホームページビルダー」でブログをカスタマイズする本

ブログの見栄えはスタイルシートで設定されています。ホームページビルダーではスタイルシートの設定も可能なので、その機能を利用してブログデザインの変更をシミュレーションすることが出来ます。

シミュレーションの方法は、まずブログページをビルダー上へ読み込み、そしてスタイルシートマネージャーなどを利用してスタイルシートを設定していきます。
その後、出来上がったCSSソースをブログのCSS編集個所に適用することでビルダーを利用して簡単にブログデザインを変更することができます。

書籍では、以下に紹介する方法でブログのデザインを変更します。
　ここでは、今ご覧になっているページをブログページと仮定して操作していきます。変更箇所は、タイトルバーの背景色変更と、サイドバーのタイトル(右側「MenuTitle」とある個所)を枠線で囲みます。

　また、このページは、意図的にブログページに似せて作成しています。実際のブログの様には稼動しません。

1. 今、ご覧になっているこのページはそのままにして、ホームページビルダーを起動してください。
2. 次にホームページビルダーのメニューバーから[ファイル]→[URLから読み込み]を選択します。
3. [URLを開く]ダイアログが開いたら、[http:// 　　]とある個所にこのページのURLを入力します。
   もし、ブラウザでこのページのみを開いている状態であれば、[URLをブラウザより取得]ボタンをクリックするとこのページのURLが自動的に入力されます。URLが取得できない場合は、次のように入力して[OK]ボタンをクリックします。
   入力するアドレス→「http://www.wsb.jp/hpb/book/s02_sample.htm」
4. 次に、「安全でないコンテンツのページをダウンロードする可能性があります。」と警告するダイアログが表示されます。
   「開かずに中止しますか？」と聞いているので[いいえ]ボタンをクリックします。
5. 以上の操作でホームページビルダー上にこのページと同じページがダウンロードできます。[ページ編集]画面では背景が白色ではありませんが[プレビュー]画面で確認すると背景色は白色になっています。(公開した際の実際の見え方は[プレビュー]画面の見え方です。)

※以上の操作でダウンロードできない場合

1. ブラウザのメニューバーから[ファイル]→[名前を付けて保存]の操作を行います。
2. 次に、保存したファイルを右クリックして表示されるメニューから[ホームページビルダーV●で編集]を選択します。
3. もし、右クリックしても目的のメニューが表示されない場合は、ビルダーのメニューバーから[ファイル]→[開く]の操作を行い、保存したファイルを選択します。

1. ビルダーのメニューバーから、[表示]→[スタイルシートマネージャー]と操作して[スタイルシートマネージャー]を表示します。
2. [スタイルシートマネージャー]内にある「#banner」を選択して[編集]ボタンをクリックします。
3. すると、[スタイルの編集]ダイアログが開きます。[色と背景]または、[カラーと背景]タブをクリックして色を設定する画面を開きます。
4. [背景色]の個所には現在設定されている色が表示され「ユーザー定義」と入力されています。[背景色]項目の▼ボタンをクリックすると色が表示されるので、試しに[赤]を選択し[OK]ボタンをクリックします。
5. 以上の操作でページ上部にあるタイトルの背景色を変更することができました。

1. ビルダーのメニューバーから、[表示]→[スタイルシートマネージャー]と操作して[スタイルシートマネージャー]を表示します。
2. [スタイルシートマネージャー]内にある「.sidetitle」を選択して[編集]ボタンをクリックします。
3. すると、[スタイルの編集]ダイアログが開くので[レイアウト]タブをクリックして[レイアウト]の画面を開きます。
4. 左側にある図の上欄に[4方向ともに同じ値]と入力させているのを確認します。
5. 次に、右側にあるボーダー項目を設定していきます。まず、[幅]の項目では[予約語]とある横の▼ボタンをクリックして[ピクセル]を選択します。すると自動的に左欄に[1]と入力されます。
6. [スタイル]欄横の▼ボタンをクリックして[実線]を選択します。
7. [色]欄横の▼ボタンをクリックして試しに[赤]を選択します。
8. 次に、枠線の周りに余白を設けるため[パディング]の欄を[3ピクセル]と設定し[OK]ボタンをクリックします。
9. 以上の操作でサイドバータイトルを枠線で囲むことができました。

ここで操作した際に登場した「#banner」や「.sidetitle」といった個所は、ブログによって異なります。

書籍では5つのブログ(Movable Type 3.2/ココログ(プロ)/gooブログ/livedoorBlog/JUGEM/SeesaaBLOG)のシンプルなテンプレートを元に「#banner」「.sidetitle」などにあたる個所、またその他デザイン変更可能な個所を紹介しています。
そして、ここで操作したような方法でブログのデザインを設定していきます。

●<サンプル>デザイン変更後のブログ

• gooブログ(書籍カラーページ/練習からできるページ)
• livedoorBlog(書籍カラーページ/Sample1)
• SeesaaBLOG(書籍カラーページ/Sample2)
• JUGEM(書籍カラーページ/Sample3)
• ココログ(プロ)(書籍カラーページ/Sample4)
• Movable Type 3.2(書籍には掲載していません)