アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！

今回は実際使用中のスキン をお借りして説明します

記事を見やすく読みやすくしたい方の参考にどうぞ

ついでにちょっとしたこだわりも・・・・

はじめは・・・

■記事が周りの枠にくっつきすぎていますので余白をつけます

.entry{
padding:10px;
}

で、記事全体に余白をつけてしまうと

せっかくの日付部分の位置までずれてしまいます

ので、動かしたい部分だけで設定します

.entry .title{/*タイトルの位置*/
padding:10px 10px 0;/*上に10px、左右に10px、下は0　の余裕*/
}
.entry span.theme,
.entry .contents{/*テーマ・記事の位置*/
padding:0 10px;/*上下は0、左右は10pxの余裕*/
}

■>テーマがなんか、タイトルの横にあればいいのに　・・・リクエストにお答えして

.entry .title{/*タイトルの位置*/
padding:10px 10px 0;
}
.entry span.theme{/*テーマの位置*/
position:relative; top:-25px; left:280px;/*上に25px、左から280pxの位置に配置*/
}
.entry .contents{/*記事の位置*/
padding:0 10px;
}

※この場合は長いタイトルを使えません・・・テーマと重なってしまいます

■タイトルが長くなってもいいようにもっと動かして今度は日付の横です

テーマにリンクがありますので文字色を変えないとわかりにくくなっています

・・・で、

.entry .title{
padding:10px 10px 0;
}
.entry span.theme{
color:#ffffff;
position:relative; top:-57px; left:280px
}
.entry span.theme a:link,
.entry span.theme a:visited,
.entry span.theme a:hover{/*リンクの文字色*/
color:#ffffff;
}
.entry .contents{
padding:0 10px;
}

※文字数が1番多いテーマで位置を調整してください

■この際・・・もっと動かしてみました・・・

ここまではする必要もないと思いますが・・・

1つ1つをposition:relative;で位置を決めていけば表示の順番を逆にもできます

今回、ご協力いただいたのはだいち さまです

ありがとうございました