2006年06月04日

文字が見え難い場合

テーマ:CSS

TOPの写真を変更したら文字が見えない!
そんな時はCSSを少しだけ弄ります


簡単な所だけしか触らないので
それだけ出来れば充分カスタムした事になるですよ



分かりやすく、一番上からコピーした物を貼り付けます

まず「デザインと機能」で右側の自分のブログを見るのラインに

「CSS」とありますのでクリックして下さい


何だか訳分からないタグが鬼のように出てきたと思います



落ち着いてシッカリ比べながらやれば簡単です




始まり

/*
-----------------------------------------------------
ameblo CSS Skin Settings
FileName: common.css
Version: 2005.08/08
Skin for: all_skin
-----------------------------------------------------
*/
form{
margin:0px;
}
.menu_frame select{
width:88%;
}
.page a{
text-align: center;
padding: 5px;
}
.page .now{
padding: 5px;
font-weight:bold;
}
.entry .contents{
line-height:1.5;
}
.entry .contents img{
margin-right:5px;
margin-left: 5px;
}
#message .contents:after,
.entry .contents:after,
#profile .contents:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#message .contents,
.entry .contents,
#profile .contents{
display: inline-table;
}
/* Hides from IE-mac \*/
* html #message .contents,
* html .entry .contents,
* html #profile .contents{height: 1%;}
#message .contents,
.entry .contents,
#profile .contents {display: block;}
/* End hide from IE-mac */


#gg_pr_text h4{
color:#666666;
font-size:12px;
padding:2px;
text-align: center;
border-top:1px dashed #666666;
border-bottom:1px dashed #666666;
}
#gg_pr_text ul{
padding:5px;
}
#gg_pr_text li{
padding:5px 0px;
list-style-type:none;
}

#woman_pr_text h4{
color:#666666;
font-size:12px;
padding:2px;
text-align: center;
border-top:1px dashed #666666;
border-bottom:1px dashed #666666;
}
#woman_pr_text ul{
padding:5px;
}
#woman_pr_text li{
padding:5px 0px;
list-style-type:none;
}
/*
-----------------------------------------------------
ameblo CSS Skin Settings
FileName: common.css
Version: 2005.08/4
Skin for: blue
-----------------------------------------------------
*/

/* ----------------------- common ----------------------- */
body#mainIndex {
margin: 0;
padding: 0;
text-align:center;
}
#frame{
text-align:left;
}
#sub_a,#sub_b,#main{
padding-top:15px;
}
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:hover {text-decoration: underline}
input,textarea{font-size:12px}
p{
margin: 0;
padding: 0;
}
img {
border: 0;
}
.menu_frame ul,
.menu_frame li,
.menu_frame dl,
.menu_frame dt,
.menu_frame dd,
#comment_module ul,
#comment_module li,
#trackback ul,
#trackback li,
#reader_list ul,
#reader_list li,
#favorite_list ul,
#favorite_list li,
#bookmark_list ul,
#bookmark_list li{
list-style-type:none;
margin: 0;
padding: 0;
}

/* ----------------------- header ----------------------- */
#header{
height:251px;
background-color: #006599;
}
#header h1,
#header h2 {
padding: 0px;
margin: 0px;
}
#header h1 {
margin-left: 10px;
padding-top: 15px;
text-decoration: none;
}
#header h2{
margin-left: 10px;
}

/* ----------------------- footArea ----------------------- */

/* ----------------------- font-information ----------------------- */
body{
color:#000000;
font-size:12px;
}
.list{
font-size:10px;
}
#header h1 a{
color:#0000FF;
font-size: 25px;
font-weight: bold;
line-height: 1.15;
}
#header h2{
color:#0000FF;
font-size:11px;
font-weight: normal;
line-height:1.15;
}
.menu_title {
color: #006599;
font-size:12px;
font-weight: bold;
}






文字を赤くした部分を見つけて下さい

そうしたら



* ----------------------- footArea ----------------------- */

/* ----------------------- font-information ----------------------- */
body{
color:#000000;
font-size:12px;
}
.list{
font-size:10px;
}
#header h1 a{
color:#0000FF;
font-size: 25px;
font-weight: bold;
line-height: 1.15;
}
#header h2{
color:#0000FF;
font-size:11px;
font-weight: normal;
line-height:1.15
;
}


ココでTOPの文字の色や大きさを変更します







* ----------------------- footArea ----------------------- */

/* ----------------------- font-information ----------------------- */
body{
color:#000000;
font-size:12px;
}
.list{
font-size:10px;
}
#header h1 a{
color:#0000FF;
font-size: 25px;
font-weight: bold;
line-height: 1.15;
}
#header h2{
color:#0000FF;
font-size:11px;
font-weight: normal;
line-height:1.15;
}



赤くした所が文字の色

青くした所が文字のサイズ


h1がタイトル
h2がサブタイトル




色はコチラから選んで頂いて数字の部分を変更するだけです→クマ

♯や ; や : を消さないようにして下さいね





変更したら保存して公開するだけΣd(゚Д゚)





お疲れ様!

いいね!した人  |  コメント(3)  |  リブログ(0)
2005年11月20日

CSS コメント欄を飾ろう

テーマ:CSS

説明はのぶさんの所で
よく見て理解して一言コメントを残してからボタン変更
コメント欄の画像を反映させて下さい→



*★*☆*★*☆*★*☆*★*☆*★*☆*★*☆*★*☆*★*☆*★*☆*★*
コメント欄 urlを入れると画像が出る

#comment_module .comment_footer a {
background-image : url(画像のアドレス) ;
background-position : right center ;
background-repeat : no-repeat ;
padding : 10px 45px 8px 0px ;
margin : 0px ;


赤文字の部分
padding : 17px 20px 8px 0px ;
左から   上   右  下  左

数字を大きくしたり、小さくして調整してください

上のタグはやっちん本館で表示させているヤツのコピー



*★*☆*★*☆*★*☆*★*☆*★*☆*★*☆*★*☆*★*☆*★*☆*★*

コメント欄に画像を入れる

#readerList img {
visibility : hidden ;
width : 150px ;
height : 32px ;
}
#readerList dl a , #readerList dl a:link {
background-repeat : no-repeat ;
background-image : url(画像のURL) ;
font-size : 35px ;
}



*★*☆*★*☆*★*☆*★*☆*★*☆*★*☆*★*☆*★*☆*★*☆*★*

読者登録ボタンの変更

#readerList img {
visibility : hidden ;
width : 150px ;
height : 32px ;
}
#readerList dl a , #readerList dl a:link {
background-repeat : no-repeat ;
background-image : url(画像のURL) ;
font-size : 35px ;
}

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

AD

Ameba人気のブログ

Amebaトピックス

      ブログをはじめる

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

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

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

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

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