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

ブログ画像一覧を見る

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

<< 前のページへ最新 | 126 | 127 | 128 | 129 | 130 | 最初次のページへ >>

ＣＳＳコメント欄をなんとかしちゃおう　17！

2カラム用・・・　オフセット素材です

見本は・・・　こちらを・・

こんな画像を用意します・・・・・

ゲストさま用

管理人用

※上・中・下どの画像も横幅は550pxです

自分で画像を作るときは真ん中（下も）の画像の右（左）を透過することで上の画像の右（左）につけている画像を大きな物にすることが出来ます・・・

コメントが1行の場合でもうまく表示できるようにしてください

ＣＳＳの最後に・・・・

/* ゲストコメント　*/
#comment_module .each_comment{/*コメントタイトル部分*/
margin: 0;
padding-bottom:15px;/*コメントとコメントの間Ａ*/
background: url(画像のＵＲＬ);/*上画像のURL*/
background-repeat : no-repeat;
background-position: center top;
color:　#00008b;/*←ゲストコメント文字色変更の場合*/
}
#comment_module .comment_body{/*コメント文章部分*/
margin: 0;
padding:10px 130px 10px 30px;/*コメント分の上と左右と下の余裕　ＢＣＤＥ*/
background: url(画像のＵＲＬ);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .comment_footer{/*コメントフッター部分*/
margin:0;
padding: 10px 0 30px;/*Ｆ 0 Ｇ*/
background: url(画像のＵＲＬ);/*下画像のURL*/
background-repeat : no-repeat;
background-position: center bottom;
}
#comment_module .label{/*コメントタイトル*/
font-weight: bold;
font-size:12px;
padding:40px 0 5px 30px;/*Ｈ 0 ＩＪ*/
color: #333333;/*←ゲストコメントタイトル文字色変更の場合*/
}
.comment_footer span.comment_author{/*名前の表示位置*/
padding-left: 40px;/*左からの位置Ｋ*/
}
.comment_footer span.comment_date{/*日付*/
padding-left:10px;
}
#comment_module .comment_footer{/*フッタ上の点線を消す*/
border-top:none;
}

/*　管理人コメント*/
#comment_module .admin_comment{
margin: 0;
padding-bottom:15px;/*コメントとコメントの間・・ゲストと同じに*/
background: url(画像のＵＲＬ);/*上画像のURL*/
background-repeat : no-repeat;
background-position: center top;
color: #00008b;/*←管理人コメント文字色変更の場合*/
}
#comment_module .admin_comment .comment_body{
margin: 0;
padding:10px 30px 10px 130px;/*コメント分の上と左右と下の余裕ＬＭ*/
background: url(画像のＵＲＬ);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .admin_comment .comment_footer{
margin:0;
padding: 10px 0 30px;
background: url(画像のＵＲＬ);/*下画像のURL*/
background-repeat : no-repeat;
background-position: center bottom;
}
#comment_module .admin_comment .label{/*コメントタイトル*/
color: #333333;/*←管理人コメントタイトル文字色変更の場合*/
padding-left : 130px;/*左からの位置Ｎ*/
}
#comment_module .admin_comment .comment_author {/*名前の表示位置*/
padding-left : 200px;/*左からの位置Ｏ*/
}

ベーシックスキンの場合はJEKCNMOLの数字を増やす必要があります緑の部分を+20してください

コメントを分けるためには・・・

新・自分のコメントを "もっと"わかりやすく

http://ameblo.jp/exlink/entry-10206589486.html

これがフリープラグインに入っている必要があります

気持ちが悪いです・・

金曜日に・・・　おでんの素を安売りしていたんです

おまけに半額になった練り物のパックも手に入れて・・・

で・・・

土曜日に朝からおでん作り

オイスターソースでおでんが定番になっていましたので

おでんの素なんて使っておでんを作るのはすっごく久しぶり・・・

調子に乗って12皿分（2リッター）も作っちゃいました

昨日も・・・・

今日も・・・

気持ちが悪くなるくらいお腹いっぱい食べましたが・・・

（ブロッコリーと白菜が煮崩れてバラバラになっちゃっていますので・・写真写りは良くないですね・・・・）

全然減りません・・・・

もう・・見るのもつらいです・・

味的には・・ちゃんと書いてあった分量通り作ったのですが・・・

あんまり・・・　　・・　　　・

気持ちがわる～

今日も胃薬飲まなきゃ・・・・

ＣＳＳコメント欄をなんとかしちゃおう　16？

リクです・・・

コメントをゲストさまと管理人で分けるためには

新・自分のコメントを "もっと"わかりやすく

http://ameblo.jp/exlink/entry-10206589486.html

これがフリープラグインに入っている必要があります

画像を自分の画像フォルダーにアップしてから・・

CSSの最後に・・・

/* ゲストコメント　*/
#comment_module .each_comment{/*コメントタイトル部分*/
margin: 0;
padding-bottom:15px;/*コメントとコメントの間*/
background: url(画像のURL);/*上画像のURL*/
background-repeat : no-repeat;
background-position: center top;
color:　#00008b;/*←ゲストコメント文字色変更の場合*/
}
#comment_module .comment_body{/*コメント文章部分*/
margin: 0;
padding:10px 30px;/*コメント分の上と左右と下の余裕*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .comment_footer{/*コメントフッター部分*/
margin:0;
padding: 10px 0 30px;
background: url(画像のURL);/*下画像のURL*/
background-repeat : no-repeat;
background-position: center bottom;
}
#comment_module .label{/*コメントタイトル*/
font-weight: bold;
font-size:12px;
padding:40px 0 5px 30px;
color: #333333;/*←ゲストコメントタイトル文字色変更の場合*/
}
.comment_footer span.comment_author{/*名前の表示位置*/
padding-left: 40px;/*左からの位置*/
}
.comment_footer span.comment_date{/*日付*/
padding-left:10px;
}
#comment_module .comment_footer{/*フッタ上の点線を消す*/
border-top:none;
}

/*　管理人コメント*/
#comment_module .admin_comment{
margin: 0;
padding-bottom:15px;/*コメントとコメントの間・・ゲストと同じに*/
background: url(画像のURL);/*上画像のURL*/
background-repeat : no-repeat;
background-position: center top;
color: #00008b;/*←管理人コメント文字色変更の場合*/
}
#comment_module .admin_comment .comment_body{
margin: 0;
padding:10px 30px;/*コメント分の上と左右と下の余裕　ゲストと同じに*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .admin_comment .comment_footer{
margin:0;
padding: 10px 0 30px;
background: url(画像のURL);/*下画像のURL*/
background-repeat : no-repeat;
background-position: center bottom;
}
#comment_module .admin_comment .label{/*コメントタイトル*/
color: #333333;/*←管理人コメントタイトル文字色変更の場合*/
}
#comment_module .admin_comment .comment_author {/*名前の表示位置*/
padding-left : 65px;/*左からの位置*/
}