人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ホームページビルダーを使用しております。

以下の画面をYAHOOのように、中央表示するにはどうしたらよろいしいのですか?

http://www.medi-bridges.com/


具体的な操作方法やコピーする記述をお教え頂ければ助かります。
何卒よろしくお願い申し上げます。

●質問者: michiojapan
●カテゴリ:はてなの使い方 コンピュータ
✍キーワード:Yahoo コピー ホームページビルダー 操作 記述
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● hkwgch
●0ポイント

(1)中央揃えにしたい範囲をマウスで選択する。

(2)プルダウンメニューから、「書式」>「位置揃え」>「中央揃え」を選ぶ。

これでよろしいのでしょうか?

◎質問者からの返答

上記の操作を行いましたが、何も変化がございません。

ちなみに、モードは「標準モード」を使用しております。

誠に申し訳ございませんが、HTML文を一度確認頂き、これで良いか、またこれをどのように直せば中央に表記されるのかお教え頂ければ幸いです。

すいませんが、何卒よろしくお願い申し上げます。


2 ● onihsan
●54ポイント

そのページを全てホームページビルダーにコピペして実際に操作してみました。

レイアウト枠が4か所に分割されていて、それぞれが左寄りに設定されている為、ページ上で左寄りに表示されているのだと思われます。

各部分は「レイアウト枠」内で「中央表示」になっているのでレイアウト枠自体削除すれば解決します。

ただし、レイアウト枠を削除する前に画像、文章を救助と言うか切り取りしておかないとレイアウト枠と一緒に消えてしまいます。

1番上の画像部分の捜査

画像を選択し切り取る。

表示→編集ページ情報→レイアウト枠一覧→1番上のレイアウト枠を削除

画像を任意の場所に張り付ける

2番目の各サイトへのリンク部分

各サイトへのリンク部分すべてを選択(右クリックしたまま黒く反転させる)して切り取る。

表示→編集ページ情報→レイアウト枠一覧→1番上のレイアウト枠を削除

(最初のは消えているので1番上になっている)

以下繰り返し…

1番下の会社概要の部分は、レイアウト枠自体のバックに色を指定しているので、別にパックを作成する必要がある。

1列1行の表を挿入し、パックの色を指定、大きさを調整…

上下の表示場所は、Enterの数で調整する。

これで画面中央に表示されるように変更されると思います。

◎質問者からの返答

上記方法でとても上手くいきました。

誠にありがとうございました。


3 ● plateplus
●0ポイント

ソースまで拝見させていただきました。

ちょっと、記述がスタイルシートを使用していないので、簡単にできるかどうか分からないのですが、

<BODY background="wallppr001.gif" style="color : white;background-color : #ffffff;">

<BODY background="wallppr001.gif" style="color : white;background-color : #ffffff;margin-right: auto;margin-left: auto;">

としてみてはいかがでしょうか?

通常センターにする場合は、

css使う場合なのですが、

body{

margin-right: auto;

margin-left: auto;

}

をいれると中央に寄りますよ。

◎質問者からの返答

今回のHTML文では、上記の方法で行っても変更されませんでした。


4 ● kent0608
●36ポイント

コメント欄のkn1967さんがおっしゃるとおり、商用レベルのサイトを製作する場合にはプロユースのソフトウェアが製作の現場では必須になっています。

デファクトスタンダードといわれているのが、AdobeのDreamweaverです。

そこで当方が所持しているDreamweaverで中央寄せレイアウトのテンプレートを作ってみました。

右クリック>ソースを表示でHTMLソースが確認できますのでご自由にお使いください。

(著作権は当方にありますが、カンパウェアとさせていただきます。)

HTMLテンプレート

http://blog-imgs-32.fc2.com/k/e/n/kent0608/index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>テンプレート</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<!--ここからヘッダー-->
<div id="header">ここに社名ロゴやトップイメージを挿入</div>
<!--ここからグローバルナビゲーション-->

<div id="g_navi">
<ul>
<li><a href="#">トップ</a></li>
<li><a href="#">事業内容</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">IR情報</a></li>
<li><a href="#">お問い合わせ</a></li>

</ul>
</div>
<!--ここからメインコンテンツ-->
<div id="main">
ここにメインコンテンツを書いてください
</div>
<!--ここからフッター-->
<div id="footer">
<p>Copyright (C) 2009 kent0608 All Rights Reserved.</p>

<p>このテンプレートは<a href="https://www.hatena.ne.jp/sendpoint?name=kent0608">カンパウェア</a>です。</p>
</div>
</div>
</body>
</html>

CSSファイル

http://blog-imgs-32.fc2.com/k/e/n/kent0608/style.css

@charset "utf-8";
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #CCCCCC;
}

#container {
height: 100%;
width: 950px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
}
#header {
height: 100px;
background-color: #999999;
padding: 10px;
}

#g_navi {
float: left;
width: 100%;
background-color: #EEEEEE;
}
#g_navi li {
list-style-type: none;
float: left;
width: 120px;
text-align: center;
background-color: #EEEEEE;
padding: 5px;
}
#g_navi a {
display: block;
height: auto;
width: auto;
}
#main {
clear: both;
padding: 20px;
height: 500px;
}
#footer {
clear: both;
background-color: #999999;
}
#footer p {
padding: 5px;
text-align: center;
}

なお、このテンプレートを理解するには、基本的なHTML構文の理解、CSSの理解が必須です。

下記に初心者の方向けの解説サイトのリンクを張っておきますのでご覧下さい。

ごく簡単なHTMLの説明

CSSレイアウト実践講座

また、DreamweaverはAdobeから30日体験版が利用可能となっています。

Adobe Dreamweaver CS4

一度体験してみてください。

Adobeからビデオチュートリアルも提供されています。

http://www.adobe.com/jp/designcenter/video_workshop/

合わせてご覧になってください。

◎質問者からの返答

本当にご丁寧な解説ありがとうございます。

今のフォームにそって中央表示したいので、今回は”onihsan ”さんの方法で行って上手くいきました。

誠にありがとうございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