CSS 新しい記事にNEW!マークをつけちゃおう
新しい記事が目立つようにNEW!をつけてみませんか？(記事公開から24時間)
まずはＮＥＷ！の画像を用意します
・・・・Yahooとかで「素材 NEW」って検索すればいっぱい出てきます
別に目立てばいいので
アメブロについている絵文字でもＯＫです
← アメブロの絵文字の中からこれなんかで試してみます
http://stat.ameba.jp/blog/ucs/img/char/char2/173.gif 16×16
オーソドックスにhttp://stat.ameba.jp/blog/ucs/img/char/char2/265.gif
いつものようにCSSの最後にコピペ
/* 新しい記事のタイトルにNEW! */
.new h3.title{
padding-left:25px;/* ←画像の横幅+タイトルまでの余裕 */
background-image:url(画像のＵＲＬ);
background-repeat : no-repeat;
}
＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋
↓このようになります
新しい記事にＮＥＷ！マークをつけて目立たせよう
テーマ：ブログ新しい記事にＮＥＷ！マークをつけて目立たせよう
24時間で普通の表示になります＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋
また、タイトルの色も変えちゃえ～って方は
color:#666666;/* 文字の色 */
を、中に追加してください（#666666はグレーです変更してください）
文字のサイズは・・他とのバランスがあるから・・・・変更しない方がいいのでは
注意！ すでにタイトル等にＣＳＳで設定をされている場合（.entry h3.title｛・・・・・}）は
そのＣＳＳより後ろにコピペしてください・・・・・・
前に書きますと後にある.entry h3.title｛・・・・・}が優先されるので表示されません
コレを利用すれば
日付の部分、記事の文章、記事の背景・・・さわれる部分はたくさんあります・・・
アイデア次第で・・・・・う～ん？頭痛いからあとは考えてくださいな
※ここで変更したスタイルは記事公開後24時間たつと自動で元に戻ります
※アメブロによって記事にnawが付いているときのみ（公開から24時間）適用になります
※NEWマークが付くタイミングはアメブロ側のnewを利用していますので自由にはなりません
普段の記事タイトルにも1ポイント付ける場合は
/* 記事のタイトル前に1ポイント! */
.entry h3.title{
padding-left:25px;/* ←画像の横幅+タイトルまでの余裕 */
background-image:url(1ポイント画像のＵＲＬ);
background-repeat : no-repeat;
}
私のように普段の記事タイトルに背景を付ける場合は
/* 記事のタイトルに背景画像 */
.entry h3.title{
background-image:url(画像のＵＲＬ);
background-repeat : no-repeat;
}
タイトルの背景ですのでpadding-leftは使いませんが
背景画像によってはタイトルとの位置調整でpaddingが必要になる場合もあります
私のとこではすでに記事タイトルに背景画像を使っていましたので
2種類の背景画像を作って入れ替えているだけです
↓普段用の記事タイトルバック
↓新しい記事のタイトルバック
今日も頭がガン！ガン！するんで休んでしまいました・・・・
なんで体調の悪い時にヘンなこと？思いついちゃうんでしょ？だから風邪がなおらないんだ！！
あ！・た！・ま！・い～った～！！
※携帯でいつまでもNEWマークが付いている方・・・
ブラウザーをリロード（更新）して下さい
24時間で消えているはずです
パケット代を節約のために前に見たキャッシュに残っているブログを表示していると思われます
パケット代を気にする方はそのまま、気にしない方はリロード（更新）
2008.5.10