Context Navigation

ここの情報は古いです。ご理解頂いた上でお取り扱いください。

Changes between Version 11 and Version 12 of pne-xhtmlcss/upgrade

Timestamp:: Jul 3, 2008, 2:59:32 PM (13 years ago)
Author:: kiwa
Comment:: #2748:文章やレイアウトを修正

Legend:

: Unmodified
: Added
: Removed
: Modified

pne-xhtmlcss/upgrade

-                      v11
+                      v12
+[[TOC]]
+= XHTMLCSS化 バージョンアップ時の注意 =
+= XHTML+CSS化 バージョンアップ時の注意 =
+OpenPNE2.12はXHTMLCSS化でテンプレートの書き方が大幅に変わっています。
+ここでは、バージョンアップ時の注意点をご紹介します。
+OpenPNE2.12(以下2.12)はXHTML+CSS化でテンプレートの書き方が大幅に変わっています。
+ここでは、OpenPNE2.10(以下2.10)からの2.12にバージョンアップする際の注意点をご紹介します。
+XHTML+CSS化については[wiki:pne-xhtmlcss XHTML+CSS化プロジェクトWiki]をご覧ください。
+== OpenPNE2.10までと違うこと ==
+[[TOC(inline,heading=目次,depth=2)]]
+== 2.10から2.12にかけての変更点 ==
 === PC版のテンプレートが全て書き換えられている ===
  XHTMLCSS化のため、PC版の全てのテンプレートファイルを書き直しました。そのため、2.10までの書き方とは全く変わっています。
+XHTML+CSS化のためPC版の全てのテンプレートファイルを新しく書き直しました。そのため、テンプレートの書き方が2.10までと全く違っています。
 === 2.10まで使用していたCSSファイルの削除、2.12用CSSファイルの追加 ===
 .10までのCSSファイルを削除して新しいCSSファイルを作成しました。2.10までのテンプレートをそのまま使用すると表示やレイアウトが崩れてしまいます。
+.10まで使用していたCSSファイルを削除して新しいCSSファイルを作成しました。2.10までのテンプレートをそのまま使用すると、CSSファイルが存在しないために表示やレイアウトが崩れてしまいます。
  【参考】2.10までのCSSファイル::
+ 【参考】Ver2.10まで使用されていたCSSファイル::
    browser:OpenPNE/branches/stable-2.10.x/public_html/css
  【参考】2.12からのCSSファイル::
+ 【参考】Ver2.12から使用されるCSSファイル::
    browser:OpenPNE/branches/stable-2.12.x/public_html/xhtml_style.php
 === 配色設定・配色設定の反映部分の変更 ===
  XHTML+CSS化と同時に配色設定の見直しが入ったため、カラーコードの設定項目が減っています。また、各カラーコードの設定の反映箇所も一部変更されています。カラーコードの設定を変更されている場合、2.10と2.12で見栄えが大きく変わってしまう可能性があります。
