XHTML+CSS化 バージョンアップ時の注意

OpenPNEのバージョン2.12ではXHTML+CSS化によりPC版のHTML、CSSの内容が一新されました。ここでは、OpenPNEのバージョン2.10から2.12へバージョンアップする際に注意が必要な点をご紹介します。

XHTML+CSS化については、XHTML+CSS化プロジェクトWikiをご覧ください。

目次

  1. OpenPNE2.12での変更点
  2. バージョンアップ時に影響する設定項目一覧
  3. 配色設定の変更内容一覧
  4. 管理画面から行うカスタマイズの2.12対応
  5. カスタムCSSの2.12対応

OpenPNE2.12での変更点

テンプレートファイルの書き直し

PC版の全てのテンプレートファイルが一から書き直されています。そのためテンプレートの書き方が2.10までと全く違います。

CSSファイルの書き直し

2.10までのバージョンで使用されていたCSSファイルが削除され、2.12用に新しいCSSファイルが追加されています。そのため2.10までのテンプレートをそのまま使用すると、表示やレイアウトが崩れてしまう可能性があります。

【参考】Ver2.10まで使用されていたCSSファイル
browser:OpenPNE/branches/stable-2.10.x/public_html/css
【参考】Ver2.12から使用されるCSSファイル
browser:OpenPNE/branches/stable-2.12.x/public_html/xhtml_style.php

配色設定が反映される部分の変更

管理画面から設定できるPC版の配色設定の項目が用途別に統一されたため、一部の配色設定項目では色が反映される部分が変更されています。配色設定を変更されている場合、2.10と2.12で見栄えが大きく変わってしまう可能性があります。

バージョンアップ時に影響する設定項目一覧

管理画面から変更が行える以下の設定項目はXHTML+CSS化の影響を受けます。バージョンアップ後に必ず確認してください。

配色・CSS変更

カスタムCSS
HTMLの構造が一新されているため、2.10までのCSSが反映されない箇所が多くあります。CSSの書き換えが必要です。
カラーコードの設定
XHTML+CSS化と同時に配色設定が見直されたため、カラーコードの設定項目が統一され項目数が減っています。また、各カラーコードの設定の反映箇所も一部変更されています。詳細は配色設定の変更内容一覧をご覧ください。
プリセットカラー
配色設定の見直しに伴いプリセットカラーも全て変更されています。2.10までのプリセットカラーをお使いの方はバックアップをとることをお勧めします。

HTML挿入

全ての設定項目
HTMLの構造、CSSのスタイル指定が一新されているため、2.10までのHTMLでは表示が崩れてしまう可能性があります。HTMLの書き換えが必要です。

テンプレート挿入

全ての設定項目
HTMLの構造、CSSのスタイル指定が一新されているため、2.10までのテンプレートでは表示が崩れてしまう可能性があります。テンプレートの書き換えが必要です。

バナー設定

任意HTMLで表示する
HTMLの構造、CSSのスタイル指定が一新されているため、2.10までのHTMLでは表示が崩れてしまう可能性があります。
また、サイドバナーは2.10までデフォルトで中央揃えになっていましたが、2.12では左揃えになっています。2.12の仕様にあわせてレイアウトの調整が必要になる可能性があります。

お知らせ・規約設定

【PC版】 h_homeのお知らせ
HTMLの構造、CSSのスタイル指定が一新されているため、2.10までのHTMLでは表示が崩れてしまう可能性があります。HTMLの書き換えが必要です。

フリーページ管理

対象ブラウザがPC版のフリーページ全て
HTMLの構造、CSSのスタイル指定が一新されているため、2.10までのテンプレートでは表示が崩れてしまう可能性があります。テンプレートの書き換えが必要です。

スキン画像変更

カスタマイズ設定
テンプレート内での画像の表示方法が変更されている場所もあります。
規定のサイズと大きく異なるサイズの画像を設定している場合、レイアウト崩れの原因となる可能性もありますのでご注意ください。

配色設定の変更内容一覧

2.10と2.12の配色設定の比較表です。

項目名(2.10) 項目名(2.12) 変更内容 使用方法
見出し・セル罫線 - 項目の削除。「1. 線の色」の設定が使用される。inputタグの線色は配色設定から除外 詳細
テーブル外枠 - 項目の削除。「1. 線の色」の設定が使用される 詳細
メッセージメニュー枠線 - 配色設定から除外 詳細
テーブル背景1 4. 枠色 影響範囲の拡大。詳細→SNS配色設定対応表
テーブル内枠 1. 線の色 影響範囲の拡大。詳細→SNS配色設定対応表
セル背景1 7. ボックスの背景 影響範囲の拡大。詳細→SNS配色設定対応表
セル背景2 - 項目の削除。「7. ボックスの背景」の設定が使用される 詳細
紹介文下部罫線 - 項目の削除。「1. 線の色」の設定が使用される 詳細
テーブル背景2 - 項目の削除。「4. 枠色」の設定が使用される 詳細
見出し背景 5. 見出し背景 　変更なし
9面パネル罫線 - 項目の削除。「1. 線の色」の設定が使用される 詳細
テーブル・項目背景1 - 項目の削除。「7. ボックスの背景」の設定が使用される 詳細
テーブル・項目背景2 6. 説明領域背景 影響範囲の拡大。詳細→SNS配色設定対応表
日記カレンダー背景 8. 左メニュー枠色 影響範囲を左メニューの外枠だけに変更。
日記ページ左に入るカレンダーの区切り罫などは配色設定から除外 		詳細
お知らせ見出し背景 - 項目の削除。「6. 説明領域背景」が使用される 詳細
サイドバナー領域背景 2. ページ背景 HTML挿入A・HTML挿入D・サイドバナー領域に範囲を縮小 詳細
コンテンツ領域背景 3. コンテンツ領域背景 影響範囲がHTML挿入B・HTML挿入Cの部分まで拡大 詳細
カレンダー(日曜)背景 - 項目の削除。「7. ボックスの背景」の設定が使用される 詳細
Searchフォーム背景 - 項目の削除。「3. コンテンツ領域背景」の設定が使用される 詳細

配色設定の対応箇所は以下をご覧ください。

管理画面から行うカスタマイズの2.12対応

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

カスタムCSSの2.12対応

OpenPNE2.12でできる見栄えの変更

2.12のHTMLの構造やカスタマイズ例が紹介されています。2.10で行っていたCSSのカスタマイズを2.12で行う場合はこちらを参考にしてください。

Attachments