「デザイン」の記事一覧

「デザイン」の記事一覧
	1/1ページ

サイド表示

2006-04-20

ＣＳＳファイルを触ってます

サイド表示関係のＣＳＳ

サイド表示の一番奥（まぁ台紙）の幅と色
#pwside {
width: 25%;
background-color: #FFFFFF;
}

左サイド表示の幅設定と周り込み設定
#pwsideleft {
width: 25%;
float: left;
}

右サイド表示の幅設定と周り込み設定
#pwsideright {
width: 25%;
float: right;

奥から２番目サイド表示（ウィンド）の枠設定と色
.pwsidewindow {
margin-bottom: 10px;
border: 1px solid #00759B;
padding: 1px;
background-color: #000000;

サイド表示のタイトルの台紙と枠設定
.pwsidehead {
padding: 5px;
background-color: #C1FFFB;
border: 1px solid #00759B;
margin-bottom: 1px;

サイド表示タイトル文字の設定
.pwsidetitle {
font-size: 10pt;
font-weight: bold;
color: #00759B;

サイド表示の一番上、本文の台紙の色と枠
.pwsidebody {
padding: 5px;
background-color: #FFFFFF;
border: 1px solid #00759B;

background-color:設定を削除すると透明化する

float:を使うと画像と記事などのコンテンツを
平行に配置できる。

Posted by blueprint 23:30:02

背景設定

2006-04-13

記事の背景、一番手前(壁紙）の変更はpwblogbody

使いたい画像はファイルアップロードで保存してＵＲＬを記録

背景画（壁紙）は自動で結合表示するので画像サイズは
１００×１００程度で充分。
但し、連続して結合表示されるので継ぎ目が気にならない図形を選択

ＣＳＳファイルの修正箇所は

.pwblog {
　　　　　margin: 0 10px;
（ココに入れると手前から２番目の背景が変わる）
}

.pwblogbody {
　　　　　　　background-color: #FFFFFF;
　　　　　　　margin-left: 10px;
　　　　　　　margin-bottom: 5px;
　　　　　　　background:url('http://www.pwblog.com/user/blueprint/files/4167.jpg');
}

のように
background:url('http://blog.zmapple.com/user/******/*****/image/4167.jpg');
ＵＲＬとタグを貼り付けるとブログ記事に背景画(壁紙）が貼れる

その他は再録を参照

記事の背景、一番奥(壁紙）の変更はbody

使用しているブログのデザインによってbodyとpwblogbodyの間に

container←→pwmain←→pwsbpgmain

等の階層構造がある。ＩＮＤＸと単体の記事表示の場合も違うから注意

コメント記入画面を開いて確認作業必要

commentmain等もある。

サイド表示についてもpwsidebody等の階層構造あり

Posted by blueprint 11:02:42

ヘッダーの壁紙編集

2006-04-13

使いたい背景画像をファイルアップロードでサーバーに保存して
ＵＲＬを控えるところまでは画像ＵＰ方法と同じ

1024×200または800×200がヘッダー画像のデフォルトサイズ
使用しているデザインで画像サイズが違うから注意のこと

ＣＳＳでいじるのは#pwheaderのbackgroud:urlのカッコ内で

ここに保存済みの画像のＵＲＬを入れる

#pwheader {
clear: both;
background-color: #999999;
margin: 0px;
padding: 0px;
background:url('http://www.pwblog・・・・/files/1534.jpg') no-repeat scroll 50% 0;
height:200px;
}

これで、ヘッダーに任意の画をのせることが可能。

画を載せずに色のみ変更する場合は

background-color:#******；を使用する

background-color: ##262b3c;

何も指定しないと透明化する

赤色の数字がカラーコード

FFFFFF
　　↓
00FFFF←→FF00FF←→FFFF00

88FFFF←→FF88FF←→FFFF88

FF0000←→00FF00←→0000FF

880000←→008800←→000088
　　↑
000000

それとグラディエーションを設定する時は

FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#FFFFFF, endColorstr=#0033CC, gradienttype=1)

を入れる。startとendで色を指定する。

最後のタグの数字で横変化と縦変化を変更できる

gradienttype=<b>1が横変化

gradienttype=<b>0が縦変化

Posted by blueprint 09:49:37

文字サイズ変更

2006-04-12

文字サイズ変更方法をもうひとつ見つけました
＜span STYLE="font-family:Arial Black; font-size:15pt;
color:#FFFF00; background:#A0D0FF"＞文字入れＡＢＣ＜/span＞
これを使うと
文字入れＡＢＣ
こうなります。

font-family:Arial Black;
の朱色の部分を変えることでHTMLならフォントが変わる
はずだけど・・・う～ん、微妙。変わってないや
文字入れＡＢＣ

font-size:15pt;
の青色の部分を変えることで文字サイズが変わる
ｐｔは単位（ポイント）、ｐｘや％も使える。
１５→２０にすると

文字入れＡＢＣ

こうなります。

color:#FFFF00;
の朱色の部分を変えることで文字の色が変わる
#FFFF00→#FF00FFにすると
文字入れＡＢＣ
こうなります。

background:#A0D0FF
の青色の部分を変えることで台紙の色が変わります。
#A0D0FF→#FF00FFにすると
文字入れＡＢＣ
こうなります。
不要な修飾はタグ抜いて使用します。

Posted by blueprint 09:03:13

1/1ページ

▲ページの先頭へ

おぼえがき

サイド表示

背景設定

ヘッダーの壁紙編集

文字サイズ変更

このブログについて

カテゴリー表示

blog内検索

リンク集

最新コメント

最新トラックバック