sampling.sys

ヤプログ（ドリコムブログ・オリコンブログでも一部利用できます）のカスタマイズについて、書いてあります。

現在のブログはこっちの「sampling.sys」です。　質問は受け付けていません。

family	memo	custom	yaplog	skin	game	about
		↓ html,css other			↓ barvillage RO meromero

≪　ログインできない　|　 Main 　|　タイトルを変更　≫

記事の枠を画像にする【No.30】

2005/01/08 [土] 16:03

【ヤプログ：スキンカスタマイズ30】

記事の枠を画像にする

※　サンプルはこんな感じです。

※　あちこちを触ります。
　　必ず、テンプレートのバックアップをしてください。

1.　画像を用意する

　　ここで使ったのは→　上・中・下

2.　スタイルシートに、クラス名と属性を書き込む

.entry_top { background:url(http://～～/○○.gif) top; height:20px; }
/* url：テーブルの上の画像
top：画像を上に合わせる
height：最低限必要な高さ（足りないと画像が切れたりするので） */

.entry_middle { background:url(http://～～/○○.gif) repeat-y; }
/* url：テーブルの真ん中の画像
repeat-y：縦方向に繰り返し */

.entry_bottom { background:url(http://～～/○○.gif) bottom; height:25px; }
/* url：テーブルの下の画像
bottom：画像を下に合わせる
height：最低限必要な高さ（足りないと画像が切れたりするので） */

3.　テンプレート（メイン・アーカイブ・1記事共通）

※　デフォルトの状態で、およそ30行目～55行目
※　どのテンプレートでも同様に、赤字の箇所を書き足す。

<BlogEntries>
<table ～略～ class="entry">
　　<tr class="entry_top">
　　　　<td class="entry_title">～略～
　　　　</td>
　　</tr>
　　<tr class="entry_middle">
　　　　<td class="entry_text">～略～
　　　　</td>
　　</tr>
　　<tr class="entry_bottom">
　　　　<td class="posted">～略～
　　　　</td>
　</tr>
</table>
</BlogEntries>

4.　1記事テンプレートは更に

「この記事のurl」とか、「コメント」とか「トラックバック」部分を囲みます。
ここが1番大変です。（必要ない場合は飛ばしてください）

※　55行目前後～　（この記事のurl・トラックバックのテーブル）
※　赤字の箇所を書き足す。

<table class="entry" ～略～>
　　<tr class="entry_top">
　　　　<td class="entry_title"> この記事のURL </td>
　　</tr>
　　<tr class="entry_middle">
　　　　<td class="entry_text"> ～略～
　　　　</td>
　　</tr>
　　<tr class="entry_bottom"><td> </td></tr>
</table>
<BlogEntryIfAllowPings>
<table ～略～ class="entry">
　　<tr class="entry_top">
　　　　<td align="center"> <table ～略～>
　　　　　　<tr>
　　　　　　　　<td ～略～>～略～トラックバック</td>
　　　　　　</tr>
　　　　</table></td>
　　</tr>
　　<tr class="entry_middle">
　　　　<td class="entry_text"> この記事へのトラックバックURL<br />
　　　　～略～</td>
　　</tr>
　　<tr class="entry_middle">
　　　　<td class="entry_text"><BlogPings>
　　　　　　～略～
　　　　</BlogPings>
　　　　</td>
　　</tr>
　　<tr class="entry_bottom"><td> </td></tr>
</table>
</BlogEntryIfAllowPings>

※　90行目前後～　（コメントのテーブル）
※　赤字の箇所を書き足す。

<BlogEntryIfAllowComments>
<table ～略～ class="entry">
　　<tr class="entry_top">
　　　　<td class="entry_title">～略～コメントする</td>
　　</tr>
　　<tr class="entry_middle">
　　　　<td class="entry_text">{$CommentErrMsg$}
　　　　　　<form ～略～>
　　　　　　　　～略～
　　　　　　</form>
　　　　</td>
　　</tr>
　　<tr class="entry_middle">
　　　　<td class="entry_title">～略～コメント</td>
　　　　　　</tr>
　　　　　　<tr class="entry_middle">
　　　　　　　　<td>
　　　　　　　　　　<br>
　　　　　　　　　　<BlogComments>
　　　　　　　　　　　　～略～
　　　　　　　　　　</BlogComments>
　　　　　　　　</td>
　　　　　　</tr>
　　<tr class="entry_bottom"><td> </td></tr>
</table>
</BlogEntryIfAllowComments>

5.　スタイルシートで色や間隔の調整

画像によって、指定する数値は変わってきます。
自分で調節してください。
以下のは、このtableを設定するときに、私が変更した部分です（参考までに）。

.entry { }
    /* border全てを消す　or　0pxに */

.entry_title{
    color: #f99;
    padding-left: 15px;
    padding-top: 10px; }
    background-color: #f99　/* ← 消す */

.date { color: #999 }

.entry_text{
    padding-right: 15px;
    padding-left: 15px; }

.entry_layer { }
    width: 360px;　/* ← 消す */

.posted{
    padding-bottom: 15px;
    padding-right: 15px; }

[ この記事を通報する ]

url　：　http://yaplog.jp/material/archive/525

[カスタム]HTML,CSS　|　コメント ( 56 ) 記事url 　|　編集

＞まま～ん♪さん

こんにちは～。

ああ・・・本当ですね・・・私が試した時にはできていたように思うのですが、何か条件が違うのかもしれません。

以下の様に、また1箇所class="entry_middle"を足してみてください。
それで、いかがでしょうか？

<tr class="entry_middle">
　　<td class="entry_title">～略～コメント</td>
　　　　</tr>
　　　　<tr class="entry_middle">
　　　　　　<td>
　　　　　　　　<br>
　　　　　　　　<BlogComments>
　　　　　　　　<table>
　　　　　　　　<tr class="entry_middle">
　　　　　　　　<td class="entry_text">
　　　　　　　　　　～略～
　　　　　　　　</BlogComments>

＞蓮さん

こんにちは～。

えぇと・・・スタイルシートに余分な書き込みがあるからではないでしょうか・・・。

.entry_top
{
background:url(アドレス) top; height:20px;
}
　→ url：http://アドレス.gif
　　 top：3
　　 height：102

赤字の部分です。
スタイルシートにコメントを書き込みたい場合は

/*　→ url：/*　→ url：http://アドレス.gif
　　 top：3
　　 height：102 */

の様に/* コメント */で囲むと良いですよ～。

sampling.sys

ヤプログ（ドリコムブログ・オリコンブログでも一部利用できます）のカスタマイズについて、書いてあります。 現在のブログはこっちの「sampling.sys」です。 質問は受け付けていません。

記事の枠を画像にする【No.30】

コメント

ヤプログ（ドリコムブログ・オリコンブログでも一部利用できます）のカスタマイズについて、書いてあります。

現在のブログはこっちの「sampling.sys」です。　質問は受け付けていません。

記事の枠を画像にする【No.30】

コメント