Context Navigation

ここの情報は古いです。ご理解頂いた上でお取り扱いください。

Version 8 (modified by takai, 14 years ago) (diff)
スタイル指定の優先度について記述

TOC

OpenPNE2.12でできる見栄えの変更

ここでは、HTMLやCSSに詳しくない方も対象に、OpenPNE2.12で見栄えを変更する方法を説明します。管理画面のデザイン > 配色・CSS変更の下部にある「カスタムCSS追加」にスタイル指定を追加することで見栄えを変えることができます。

#Container {
        margin: 0 auto;
}

この上の記述を追加すると、全体をセンタリングすることができます。

#Body .partsHeading {
        color: #008000;
        background-color: #FFFF00;
}

この上の記述を追加すると、各パーツの見出し部分の文字色を緑に、背景色を黄にすることができます。

以下では、好きなように見栄えを変えるにはどうすればいいのかについて、より詳しい説明をします。

OpenPNE2.10以前との違い

OpenPNE2.12では、XHTML+CSS化と称してHTMLとCSSを見直しました。

見栄えは、『どこ』を『どうする』と記述することで指定することができます。 OpenPNE2.10以前では、

<p><img src="icon_title_1.gif"><span class="b_b c_00">マイフレンドリスト</span></p>

のようにHTMLが記述されており、CSSで「マイフレンドリスト」（＝見出し）の部分をスタイル指定の対象としたくても『どこ』と言うことができませんでした。 OpenPNE2.12では、

<div class="partsHeading"><h3>マイフレンドリスト</h3></div>

のように記述しているので見出し部分をスタイル指定の対象としたいときには、「クラス名が "partsHeading" の部分」とCSSで言うことができます。

XHTML+CSS化では、HTMLに書かれているスタイル指定や不要なタグを取り除き、構造を示すために適切な要素タグでマークアップしたりクラス名を付ける作業を行いました。 CSSで『どこ』と言えるようにHTMLを記述しているので、見栄えに関する指定（スタイル指定）は全てCSSで行うことができます。

なお、見栄えに関する指定を全てCSSで行っていることと、HTMLを見直した（書き換えた）ことによって、今までできていた方法で見栄えが変更できなくなっているものがあります。しかしながら、それに対応するスタイル記述を書くことで理想とする見栄えを実現できます。

以前の配色設定をOpenPNE2.12で適用する

HTMLを書き換えたため、管理画面の配色設定で変更できる見栄えがOpenPNE2.10以前と若干異なっています。

異なる点は配色設定の変更内容一覧に示されています。

具体的なスタイル指定の記述は2.12からのバージョンで2.10の配色を使用する方法をご覧ください。

スタイル指定の例

追加するスタイル指定の記述の例を紹介します。どんなセレクタを指定すればいいのかについては後述します。

始めに、セレクタについて簡単に説明をします。

body { スタイル宣言 }
.partsHeading { スタイル宣言 }
#Container { スタイル宣言 }
#Body .homeMainTable th { スタイル宣言 }
#Body, #Container { スタイル宣言 }

開き中括弧 { の前に body や .partsHeading などと書いてあります。この部分をセレクタといいます。セレクタは、スタイル指定の対象が『どこ』なのかを指します。

1行目はセレクタが body です。これは「body要素(bodyタグに囲まれた範囲)」を対象とします。
2行目はセレクタが .partsHeading です。これは「クラス名が "partsHeading" の要素」を対象とします。
3行目はセレクタが #Container です。これは「ID名が "Container" の要素」を対象とします。
4行目はセレクタが #Body .homeMainTable th です。これは「#Body の中の .homeMainTable の中の th 要素」を対象とします。
5行目はセレクタが #Body, #Container です。これは「#Body と #Container」を対象とします。

全体に背景画像を表示する

body {
        background-image: url(画像のURL);
}
#Body, #Container {
        background-color: transparent;
}

body要素に対して背景画像を指定します。

配色設定から指定できる背景色が #Body と #Container に適用されているので、背景色を透明に指定します。

全体をセンタリングする（右揃えにする）

#Container {
        margin: 0 auto;
}

左右のmarginをautoにすることで、ボックスは中央に配置されます。

#Container {
        margin-left: auto;
}

左のmarginだけをautoにすることで、ボックスは右寄せになります。

home系のメインテーブルの見出し部分を変える

home系とは、h_home, f_home, c_home のことです。プロフィール確認ページ h_prof にも反映します。

#Body .homeMainTable th {
        border-color: #FF0000;
        background-color: #000000;
        color: #FFFFFF;
        font-weight: bold;
}
#Body .homeMainTable tr:first-child th,
#Body .homeMainTable tr.first-child th {
        border-color: #00FF00;
}

homeMainTable クラスのパーツの中にある、th要素（テーブルの見出しセル）に対するスタイル指定です。

"first-child" と記述している部分は、テーブルの1行目のth要素だけを対象とするようなセレクタの記述です。

日記やトピック記事の画像をセンタリングする

#Body ul.photo {
        text-align: center;
}
#Body ul.photo li {
        margin: 0 10px;
}

photo クラスのul要素に対して、インラインをセンタリングする指定を記述します。 li要素は既存のスタイルで display: inline が指定されています。 li要素の左右のmarginを指定して画像の間隔を調整します。

日記は diaryDetailBox クラス、トピックは topicDetailBox クラスですが、共通の ul.photo をセレクタにすることでスタイル指定を共有できます。日記記事、トピック記事以外に、同じクラスが使われているイベント記事にも適用されます。

特定のページだけのパーツを指定する

