記事タイトルの各種調整 | リアナのカスタマイズ日記(CSS編集用デザイン)

リアナのカスタマイズ日記(CSS編集用デザイン)

アメブロ 新CSS CSS編集用デザイン 無料
カスタマイズ アメブロカスタマイズ 初心者
CSS スタイルシート デザイン
javascript jQuery


★ 記事タイトルの調整



◆ 記事タイトルの枠


① 枠を消す

/* ------------------------------------------------------- */
/* 記事タイトルの枠を消す                 */
/* ------------------------------------------------------- */
.skinArticleHeader{
border:none;
}



② 枠をつける

/* ------------------------------------------------------- */
/* 記事タイトルの枠を設定                 */
/* ------------------------------------------------------- */
.skinArticleHeader{
border-top :5px solid #ff00ff;/* 上 */
border-right :5px solid #ffff00;/* 右 */
border-bottom:5px solid #0000ff;/* 下 */
border-left :5px solid #00ffff;/* 左 */
}





◆ 記事タイトルの背景色


① 背景色

/* ------------------------------------------------------- */
/* 記事タイトルの背景色                  */
/* ------------------------------------------------------- */
.skinArticleHeader {
background-color:#ffff00;
}



◆ 記事タイトルの文字・画像の中央寄せ


① 文字・画像の中央寄

/* ------------------------------------------------------- */
/* 記事タイトルの文字・画像を中央寄せ           */
/* ------------------------------------------------------- */
.skinArticleHeader {
text-align:center;/* center→中央 left→左 right→右 */
}





◆ 記事タイトルの文字の色・大きさ・太さ


① 文字・画像の文字の色・大きさ・太さ(リンク色)

/* ------------------------------------------------------- */
/* 記事タイトルの文字の色・大きさ・太さ          */
/* ------------------------------------------------------- */
.skinArticleHeader h1,.skinArticleHeader h1 a{
color:#ff00ff !important;/* 色 */
font-size:28px !important;/* 大きさ */
font-weight:normal !important;/* bold→太い文字 normal→普通 */
}






◆ 記事タイトルの背景画像設定


 ① 画像を繰り返しない

/* ------------------------------------------------------- */
/* 記事タイトルの背景画像設定               */
/* ------------------------------------------------------- */
.skinArticleHeader{
background-image:url(画像のURL);
background-repeat:no-repeat;/* 繰り返ししない */
background-position:left top;/* 位置 */
}



 ② 画像を繰り返しする

/* ------------------------------------------------------- */
/* 記事タイトルの背景画像設定               */
/* ------------------------------------------------------- */
.skinArticleHeader {
background-image:url(画像のURL);
background-repeat:repeat;/* 繰り返しする */
background-position:left top;/* 位置 */
}



◆ 記事タイトルにワンポイント画像


① 新しい記事にマーク(叫びの例)

/* ----------------------------------------------------- */
/* ■ 新しい記事にマーク     叫び          */
/* ----------------------------------------------------- */
.newArticle .skinArticleHeader{
padding-left:25px;
background-image:url(http://stat.ameba.jp/blog/ucs/img/char/char2/254.gif) !important;
background-repeat : no-repeat;
background-position:left 30%;
border:none;
}




② 他の記事にマーク(イヒヒの例)

/* ----------------------------------------------------- */
/* ■ 他の記事にマーク      イヒヒ         */
/* ----------------------------------------------------- */
.skinArticleHeader{
padding-left:25px;
background-image:url(http://stat.ameba.jp/blog/ucs/img/char/char2/193.gif);
background-repeat : no-repeat;
background-position:left 30%;
border:none;
}





★ 追記

◆ 記事タイトル右にもワンポイント画像を配置


① 記事タイトル右にワンポイント画像

/* ------------------------------------------------------- */
/* 記事タイトル右にワンポイント画像            */
/* ------------------------------------------------------- */
.skinArticleHeader2 {
background-image: url(画像のURL);
background-position: right 30%;
background-repeat: no-repeat;
border:none;
}




◆ 記事タイトルの削除


 ① 削除する

/* ------------------------------------------------------- */
/* 記事タイトルの削除                   */
/* ------------------------------------------------------- */
.skinArticleHeader{
display:none;
}