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

ブログ画像一覧を見る

このブログをフォローする

<< 前のページへ最新 | 270 | 271 | 272 | 273 | 274 | 最初次のページへ >>

オリジナルスキンCSSの編集　記事枠（画像）2

今回は画像を上下２枚を使って記事の背景に使います

まずは２枚の画像を用意します

そのときに日付、記事タイトル、テーマ、フッターをどのあたりに配置するかも想像しながら画像を探したり作成したりします

↑・・・素材サイトの見本では上下逆でしたが、こちらの方がうまく配置できそうなので逆に使ってみます

ダウンロードしてから画像編集ソフトを使って横幅をあわせます

今回は３カラムですので記事幅は400pxです

少し余裕を持って398pxに縮小をしてから（高さは気にしなくてかまいません）

ブログの画像フォルダーにアップして画像のURLと画像の高さを調べておきます

※素材サイトによっては加工を禁止している場合があります

　その素材サイトの利用規約を確認してください

それではＣＳＳの編集に入ります

※必ず現在のＣＳＳの退避をとってから作業してください

今回の説明はスタンダードのグレイ・ピーチ・グリーン・ブルーのスキンの場合です

ＣＳＳの編集で下の部分を探して

赤字部分を削除するか

青字部分　/* と　*/ を加えてこの部分のＣＳＳを無効にします

/* ---------- entry : 各記事枠 ---------------- */
/*
.entry{
width:99%;
margin-bottom:20px;
}
.entry .date{
width:99%;
background-color:#F5F5F5;
padding:5px 0 2px 5px;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
display:block;
color:#000000;
}
.entry .name{
margin-top:5px;
display:block;
}
.entry .theme{
margin-bottom:10px;
display:block;
}
.title{
margin-top:10px;
margin-bottom:10px;
}
.entry .contents{
margin-top:15px;
margin-bottom:15px;
}
.entry .foot{
text-align:right;
padding:5px 20px 5px 0;
border-top:1px dashed #000000;
}
*/
/* ---------- page : ページリンク ------------- */

こんなんなっちゃいましたが・・・・・　　　不安です

下記図を参考にサイズをあわせてからＣＳＳの最後に貼り付けてください

.entry{
width: 100%;
margin-bottom: 20px;/* Ａ */

}
.entry .entry_head{
padding:0;
height:80px;/* 画像の高さＢ */
background: url(画像のURL);
background-repeat: no-repeat;
background-position: left top;
}
.entry .date{
display: block;
padding: 30px 0 0 220px;/* Ｃ */
color: #6F706E;
}
.title{
padding:0 20px;/* Ｄ */
}
.entry .theme{
display: block;
padding:0px 0px 10px 20px;/* Ｅ */
}
.entry .contents{
margin: 0;
padding:10px 20px 20px ;/* Ｆ */
}
.entry .foot{
width: 100%;
text-align: left;
padding: 10px 30px 35px;/* Ｇ */
background-image: url(画像のURL);
background-repeat: no-repeat;
background-position: left bottom;
}