ぱちんこ茶屋スタイル・スキンとテンプレート
はじめに
パチンコ・パチスロファン向けの、BLOGスキン・テンプレートのご案内です。ここではスキンの配布および、自分好みのデザインにするオプションをご紹介します。
スキンの概要紹介
ぱちんこ茶屋・スキン ダウンロード
パチンコ茶屋タイプ・スキン 近日公開予定
制作者のページはこちらから
HTML と CSS
スキンとテンプレートを編集するにあたっては、少なくともHTML と CSS についての知識が必要です。
Skin & Template と css の関係
パチログスキンでは、テンプレートとスキンの両方を ページの見せ方を定義するのに使用します。
スタイルの紹介
百聞は１見にしかずということで、「パチンコ茶屋スタイル」の１ページからの例です。
下の２つの画像は、全く同じスキンとテンプレートから構成された同じページです。よく見ると、記事の内容も（当然ですが）同じですね。左の画面にスタイルシートを適用しない状態が、右の画面になるのです。写真も、サイズ指定がないとアップロードしたそのままの大きさで表示されるので、右では大きく見えています。
スキンとテンプレートで作られた骨格に、スタイルシートで肉付けをする。そんな感じですね。
パチンコ茶屋スタイル・スキン
ここでダウンロードできる「パチンコ茶屋スタイル・スキン」一式には、以下が同梱されています。
１）skinbackup.xml、２）epSkinChaya.css、３）images（フォルダ）、４）–
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
１） skinbackup.xml
「パチンコ茶屋スタイル」の本体というべきスキンとテンプレートの情報が収められています。
２) epSkinChaya.css
「パチンコ茶屋スタイル」のスキンとテンプレートに対応したスタイルシートです。
３）images（フォルダ）
必要なイメージファイルが一式収められています。
パチンコ茶屋スタイルの構成
下のサンプル画像をご覧ください。
（↓サンプル１：「メインの目次ページ」の、主な id 構成） ＊縦に長いので、途中を省略しています
この「パチンコ茶屋スタイル・スキン」では、大きく見てこのようなエリア（サンプル１）に分けられ、それぞれがスタイルシート（epSkinChaya.css）によって、id や class ごとに指定されています。
さらに、この中でもblogの中心となる “header” と “maincontents” の部分をもう少し詳しくご説明しましょう。
（↓サンプル２：「メインの目次ページ」headerの、主な class 構成）
（↓サンプル３：「メインの目次ページ」maincontentsの、主な class 構成）
epSkinChaya.cssで定義しているＩＤ・クラス一覧
◆body◆
body
label
◆contents◆
#contents
.highlight
◆header◆
#header
#page-title
h1
.rooms
◆メニューバー（横１列タイプ ナビゲーション）◆
.menubar
.menubar ul
.menubar li
.menubar .menubar-navi
.menubar .navi a
.menubar .navi a:hover
◆カレンダー（横１列タイプ）◆
.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の幅の３０％を横幅として（cssにて指定。変更可）、縦：横 同比率で縮小して表示されます。ポップアップウインドウを使用すると、そのままのサイズで別ウインドウで表示されます。
rightbox、leftbox、ポップアップウインドウを使わずに写真をそのまま貼るときは、幅が345pxより大きいと写真がはみ出してしまうので、最大幅を345pxにおさえてください。
カレンダーについて
カレンダーは、アイテムがある日は背景にパチンコ玉の絵が出るようになっています。３１日全てにアイテムが入った場合、“contents”の右端に、縦に２px程度の細い白い線が現れます。これは、カレンダーをぎりぎりの幅に設定しているためです。この問題が起きないようにするには、背景ファイルをひと回り小さく作らなくてはいけないので、文字の見やすさを優先しました。どうしても気になる方は、cssで日付部分のtdを22pxから20pxに変更、背景ファイル（bk_ball22.gifとbk22×22.gifの２種類あります）を20px角に縮小して差し替えて、文字サイズ等の指定を調整してください。
CategoryPachilog
There are no comments on this page. [Add comment]