2005-11-20

クリスマススキン

テーマ:ブログデザイン

スキン3 クリスマスも近いのでスキンをクリスマスバージョンに変えてみました。


【ブログ全体】

position を使ってボックスの配置をしています。


/* -- common -- */

background: #ffffff url(背景画像URL);

body#mainIndex {

margin: 0;

padding: 0;

text-align: center;

}
#frame {
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
position: relative;

height:3200px;

background-color: #ffffff;
}
#wrap {
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: left;
position: relative;
}
/* -- header -- */
#header{
position:relative;

top:0;

left:0;
width:800px;
background:url(ヘッダ画像URL) no-repeat top center;
height:150px;

z-index:1;
}
/* -- MainColumn -- */

/*message*/
#message{
width:800px;

text-align:left;
margin:0;
z-index:3;
}
/*entries*/
.entry{
width: 600px;
margin-top:0px;
}
/*-- 最後のスキン別スタイルシート部分 --*/

#main{
width:800px;

}
#sub_a{
width:200px;

position:absolute;

top:0px;

right:0;
z-index:1;
}
#sub_b{
display: none;
}


--------------------------------------


背景画像

壁紙


position:relative;

top : 数字px;

left : 数字px;


position:absolute;

top : 数字px;

left : 数字px;


↑これで、ボックスを何処の位置に配置するかを決めてます。

relative は、通常時を基準に

absolute は、親要素を基準にしています。


数字の位置でもわかるように、ヘッダ部分とメッセージ・記事部分とサイドバーが重なっています。

背景色などを入れると通常は重なって見えなくなりますが…


z-index : 数字;


で、重なっていても見えるようにしています。

数字が大きいほど手前に見えます。


z-index:0;

z-index:1;


z-index:0;
↑のソース

<div style="width:150px;height:150px;position:relative;border:1px #000000 solid;">
<div style="width:100px;height:100px;background-color:#ffaaaa;z-index:0;"></div>
<div style="width:100px;height:100px;background-color:#aaffaa;z-index:1;position:absolute;top:50px;left:50px;"></div>
<div style="width:100px;height:100px;background-color:#aaaaff;z-index:0;"></div>
</div>


#frameで

height:3200px;

background-color: #ffffff;

と、指定しているのは、記事部分がサイドバーより短いと背景が白くならない為の回避です。

どうやったら画面一番下まで埋める事が出来るのか…解かる人がいたら教えてもらいたいです。


--------------------------------------


【記事部分】

.entry{
width: 600px; /*-- サイドバーと重なるので指定 --*/
margin-top:0px;

}
.entry .entry_head {
display:none; /*-- 名前・日付を消しています--*/
}
.entry .title{
text-align:left;
background:url(リースの画像URL) no-repeat top left;
padding:0 0 5px 35px; /*-- リースの画像と重ならないように --*/
}
.entry span.theme{
display: block;
margin-bottom: 15px;
height:25px;
background:url(クリスマスグッズの画像URL) no-repeat top right;
}

.entry .contents{
margin: 10px 10px; 0 10px;
padding:22px 10px 22px 10px;
border: 1px solid #000000;
background:#ffffff url(記事背景画像URL) repeat;
}

--------------------------------------


リースの画像

リース

クリスマスグッズの画像

クリスマス

記事背景画像

背景


--------------------------------------


【menu部分】

.mainMenu {
width:185px;
color: #000000;
font-size: 10px;
line-height: 1.8;
margin-bottom: 14px;
padding: 0 5px 25px 5px; /*-- 25pxは画像分の余白 --*/
background:#ffffff url(パンダせのり画像URL) no-repeat bottom center;
}
.menu_title {
color: #000000;
font-size:12px;
font-weight: bold;
background:url(リースの画像URL) no-repeat top left;
padding:0 0 0 35px; /*-- リースの画像分の余白 --*/
}
.menu_frame {
margin: 0;
padding: 0;
border-top: 1px solid #000000; /*-- 枠 --*/
border-left: 1px solid #000000; /*-- 枠 --*/
border-right: 1px solid #000000; /*-- 枠 --*/
background-color:#ffffff;
}


--------------------------------------


パンダせのりの画像

パンダ


--------------------------------------


他にも色々弄っとりますが、今回はこの辺で…。

リスト画像に雪だるま使用。

雪だるま

読者登録ボタン

読者ボタン

ブックのパンダは、上手く表示できなかったのでこれ↓

パンダ


--------------------------------------


画像の素材は、下手ですが、気に入ってもらえたらどうぞ使ってください。クリックすると元の大きさになるので、保存する場合はクリックしてからどうぞ。

んでも…あんまりクリスマスらしくないな…。

ちょっとだけ修正しましたです。トナカイせのり

AD
いいね!した人  |  コメント(26)  |  リブログ(0)
2005-11-19

メニューをスクロール

テーマ:ブログデザイン

12/08追記

アメブロの賞品

やっと、届きました☆

こんな賞品見たことないのでよくわかりません。


USBメモリーだそうで…。

使い方がわからないので、放置…かな。


使い方が解かったら使おうかと思います。


11/19追記

わーい、スキンコンテスト に当選したよ。

アメブロスキンには選ばれなかったみたいだけど、なんかくれるみたい。

楽しみ楽しみ★


10/15

スキン2 スキンコンテスト

【コンセプト】

画像なしで何処まで可愛くできるか。

【作ってみた感想】

ちょっと寂しいので、body背景画像だけ入れてみた。

これから色を変えて楽しめそう☆

IE NN Operaいずれも最新で動作確認。

