はじめに

記事を投稿したときに新しい記事であることを識別するために「New」と表示されるとなんだかいいですよね。
当サイトでもNewと表示することを行っているのですが、このNewの表示のためにimgタグ内で指定するとなんだか手間ですね。

そこで、今回はスタイルシートの編集（CSS編集）で処理する方法を検討してみました。

HTML編集

投稿欄の先頭に以下のHTMLタグを追加します。Newの表示を消したいときは、<div class=new></div>を削除して下さい。

投稿欄

<div class=new></div>この位置から文章を書き出します。

CSS編集

CSS編集で以下のコードを追加します。素材によって、素材の大きさと表示位置を調整して下さい。

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:　　　　　　　 　左からの配置位置

位置の調整を簡単にする方法

位置の調整ってプレビューだと大変ですよね。でも、めざせマイスキン を運営されているtomoさんの以下の記事を参考に「Firefox」のプラグインである「Web Developer」を使用すると、調整が簡単に出来ます。よろしかったら、以下のアドレスを参考にして下さい。

CSSを変更しながらブラウザで確認できるツール


CSSをリアルタイムで変更し、様子を見ることができます。
上手くできたら、コピー＆ペーストでexciteのスキン編集のCSS編集へ貼り付けて下さいね。


tomoさん忙しいので、質問とかしないで下さいね。よろしくお願いします。

今日のポイント

位置の相対指定を用いて画像を投稿欄のヘッダ部分に表示しています。相対位置の指定は、position: relative 　で宣言し、その位置から相対的にtop,left,right位置を指定できます。詳しくは、とほほのWWW入門さんをご覧下さい。分かりやすく丁寧に説明されています。

とほほのWWW入門
とほほのWWW入門 スタイルシート position


• 「Firefox」のプラグインである「Web Developer」を使用すると調整がリアルタイムで出来ます。tomoさんの記事を参考にして下さいね。
  
  CSSを変更しながらブラウザで確認できるツール
  
  


• Newの画像は小さめの画像を利用するのがポイントです。大き目の画像を利用すると投稿欄の記事の部分にちょっと余分に空白が入ります。みなさんで工夫してみて下さい。


• 今回は説明のため、自分で素材を作成することにしました。素材を説明のためスクリーンショットを取り込んでブログ等でアップして公開すると、素材の加工とみなされるためです。なお、当サイトは以前からアップしてある説明用画像は素材屋さんに掲載許可を頂いて公開をしています。
  

ぽっと

記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。