<< OpenPNE vol.1 - インストール編　｜　 OpenPNE vol.3 - カスタマイズ上級者編 >>

■ OpenPNEのカスタマイズ領域について
■ OpenPNEの管理画面の役割
■ カスタマイズの仕方

OpenPNEは完成度が高い反面、一つのフォーマットが出来上がっています。
またOpenPNEの管理画面の特徴として、純粋にユーザー管理に特化した作りになっています。
その為レイアウトを変更するには少々難儀な作りになってます。
ある程度のカスタマイズまでは管理画面から、それ以上は直接ソースをいじる必要があります。
以下におおまかなその境界区分を記します。

管理画面からできるカスタマイズ

・画像の変更や決められた範囲内のテキストの変更
・決められた領域内にソースを記述し、画像やテキストなどを追加配置
・静的Webページの作成
・割り振られたIDやClassの範囲内でのCSSの編集

ソースコードの直接編集が必要になるカスタマイズ

・CSSを追加、削除する必要がある場合
・定型テキストの変更
・マイフレンドリストなどのボックスの位置や大きさ、表示の有無の変更など

ここでは「管理画面からできるカスタマイズ」について記します。
ソースコードの直接編集については、「OpenPNEを更に変更する」の記事からどうぞ。

以下にデザインのカスタマイズに必要な、管理画面の役割を記します。
管理画面 > デザインタブを開きます。

　【スキン画像変更】　(難易度：易)

OpenPNEのデフォルトの画像をここで全て管理しています。
縮小画像はクリックすると拡大画像になります。
プロパティを見ると、720px×96pxなどと表示されているので
そのサイズを元にPhotoshopなどで画像を作ります。
(メニューのみ特殊で、CSSでボタンコントロールしている為、
基本的には左右の横幅位置は守って作るといいと思います。)
作成後は、参照から変更し、画像を上書きします。
(変更した場合、下にデフォルトに戻すボタンができるので安心して変更できます)

　【配色・CSS変更】　(難易度：易～上)

◇プリセットカラー　(初心者向け)
プリセットカラーを変更すると、全体のテーマとなる画像色が変更されます。青→赤など。
作った設定が上書きされてしまう為、初心者以外にはオススメしません。
◇カラーコードの設定　(初心者向け)
枠線の色などをここで指定します。デフォルトは白や灰色が指定されています。
◇カスタムCSS追加　(上級者向け)
ここがデザインをカスタマイズする上で中心の部分になります。
デフォルトは文字の色設定のみです。
これに新規CSSを追加することで、他ページで作成したCSS設定が適応されます。
デフォルトの各CSS名の場合、ここに同じ名前で上書きをすると設定が上書きされます。

　【携帯版配色変更】　(難易度：易)

携帯に限定した配色・CSS変更ページです。
携帯からのアクセスを許可する場合、ここでの設定も必要になります。
携帯からのアクセスを遮断したい場合、タブのSNS設定＞SNS設定にある
「携帯版使用設定」で使用不可にするを選択します。

　【ナビゲーション変更】　(難易度：易)

メニューの順番、またリンク先を変更します。
mixiなどを意識した場合、下手にメニューを変えると
ユーザーさんにとって分かりづらくなるかもしれないので注意が必要です。
・ナビゲーションの見方
　グローバルナビゲーション 　－　各ページ共通のメニューです。
　h_系ナビゲーション　－　ログインユーザーのトップページのメニューです。
　f_系ナビゲーション　－　フレンドのページメニューです。
　c_系ナビゲーション　－　コミュニティーページのメニューです。

　【HTML挿入】　(難易度：中)

名称がHTML挿入となっていますが、一種のテンプレートになります。
各ページ共通のフッターなどを挿入設定します。
部位は画像に表示されている赤枠部分になります。
「ログイン前フッター」に関しては、ログイン前のページ設定になりますので、
会員制SNSにする場合、ログイン後のページを指定しないように注意してください。

　【テンプレート挿入】　(難易度：中)

デフォルトのOpenPNE設定のみではなく、自分でHTMLを挿入することができます。

【PC版】 h_home　－　ログインユーザーのトップページに挿入するHTMLを記述。
【PC版】 f_home (h_prof) 　－　フレンドのページに挿入するHTMLを記述。
【PC版】 c_home 　－　コミュニティページに挿入するHTMLを記述。
【PC版】 h_reply_message 　－　メッセージを送信した時に挿入するHTMLを記述できます。
【PC版】 h_diary_add 　－　ログインユーザーが日記を書くときに表示されるページに挿入するHTMLを記述。
【PC版】 h_diary_edit －　ログインユーザーが日記を再編集する時に表示されるページに挿入するHTMLを記述。
【携帯版】 o_login －　携帯でログインページに挿入するHTMLを記述。 【携帯版】 h_home －　携帯でのログイン後のトップページに挿入するHTMLを記述
【携帯版】 f_home 　－　携帯でのフレンドページに挿入するHTMLを記述
【携帯版】 c_home －　携帯でのコミュニティページに挿入するHTMLを記述
各々挿入する位置は、【PC版】 h_homeのh_home 1であれば、画像に表示されている「１」に挿入になります。
幅が所定の幅を超えると、ページレイアウトが壊れるので注意が必要です。 パソコンの場合、左サイドが幅270pxまで。右サイドが幅440pxまで。全体幅が720px。

　【バナー設定】　(難易度：中)

ここで設定できる項目は2つあります。
トップバナー　－　各ページ共通のタイトルロゴの右側にバナーを挿入できます。(幅468px x 高さ60px)
サイドバナー －　ページ全体(720px)の更に右側に、サイドバナーがここで設置できます。(幅230px)
サイドバナーは、バナーだけでなく、mixiのようなニュースなどや、天気予報、フォームなど使い勝手は様々にできます。

　【お知らせ・規約設定】　(規約は設定必須)

ここでは、トップページに表示される、INFORMATIONの部分を設定できます。
新着メールなどは、ここに自動で追加されますが、その他で伝えたいメッセージがある場合、ここで設定をします。
利用規約・プライバシーポリシーは自分で用意する必要がある為、ここに入力をします。(HTMLタグは使用できません。)
HTMLタグが使えないと味気ない為、どうしてもHTMLタグを使いたい場合は、この次にある、「フリーページ管理」を使います。
設定をする際は、慎重に書かないといけない為、他のSNSサイトを参考にするといいと思います。

　【フリーページ管理】　(難易度：中)

ここでは自由にHTMLソースを記述することができます。
実際に作ると分かりますが、ヘッダー、フッターは自動で設定されます。
その為、中身のコンテンツを書くイメージで記述をします。

以上が管理画面のデザインタブの役割になります。

HTML初心者の方
こちらよりスキンのセットがダウンロードできますので「スキン画像変更」より画像を変更してみると
それだけでもイメージがガラリと変わります。

CSSが使える方
ソースを見ると、IDやclassのタグが割り振られていますので、「配色・CSS変更」の下のほうにある
「カスタムCSS」よりCSSを直接書き込みをします。
CSSはデフォルトのCSSのID,Classタグに対し上書きされる仕組みになっています。
例)　width:300px　→　width:400px　など。

尚、これらの編集はログイン後の画面内での編集になりますが、
ログイン前の画面を変更していくこともできます。

管理画面 > 拡張機能 > SNSポータルクリエイター

からログイン前ページを作成できます。