投稿欄にNewの表示を パート2
はじめに
当サイトでもNewと表示することを行っているのですが、このNewの表示のためにimgタグ内で指定するとなんだか手間ですね。
そこで、今回はスタイルシートの編集(CSS編集)で処理する方法を検討してみました。

HTML編集
投稿欄の先頭に以下のHTMLタグを追加します。Newの表示を消したいときは、<div class=new></div>を削除して下さい。
CSS編集
div.new{
background-image:url(イメージURLアドレス);
background-repeat:no-repeat;
/*イメージの大きさ*/
height:21px;/*イメージ高さ*/
width:34px; /*イメージ幅*/
/*イメージ表示位置*/
position: relative;
top: -55px; /*相対位置で上に-55pxずらす*/
left: -30px; /*相対位置で左に-30pxずらす*/
margin:0;
padding:0;
}
~参考までに~
position: relative 相対位置
top: 上からの配置位置
left: 左からの配置位置
位置の調整を簡単にする方法
CSSを変更しながらブラウザで確認できるツール

CSSをリアルタイムで変更し、様子を見ることができます。
上手くできたら、コピー&ペーストでexciteのスキン編集のCSS編集へ貼り付けて下さいね。
tomoさん忙しいので、質問とかしないで下さいね。よろしくお願いします。

- 位置の相対指定を用いて画像を投稿欄のヘッダ部分に表示しています。相対位置の指定は、position: relative で宣言し、その位置から相対的にtop,left,right位置を指定できます。詳しくは、とほほのWWW入門さんをご覧下さい。分かりやすく丁寧に説明されています。
- 「Firefox」のプラグインである「Web Developer」を使用すると調整がリアルタイムで出来ます。tomoさんの記事を参考にして下さいね。
CSSを変更しながらブラウザで確認できるツール
- Newの画像は小さめの画像を利用するのがポイントです。大き目の画像を利用すると投稿欄の記事の部分にちょっと余分に空白が入ります。みなさんで工夫してみて下さい。
- 今回は説明のため、自分で素材を作成することにしました。素材を説明のためスクリーンショットを取り込んでブログ等でアップして公開すると、素材の加工とみなされるためです。なお、当サイトは以前からアップしてある説明用画像は素材屋さんに掲載許可を頂いて公開をしています。
とほほのWWW入門
とほほのWWW入門 スタイルシート position