E-PARLOR : PachilogSkinChaya

HomePage :: Blog :: Gallery :: Library :: Forum :: Categories :: Index :: Changes :: Comments :: Login
Most recent edit on 2006-01-10 10:26:27 by TakeiShigeo

Additions:
CategoryPachilog



Edited on 2006-01-10 09:39:57 by TakeiShigeo

Additions:
rightboxの表示に問題があります
使用する写真のサイズについて
カレンダーについて


Deletions:
rightboxの表示に問題があります 使用する写真のサイズについて
カレンダーについて




Edited on 2006-01-10 09:38:59 by TakeiShigeo

Additions:
ぱちんこ茶屋タイプ�
ぱちんこ茶屋タイプ�


Deletions:





Edited on 2006-01-10 09:37:19 by TakeiShigeo

Additions:
ぱちんこ茶屋タイプ�



Edited on 2006-01-10 09:26:41 by TakeiShigeo

Additions:

epSkinChaya.cssで定義しているID・クラス一覧

◆body◆
◆contents◆
◆header◆
◆メニューバー(横1列タイプ ナビゲーション)◆
◆カレンダー(横1列タイプ)◆
◆maincontents◆
◆maincontents-left◆
◆maincontents-right◆
◆pachilog◆
◆menu◆
◆footer◆


Deletions:
epSkinChaya.cssで定義しているID・クラス一覧

body
◆ ◆
contents
◆ ◆
header
◆ ◆
メニューバー(横1列タイプ ナビゲーション)
◆ ◆
カレンダー(横1列タイプ)
◆ ◆
maincontents
◆ ◆
maincontents-left
◆ ◆
maincontents-right
◆ ◆
pachilog
◆ ◆
menu
◆ ◆
footer




Edited on 2006-01-10 09:24:51 by TakeiShigeo

Additions:

パチンコ茶屋スタイル・スキンに関する注意事項



Deletions:
パチンコ茶屋スタイル・スキンに関する注意事項



Edited on 2006-01-10 09:21:31 by TakeiShigeo

Additions:
ぱちんこ茶屋タイプ�



Oldest known version of this page was edited on 2006-01-10 09:17:41 by TakeiShigeo []
Page view:

ぱちんこ茶屋スタイル・スキンとテンプレート


はじめに


パチンコ・パチスロファン向けの、BLOGスキン・テンプレートのご案内です。ここではスキンの配布および、自分好みのデザインにするオプションをご紹介します。


スキンの概要紹介


ぱちんこ茶屋・スキン ダウンロード
パチンコ茶屋タイプ・スキン 近日公開予定
制作者のページはこちらから

HTML と CSS


スキンとテンプレートを編集するにあたっては、少なくともHTML と CSS についての知識が必要です。


Skin & Template と css の関係


パチログスキンでは、テンプレートとスキンの両方を ページの見せ方を定義するのに使用します。


スタイルの紹介


百聞は1見にしかずということで、「パチンコ茶屋スタイル」の1ページからの例です。

下の2つの画像は、全く同じスキンとテンプレートから構成された同じページです。よく見ると、記事の内容も(当然ですが)同じですね。左の画面にスタイルシートを適用しない状態が、右の画面になるのです。写真も、サイズ指定がないとアップロードしたそのままの大きさで表示されるので、右では大きく見えています。



スキンとテンプレートで作られた骨格に、スタイルシートで肉付けをする。そんな感じですね。


パチンコ茶屋スタイル・スキン


ここでダウンロードできる「パチンコ茶屋スタイル・スキン」一式には、以下が同梱されています。

  1)skinbackup.xml、2)epSkinChaya.css、3)images(フォルダ)、4)–

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

1) skinbackup.xml
「パチンコ茶屋スタイル」の本体というべきスキンとテンプレートの情報が収められています。

2) epSkinChaya.css
「パチンコ茶屋スタイル」のスキンとテンプレートに対応したスタイルシートです。

3)images(フォルダ)
必要なイメージファイルが一式収められています。


パチンコ茶屋スタイルの構成
下のサンプル画像をご覧ください。

(↓サンプル1:「メインの目次ページ」の、主な id 構成) *縦に長いので、途中を省略しています



この「パチンコ茶屋スタイル・スキン」では、大きく見てこのようなエリア(サンプル1)に分けられ、それぞれがスタイルシート(epSkinChaya.css)によって、id や class ごとに指定されています。

さらに、この中でもblogの中心となる “header” と “maincontents” の部分をもう少し詳しくご説明しましょう。

(↓サンプル2:「メインの目次ページ」headerの、主な class 構成)



(↓サンプル3:「メインの目次ページ」maincontentsの、主な class 構成)




epSkinChaya.cssで定義しているID・クラス一覧

body

body

label


contents

#contents

.highlight


header

#header

#page-title

h1

.rooms


