-質問掲示板♪ -
申し訳ございませんが、一時ご質問の受付を中止いたします。ご迷惑をおかけし申し訳ございません。
質問
ぼかしの縦ライン（枠線）をつける方法について
質問者：ゲスト 投稿日時：2009-10-04 16:43:29
最近このサイトを見て、HPの作成に目覚め、夜更かしが続いております。
こんな時間に申し訳ありません。
本題ですが、どうしても作者様のHPのようなぼかしの縦ラインを入れたいのですが、どうしたらできるのでしょうか？
よろしくお願いいたします。
返信は全 1 件投稿されています。
返信
ホームページの外枠に縦の枠線（ぼかし画像）をつける方法
No.1
投稿者： 投稿日時：2009-10-04 16:45:08
「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と同じフォルダに置く。
以上！!(^^)!
※この質問掲示板は管理人が勉強もかねてPHP+MySQLで制作したものです。
動作チェックは行っておりますが、
不具合等がございましたらご報告いただけるとありがたいです＾＾；
不具合報告⇒