人気ブログランキング | 話題のタグを見る
TOTAL YESTERDAY TODAY
名刺交換ブログトップ
2005年 11月 28日
タイトル: カレンダー全体の背景に画像を表示。
また、ありがたいリクエストをもらったので、張り切って記事書いてみます。
今回は、カレンダー全体の背景に画像を表示するというものでして、やることは今日の日付に画像を表示するのとほとんど変わりありません。

それでは、さっそく説明に入りたいと思います。
CSS部から以下の部分を見つけてください。

DIV.CAL_BODY
{
WIDTH : 166PX;
PADDING : 12PX;
FONT-SIZE : 8PT;
FONT-FAMILY : VERDANA;
TEXT-ALIGN : CENTER;
BACKGROUND : #FFF;
}


今回はここに背景画像を載せてあげれば大丈夫です。

編集すると以下のようになります。

DIV.CAL_BODY {
background-image : url();
WIDTH : 166PX;
PADDING : 12PX;
FONT-SIZE : 8PT;
FONT-FAMILY : VERDANA;
TEXT-ALIGN : CENTER;
}


BACKGROUND : #FFF;というのがありませんが、これがあるとやはり画像が表示されません。

さらに今回は、もう一つ編集する所があります。それは以下の部分です。

.CAL_TR {BACKGROUND : #FFF;}


ここのBACKGROUND : #FFF;も省いてあげてください。
.CALが付いている所にあるBACKGROUND : #FFF(任意)はすべて消してください。

これは、皆さんがどのスキンを使っているか分からないので正確には書けないためです。

ちなみに僕が使っているスキンでは、.CAL_TRと.CAL_BODYと.CAL_TODAYにありました。

カレンダー全体の背景に画像を表示。_e0050854_2036656.jpg実際にやってみるとこういう感じになりました。
# by butyo_1280 | 2005-11-28 20:29 | カレンダー関係
2005年 11月 28日
タイトル: カレンダーの今日の日付に画像を表示。
カレンダーの今日の日付に画像を表示させたいとのリクエストがありましたので早速記事にしてみました。

やることはいたって簡単です。まず、CSS部分から以下を見つけてください。

.CAL_TODAY
{
FONT-FAMILY : VERDANA, ;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
BACKGROUND : #EEEFEF;
COLOR : #3D5586;
TEXT-ALIGN : CENTER;
}


これを、以下のように変更するだけです。

.CAL_TODAY
{
background-image : url(画像のURL);
background-repeat : no-repeat;

FONT-FAMILY : VERDANA, ;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
COLOR : #3D5586;
TEXT-ALIGN : CENTER;
}


前者に書いていたBACKGROUND : #EEEFEF;というのは消しておいてください。(僕が思うに、背景画像よりも、背景色の方が優先されてしまうからだと思います。)僕のブログスキンではBACKGROUND : #EEEFEF;があると画像が表示されませんでした。

カレンダーの今日の日付に画像を表示。_e0050854_12161170.gifこんな感じになると思います。
# by butyo_1280 | 2005-11-28 12:16 | カレンダー関係
2005年 11月 22日
タイトル: 目次:スキン編集。
┏記事関係
記事の日付の設置。
記事の日付とタイトルを中央寄せ。
記事の自分のIDの色を変更。
記事のタイトルの色を変換。
記事内のリンク部分の装飾。
記事のby~部分の変更。
記事の文章をデフォルトで中央寄せにする。
引用部分の装飾。

┏コメント関係
コメント部分のスキン編集。
コメントを一人一人区切る。
コメント部分の文字色を変更。
広いコメント欄。
コメント送信ボタンの装飾。

┏メニュー関係
プルダウンメニュー。
メモ帳、もう一ついかがですか?
サイドメニューの文字列を中央に寄せる。
スクロールさせてすっきり!


┏画像関係
背景を透過。
カレンダーの今日の日付の所に画像を表示。
壁紙の応用。
壁紙を右下に固定。

┏その他
Moreボタン。
文字をスクロール。
マーカーの作り方。
スキンのプレビュー。
ブログペット設置。
画像をボタンとして使う。
リンクや画像にコメントを付加させる。
リンクの装飾。
メールリンクのやり方。
画像容量が30MB→1GBに!!
無理矢理、アクセス解析設置。
無理矢理、カウンタ設置。
アクセスランキング設置(簡易版)。

HTMLとCSSの文法などが知りたい時はHTMLクイックリファレンスをご活用ください。

何か分からないこと、要望などありましたら是非コメントください。ご希望に添えれるように努力したいと思います。
# by butyo_1280 | 2005-11-22 20:36
2005年 11月 14日
タイトル: 記事の日付とタイトルを中央寄せ。
今回、彼女さんのブログのスキンをいじっていて、記事の日付とタイトルを中央に寄せるということが出来ましたので、皆さんにもお知らせしたいと思います。
それでは早速説明に入りたいと思います。

今回、記事が長くなりましたので、記事内にリンクを貼っています。ご活用ください。

記事のタイトル部分を中央寄せ。
記事の日付部分を中央寄せ。

タイトル部分。
まず、HTML編集の領域を本文に合わせてください。
そして、次に↓の部分が見つけられるかと思います。(もしかしたら若干違うかもしれません)

<tr><td width="80%"><$postsubject$></td>
<td width="20%" align="right"><$postadmin type=1$></td></tr>


たぶん、初期の状態だとタイトルの日付の色とかは自分でいじれないようになっているかと思います。記事の日付の設定はは<$postsubject$>というタグに入っています。そこでこれにこのように付け加えてください。

<DIV CLASS=POST_TTL><$postsubject$></DIV>


すると、これで自分で記事の日付などをいじれるようになります。
CSSにも同じ用に↓がありますので、この中身を変えると記事の日付部分を自由に変更することが出来ます。

DIV.MNTTL
{
TEXT-ALIGN : CENTER;
WIDTH : 150PX;
BORDER-BOTTOM : 1PX #AAA SOLID;
PADDING : 2PX 0PX 0PX;
MARGIN : 25PX 0PX 10PX;
}


中央寄せにしたいので、TEXT-ALIGN : CENTER;を追加しました。

これでOK!!と思った人がいるかもしませんが、実際に保存してみて見てみるとおかしくなっているのに気づくと思います。そうです、ちゃんと中央に寄っていないのです。それはなぜかというと、HTMLがわかる方は気づくかもしれませんが、ここではそれには詳しく入りません^^;;それを語っていると記事が長くなりまくりなので(すでに長すぎというのは禁句です。)

<tr><td width="80%"><$postsubject$></td>
<td width="20%" align="right"><$postadmin type=1$></td></tr>


さっき見つけた↑のタグを↓の様に変更してみてください。するとうまくいくはずです。

<DIV CLASS=POST_TTL><$postsubject$></DIV>
<div align="right">$postadmin type=1$></div>
</tr>


日付部分。
次に、記事の日付部分を中央寄せにしたいと思います。
やはり、タイトルの時と同じようにHTMLの変更領域を本文に設定してください。
すると↓の様な所が見つかると思います。

<DIV CLASS=POST_TOP><$postdate$></DIV>


記事の日付は<$postdate$>の部分ってのがわかりますね。
そして、その設定は、<DIV CLASS=POST_TOP>~</DIV>で行われているのがわかるかと思います。CSSに同じく↓のがあると思います。

DIV.POST_TOP
{
TEXT-ALIGN : CENTER;
BORDER : 1PX SOLID #D0D0CC;
PADDING : 2PX 15PX 1PX;
MARGIN-BOTTOM : 5PX;
FONT-FAMILY : VERDANA;
LETTER-SPACING : 2PX;
COLOR : #727272;
}


中央寄せにしたいので、TEXT-ALIGN : CENTER;を追加しました。

かなり長くなってしまいましたが、またわかりにくいところがありましたらコメントにお書きください^^;;

※HTMLやCSSを大きく変更する場合はテキストファイルなどにバックアップを取っておいたほうが後々良いかと思います。
# by butyo_1280 | 2005-11-14 14:13 | 記事関係
2005年 10月 23日
タイトル: Moreボタン。
リクエストがありましたので、Moreボタンについてちょっと書きたいと思います。

あまりにも長い記事などを書きたいけど、全体があまりに長くなりすぎてみづらくなってしまうっていう時もありますよね。

とりえあず、僕もMoreボタンをつかってそこで画像を使って説明したいと思います。

画像で説明。
# by butyo_1280 | 2005-10-23 01:03 | その他


S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
        
Banner
チカさん作
↓画像提供↓
HEAVEN'S GARDENさん         
by butyo_1280