Version 1 (modified by 13 years ago) (diff) | ,
---|
XHTMLCSS化 バージョンアップ時の注意
2.12はXHTMLCSS化でテンプレートの書き方が大幅に変わっています。 ここでは、バージョンアップ時の注意点をご紹介します。
2.10までと違うこと
PC版のテンプレートが全て書き換えられている
XHTMLCSS化のため、PC版の全てのテンプレートファイルを書き直しました。そのため、2.10までの書き方とは全く変わっています。
2.10まで使用していたCSSファイルの削除、2.12用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化の影響をうけています。
ページ名 設定項目 内容 配色・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までのテンプレートでは表示が崩れてしまう可能性があります スキン画像変更 カスタマイズ設定 テンプレート内での画像の表示方法が変更されている場所もあります。
規定のサイズと大きく異なる画像を設定している場合、レイアウト崩れの原因となる可能性もありますのでご注意ください
テンプレートの書き方
シンプルなテーブルをつくる
シンプルなテーブルを作ります。
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にもう1行追加します。
div#Body { background-image:url('壁紙画像のURL');} body { background-image:url('壁紙画像のURL');}
Attachments (5)
-
20080605_pc_page_h_bookmark_list1.png (125.7 KB) - added by 13 years ago.
サンプル画像追加
-
20080605_pc_page_h_bookmark_list2.png (134.0 KB) - added by 13 years ago.
サンプル画像
-
20080605_pc_page_h_home2.png (173.6 KB) - added by 13 years ago.
サンプル画像
-
20080605_pc_page_h_home3.png (152.4 KB) - added by 13 years ago.
サンプル画像
-
20080605_pc_page_h_home.png (63.9 KB) - added by 13 years ago.
サンプル画像
Download all attachments as: .zip