あるページのパーツにスタイルを指定したいとき、そのパーツが他のページで使われていた場合、他のページのパーツまでスタイルが適用されてしまいます。

例えば、home系にはメイン写真表示部がありますが、h_homeのメイン写真表示部のみを指定したい場合、次のようにします。

#pc_page_h_home .homePhotoBox .parts {
        background-color: #FFFFCC;
}

セレクタの頭にそのページのIDをつけることで、そのページ以外にはスタイルが適用されないようにします。ページのIDは、body要素のid属性として与えられています。

LayoutAのカラムを左右逆にする

LayoutAとは、home系、マイページ確認のページ（のレイアウト）です。

#LayoutA #Left {
        float: right;
}
#LayoutA #Center {
        float: left;
}

カラムの位置が左右逆になります。既存のスタイルでは、#Left に left、#Center に right が指定してあります。

#LayoutA #Left,
#LayoutB #Left {
        float: right;
}
#LayoutA #Center,
#LayoutB #Center {
        float: left;
}

LayoutBとは、日記、メッセージ、ランキングなどのページ（のレイアウト）です。 2カラムのレイアウトは、LayoutA と LayoutB の2つです。

好きな場所の見栄えを変えたいとき

スタイル指定するには、CSSで『どこ』と言えなければなりません。これをセレクタと言いましたが、実際にどのようにセレクタを書けばいいのかを説明します。

ある部分を『どこ』と指定したいとき、その部分（パーツ）のクラス名をセレクタにすることで指定できます。

その部分のクラス名を知るには、

そのページのソースを表示する
該当する部分の文字列を検索する
該当する部分のHTMLに書かれているclass属性値を見る

クラス名とはclass属性値のことです。 HTMLの構造については、ページの構造、パーツの構造をご覧ください。

OpenPNE2.12では、いくつかのパーツとしてクラス名を付けています。パーツの種類については、パーツリストをご覧ください。

カスタムCSSでのスタイル指定を優先させる

既に記述されているスタイル指定と、カスタムCSSで追加したスタイル指定が衝突することがあります。例えば、

.homeInfoBox .caution {
        color: #ff0000;
}

と既に記述されているとき、カスタムCSSに、

.caution {
        color: #0000ff;
}

と記述した場合、.caution にどのスタイルが適用されるのかはセレクタの優先度で決められます。複数のスタイル指定が衝突したとき、

IDセレクタの総数(=a)が多いセレクタのスタイルを適用する
aが等しいときは、クラスセレクタの総数(=b)が多いセレクタのスタイルを適用する
aもbも等しい場合は、タイプセレクタの総数(=c)が多いセレクタのスタイルを適用する

このように決められています。（厳密には少し異なります。）

それぞれのセレクタは以下の通りです。

#Container { スタイル宣言 } /* IDセレクタ */
.partsHeading { スタイル宣言 } /* クラスセレクタ */
body { スタイル宣言 } /* タイプセレクタ */

このため、カスタムCSSにスタイル記述を行ってもスタイルが適用されないことがあります。

カスタムCSSのスタイル指定を適用させるためには、以下のようにIDセレクタを付加します。

#Body .caution {
        color: #0000ff;
}

IDセレクタを付加することでスタイルの優先度を高めることができます。

大抵の場合、#Bodyをセレクタの頭に付加すればスタイルの優先度は最高になりますが、同様の理由で既存のスタイルの中に#Bodyを記述したスタイルがあります。そのスタイルよりも優先度を上げる場合は次のようにしてください。

#Body #Container .caution {
        color: #0000ff;
}

ページの構造

ログイン後のページは大きく3つのレイアウトがあり、各ページはいずれかのレイアウトで構成されています。

LayoutA - ホーム、マイページ確認
- Left : 270px
- Center : 440px
LayoutB - 日記、メッセージ、ランキング
- Left : 180px
- Center : 540px
LayoutC - あしあと、レビューなど
- Center : 650px

HTMLは次のような構造になっています。

<body id="pc_page_h_home">
        <div id="Body">
                <div id="Container">
                        <div id="Header">
                                <div id="globalNav"></div>
                                <div id="topBanner"></div>
                        </div>
                        <div class="parts localNav" id="hLocalNav"></div>
                        <div id="LayoutA">
                                <div id="Top">
                                        ナビ下部
                                </div>
                                <div id="Left">
                                        左カラム
                                </div>
                                <div id="Center">
                                        右（中央）カラム
                                </div>
                        </div>
                        <div id="Footer"></div>
                        <div id="sideBanner">
                                サイドバナー
                        </div>
                </div><!-- Container -->
        </div><!-- Body -->
</body>

パーツの構造

ログイン後のページは、主に2重線で囲まれた四角いパーツで構成されています。

パーツは、ページの構造の中の<div id="Left">や<div id="Center">の中に記述されています。

<div class="dparts パーツクラス名"><div class="parts">
        <div class="partsHeading"><h3>パーツ見出し</h3></div>
        <div class="xxxxxxxx">パーツの内容</div>
        <div class="xxxxxxxx">パーツの内容</div>
        <div class="xxxxxxxx">パーツの内容</div>
</div></div>

<div class="dparts">と<div class="parts">によってパーツの外枠の2重線を表現しています。 1本線あるいは外枠がないパーツも次のような構造になっています。

<div class="parts パーツクラス名">
        <div class="partsHeading"><h3>パーツ見出し</h3></div>
        <div class="xxxxxxxx">パーツの内容</div>
        <div class="xxxxxxxx">パーツの内容</div>
        <div class="xxxxxxxx">パーツの内容</div>
</div>

WikiInclude(DIRECTORYNAVI)?

Download in other formats:

Plain Text