[[OpenPNE on FreeBSD 7.1]] &lastmod; #contents ---- http://trac.openpne.jp/wiki/pne-xhtmlcss/tips *プロフィールのニックネームを氏名に変更 [#d13ec83f] 以前のバージョンだと、http://bestpc.s153.xrea.com/pukiwiki/pukiwiki.php?%A5%CB%A5%C3%A5%AF%A5%CD%A1%BC%A5%E0%A2%AA%B2%F1%BC%D2%CC%BE のように、「ニックネーム」が現れるファイルを全部変更するようですが、2.12 では、 /OpenPNE_DIR/webapp/modules/admin/validate/do/update_c_admin_config_word.ini で設定するようなので、ニックネームを氏名に変更。 *設置後のOpenPNEのカスタマイズ 見た目編 [#y955ad42] スタイル指定の例追加するスタイル指定の記述の例を紹介します。どんなセレクタを指定すればいいのかについては後述します。 始めに、セレクタについて簡単に説明をします。 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」を対象とします。 **全体に背景画像を表示する [#r7d1a259] body { background-image: url(画像のURL); } #Body, #Container { background-color: transparent; } body要素に対して背景画像を指定します。 配色設定から指定できる背景色が #Body と #Container に適用されているので、背景色を透明に指定します。 **全体をセンタリングする(右揃えにする) [#i5e81f61] #Container { margin: 0 auto; } 左右のmarginをautoにすることで、ボックスは中央に配置されます。 #Container { margin-left: auto; } 左のmarginだけをautoにすることで、ボックスは右寄せになります。 **home系のメインテーブルの見出し部分を変える [#u1361139] 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要素だけを対象とするようなセレクタの記述です。 **日記やトピック記事の画像をセンタリングする [#hafaa78c] #Body ul.photo { text-align: center; } #Body ul.photo li { margin: 0 10px; } photo クラスのul要素に対して、インラインをセンタリングする指定を記述します。 li要素は既存のスタイルで display: inline が指定されています。 li要素の左右のmarginを指定して画像の間隔を調整します。 日記は diaryDetailBox クラス、トピックは topicDetailBox クラスですが、共通の ul.photo をセレクタにすることでスタイル指定を共有できます。日記記事、トピック記事以外に、同じクラスが使われているイベント記事にも適用されます。