TOTAL YESTERDAY TODAY
名刺交換ブログトップ
タイトル: カテゴリ:記事関係( 8 )
2006年 05月 24日
タイトル: 記事の文章をデフォルトで中央寄せにする。
以前コメントでいただいた記事の文章を中央寄せにする方法を説明します。

DIV.POST_BODY_SUB
{
WIDTH : 490PX;
OVERFLOW : HIDDEN;
text-align : center;
}


↑のDIV.POST_BODY_SUB がCSS内にある方はブルーの物を追加してください。

CSS内にDIV.POST_BODY_SUB が無い方はとりあえず↓のものを追加してください。

DIV.POST_BODY_SUB
{
OVERFLOW : HIDDEN;
text-align : center;
}


それでは、次にHTML内の編集をします。

HTMLの本文のところで、<$postcont$>っていうのがあると思いますのでこれを↓こんな感じに編集してください。

<DIV CLASS=POST_BODY_SUB><$postcont$></DIV>


これでデフォルトで記事の文章を中央寄せにすることができます。
[PR]
by butyo_1280 | 2006-05-24 10:29 | 記事関係
2006年 03月 15日
タイトル: 記事の日付の設置。
リクエスト2:記事の日付の設置。

コメントされて「あ~そっかぁ、標準では記事に日付が付いてないんかぁ」って思ったので早速記事にさせてもらいましたw

やることはかなり簡単ですw

まずHTML編集の本文という所をクリックしてください。すると、以下のようなものが先頭にあると思います。

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


<DIV CLASS=POST>の下に↑の青い部分を追加すると記事に日付が追加されます。

さらに、日付部分の背景色と文字色を変更するには、CSS部分から以下の部分を探してください。

DIV.POST_TOP
{
BORDER : 1PX SOLID #D0D0CC;
PADDING : 2PX 15PX 1PX;
MARGIN-BOTTOM : 5PX;
FONT-FAMILY : VERDANA;
LETTER-SPACING : 2PX;
COLOR : #xxxxxx;(文字色)
background-color : #xxxxxx;(背景色)
}


見つかりましたら、青い部分を入れてもらえば完了です。

色などはご自由に変えてくださいね^^
[PR]
by butyo_1280 | 2006-03-15 22:22 | 記事関係
2005年 12月 08日
タイトル: 記事のby~部分の変更。
僕がいつもお世話になっているCrossMoonさんで良い編集を見たので、早速試してみます。

何をやるかというと記事の下にby butyo_1280(自分のID)がありますよね?これを消してしまおうというものです。

それでは早速やっていきたいと思います。

まずは、CSS部分を見てください。

/*--------------ユーザのID-------------*/
.AUTHOR
{
FONT : BOLD 8PT TAHOMA;
}


こんなのが見つかると思います。ここにdisplay : none;というのを追加してやるとbutyo_1280が消えます。

/*--------------ユーザのID-------------*/
.AUTHOR
{
FONT : BOLD 8PT TAHOMA;
display : none;
}


次に、byも消したいとします。これはCSS部分のTIMEに属します。通常であればAUTHORのすぐ上にあると思います。

.TIME
{
FONT : 8PT/150% TAHOMA;
TEXT-ALIGN : LEFT;
}


僕はここは何もいじくっていないので、通常がこんな感じだと思います。

ここに先ほどと同じようにdisplay : none;を追加すると投稿時間まで消えてしまいます。

では、どうしたらよいかというと、実はこの今編集している部分はCSS部分のPOST_TAILに属しているのです。ん?さっきはTIMEやAUTHORに属していると書いてなかった?

正確にはTIMEもAUTHORもPOST_TAILの下に属しているのです。

byやID部分は、

<span class=TIME>by <span class=AUTHOR>投稿者</span> | <a href="~">投稿した時間</a></span> | <a href="~">カテゴリ名</a> | Trackback | Comments |


