| 3 | | OpenPNE2.12では、テンプレートのマークアップとスタイル指定を見直しています。[[br]] |
| 4 | | ここでは、カスタムCSSでどのように見栄えが変更できるかを紹介します。 |
| 5 | | |
| 6 | | マークアップの見直しでは、各部位にクラス(class属性)を与え、パーツ化することを行いました。[[br]] |
| 7 | | [wiki:pne-xhtmlcss/tips-note この項目のノートページ]にパーツ化の方針を掲載しています。 |
| 8 | | |
| 9 | | あるページのパーツのクラス名は、ページのソースを表示して「parts」などと検索すれば、[wiki:pne-xhtmlcss/tips#パーツの構造 パーツの構造]で示しているようにクラス名が記述されているのでそこから知ることができます。 |
| 10 | | |
| 11 | | CSSでどのような指定ができるのかについては、[http://w3g.jp/css/ CSSガイド - http://w3g.jp/css/]などの解説サイトを参照ください。 |
| | 3 | ここでは、HTMLやCSSに詳しくない方も対象に、OpenPNE2.12で見栄えを変更する方法を説明します。 |
| | 4 | 管理画面の デザイン > 配色・CSS変更 の下部にある「カスタムCSS追加」にスタイル指定を追加することで見栄えを変えることができます。 |
| | 5 | |
| | 6 | {{{ |
| | 7 | #Container { |
| | 8 | margin: 0 auto; |
| | 9 | } |
| | 10 | }}} |
| | 11 | この上の記述を追加すると、全体をセンタリングすることができます。 |
| | 12 | |
| | 13 | {{{ |
| | 14 | #Body .partsHeading { |
| | 15 | color: #008000; |
| | 16 | background-color: #FFFF00; |
| | 17 | } |
| | 18 | }}} |
| | 19 | この上の記述を追加すると、各パーツの見出し部分の文字色を緑に、背景色を黄にすることができます。 |
| | 20 | |
| | 21 | 以下では、好きなように見栄えを変えるにはどうすればいいのかについて、より詳しい説明をします。 |
| | 22 | |
| | 23 | == OpenPNE2.10以前との違い == |
| | 24 | OpenPNE2.12では、XHTML+CSS化と称してHTMLとCSSを見直しました。 |
| | 25 | |
| | 26 | 見栄えは、『どこ』を『どうする』と記述することで指定することができます。 |
| | 27 | OpenPNE2.10以前では、 |
| | 28 | {{{ |
| | 29 | <p><img src="icon_title_1.gif"><span class="b_b c_00">マイフレンドリスト</span></p> |
| | 30 | }}} |
| | 31 | のようにHTMLが記述されており、CSSで「マイフレンドリスト」（＝見出し）の部分をスタイル指定の対象としたくても『どこ』と言うことができませんでした。 |
| | 32 | OpenPNE2.12では、 |
| | 33 | {{{ |
| | 34 | <div class="partsHeading"><h3>マイフレンドリスト</h3></div> |
| | 35 | }}} |
| | 36 | のように記述しているので見出し部分をスタイル指定の対象としたいときには、「クラス名が "partsHeading" の部分」とCSSで言うことができます。 |
| | 37 | |
| | 38 | XHTML+CSS化では、HTMLに書かれているスタイル指定や不要なタグを取り除き、構造を示すために適切な要素タグでマークアップしたりクラス名を付ける作業を行いました。 |
| | 39 | CSSで『どこ』と言えるようにHTMLを記述しているので、見栄えに関する指定（スタイル指定）は全てCSSで行うことができます。 |
| | 40 | |
| | 41 | なお、見栄えに関する指定を全てCSSで行っていることと、HTMLを見直した（書き換えた）ことによって、今までできていた方法で見栄えが変更できなくなっているものがあります。 |
| | 42 | しかしながら、それに対応するスタイル記述を書くことで理想とする見栄えを実現できます。 |
| | 43 | |
| | 44 | === 以前の配色設定をOpenPNE2.12で適用する === |
| | 45 | HTMLを書き換えたため、管理画面の配色設定で変更できる見栄えがOpenPNE2.10以前と若干異なっています。 |
| | 46 | |
| | 47 | 異なる点は[wiki:pne-xhtmlcss/upgrade#配色設定の変更内容一覧 配色設定の変更内容一覧]に示されています。 |
| | 48 | |
| | 49 | 具体的なスタイル指定の記述は[wiki:pne-xhtmlcss/upgrade/colorcode 2.12からのバージョンで2.10の配色を使用する方法]をご覧ください。 |
| 156 | | [wiki:pne-xhtmlcss/parts/23 23.searchResultList（検索結果リスト）]を見てみると、次のようなマークアップとなっています。 |
| 157 | | {{{ |
| 158 | | <div class="dparts searchResultList"><div class="parts"> |
| 159 | | <div class="partsHeading"><h3>日記検索結果一覧</h3><p>*** 1件が該当しました。</p></div> |
| 160 | | |
| 161 | | <div class="pagerRelative"> |
| 162 | | <p class="number">1件～1件を表示</p> |
| 163 | | </div> |
| 164 | | |
| 165 | | <div class="block"> |
| 166 | | <div class="ditem"><div class="item"><table><tbody><tr> |
| 167 | | <td rowspan="4" class="photo"><a href="./?m=pc&a=page_fh_diary&target_c_diary_id=5"><img alt="" src="./img.php?filename=skin_no_image.gif&w=76&h=76&m=pc"/></a></td> |
| 168 | | <th>ニックネーム</th><td>ヤマダ (男性)</td> |
| 169 | | </tr><tr> |
| 170 | | <th>タイトル</th><td>example (0)</td> |
| 171 | | </tr><tr> |
| 172 | | <th>本文</th><td>Hello!</td> |
| 173 | | </tr><tr class="operation"> |
| 174 | | <th>作成日時</th><td><span class="text">05月29日 15:18</span> <span class="moreInfo"><a href="./?m=pc&a=page_fh_diary&target_c_diary_id=5"><img alt="詳細を見る" src="./skin/default/img/button_shosai.gif"/></a></span></td> |
| 175 | | </tr></tbody></table></div></div> |
| 176 | | </div> |
| 177 | | |
| 178 | | <div class="pagerRelative"> |
| 179 | | <p class="number">1件～1件を表示</p> |
| 180 | | </div> |
| 181 | | </div></div> |
| 182 | | }}} |
| 183 | | |
| 184 | | == スタイルの書き方(セレクタの説明) == |
| 185 | | {{{ |
| 186 | | セレクタ { スタイル宣言 } |
| 187 | | }}} |
| 188 | | スタイル記述について、開き中括弧の前の部分をセレクタといいます。 |
| 189 | | セレクタの書き方が豊富なためにCSSでは複雑なスタイルの指定ができるようになっています。 |
| 190 | | |
| 191 | | ここでは、基本的なセレクタの紹介をします。 |
| 192 | | |
| 193 | | === タイプセレクタ === |
| 194 | | {{{ |
| 195 | | h2 { スタイル宣言 } |
| 196 | | p { スタイル宣言 } |
| 197 | | }}} |
| 198 | | HTMLの要素をセレクタとしたものです。 |
| 199 | | 全てのh2要素、p要素にスタイルが適用されます。 |
| 200 | | |
| 201 | | === 全称セレクタ(ユニバーサルセレクタ) === |
| 202 | | {{{ |
| 203 | | * { スタイル宣言 } |
| 204 | | }}} |
| 205 | | アスタリスクをセレクタとしたものです。 |
| 206 | | 全称セレクタは全ての要素を指します。 |
| 207 | | このように書くと、全ての要素にスタイルが適用されます。 |
| 208 | | |
| 209 | | === クラスセレクタ === |
| 210 | | {{{ |
| 211 | | h2.system { スタイル宣言 } |
| 212 | | .purpose { スタイル宣言 } |
| 213 | | }}} |
| 214 | | 1つ目の記述では、class属性値が"system"のh2要素にスタイルが適用されます。 |
| 215 | | ピリオドの前にセレクタ、後にクラス名を書きますが、セレクタを省略した場合、全称セレクタを書いたのと同様に扱われます。 |
| 216 | | 2つ目の記述は、*.purposeと同等です。 |
| 217 | | |
| 218 | | === 一意セレクタ(IDセレクタ) === |
| 219 | | {{{ |
| 220 | | div#Header { スタイル宣言 } |
| 221 | | #Footer { スタイル宣言 } |
| 222 | | }}} |
| 223 | | クラスセレクタと同様で、id属性が与えられている要素にスタイルが適用されます。 |
| 224 | | |
| 225 | | === 子孫セレクタ === |
| 226 | | {{{ |
| 227 | | div.system p { スタイル宣言 } |
| 228 | | #LayoutA .homePhotoBox p.text { スタイル宣言 } |
| 229 | | }}} |
| 230 | | セレクタを半角スペースで区切って記述すると、適用する要素を絞ることができます。 |
| 231 | | 1つ目の記述では、class属性値が"system"のdiv要素の中にある、p要素にスタイルが適用されます。 |
| 232 | | |
| 233 | | 2つ目の記述では、id属性値が"LayoutA"の要素の中にある、class属性値が"homePhotoBox"の要素の中にある、class属性値が"text"のp要素にスタイルが適用されます。 |
| 234 | | {{{ |
| 235 | | <div id="LayoutA"> |
| 236 | | <div class="hogehoge"> |
| 237 | | <div class="homePhotoBox"> |
| 238 | | <h2>見出し</h2> |
| 239 | | <p class="point">100 Point</p> |
| 240 | | <p class="text">OpenPNE君さん</p> |
| 241 | | </div> |
| 242 | | </div> |
| 243 | | </div> |
| 244 | | }}} |
| 245 | | このようなHTML構造であれば『OpenPNE君さん』という部分のp要素のみにスタイルが適用されます。 |
| 246 | | #LayoutAの中に.homePhotoBoxがあればよいので、class="hogehoge"というdiv要素があるように間に別の要素が存在しても適用されます。 |
| 247 | | |
| 248 | | {{{ |
| 249 | | <div id="boxA"> |
| 250 | | <p>boxAの子の段落</p> |
| 251 | | <div id="boxB"> |
| 252 | | <p>boxAの孫の段落</p> |
| 253 | | </div> |
| 254 | | </div> |
| 255 | | }}} |
| 256 | | このようなHTML構造の場合、『boxAの子の段落』だけにスタイルを適用したくても、 |
| 257 | | {{{ |
| 258 | | #boxA p { スタイル宣言 } |
| 259 | | }}} |
| 260 | | のように記述してしまうと、『boxAの孫の段落』にも適用されてしまいます。 |
| 261 | | |
| 262 | | これに関しては次のような「子セレクタ」というものがありますが、一部のブラウザが子セレクタに対応していないという問題があります。 |
| 263 | | {{{ |
| 264 | | #boxA > p { スタイル宣言 } |
| 265 | | }}} |
| 266 | | |
| 267 | | 代替策として、スタイルを打ち消すような宣言ができる場合は、 |
| 268 | | {{{ |
| 269 | | #boxA p { スタイル宣言 } |
| 270 | | #boxA * p { 上のスタイルの打ち消し } |
| 271 | | }}} |
| 272 | | のように記述することで、子セレクタと同じような結果を得ることができます。 |
| 273 | | |
| 274 | | === セレクタのグループ化 === |
| 275 | | {{{ |
| 276 | | h2, p { スタイル宣言 } |
| 277 | | #LayoutA h2, #LayoutA p { スタイル宣言 } |
| 278 | | #LayoutA h2, p { スタイル宣言 } |
| 279 | | }}} |
| 280 | | セレクタをカンマで区切ると、複数の要素をスタイル適用の対象とすることができます。 |
| 281 | | * 1つ目の記述は、h2要素とp要素が対象になります。 |
| 282 | | * 2つ目の記述は、「#LayoutAの中のh2要素」と「#LayoutAの中のp要素」が対象になります。 |
| 283 | | * 3つ目の記述は、「#LayoutAの中のh2要素」と「全てのp要素」が対象になります。 |
| 284 | | |
| 285 | | === セレクタの詳細度 === |
| 286 | | スタイル指定が重複した場合の扱いについて説明します。 |
| 287 | | {{{ |
| 288 | | <div id="boxA"> |
| 289 | | <div id="boxB"> |
| 290 | | <p class="text">テキスト</p> |
| 291 | | </div> |
| 292 | | </div> |
| 293 | | }}} |
| 294 | | このようなHTMLに対して、次のようなスタイル指定をすると『テキスト』は何色になるでしょうか。 |
| 295 | | case1:: |
| 296 | | {{{ |
| 297 | | #boxA p { color: red; } /* id属性が"boxA"の要素の中にあるp要素 */ |
| 298 | | p.text { color: blue; } /* class属性が"text"のp要素 */ |
| 299 | | }}} |
| 300 | | case2:: |
| 301 | | {{{ |
| 302 | | p { color: red; } /* p要素 */ |
| 303 | | *.text { color: blue; } /* class属性が"text"の全ての要素 */ |
| 304 | | }}} |
| 305 | | case3:: |
| 306 | | {{{ |
| 307 | | p { color: red; } /* p要素 */ |
| 308 | | * { color: blue; } /* 全ての要素 */ |
| 309 | | }}} |
| 310 | | case4:: |
| 311 | | {{{ |
| 312 | | #boxB p { color: red; } /* id属性が"boxB"の要素の中にあるp要素 */ |
| 313 | | #boxA p { color: blue; } /* id属性が"boxA"の要素の中にあるp要素 */ |
| 314 | | }}} |
| 315 | | case5:: |
| 316 | | {{{ |
| 317 | | #boxA { color: red; } /* id属性が"boxA"の要素 */ |
| 318 | | p { color: blue; } /* p要素 */ |
| 319 | | }}} |
| 320 | | |
| 321 | | この答えは詳細度というものによって決められます。 |
| 322 | | 詳細度は個別性や優先度とも呼ばれることがありますが、詳細度が高いものが適用されます。 |
| 323 | | |
| 324 | | 用いているセレクタに関して、次の値を計算します。 |
| 325 | | * a = 一意セレクタの個数 |
| 326 | | * b = クラスセレクタの個数（＋属性セレクタの個数＋擬似クラスの個数） |
| 327 | | * c = タイプセレクタの個数（＋擬似要素の個数） |
| 328 | | |
| 329 | | セレクタの詳細度の大小は次のように決まります。 |
| 330 | | 1. aが多い方が詳細度が高い |
| 331 | | 2. aが同じなら、bが多い方が詳細度が高い |
| 332 | | 3. a,bが同じなら、cが多い方が詳細度が高い |
| 333 | | a,b,cが同じ場合は詳細度では決まりませんが、後に記述されている方が適用されます。 |
| 334 | | |
| 335 | | よって、それぞれのcaseの答えは次のようになります。 |
| 336 | | * case1 : #boxA p { color: red; } が適用される |
| 337 | | * case2 : *.text { color: blue; } が適用される |
| 338 | | * case3 : p { color: red; } が適用される |
| 339 | | * case4 : 後に記述されている #boxA p { color: blue; } が適用される |
| 340 | | |
| 341 | | case5は詳細度の問題ではなく適用する要素の問題です。 |
| 342 | | セレクタ"#boxA"に該当するものは、今回の例ではdiv要素です。 |
| 343 | | 親にされた指定よりも自分に直接された指定の方が適用されます。 |
| 344 | | * case5 : p { color: blue; } が適用される |
| 345 | | |
| 346 | | OpenPNE2.12では、既存のスタイルの中で重複がいくつか生じています。 |
| 347 | | そのため、カスタムCSSでは詳細度が高くなるようにスタイルを記述しないと適用されないことがあります。 |
| 348 | | |
| 349 | | 記述したスタイルの詳細度が、既存のスタイルより低いと思われた場合は以下のように記述してください。 |
| 350 | | {{{ |
| 351 | | #Body セレクタ { スタイル宣言 } |
| 352 | | }}} |
| 353 | | 既存のスタイルの中に、"#Body"セレクタを用いているものがあります。 |
| 354 | | そのスタイルより詳細度を高める場合は次のようにします。 |
| 355 | | {{{ |
| 356 | | #Body #Container セレクタ { スタイル宣言 } |
| 357 | | }}} |
| 358 | | |