wiki:pne-xhtmlcss/upgrade
 ここの情報は古いです。ご理解頂いた上でお取り扱いください。

Version 6 (modified by kiwa, 13 years ago) (diff)

#2748:配色設定に関する内容を追加

TOC

XHTMLCSS化 バージョンアップ時の注意

OpenPNE2.12はXHTMLCSS化でテンプレートの書き方が大幅に変わっています。 ここでは、バージョンアップ時の注意点をご紹介します。

OpenPNE2.10までと違うこと

PC版のテンプレートが全て書き換えられている

XHTMLCSS化のため、PC版の全てのテンプレートファイルを書き直しました。そのため、2.10までの書き方とは全く変わっています。

2.10まで使用していたCSSファイルの削除、2.12用CSSファイルの追加

2.10までのCSSファイルを削除して新しいCSSファイルを作成しました。2.10までのテンプレートをそのまま使用すると表示やレイアウトが崩れてしまいます。

【参考】2.10までのCSSファイル
browser:OpenPNE/branches/stable-2.10.x/public_html/css
【参考】2.12からのCSSファイル
browser:OpenPNE/branches/stable-2.12.x/public_html/xhtml_style.php

配色設定・配色設定の反映部分の変更

XHTML+CSS化と同時に配色設定の見直しが入ったため、カラーコードの設定項目が減っています。また、各カラーコードの設定の反映箇所も一部変更されています。カラーコードの設定を変更されている場合、2.10と2.12で見栄えが大きく変わってしまう可能性があります。

バージョンアップ時に影響する場所

管理画面の以下の設定は、XHTML+CSS化の影響をうけています。バージョンアップ後に必ず確認してください。

ページ名 設定項目 注意点
配色・CSS変更 カスタムCSS CSSの変更により各パーツのclass指定が全て変更されたため、2.10までのCSSが反映されない箇所が多くあります
配色・CSS変更 カラーコードの設定 XHTML+CSS化と同時に配色設定の見直しが入ったため、カラーコードの設定項目が減っています。また、各カラーコードの設定の反映箇所も一部変更されています。http://www.openpne.jp/pne-edit_color 詳細
配色・CSS変更 プリセットカラー 配色設定の見直しが入ったため、プリセットカラーも全て変更されています
HTML挿入 全て 各パーツのclass指定やテンプレートの書き方がすべて変更されているため、2.10までのHTMLでは表示が崩れてしまう可能性があります
テンプレート挿入 全て テンプレートの書き方がすべて変更されているため、2.10までのテンプレートでは表示が崩れてしまう可能性があります
バナー設定 任意HTMLで表示する テンプレートの書き方がすべて変更されているため、2.10までのテンプレートでは表示が崩れてしまう可能性があります。
また、サイドバナーは2.10までデフォルトで中央揃えになっていましたが、2.12では左揃えになっています
お知らせ・規約設定 【PC版】 h_homeのお知らせ テンプレートの書き方がすべて変更されているため、HTMLタグを使用している場合は2.10までのHTMLでは表示が崩れてしまう可能性があります
フリーページ管理 対象ブラウザがPC版のフリーページ全て テンプレートの書き方がすべて変更されているため、2.10までのテンプレートでは表示が崩れてしまう可能性があります
スキン画像変更 カスタマイズ設定 テンプレート内での画像の表示方法が変更されている場所もあります。
規定のサイズと大きく異なる画像を設定している場合、レイアウト崩れの原因となる可能性もありますのでご注意ください

カラーコード設定の変更内容一覧

項目名が「-」になっている項目はそのバージョンに存在しない項目です。

項目名(2.10) 項目名(2.8) 項目名(2.12) 変更内容
見出し・セル罫線 border_01 - 「1. 線の色 」に統合。inputタグの線色は配色設定から除外
テーブル外枠 border_07 - 「1. 線の色 」に統合
メッセージメニュー枠線 border_10 - 廃止
テーブル背景1 bg_00 4. 枠色 「テーブル背景1」「テーブル背景2」を統合
テーブル内枠 bg_01 1. 線の色
セル背景1 bg_02 7. ボックスの背景
セル背景2 bg_03 - 「7. ボックスの背景」に統合
紹介文下部罫線 bg_04 - 「1. 線の色 」に統合
テーブル背景2 bg_05 - 「4. 枠色」に統合
見出し背景 bg_06 5. 見出し背景
9面パネル罫線 bg_07 - 「1. 線の色 」に統合
テーブル・項目背景1 bg_08 - 「7. ボックスの背景」に統合
テーブル・項目背景2 bg_09 6. 説明領域背景
日記カレンダー背景 bg_10 8. 左メニュー枠色
お知らせ見出し背景 bg_11 - 「6. 説明領域背景」に統合
サイドバナー領域背景 bg_12 2. ページ背景
コンテンツ領域背景 bg_13 3. コンテンツ領域背景
カレンダー(日曜)背景 bg_14 - 「7. ボックスの背景」に統合
Searchフォーム背景 - - 「3. コンテンツ領域背景」に統合

配色設定についての詳細は以下をご覧ください。

配色を2.10と同じものにするには

再現が難しい部分

以下の部分は新テンプレートの都合上2.12で再現するのは難しい内容となっています。

同じパーツの罫線に複数の要素が含まれている部分

メッセージメニュー枠線

カスタムCSSで変更

パーツごとにデザインの変更を行う

※内容編集中

詳細はOpenPNE2.12でできる見栄えの変更「特定のページだけのパーツを指定する」をご覧ください。

カスタマイズ例

よくあるカスタマイズの例をご紹介します。2.10まででこのようなカスタマイズを行っていた場合、2.12では説明のとおりに変更してください。

シンプルなテーブルをつくる

サンプル画像

シンプルなテーブルを作ります。
wiki:pne-xhtmlcss/parts/1 にある!SimpleBoxのマークアップ例を参考にして、テンプレート挿入に以下のようなHTMLタグを挿入します。

<div class="dparts simpleBox"><div class="parts">
<div class="partsHeading"><h3>サンプルです</h3></div>
<div class="block">
<p>こんにちは、サンプルです</p>
</div>
</div></div>

テンプレート挿入の「変更する」ボタンを押せば、画像のようなテーブルの完成です。

このようなテーブル以外も、既存のパーツなら全てパーツのマークアップ例を参考にすれば簡単に作成することが出来ます。

詳細はXHTMLCSS化パーツリストをご覧ください。

画面を中央揃えにする

サンプル画像

全体の表示を中央揃えにするには、カスタムCSSに以下のCSSを挿入します。

#Container { margin: 0 auto; }

これで全体の表示が中央揃えになります。

背景を画像にする

サンプル画像

背景を画像にするにはカスタムCSSに以下のCSSを挿入します。

div#Body { background-image: url('壁紙画像のURL'); }

これで背景が画像に変更されますが、このままではページの縦幅がウインドウより小さかった場合にページの下の方に画像が反映されていません。

サンプル画像追加

なので、カスタムCSSを以下のように変更します。

body { background-image: url('壁紙画像のURL'); }
div#Body { background: transparent; }

これで背景が全て画像に変更されます。

サンプル画像

Attachments (5)

Download all attachments as: .zip