Whisper | Webの忘備録 > OpenPNE > OpenPNE vol.3 - カスタマイズ上級者編
OpenPNE vol.3 - カスタマイズ上級者編
OpenPNE2009.05.14
OpenPNEのデザインの大幅なカスタマイズをする
OpenPNEのデザインをカスタマイズする方法は
前述の記事「OpenPNEのデザインを変更する」で既に述べましたが、
ある程度テンプレートとして完成している為、
CSSの新規追加や、固定テキストの変更などは、管理画面からは変更できません。
また大幅なデザインの変更を考えた場合、管理画面からのカスタムCSSからは難しい話です。
そういった場合は大本のソースコードを変更します。
例えば「友人を招待する」ページのソースコードを見ると、
どうやらそれにヒントがあるようですが‥ 「友人を招待する」ページを探してみると
以下の階層に「h_invite」の関連ファイルが見つかります。
中心となるのは拡張子tpl(テンプレート)のファイルになります。
今回の場合は、「h_invite.tpl」を開きます。
※DreamWeaverCS4環境では、tplファイルはデザインビュー表示ができましたが、
もし表示がうまくいかない場合はこちらのNegaDiary様のサイトを見ると分かりやすいです。
編集をする前に編集するtplファイルをバックアップを念のためとっておきます。
HTML、CSS、テキストなどを変更します。
変更が完了したら保存をし、本サーバーのファイルに上書きを行います。
ページを確認し、設定が反映されていることを確認します。
これが上手く構造把握できると、OpenPNEのデザインは好きにカスタマイズできそうですね。
前述の記事「OpenPNEのデザインを変更する」で既に述べましたが、
ある程度テンプレートとして完成している為、
CSSの新規追加や、固定テキストの変更などは、管理画面からは変更できません。
また大幅なデザインの変更を考えた場合、管理画面からのカスタムCSSからは難しい話です。
そういった場合は大本のソースコードを変更します。
ソースコードを編集する
各々のページを開き、ソースコードを見ると、<body>タグに固有のIDが割り振られています。例えば「友人を招待する」ページのソースコードを見ると、
<body id="pc_page_h_invite">
と記述されています。どうやらそれにヒントがあるようですが‥ 「友人を招待する」ページを探してみると
以下の階層に「h_invite」の関連ファイルが見つかります。
webapp > modules > pc > templates > h_invite.tpl
webapp > modules > pc > page > h_invite.php
webapp > modules > pc > validate > page > h_invite.ini
中心となるのは拡張子tpl(テンプレート)のファイルになります。
今回の場合は、「h_invite.tpl」を開きます。
※DreamWeaverCS4環境では、tplファイルはデザインビュー表示ができましたが、
もし表示がうまくいかない場合はこちらのNegaDiary様のサイトを見ると分かりやすいです。
編集をする前に編集するtplファイルをバックアップを念のためとっておきます。
HTML、CSS、テキストなどを変更します。
変更が完了したら保存をし、本サーバーのファイルに上書きを行います。
ページを確認し、設定が反映されていることを確認します。
これが上手く構造把握できると、OpenPNEのデザインは好きにカスタマイズできそうですね。
同じカテゴリの記事に以下のものがあります。
