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化と同時に配色設定の見直しが入ったため、カラーコードの設定項目が減っています。また、各カラーコードの設定の反映箇所も一部変更されています。
配色・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.12)	変更内容	使用方法
見出し・セル罫線	-	「1. 線の色 」に統合。inputタグの線色は配色設定から除外	詳細
テーブル外枠	-	「1. 線の色 」に統合	詳細
メッセージメニュー枠線	-	廃止	詳細
テーブル背景1	4. 枠色	Lineパーツ以外のパーツで、各パーツの縁取り部分の背景を全てこの配色で統一	詳細
テーブル内枠	1. 線の色	Lineパーツ以外のパーツで、パーツの1px罫線の色を全てこの配色で統一	詳細
セル背景1	7. ボックスの背景	Lineパーツ以外のパーツで、パーツ内の背景色を全てこの配色で統一	詳細
セル背景2	-	「7. ボックスの背景」に統合	詳細
紹介文下部罫線	-	「1. 線の色 」に統合	詳細
テーブル背景2	-	「4. 枠色」に統合	詳細
見出し背景	5. 見出し背景	変更なし	詳細
9面パネル罫線	-	「1. 線の色 」に統合	詳細
テーブル・項目背景1	-	「7. ボックスの背景」に統合	詳細
テーブル・項目背景2	6. 説明領域背景	Lineパーツ以外のパーツで、項目の説明にあたる部分を全てこの配色で統一	詳細
日記カレンダー背景	8. 左メニュー枠色	影響範囲を左メニューの外枠だけに変更。 日記ページ左に入るカレンダーの区切り罫などには影響せず	詳細
お知らせ見出し背景	-	「6. 説明領域背景」に統合	詳細
サイドバナー領域背景	2. ページ背景	HTML挿入A・HTML挿入D・サイドバナー領域に範囲を縮小	詳細
コンテンツ領域背景	3. コンテンツ領域背景	影響範囲がHTML挿入B・HTML挿入Cの部分まで拡大	詳細
カレンダー(日曜)背景	-	「7. ボックスの背景」に統合	詳細
Searchフォーム背景	-	「3. コンテンツ領域背景」に統合	詳細

→2.12からのバージョンで2.10の配色を使用する方法の一覧

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

• 【2.10】SNS配色設定対応表
• ​【2.12】SNS配色設定対応表

管理画面から行うカスタマイズのバージョンアップ対応

「MyNews」「ポイント・ランクのフレンドホーム」のような、管理画面から行うカスタマイズのテンプレートもXHTMLCSS化に対応しています。詳細はOpenPNEカスタマイズをご覧ください。

CSSのカスタマイズ

CSSのカスタマイズ方法はOpenPNE2.12でできる見栄えの変更をご覧ください。

WikiInclude(DIRECTORYNAVI)?