ようこそ Guest さん
ログイン
ログインID

パスワード:


パスワード紛失
アースマラソン応援バナー
質問コーナー取り扱い説明書

どなたでもなんでも質問おkです!
「3日で作るホームページ」からいらした方は「3日で作る〜」のカテゴリを選択してください。

また、どなたでも質問に対する返答を投稿できます。
管理人が答えられるものは極力お答えしますが、答えられないものもあります・・・・。

そういう場合はどなたかお答えしてください^^;
みなさんのご協力4649お願いしま〜す!

ちなみにXOOPSや、EC-CUBEなどに関しては素人同然なので、お答えできないことが多いと思いますので、それ系の質問はそれ系のサイトへお願いします^^;

CQA Top
  • 質問する!
  • 一覧

Qぼかしの縦ライン(枠線)をつける方法について 回答終了

編集 削除 2009-10-4 16:43:53   by: ゲスト   経験: 初質問
最近このサイトを見て、HPの作成に目覚め、夜更かしが続いております。
こんな時間に申し訳ありません。
本題ですが、どうしても作者様のHPのようなぼかしの縦ラインを入れたいのですが、どうしたらできるのでしょうか?

よろしくお願いいたします。
質問者に確認 :
締め切り : 1999-11-30 0:00:00   回答終了

回答内容

A ホームページの外枠に縦の枠線(ぼかし画像)をつける方法

2009-10-4 16:45:32   by: 管理人 経験: 4〜9回
「3日で作るホームページ」http://www.homepage-4u.com/
のような外枠にぼかしのようなラインを入れる方法ですが、結構簡単にできます。簡単に言いますと以下になります。
まず、FireworksやPhotoshopなどの画像編集ソフトを使い、ページの幅と同じ四角を書き、それにグロー(光彩)外側の効果を付けます。その四角の上下部分以外の場所を縦1pxで書き出し、それをスタイルシートで背景として指定し、repeat-yで上から下まで連続して表示されるように指定します。

たったこれだけなのですが、はじめは意外にややこしい部分でもあります。
実際のスタイルシートの記述は以下。
(「3日で作るホームページ」内でコピペしてもらったスタイルシートに追記しています。)

.shadow{
width:820px;
background-image:url("shadow.jpg");
background-repeat:repeat-y;
margin-right:auto;
margin-left:auto;
}
.all{
width:800px;
border-color:#999999;
border-width:1px;
border-style:solid;
background-color: #ffffff;
margin-right:auto;
margin-left:auto;

}

.shadowというのが追記分です。
これが外枠になります。
shadow.jpgという画像を背景として指定しています。
それを縦にリピート(連続表示)させているわけです。

html側の記述は以下。

<body>
<!--↓↓ここからサイトの表示部分です↓↓-->
<div class="shadow"> ←追記分
<div class="all">

----- 省略 -------

</div> <!--allの終了タグ-->
</div> <!--shadowの終了タグ--> ←追記分
</body>

あとは、幅が820pxの背景画像をcssと同じフォルダに入れればOKです。(ほかのフォルダでも構いませんが、その場合パスが変わります。ややこしいので、わからなければとりあえず同じフォルダに入れておきましょう)

なんにせよ画像を作るソフトが無いと、この問題は解決できないので、一番手っ取り早い方法は、「3日で作るホームページ」のぼかしの枠線があるところで右クリックから、「名前をつけて背景を保存」から自分のパソコンのcssと同じフォルダに保存してください。ファイル名はshadow.jpgです。幅は820pxなので、「3日で〜」を参考に作ったサイトであれば、ぴったり合うはずです。

本当はこういったことは著作権的にだめですが^^;
私のサイトですので、ご自由にもってってください^^

また、下記ページからもダウンロードできます。
いくつかのサイズを用意してますので、ご自分のサイトの幅に合わせてお使いください。

http://www.kens-cube.com/modules/about/index.php?content_id=3

■まとめ
htmlにdivタグでshadowクラスを指定する。
CSSに上記記述を追加する。
画像をCSSと同じフォルダに置く。

以上!!(^^)!
Copyright (c) ケンズキューブ All Rights Reserved.