ぼかしの縦ライン（枠線）をつける方法について
by: ゲスト
最近このサイトを見て、HPの作成に目覚め、夜更かしが続いております。
こんな時間に申し訳ありません。
本題ですが、どうしても作者様のHPのようなぼかしの縦ラインを入れたいのですが、どうしたらできるのでしょうか？
よろしくお願いいたします。
こんな時間に申し訳ありません。
本題ですが、どうしても作者様のHPのようなぼかしの縦ラインを入れたいのですが、どうしたらできるのでしょうか？
よろしくお願いいたします。
ホームページの外枠に縦の枠線（ぼかし画像）をつける方法
「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と同じフォルダに置く。
以上！!(^^)!
のような外枠にぼかしのようなラインを入れる方法ですが、結構簡単にできます。簡単に言いますと以下になります。
まず、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と同じフォルダに置く。
以上！!(^^)!