「NEW」表示をカスタマイズ

So-net blogネタです。(^^;)

「読んでいるブログ」のNEWを変えてみましたのでご紹介します。
ただシロウト的カスタムなので参考程度でお願いします。（笑）
青色部分が変更前、赤色部分が変更後です。


★文字色を変える（例：初期色から青色に）

①「デザイン」→「テンプレート管理」→「タイトル」
　 →「スタイルシート編集」

⁄*-----Side-----*⁄
・・・・・
・・・・・
.new {
margin-left:6px;
color:#f00;
font-weight:bold;
}
⇓
.new {
margin-left:6px;
color:#0000FF;
font-weight:bold;
}


★文字を変える（例：NEWをnewに）

①「スタイルシート編集」は変更なし。
　※色も変える場合は上記を参考に変更してください。

②「デザイン」→「レイアウト」→「読んでいるブログ（RSS）」
　 →「コンテンツHTML編集」

<a target="_blank" href="<% rss.site_url | html %>">
<% rss.title | html %></a>
<% rss.last_update | date_format('%m/%d') %>
<% if:rss.is_new %>
<span class="new">NEW</span><% /if %>
⇓
<a target="_blank" href="<% rss.site_url | html %>">
<% rss.title | html %></a>
<% rss.last_update | date_format('%m/%d') %>
<% if:rss.is_new %>
<span class="new">new</span><% /if %>


★画像に変える

①使う画像をファイルに保存しておく。
　※素材屋さんからお借りする場合は
　 　 作者さんの「お約束」を守ってくださいね。

②「デザイン」→「テンプレート管理」→「タイトル」
　→「スタイルシート編集」

⁄*-----Side-----*⁄
・・・・・
・・・・・
.new {
margin-left:6px;
color:#f00;
font-weight:bold;
}
⇓
.new {
margin-left:6px;
background:url("/_images/blog/_99b/（ブログ名）/（ファイル名.gif）") no-repeat;
}
※ファイルをクリックしたら自動で書かれました。

③「デザイン」→「レイアウト」→「読んでいるブログ（RSS）」
　→「コンテンツHTML編集」

<a target="_blank" href="<% rss.site_url | html %>">
<% rss.title | html %></a>
<% rss.last_update | date_format('%m/%d') %>
<% if:rss.is_new %>
<span class="new">NEW</span><% /if %>
⇓
<a target="_blank" href="<% rss.site_url | html %>">
<% rss.title | html %></a>
<% rss.last_update | date_format('%m/%d') %>
<% if:rss.is_new %>
<img src="/_images/blog/_99b/（ブログ名）/（ファイル名.gif）" width="22" height="13" border="0" align="" alt="（ファイル名.gif）" /> <% /if %>
※ファイルをクリックしたら自動で書かれました。

コメント

時間がなかったのでささっとやってみましたが残念でした(ーー;)
画像に変える…を挑戦したく、私も1キロバイトの素材屋さんの画像を保存してありますが、
<span class="new">NEW</span>
は削除して、画像をその部分にのせるんですよね？
画像の英数字はクリックするとなみへいさんの赤字部分と違って長い英数字が出ますが、消す部分はないですよね。。。
スタイルシート編集では
.new {
margin-left:6px;の後に同じく画像をクリックしました。
color:#f00; font-weight:bold;は消すのかな？両方試したけど、NEWの部分は出ません。。。
スキンが違うからかﾅｧーーー。謎です。。。
なみへいさんのは綺麗にできてますね～
前に自分も挑戦したときは画像とNEWの文字が重なってしまって、背景が白ならNEWの文字を白にしたら解決出来そうだったんですけど。。。
NEWって消すこと出来るのかな。。。
by usaco (2009-04-30 15:13) 

>usacoさま

タグに記入もれがあったので読みにくくなって
ませんでしたか？
すみません・・・先ほど直しました[汗汗]

><span class="new">NEW</span>は
>削除して、画像をその部分にのせるんですよね？
>画像の英数字はクリックするとなみへいさんの
>赤字部分と違って長い英数字が出ますが、
>消す部分はないですよね。。。

削除して画像をクリックすると、自動的にソースが
書き込まれますよね？ファイルによって中身は違うと
思いますので、そのままでOKです。

>スタイルシート編集では
>.new {
>margin-left:6px;の後に同じく画像をクリックしました。
>color:#f00; font-weight:bold;は消すのかな？

削除して画像クリックでOKです。
これで文字が重ならず、画像のみが表示されるように
なったのですが・・・。
別のブログでも試してみますね。
by なみへい (2009-04-30 16:07) 

なんとか出来ました。
なみへいさんに感謝ですヽ(^。^)ノ

私はスタイルシートの方は何も変えなくても出来ました。変えても出来ます。

後、『読んでるブログ』のコンテンツHTML編集で、なみへいさんの表記と微妙に違うのが気になりました。

因みに私のは

<a target="_blank" href="<% rss.site_url | html %>"><% rss.title | html %></a> <% rss.last_update | date_format('%m/%d') %><% if:rss.is_new %><span class="new">NEW</span><% /if %>

です。
この中の
<span class="new">NEW</span>を削除して

そこに画像クリックして出来ました。
以前、私はこのNEWを消していただけなので、ダメだったんですね(ーー;)ﾑｽﾞｶｼｲ。。。

因みに背景も何とか変えてみました～。。。


by usaco (2009-04-30 23:27) 

>usacoさま

上手くいってヨカッタです[__るんるん]
うさちゃんでいっぱいになりましたネ。
背景が変わると雰囲気変わりますね。
グーですよ～[ぴかぴか]

スタイルシートを変えなくても大丈夫でしたか？
私もまたやってみます。
あとご指摘の表記ですが…「★画像に変える」の方違ってますね[汗汗]
教えていただきありがとうございます[ニコニコ]

実は記事にソースをコピペしたらソースが表示されず、
画像が表示されてしまうので悪戦苦闘してました[汗汗]

by なみへい (2009-05-01 00:58) 

初めまして！
new表示を変更させるのを、利用させて頂きました　[__ぴかぴか]
ありがとうございます　[__るんるん]
by mam♪ (2010-04-28 22:06) 

⇒ mam♪さんへ

初めまして♪
お役に立ててよかったです。

私も以前はカスタマイズにハマり、ブログを書くことより
そっちに重点を置いていたこともありました（笑）
カスタムも楽しんでみてくださいネ[__るんるん]
by なみへい (2010-04-30 00:04)