OpenPNEのデザインを大幅に変更する

OpenPNE自体はデフォルトで管理メニューからアイコンやCSSを追加することによってデザインをかなり変更できるのだが、もっとガバッとデザインを変更したい人向けにメモ。

カスタマイズするためにはCSSファイルとSmarty付きの.tplファイルを探す必要がある。

まず、CSSファイルは、「\OpenPNE\public_html\css」にある。「default.css」は各CSSファイルをimportしているだけなので、実質的には「\OpenPNE\public_html\css\main」をいじればよい。

ただ、このままいじってしまうと、HTML側のIDやclass属性がそのまま受け継がれるので、不便。そこで、IDやclass属性もいじっておく。ファイルは、「\OpenPNE\webapp\modules\pc\templates」にある。約100枚くらい。正直解析するだけでもかなり大変だが、各URLのパラメータを参考にすれば、大体どのページがどこのファイルかの検討はつく。

ただし、10月7日にOpenPNE2.4.0がリリースされており、そのバージョンでは「PNEBIZ」という機能が実装されており、多少前のバージョンと比べて、ファイルの構成が違うようだ。ここからは未確認だが、そのPNEBIZのデザインをいじるためには、「\OpenPNE\webapp_biz\modules\pc\templates」をいじる必要がある。

ただ、「h_com_find_all.tpl」と「h_home.tpl」はざっと見た限り、「\OpenPNE\webapp\modules\pc\templates」にあるファイルと一緒だし。また、「inc_extension_pagelayout_bottom.tpl」は右側サイドバーに管理メニューから記述できるHTML部分の記述、「inc_f_home_h_prof.tpl」は?m=pc&a=page_h_profの自分のプロフィールの確認画面、「inc_search_box.tpl」は各ページの検索ボックスをincludeしているみたいな形になっているので、結局PNEBIZを使わなくても、このあたりをカスタマイズしたい場合には、「\OpenPNE\webapp_biz\modules\pc\templates」をいじる必要が出てくることになりそう。