古いものは自信ありません…失敗してたら教えてね。

【こんなスキンがあったらいいな】

ドット絵が苦手なので、ドット絵の可愛いスキンがあるといいな。


サイドバー

タイトル
ここに内容が入る。

↑こんなん


弄ったところは

/* -- menu_element_basis -- */
.mainMenu {
margin-bottom: 14px;
padding: 5px;
border: 1px solid #000000;
background-color:#ffaaaa;
}
.menu_title {
text-align:center;
padding-bottom:5px;
}
.menu_frame {
margin-top: 0px;
padding-top: 5px;
border: 1px solid #000000;
background-color:#ffffff;
}


entry部分も色とサイズ変えただけで同じ仕様。


タイトル
#3399cc

タイトル
#cccc00

タイトル
#66cc99

タイトル
#ff9900

タイトル
#cc99cc



スクロールするタイプ

タイトル

ここに内容
スクロールする

↑こんなん

弄ったところは、例えば読者部分では…

/*readers*/
#readerList {
height:120px;
overflow: auto;
}


120pxを越えるとスクロールするように指定になってます。

200pxでスクロールさせたければ数字を変えればいい。

以前やってたが、コメント欄をスクロールさせたり、こうやって記事内でもスクロールさせられる。

記事が長くて、でも「続きを読む」にしたくない人は、これをentry部分に使うといいかもね♪


記事内でスクロールさせる場合は…

<div style="height:120px; overflow:auto;">文字</div>



メッセージ部分

ここに文字
ここに文字
ここに文字

↑こんなん


弄ったところは

/*message*/
#message{
width:400px;
margin-bottom: 15px;
margin-left:10px;
border: 1px solid #000000;
background: #ffffff url(背景画像URL) no-repeat center center;
}
#message .contents{
margin-top: 10px;
margin-bottom:10px;
border-top: 10px solid #0099cc;
border-bottom: 10px solid #0099cc;
}


ここに文字
#ffaaaa
ここに文字

ここに文字
#cccc00
ここに文字

ここに文字
#66cc99
ここに文字

ここに文字
#ff9900
ここに文字

ここに文字
#cc99cc
ここに文字

メッセージ背景画像は、出しませんm(_ _)m


↓body背景画像↓

壁紙


エントリー部分に

背景

↑背景を並べてみた。

が!!!NNでは、ちょっとサイズが合わないみたい・・・。

ま、気にならない程度の色にしてみた。

AD
いいね!した人  |  コメント(0)  |  リブログ(0)
2005-11-09

要らないものは消しちゃえ!

テーマ:ブログデザイン

投稿者名は、表示するかしないか選べますよね。

それと同じくして、テーマも1つだったら表示する必要はないし、タイトルを日付にしている人なんかはタイトルも必要ない。

「ヘッダいらないな~」「メニューのタイトルいらない」などなど、ブログには色んな要らないものが存在します。

私のブログの場合、投稿日時と記事内容は全くの別物!

なので、日付は表示させていません。

ブログ設定に日付の非表示設定はありませんよね。

では、どうやって消すか。


それは!!


display : none;


です。


まず、ブログ上で右クリックして「ソース表示」でブログのソース確認。

要らないものが何処にあるのか探しましょう。

見つけ出すには Ctrl + F であるキーワードを検索すると便利です。

日付の場合「2005」なんかで検索すると見つかりますね。


ソースをみると

<span class="date">2005-11-15</span>

とあります。


消したいものが、どんなクラス名で囲まれているのか確認します。

日付の場合 class="date" 。


今度は、CSS編集画面で「date」を探します。

.date {  }

となっているか、

.entry .date {  }

となっているか、

.date span {  }

となっているかはスキンによって変わってきます。


その{  }内に

display : none;

を追加しましょう。


.date{

display : none;

}


ですよ★


一旦、プレビュー・・・消えました?

そしたら、保存です。

消したいものがある場合、試してみてくださいね。

AD
いいね!した人  |  コメント(0)  |  リブログ(0)
2005-05-11

スキン1

テーマ:ブログデザイン

スキン1

↑以前使用してたスキン

スクリーンショットとってなかったんで、サンプル

クリックで拡大


使用してた素材

backgroundのheader部分

#header {background-image: url(素材URL) repeat;}

壁紙

クリックで元画像



backgroundのsubFrame部分

#subFrame {background-image: url(素材URL) repeat-y;}

壁紙

クリックで拡大

サイズ変更する場合は真ん中切り取ってね。


/*entries*/部分

.entry {background-image: url(素材URL) repeat-y;}

壁紙

クリックで拡大


/*entries*/のタイトル部分

.entry .title{background-image: url(素材URL) no-repeat left top;}

クリックで拡大

長い場合は─の部分切り取ってね。



each menu background部分

例)#profile .menu_frame {background: url(素材URL) no-repeat left top;}

クリックで元画像

真ん中に文字を入れて使ってね。

いいね!した人  |  コメント(0)  |  リブログ(0)

AD

Ameba人気のブログ

Amebaトピックス

      ランキング

      • 総合
      • 新登場
      • 急上昇
      • トレンド

      ブログをはじめる

      たくさんの芸能人・有名人が
      書いているAmebaブログを
      無料で簡単にはじめることができます。

      公式トップブロガーへ応募

      多くの方にご紹介したいブログを
      執筆する方を「公式トップブロガー」
      として認定しております。

      芸能人・有名人ブログを開設

      Amebaブログでは、芸能人・有名人ブログを
      ご希望される著名人の方/事務所様を
      随時募集しております。