こんな感じで表示されています。で、最終的にCSSに下を追加します。

div.POST_TAIL span.TIME{
font-size:0pt; /*by最小*/
color:#000; /*背景色と同じ色に設定*/ }

/*日付時間表示*/
div.POST_TAIL span.TIME A{
font-size:8pt;}
CrossMoonさんから引用させてもらいました。


もし、日付時間も表示させなくてよいという方は↓だけでOKです。

div.POST_TAIL span.TIME{
display: none; /*by・日付時間非表示*/}

.AUTHOR {
FONT : BOLD 8PT TAHOMA;
display: none;/*ID名非表示*/}


これでCSS部分の設定は完了です。(かなり長くなってしまってすいません。

後は、HTML部分の編集になります。HTMLの編集部分を「本文」に合わせてください。

その中に、

<div class="POST_TAIL" align="right"><$posttail$><$cmtjs$></div>


という所があると思います。ここの<$posttail$>の前に新たに表示させたい自分の名前を入れてあげればOKです。

<div class="POST_TAIL" align="right">by 部長|<$posttail$><$cmtjs$></div>


僕の場合はこんな感じになりますね^^これで好きな画像なんかも載せることが出来ますね*:・(*´∀`*)。・*:

今回はものすごく長くなってしまってすいませんでしたm( _ _ )mペコリ
[PR]
by butyo_1280 | 2005-12-08 15:26 | 記事関係
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を大きく変更する場合はテキストファイルなどにバックアップを取っておいたほうが後々良いかと思います。
[PR]
by butyo_1280 | 2005-11-14 14:13 | 記事関係
2005年 10月 18日
タイトル: 記事の自分のIDの色を変更。
記事の一番下にある、自分のIDの色を変えてみました。
e0050854_038717.jpg

①の部分を変更するには↓の部分を見つけてください。

/*-----------記事の一番下にある、by部分------------*/
DIV.POST_TAIL
{
PADDING-TOP : 25PX;
PADDING-BOTTOM : 25PX;
FONT-FAMILY : TAHOMA;
FONT-SIZE : 8PT;
TEXT-ALIGN : RIGHT;
COLOR : #F9F900;
}


②の部分を編集するには↓の部分を見つけてください。

/*-----------記事の一番下にある、自分のHN部分-----------*/
.AUTHOR
{
FONT-SIZE : 9PT;
COLOR : #F9F900;
FONT-WEIGHT : BOLD;
}


ピンク色の部分はご自由に変えてください*:・(*´∀`*)。・*:
それと、色コードはこちらから調べられます。>>html-色一覧(細)


現在2位です。1位を目指して頑張ってます。*:・(*´∀`*)。・*:
blog Rankingにご協力してくださる方はポチッとよろしくお願いします。
ポチっと♪
[PR]
by butyo_1280 | 2005-10-18 00:43 | 記事関係
2005年 10月 17日
タイトル: 記事のタイトルの色を変換。
背景や、記事の背景の色を変えていると記事タイトルの色も合わなくなってきたりしますよね。

そういう皆様に記事のタイトルの色の変換方法をお伝えします。

まず、CSS編集の中の↓を見つけてください。

/*-----------記事タイトル部分------------*/
DIV.POST_TTL
{
FONT-WEIGHT : BOLD;
COLOR : #92F200;
}


ピンク色の部分は、ご自分でスキンに合うように変えてください^^


現在2位です。1位を目指して頑張ってます。*:・(*´∀`*)。・*:
blog Rankingにご協力してくださる方はポチッとよろしくお願いします。
ポチっと♪
[PR]
by butyo_1280 | 2005-10-17 23:53 | 記事関係
2005年 09月 27日
タイトル: 記事内のリンク部分の装飾。
今回は、記事内のリンクの装飾をしてみたいと思います。まず、HTML編集画面の「本文」で<$postcont$>を探してください。

それをこのように編集してください。
<$postcont$>


次にCSSの編集に移ります。
下のようなのが無いスキンもあるみたいなのでもし無い場合は追加してください。

/*----------記事内のリンク----------*/
DIV.POST_BODY_SUB A:LINK
{
COLOR: #2A7E86;
TEXT-DECORATION : UNDERLINE;
}

/*----------記事内のリンクのアクセス済み----------*/
DIV.POST_BODY_SUB A:VISITED
{
COLOR: #2A7E86;
TEXT-DECORATION : UNDERLINE;
}

/*----------記事内のリンクをクリックした時----------*/
DIV.POST_BODY_SUB A:ACTIVE
{
COLOR: #2A7E86;
TEXT-DECORATION : UNDERLINE;
}

/*----------記事内のリンクをポイントした時----------*/
DIV.POST_BODY_SUB A:HOVER
{
COLOR: #8FC0BD;
TEXT-DECORATION : UNDERLINE;
}


今回した装飾は、
一度訪れたリンクの文字色を変更。
リンクの上にマウスポインタが来たら、文字の拡大、太字、文字色変更。
リンクの文字のアンダーラインを点線に変更。

変更後のソースは↓です。

/*----------記事内のリンク----------*/
DIV.POST_BODY_SUB A:LINK
{
COLOR: #2A7E86;
TEXT-DECORATION : NONE;
BORDER-BOTTOM : 1PX DOTTED ;
}

/*----------記事内のリンクのアクセス済み----------*/
DIV.POST_BODY_SUB A:VISITED
{
COLOR: #C875FF;
TEXT-DECORATION : NONE;
BORDER-BOTTOM : 1PX DOTTED ;
}

/*----------記事内のリンクをクリックした時----------*/
DIV.POST_BODY_SUB A:ACTIVE
{
COLOR: #2A7E86;
TEXT-DECORATION : NONE;
BORDER-BOTTOM : 1PX DOTTED ;
}

/*----------記事内のリンクをポイントした時----------*/
DIV.POST_BODY_SUB A:HOVER
{
COLOR: #F25B00;
FONT-SIZE : 11pt;
FONT-WEIGHT : BOLD;

TEXT-DECORATION : NONE;
BORDER-BOTTOM : 1PX DOTTED ;
}


青色が変更、桃色が追加になります。

するとこんな感じになります。>>クリック♪
[PR]
by butyo_1280 | 2005-09-27 15:37 | 記事関係
2005年 09月 26日
タイトル: 引用部分の装飾。
今回やってみたのは、記事を投稿するときに装飾ボタンとして、「“(引用)」というのを押したときの装飾をしてみました。これで説明文などを書くときなどにさらに分かりやすくなるかと思いますので、皆さんも一度試してみてください¥^^¥

やることは簡単です。CSSに↓を追加するだけです。

BLOCKQUOTE{
PADDING: 5PX;
MARGIN : 15PX 20PX 15PX;      
BORDER: 5PX #A9FF75 dashed;
BACKGROUND:#FFFFD7;
}


BACKGROUNDというのは囲まれている中の背景色のことです。
ちなみに、BORDER-STYLEを変えると囲んでいる線の種類を変えることができます。

none - - - ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合は他の値が優先されます。これが初期値です。

hidden - - - ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合はこの値が優先されます。

solid - - - 1本線で表示されます。

double - - - 2本線で表示されます。

groove - - - 立体的に窪んだ線で表示されます。

ridge - - - 立体的に隆起した線で表示されます。

inset - - - 上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。上下左右の一部だけに指定しても立体感は出ません。

outset - - - 上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。上下左右の一部だけに指定しても立体感は出ません。

dashed - - - 破線で表示されます。

dotted - - - 点線で表示されます。


今回も参考にさせてもらったのはcross moon2さんのページです。
[PR]
by butyo_1280 | 2005-09-26 14:15 | 記事関係


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