メニューバー(横1列タイプ ナビゲーション)

.menubar

.menubar ul

.menubar li

.menubar .menubar-navi

.menubar .navi a

.menubar .navi a:hover


カレンダー(横1列タイプ)

.calendar

.calendar caption

.calendar caption a

.calendar caption a:visited

.calendar caption a:hover

.days

.days a

.days a:visited

.days a:hover

.today

.today a

.today a:visited

.today a:hover


maincontents

#maincontents

.clear-f


maincontents-left

#maincontents-left

#maincontents-left h2

#maincontents-left h3.item

.itembody

.itembody a

.itembody a:visited

.itembody a:hover

.iteminfo

.iteminfo a

.iteminfo a:visited

.iteminfo a:hover

#maincontents-left h3.comment

.commentbody

.commentinfo

.goback a

.goback a:visited

.goback a:hover

.commentform a

.commentform a:visited

.commentform a:hover

#maincontents-left ul #maincontents-left ul li a

#maincontents-left ul li a:visited

#maincontents-left ul li a:hover


maincontents-right

#maincontents-right

#maincontents-right h2


pachilog

.my-pachilog

.my-pachilog a

.my-pachilog a:visited

.my-pachilog a:hover

.tab-top-l

.tab-top-c

.tab-top-r

.spacer-img

.tab-mid-l

.tab-mid-c

.tab-mid-r

*pachilog グラフ部分背景色が緑(左のタブにリンク)の場合*

.graphtop-g

.graph-g

.graph-g img

.graph-g p

.graph-commenttop-g

.graph-comment-g

.pachilog-bottom-g

*pachilog グラフ部分背景色がオレンジ(中央のタブにリンク)の場合*

.graphtop-o

.graph-o

.graph-o img

.graph-o p

.graph-commenttop-o

.graph-comment-o

.pachilog-bottom-o

*pachilog グラフ部分背景色が紫(右のタブにリンク)の場合*

.graphtop-p

.graph-p

.graph-p img

.graph-p p

.graph-commenttop-p

.graph-comment-p

.pachilog-bottom-p


menu

#maincontents-right .menu

#maincontents-right .menu a

#maincontents-right .menu a:visited

#maincontents-right .menu a:hover

#maincontents-right .menu ul

#maincontents-right .category

#maincontents-right .loginform

#maincontents-right .search

#maincontents-right .mylinks

#maincontents-right .pachilogbutton

#maincontents-right .syndicate

#maincontents-right .powered


footer

#footer

#footer .pagetop

#footer .pagetop a

#footer .pagetop a:hover

#footer .copyright

#footer .copyright a

#footer .copyright a:hover

#footer .copyright2

#footer .copyright2

#footer .copyright2 a

#footer .copyright2 a:hover


パチンコ茶屋スタイル・スキンに関する注意事項
rightboxの表示に問題があります
rightboxを使ってアイテムに写真を挿入した場合に本文が短いと、IEでは正しい表示をされずitembodyの緑点線の枠が左に延びて他のアイテムのitembodyより幅広くなってしまいます。これは、他のブラウザ(firefox)では正しく表示されるので、IEのバグであると思われます。

高さが写真を越えない短い文章の時はrightboxを使用しないことをお薦めしますが、rightboxを使用したい場合は、短い文章の後には数行の空改行を加えて本文を長くしてみてください。とりあえず、IEでもちゃんと表示されるようになります。( 根本的な解決方法をご存知の方がいらっしゃいましたら、お知らせください )

使用する写真のサイズについて
rightbox、leftboxを使ってアイテムに写真を挿入すると、itembodyの幅の30%を横幅として(cssにて指定。変更可)、縦:横 同比率で縮小して表示されます。

ポップアップウインドウを使用すると、そのままのサイズで別ウインドウで表示されます。

rightbox、leftbox、ポップアップウインドウを使わずに写真をそのまま貼るときは、幅が345pxより大きいと写真がはみ出してしまうので、最大幅を345pxにおさえてください。

カレンダーについて
カレンダーは、アイテムがある日は背景にパチンコ玉の絵が出るようになっています。31日全てにアイテムが入った場合、“contents”の右端に、縦に2px程度の細い白い線が現れます。これは、カレンダーをぎりぎりの幅に設定しているためです。この問題が起きないようにするには、背景ファイルをひと回り小さく作らなくてはいけないので、文字の見やすさを優先しました。

どうしても気になる方は、cssで日付部分のtdを22pxから20pxに変更、背景ファイル(bk_ball22.gifとbk22×22.gifの2種類あります)を20px角に縮小して差し替えて、文字サイズ等の指定を調整してください。
1999-2006 The E-PARLOR Project. All right reserved. :: Valid XHTML 1.0 Transitional :: Valid CSS :: Powered by Wikka Wakka Wiki 1.1.6.1
Page was generated in 0.0876 seconds