「ほっ」と。キャンペーン
 

カテゴリ:│├カレンダー( 4 )

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

カレンダーの表示位置を変更する方法について


カレンダーは3列スキンだと左のロゴの下に表示されますね。このカレンダーの位置を変えたいと思うと図1のメニュー管理では出来ないのはご存知だと思います。
このカレンダーを右上に表示する方法についてご説明します。(各メニューの間には入れられません。)



a0031863_23422855.gif

図1 メニュー管理



HTML編集


まずHTML編集で<$calendar type=1$>を探します。この<$calendar type=1$>タグはカレンダーを表示するためのタグです。このタグを移動することにより右に移動できます。まずこのタグを切り取ります。



HTML変更部分
<DIV CLASS=PROFILE>
<CENTER><$logoimage type=1$></CENTER>
<$description$>
<$nick$>
</DIV>
<$calendar type=1$> <!- ←この部分を切り取る --->
<$menuleft$>
</TD>



次にカレンダーを右のメニューの上に表示するため、<$menuright$>を探します。(下の方です)この<$menuright$>の上に<$calendar type=1$> を追加します。
なお、<$menuright$>は右側のメニューを表示するタグです。



HTML追加部分

<DIV CLASS=PROFILE>
<DIV class=MNTTL_R>カレンダー</div>
<$calendar type=1$> <!- ←タグを追加 --->
<$menuright$>
<$banner type=1$>
<$xml$>



設置例


以上の手続きでカレンダーが右上に表示されたと思います。

a0031863_0124372.gif

図2 設置例


今日のポイント

  • <$calendar type=1$>タグがカレンダーのタグになります。
  • カレンダーが表示されない方は、ブログ設定のカレンダー公開設定を公開に設定して下さい。

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-02-13 23:41 | │├カレンダー | Trackback | Comments(0)
 

カレンダーのバックグランドにアイコンを表示する


前回の続きです、カレンダーのバックグランドにアイコンを表示する方法です。

めざせマイスキンを運営しているtomoさんのCSS編集 序2 模索編を参考にしてカレンダーのバックグランドにアイコンを表示してみました。
tomoさんのCSSの解説は非常に分かりやすいので参考になります。



カレンダーのバックグランドイメージの表示2


CSS編集で、DIV.CAL_BODY を探してみてください。この部分に画像を追加します。


a0031863_20182317.jpg

図1 アイコンの設置例



DIV.CAL_BODY {


WIDTH: 150PX;
TEXT-ALIGN: CENTER;

  /*------- ここから追加 ---------*/

background-image:url(イメージURL);
background-repeat:no-repeat;
background-position:bottom;

  /*------- ここまで ---------*/


}

図2 CSS設置コード(アイコン版)




今日のポイント
  • background-repeat:no-repeat;でイメージが複数表示されないようにしています。



素材はとんとん工房さんからお借りしています。
リンクウエアなのでご使用の際にはリンクをお願いします。

ぽっと

CopyRight(C) 2004 All rights reserved by potto37
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-09-08 19:39 | │├カレンダー | Trackback(2) | Comments(33)
 

カレンダーのバックグランドにイメージを表示する


めざせマイスキンを運営しているtomoさんのCSS編集 序2 模索編を参考にしてカレンダーのバックグランドにイメージを表示してみました。
tomoさんのCSSの解説は非常に分かりやすいので参考になります。



カレンダーのバックグランドイメージの表示


CSS編集で、DIV.CAL_BODY を探してみてください。この部分に画像を追加します。


a0031863_19243783.jpg

図1 設置例


DIV.CAL_BODY {


WIDTH: 150PX;
TEXT-ALIGN: CENTER;

  /*------- ここから追加 ---------*/

background-image:url(イメージファイル名);
background-repeat:repeat-x;
background-position:bottom;

  /*------- ここまで ---------*/


}
図2 CSS設置コード


今日のポイント
  • 今回選んだイメージが下に配置して表示する画像のため、 background-position:bottom;を指定し、X方向(横方)に画像が並ぶように background-repeat:repeat-x;で指定しています。




素材はとんとん工房さんからお借りしています。リンクウエアなのでご使用の際にはリンクをお願いします。

ぽっと

CopyRight(C) 2004 All rights reserved by potto37



追記
ブログの玉手箱さんのところで可愛い設置例とコードがあります。可愛いので是非見てください。

2004年9月9日
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-09-08 19:22 | │├カレンダー | Trackback(7) | Comments(13)
 

カレンダーの今日の日付けにイメージを


a0031863_6321535.jpgカレンダーの今日の日付にイメージを設置してみました。小さなイメージを設置することがポイントのようです。






         図1 設置例


設置方法


CSS編集で、DIV.CAL_TODAY を探してみてください。この部分に画像を追加します。


.CAL_TODAY{

FONT: BOLD 7PT/170% VERDANA;
/*BACKGROUND: #E3E3E3; */ /*←削除します。*/
TEXT-ALIGN: CENTER top;

/*-------ここから追加---------*/

background-image:url(イメージファイル名);
background-position:center bottom;
background-repeat:no-repeat;

/*------- ここまで ---------*/

}

.CAL{

FONT: 7PT/170% VERDANA;
TEXT-ALIGN: CENTER;

/*-------ここから追加---------*/

height:20px; /*イメージが収まるようにの高さを調整*/

/*------- ここまで ---------*/

}

イメージがすこし大きすぎて入らない場合は縦方向に伸ばすことができます。
図2 CSS編集部分




今日のポイント
  • background-imageで表示するイメージファイルを指定します。
  • background-position:center bottom ;で横方向を中央、上下方向をした側に設定しています。
  • background-repeat:no-repeat;でイメージを1つだけ表示します。
  • イメージが収まるように、.CALに height:20px;を指定して縦方向を少しのばしました。
  • BACKGROUNDをコメントアウトして、バックグランドの色塗りを取りやめてイメージを見やすくしました。



追伸:投稿欄横に受付の猫ちゃんがいます(^_-)-☆




ぽっと



CopyRight(C) 2004 All rights reserved by potto37
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-08-16 06:30 | │├カレンダー | Trackback(7) | Comments(21)
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。