2005年05月06日

サイドバーにメッセージボードを作る

table-ichigo2.jpg

↑の画像は200×145ピクセル(サムネイル表示)JPEG保存。

メッセージボードを作るやり方は色々ある。
たとえば、枠だけテーブルのように作るやり方もある。
しかしながら、初心者にとって最低でも上下両端と縦横・・・と画像をたくさん作らねばならないのは大変だ。

そういうわけで、これだと画像は1枚。絵の代わりに写真でもいいので楽。

デザイン→コンテンツ
新しく自由形式のコンテンツをサイドバーに作成。

*両サイドバーの場合、横200ピクセルでは大きすぎる場合もあるので注意。
つづく・・・
posted by かりん at 15:27 | Comment(2) | 日記

2005年03月24日

ゆきだるまテンプレートの背景色変更について

renga-haikei.JPG

↑のように、トップ画像、記事のテーブル枠及び背景色を変えた場合、左サイドのカレンダーや罫線付きアイコンのところが浮き出してしまう。

白っぽい背景色を選ぶ場合は問題ないが、その他の色を選ぶ時はカレンダーや罫線付きアイコンも考慮に入れて変更しなければならないのが面倒だ。



今回使用した画像

画像1
renga2.jpg

画像2
renga1.jpg

画像3
renga-waku1.jpg

画像4
renga-waku2.jpg

画像5
renga-waku3.jpg

全画像ともサムネイル表示。記事のテーブル枠もJPEG保存。
背景色には、トップ画像に使用したのと同じ色を指定。
色のコードを調べるフリーソフト「FE−color Palette」が便利。


body {
font-family: Arial, Helvetica, sans-serif;
background-image:url(画像1アドレス);
background-repeat:repeat-x;
background-color:(背景色コード);
margin:0px;
padding:0px;
color:#7876CB;
text-align:center;
}

posted by かりん at 10:41 | Comment(2) | 日記

2005年03月22日

ゆきだるまテンプレートをオリジナルにしてみよう その2(記事のテーブル枠の変更)

*記事のテーブル枠の変更*


テーブル枠画像の準備

画像1
waku3.gif
↑の画像は464×125ピクセル(サムネイル表示)


画像2
waku1.GIF
↑の画像は464×29ピクセル(サムネイル表示)


画像3
waku2.gif
↑の画像は464×71ピクセル(サムネイル表示)

それぞれの画像をピクセルぎりぎりのサイズで作成。
この画像は透過GIFで作ってあるが、背景と同色にしたい部分の色を合わせれば透過する必要はないのでJPEG保存も可。

デザイン→スタイルシート→タイトル
スタイルシートの画像をそれぞれ変更する。


a{
text-decoration: underline;
color:#FC3;
}

#banner{
font-family:arial, Helvetica;
padding:0px 0px 0px 50px;
width:600px;
height:221px;
text-align:left;
}
h1 {
margin:0px 0px 5px 0px;
padding-top:140px;
font-weight:bolder;
font-size:20px;
}

h1 a{
color:#7876CB;
font-family:arial, Helvetica;
text-decoration: none;
font-weight:bolder;
}

h2 {
font-size:14px;
font-weight:bolder;
font-family:arial, Helvetica;
}

h3 {
padding:0px 5px 0px 10px;
font-size:12px;
margin-bottom:0px;
font-weight:bolder;
font-family:arial, Helvetica;
background-image:url(画像2);
background-repeat:repeat-y;
}

h3 a{
padding: 0px;
font-weight:bolder;
color:#FFF;
}

.description {
color:#7876CB;
margin:0px 0px 10px 0px;
font-size:14px;
font-family:sans-serif;
font-weight:bolder;
}

.navi {
color:#7876CB;
font-size:12px;
text-align:center;
margin-bottom:10px;
}

#content {
margin-bottom:30px;
margin-left:20px;
margin-top:0px;
float:left;
width:464px;
color:#7876CB;
text-align:left;
}

.blog {
background-image:url(画像1);
background-repeat:no-repeat;
background-position:left top;
padding-top:8px;
}

.blogbody {
color:#7876CB;
font-size:100%;
margin-bottom:10px;
background-image:url(画像2);
background-repeat:repeat-y;
}

.date{
font-size: 14px;
color:#7876CB;
font-weight:bolder;
padding:0px 5px 30px 10px;
margin:0px;
}

.title{
font-weight:bolder;
margin-top:0px;
}
.title a{
font-size: 14px;
color:#7876CB;
border:none;
text-decoration: none;
}

.text{
font-size: 12px;
color:#7876CB;
padding:5px 10px 5px 10px;
}

.posted{
font-size: 10px;
color:#7876CB;
text-align:left;
padding:5px 10px 20px 10px;
background-image:url(画像3);
background-repeat:no-repeat;
background-position:left bottom;
}

(どのURLがどの画像かわからない時は、アドレスバーにコピーして移動を押し確認)



posted by かりん at 11:27 | Comment(0) | 日記

2005年03月18日

ゆきだるまテンプレートをオリジナルにしてみよう その1(画像の変更)

SEESAAブログのゆきだるまテンプレートのスタイルシートを少しずつ変更してオリジナルを作ってみよう。


*画像の変更*


画像1
titled2yoko.jpg
↑の画像は、ちょっと見難いが17×221ピクセルで作ってある。(サムネイル表示)


画像2
titled2.jpg
↑の画像は、780×221ピクセルで作ってある。(サムネイル表示)



2つの大きさの画像を作り、ゆきだるまテンプレートのスタイルシートの画像と変更する。

画像2をまず作り、その端のほうをトリミングして画像1を作ると統一感が出る。

デザイン→スタイルシート→タイトル

body {
font-family: Arial, Helvetica, sans-serif;
background-image:url(画像1のアドレス);
background-repeat:repeat-x;
background-color:#FDFCF4;
margin:0px;
padding:0px;
color:#7876CB;
text-align:center;
}
#container{
margin:0px auto 0px auto;
width:807px;
background-image:url(画像2のアドレス);
background-repeat:no-repeat;
background-position:top center;
text-align:left;
}

(どのURLがどの画像かわからない時は、アドレスバーにコピーして移動を押し確認)



サイト例では左サイドのアイコン付き罫線をなくし、文字色を少し変えています。


posted by かりん at 11:28 | Comment(0) | 日記

ブログを始めました

テンプレートカスタマイズでオリジナルを作るための練習をしていこうと思います。
posted by かりん at 09:10 | Comment(2) | 日記

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。