+.12で配色設定を用途別に統一したため、配色設定項目が削減されて配色が反映される部分も変更されています。配色設定を変更されている場合、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までのテンプレートでは表示が崩れてしまう可能性があります。[[br]]また、サイドバナーは2.10までデフォルトで中央揃えになっていましたが、2.12では左揃えになっています ||
+ || お知らせ・規約設定 || 【PC版】 h_homeのお知らせ || テンプレートの書き方がすべて変更されているため、HTMLタグを使用している場合は2.10までのHTMLでは表示が崩れてしまう可能性があります ||
+ || フリーページ管理 || 対象ブラウザがPC版のフリーページ全て ||  テンプレートの書き方がすべて変更されているため、2.10までのテンプレートでは表示が崩れてしまう可能性があります ||
+ || スキン画像変更 || カスタマイズ設定 || テンプレート内での画像の表示方法が変更されている場所もあります。[[br]]規定のサイズと大きく異なる画像を設定している場合、レイアウト崩れの原因となる可能性もありますのでご注意ください ||
+== バージョンアップ時に影響する設定項目一覧 ==
+管理画面から変更が行える以下の項目はXHTML+CSS化の影響を受けます。バージョンアップ後に必ず確認してください。
+== カラーコード設定の変更内容一覧 ==
+=== 配色・CSS変更 ===
+ カスタムCSS::
+   CSSの変更により各パーツのclass指定が全て変更されたため、2.10までのCSSが反映されない箇所が多くあります。CSSの書き換えが必要です。
+ カラーコードの設定::
+   XHTML+CSS化と同時に配色設定の見直しが入ったため、カラーコードの設定項目が減っています。また、各カラーコードの設定の反映箇所も一部変更されています。詳細は[wiki:pne-xhtmlcss/upgrade#配色設定の変更内容一覧 配色設定の変更内容一覧]をご覧ください。
+ プリセットカラー::
+   配色設定の見直しが入ったため、プリセットカラーも全て変更されています。2.10までのプリセットカラーをお使いの方はバックアップをとることをお勧めします。
+=== HTML挿入 ===
+ 全ての設定項目::
+   各パーツのclass指定やテンプレートの書き方がすべて変更されているため、2.10までのHTMLでは表示が崩れてしまう可能性があります。HTMLの書き換えが必要です。
+=== テンプレート挿入 ===
+ 全ての設定項目::
+   テンプレートの書き方がすべて変更されているため、2.10までのテンプレートでは表示が崩れてしまう可能性があります。テンプレートの書き換えが必要です。
+=== バナー設定 ===
+ 任意HTMLで表示する::
+   テンプレートの書き方がすべて変更されているため、2.10までのテンプレートでは表示が崩れてしまう可能性があります。[[br]]また、サイドバナーは2.10までデフォルトで中央揃えになっていましたが、2.12では左揃えになっています。2.12の仕様にあわせてレイアウトの調整が必要になる可能性があります。
+=== お知らせ・規約設定 ===
+ 【PC版】 h_homeのお知らせ::
+   テンプレートの書き方がすべて変更されているため、HTMLタグを使用している場合は2.10までのHTMLでは表示が崩れてしまう可能性があります。HTMLの書き換えが必要です。
+=== フリーページ管理 ===
+ 対象ブラウザがPC版のフリーページ全て::
+    テンプレートの書き方がすべて変更されているため、2.10までのテンプレートでは表示が崩れてしまう可能性があります。テンプレートの書き換えが必要です。
+=== スキン画像変更 ===
+ カスタマイズ設定::
+   テンプレート内での画像の表示方法が変更されている場所もあります。[[br]]規定のサイズと大きく異なる画像を設定している場合、レイアウト崩れの原因となる可能性もありますのでご注意ください。
+ 項目名が「-」になっている項目はそのバージョンに存在しない項目です。
+ || 項目名(2.10) || 項目名(2.12) || 変更内容 || 使用方法 ||
+ || 見出し・セル罫線 || - || '''「1. 線の色 」に統合'''。inputタグの線色は配色設定から除外 ||[wiki:pne-xhtmlcss/upgrade/colorcode#c1 詳細] ||
+ || テーブル外枠 || - || '''「1. 線の色 」に統合''' ||[wiki:pne-xhtmlcss/upgrade/colorcode#c2 詳細] ||
+ || メッセージメニュー枠線 || - || 廃止 ||[wiki:pne-xhtmlcss/upgrade/colorcode#c3 詳細] ||
+ || テーブル背景1 || 4. 枠色 || [wiki:pne-xhtmlcss/parts/capturelist Lineパーツ]以外のパーツで、各パーツの縁取り部分の背景を全てこの配色で統一 ||[wiki:pne-xhtmlcss/upgrade/colorcode#c4 詳細] ||
+ || テーブル内枠 || 1. 線の色 || [wiki:pne-xhtmlcss/parts/capturelist Lineパーツ]以外のパーツで、パーツの1px罫線の色を全てこの配色で統一 ||[wiki:pne-xhtmlcss/upgrade/colorcode#c5 詳細] ||
+ || セル背景1 || 7. ボックスの背景 || [wiki:pne-xhtmlcss/parts/capturelist Lineパーツ]以外のパーツで、パーツ内の背景色を全てこの配色で統一 ||[wiki:pne-xhtmlcss/upgrade/colorcode#c6 詳細] ||
+ || セル背景2 || - || '''「7. ボックスの背景」に統合''' ||[wiki:pne-xhtmlcss/upgrade/colorcode#c7 詳細] ||
+ || 紹介文下部罫線 || - || '''「1. 線の色 」に統合''' ||[wiki:pne-xhtmlcss/upgrade/colorcode#c8 詳細] ||
+ || テーブル背景2 || - || '''「4. 枠色」に統合''' ||[wiki:pne-xhtmlcss/upgrade/colorcode#c9 詳細] ||
+ || 見出し背景 || 5. 見出し背景 ||　変更なし ||[wiki:pne-xhtmlcss/upgrade/colorcode#c10 詳細] ||
+ || 9面パネル罫線 || - || '''「1. 線の色 」に統合''' ||[wiki:pne-xhtmlcss/upgrade/colorcode#c11 詳細] ||
+ || テーブル・項目背景1 || - || '''「7. ボックスの背景」に統合''' ||[wiki:pne-xhtmlcss/upgrade/colorcode#c12 詳細] ||
+ || テーブル・項目背景2 || 6. 説明領域背景 || [wiki:pne-xhtmlcss/parts/capturelist Lineパーツ]以外のパーツで、項目の説明にあたる部分を全てこの配色で統一 ||[wiki:pne-xhtmlcss/upgrade/colorcode#c13 詳細] ||
+ || 日記カレンダー背景 || 8. 左メニュー枠色 || 影響範囲を左メニューの外枠だけに変更。[[br]]日記ページ左に入るカレンダーの区切り罫などには影響せず ||[wiki:pne-xhtmlcss/upgrade/colorcode#c14 詳細] ||
+ || お知らせ見出し背景 || - || '''「6. 説明領域背景」に統合''' ||[wiki:pne-xhtmlcss/upgrade/colorcode#c15 詳細] ||
+ || サイドバナー領域背景 || 2. ページ背景 || HTML挿入A・HTML挿入D・サイドバナー領域に範囲を縮小 ||[wiki:pne-xhtmlcss/upgrade/colorcode#c16 詳細] ||
+ || コンテンツ領域背景 || 3. コンテンツ領域背景 || 影響範囲がHTML挿入B・HTML挿入Cの部分まで拡大 ||[wiki:pne-xhtmlcss/upgrade/colorcode#c17 詳細] ||
+ || カレンダー(日曜)背景 || - || '''「7. ボックスの背景」に統合''' ||[wiki:pne-xhtmlcss/upgrade/colorcode#c18 詳細] ||
+ || Searchフォーム背景 || - || '''「3. コンテンツ領域背景」に統合''' ||[wiki:pne-xhtmlcss/upgrade/colorcode#c19 詳細] ||
+ →[wiki:pne-xhtmlcss/upgrade/colorcode 2.12からのバージョンで2.10の配色を使用する方法の一覧]
+== 配色設定の変更内容一覧 ==
+.10と2.12の配色設定の比較一覧です。
+ 配色設定についての詳細は以下をご覧ください。
+ * 「使用方法」はカスタムCSSを用いて2.12で2.10の配色設定を使用する方法です([wiki:pne-xhtmlcss/upgrade/colorcode 2.12からのバージョンで2.10の配色を使用する方法の一覧])
+ * 「-」と表記されている項目はそのバージョンに存在しません
+|| 項目名(2.10) || 項目名(2.12) || 変更内容 || 使用方法 ||
+|| 見出し・セル罫線 || - || 項目の削除。「1. 線の色 」の設定が使用される。inputタグの線色は配色設定から除外 ||[wiki:pne-xhtmlcss/upgrade/colorcode#c1 詳細] ||
+|| テーブル外枠 || - || 項目の削除。「1. 線の色 」の設定が使用される ||[wiki:pne-xhtmlcss/upgrade/colorcode#c2 詳細] ||
+|| メッセージメニュー枠線 || - || 配色設定から除外 ||[wiki:pne-xhtmlcss/upgrade/colorcode#c3 詳細] ||
+|| テーブル背景1 || 4. 枠色 || 影響範囲の拡大。詳細→[http://www.openpne.jp/openpne-edit_colo#4 SNS配色設定対応表] || ||
+|| テーブル内枠 || 1. 線の色 || 影響範囲の拡大。詳細→[http://www.openpne.jp/openpne-edit_colo#1 SNS配色設定対応表] || ||
+|| セル背景1 || 7. ボックスの背景 || 影響範囲の拡大。詳細→[http://www.openpne.jp/openpne-edit_colo#7 SNS配色設定対応表] || ||
+|| セル背景2 || - || 項目の削除。「7. ボックスの背景」の設定が使用される ||[wiki:pne-xhtmlcss/upgrade/colorcode#c7 詳細] ||
+|| 紹介文下部罫線 || - || 項目の削除。「1. 線の色 」の設定が使用される ||[wiki:pne-xhtmlcss/upgrade/colorcode#c8 詳細] ||
+|| テーブル背景2 || - || 項目の削除。「4. 枠色」の設定が使用される ||[wiki:pne-xhtmlcss/upgrade/colorcode#c9 詳細] ||
+|| 見出し背景 || 5. 見出し背景 ||　変更なし || ||
+|| 9面パネル罫線 || - || 項目の削除。「1. 線の色 」の設定が使用される ||[wiki:pne-xhtmlcss/upgrade/colorcode#c11 詳細] ||
+|| テーブル・項目背景1 || - || 項目の削除。「7. ボックスの背景」の設定が使用される ||[wiki:pne-xhtmlcss/upgrade/colorcode#c12 詳細] ||
+|| テーブル・項目背景2 || 6. 説明領域背景 || 影響範囲の拡大。詳細→[http://www.openpne.jp/openpne-edit_colo#6 SNS配色設定対応表] || ||
+|| 日記カレンダー背景 || 8. 左メニュー枠色 || 影響範囲を左メニューの外枠だけに変更。[[br]]日記ページ左に入るカレンダーの区切り罫などは配色設定から除外 ||[wiki:pne-xhtmlcss/upgrade/colorcode#c14 詳細] ||
+|| お知らせ見出し背景 || - || 項目の削除。「6. 説明領域背景」が使用される ||[wiki:pne-xhtmlcss/upgrade/colorcode#c15 詳細] ||
+|| サイドバナー領域背景 || 2. ページ背景 || HTML挿入A・HTML挿入D・サイドバナー領域に範囲を縮小 ||[wiki:pne-xhtmlcss/upgrade/colorcode#c16 詳細] ||
+|| コンテンツ領域背景 || 3. コンテンツ領域背景 || 影響範囲がHTML挿入B・HTML挿入Cの部分まで拡大 ||[wiki:pne-xhtmlcss/upgrade/colorcode#c17 詳細] ||
+|| カレンダー(日曜)背景 || - || 項目の削除。「7. ボックスの背景」の設定が使用される ||[wiki:pne-xhtmlcss/upgrade/colorcode#c18 詳細] ||
+|| Searchフォーム背景 || - || 項目の削除。「3. コンテンツ領域背景」の設定が使用される ||[wiki:pne-xhtmlcss/upgrade/colorcode#c19 詳細] ||
+配色設定の対応箇所は以下をご覧ください。
  * [wiki:edit_color 【2.10】SNS配色設定対応表]
  * [http://www.openpne.jp/openpne-edit_color 【2.12】SNS配色設定対応表]
+== 管理画面から行うカスタマイズのバージョンアップ対応 ==
+ 「!MyNews」「ポイント・ランクのフレンドホーム」のような、管理画面から行うカスタマイズのテンプレートもXHTMLCSS化に対応しています。詳細は[wiki:pne-customize OpenPNEカスタマイズ]をご覧ください。
+== CSSのカスタマイズ ==
+ CSSのカスタマイズ方法は[wiki:pne-xhtmlcss/tips OpenPNE2.12でできる見栄えの変更]をご覧ください。
+== 管理画面から行うカスタマイズの2.12対応 ==
+「!MyNews」「ポイント・ランクのフレンドホーム」のような、管理画面から行うカスタマイズのテンプレートもXHTML+CSS化に対応しています。詳細は[wiki:pne-customize OpenPNEカスタマイズ]をご覧ください。
+== カスタムCSSの2.12対応 ==
+[wiki:pne-xhtmlcss/tips OpenPNE2.12でできる見栄えの変更]
+.12のCSSの構造やカスタマイズ例が紹介されています。2.10で行っていたCSSのカスタマイズを2.12で行う場合はこちらを参考にしてください。
 [[WikiInclude(DIRECTORYNAVI)]]