| | 8 | |
| | 9 | あるページのパーツのクラス名は、ページのソースを表示して「parts」などと検索すれば、[wiki:pne-xhtmlcss/tips#パーツの構造 パーツの構造]で示しているようにクラス名が記述されているのでそこから知ることができます。 |
| | 10 | |
| | 11 | CSSでどのような指定ができるのかについては、[http://w3g.jp/css/ CSSガイド - http://w3g.jp/css/]などの解説サイトを参照ください。 |
| | 12 | |
| | 13 | == スタイル指定の例 == |
| | 14 | カスタムCSSでスタイル指定する際に、セレクタとして何を用いればよいのか具体例を挙げて説明します。 |
| | 15 | |
| | 16 | === 全体に背景画像を表示する === |
| | 17 | {{{ |
| | 18 | body { |
| | 19 | background-image: url(画像のURL); |
| | 20 | } |
| | 21 | #Body, #Container { |
| | 22 | background-color: transparent; |
| | 23 | } |
| | 24 | }}} |
| | 25 | body要素に対して背景画像を指定します。 |
| | 26 | 配色設定から指定できる背景色が"#Body"と"#Container"に適用されているので、背景色を透明に指定します。 |
| | 27 | |
| | 28 | === 全体をセンタリングする === |
| | 29 | {{{ |
| | 30 | #Container { |
| | 31 | margin: 0 auto; |
| | 32 | } |
| | 33 | }}} |
| | 34 | marginプロパティは外側の余白を指定します。 |
| | 35 | 左右のmarginをautoにすることで、ボックスは中央に配置されます。 |
| | 36 | {{{ |
| | 37 | #Container { |
| | 38 | margin-left: auto; |
| | 39 | } |
| | 40 | }}} |
| | 41 | 左のmarginだけをautoにすることで、ボックスは右寄せになります。 |
| | 42 | |
| | 43 | === home系のメインテーブルの見出し部分を変える === |
| | 44 | home系とは、h_home, f_home, c_home のことです。 |
| | 45 | {{{ |
| | 46 | #Body .homeMainTable th { |
| | 47 | border-color: #FF0000; |
| | 48 | background-color: #000000; |
| | 49 | color: #FFFFFF; |
| | 50 | font-weight: bold; |
| | 51 | } |
| | 52 | #Body .homeMainTable tr:first-child th, |
| | 53 | #Body .homeMainTable tr.first-child th { |
| | 54 | border-color: #00FF00; |
| | 55 | } |
| | 56 | }}} |
| | 57 | "#Body"は詳細度を高めるための記述です。 |
| | 58 | "homeMainTable"クラスのパーツの中にある、th要素（テーブルの見出しセル）に対するスタイル指定です。 |
| | 59 | |
| | 60 | "first-child"と記述している部分は、テーブルの1行目のth要素だけを対象とするようなセレクタの記述です。 |
| | 61 | |
| | 62 | === 日記やトピック記事の画像をセンタリングする === |
| | 63 | {{{ |
| | 64 | #Body ul.photo { |
| | 65 | text-align: center; |
| | 66 | } |
| | 67 | #Body ul.photo li { |
| | 68 | margin: 0 10px; |
| | 69 | } |
| | 70 | }}} |
| | 71 | "photo"クラスのul要素に対して、インラインをセンタリングする指定を記述します。 |
| | 72 | li要素は既存のスタイルで display: inline が指定されています。li要素の左右のmarginを指定して画像の間隔を調整します。 |
| | 73 | |
| | 74 | 日記は"diaryDetailBox"クラス、トピックは"topicDetailBox"クラスですが、共通の"ul.photo"をセレクタにすることでスタイル指定を共有できます。 |
| | 75 | |
| | 76 | === 特定のページだけのパーツを指定する === |
| | 77 | あるページのパーツにスタイルを指定したいとき、そのパーツが他のページで使われていた場合、他のページのパーツまでスタイルが適用されてしまいます。 |
| | 78 | |
| | 79 | 例えば、home系にはメイン写真表示部がありますが、h_homeのメイン写真表示部のみを指定したい場合、次のようにします。 |
| | 80 | {{{ |
| | 81 | #pc_page_h_home .homePhotoBox .parts { |
| | 82 | background-color: #FFFFCC; |
| | 83 | } |
| | 84 | }}} |
| | 85 | セレクタの頭にそのページのIDをつけることで、そのページ以外にはスタイルが適用されないようにします。 |
| | 86 | ページのIDは、body要素のid属性として与えられています。 |