CentOS5で新サーバ構築/(9)OpenPNEのカスタマイズ のバックアップ(No.1)

OpenPNEのカスタマイズ †

  • Wordpressを立ちあげた時は、デザイン関係のカスタマイズをPHPのソースレベルで細々とやってしまった。それはそれで勉強にもなってよかったのだが、反面、バージョンアップのハードルを高くしてしまうことになった。
  • その反省から、OpenPNEはあまり手を入れたくなかったが、以下の点はカスタマイズした。
↑

画面デザイン(配色設定) †

  • Wordpressとの一番大きい違いは、管理者向けの機能が充実しており、基本画面の配色設定画面が用意されている。かなりの部分がカスタマイズできるので、できるだけこの範囲にとどめて調整した。
  • 基本的には、adminの設定画面にあり、「デザイン」-「配色設定」から行う。なんと１９項目もあるが、タイトルでは詳細不明なので、実際に赤色設定してみてどこが変わるか確認しながらの手探り作業だった。 
    ①見出し・セル罫線:  color_1 = "336666"
②テーブル外枠:  color_2 = "336666"   
③メッセージメニュー枠線:　color_3 = "336666"
④テーブル背景：　color_4 = "DDDDDD"
⑤テーブル内枠：　color_5 = "DDDDDD"
⑥セル背景1：　color_6 = "FFFFCC"
⑦セル背景2：　color_7 = "FFE8FF"
⑧紹介文下部罫線：　color_8 = "555555"
⑨テーブル背景2：　color_9 = "FFFFFF"
⑩見出し背景：　color_10 = "9FBBBB"
⑪9面パネル罫線：　color_11 = "555555"
⑫テーブル・項目背景1：　color_12 = "FFFF99"
⑬テーブル・項目背景2：　color_13 = "D0DDDD"
⑭日記カレンダー背景：　color_14 = "DDDDDD"
⑮お知らせ見出し背景：　color_15 = "88BBDD"
⑯サイドバナー領域背景：　color_16 = "FFFFFF"
⑰コンテンツ領域背景：　color_17 = "DFE8DF"
⑱カレンダー(日曜)背景：　color_18 = "FFDDFF"
⑲Searchフォーム背景：　color_19 = "88BBCC"
op_color.jpg
  • 色調としては、中間色で統一してみた。
↑

ログイン画面 †

  • ログイン画面だけは自分で作るしかないが、全体の大きさとメールアドレスの入力ボックス等の位置をずらしたりしない限り基本的にフリーである。とはいえ、全面的な絵を描けるほどセンスはないわけで(^^;)、サンプル画面に北信五岳の写真とBBSのロゴを組み合わせる程度でお茶を濁した。
  • BBSロゴは、昔々夏目氏が文字キャラで作成してくれたものイメージ化してずーっとタイトルに使ってきたが、白抜きにすることができないので、あらためてコツコツと作り直したのだ。見掛けは変わりないが、季節に応じて色を変えたりグラデーションをつけたりできるかも。
    color_logo.gif
↑

フォントが気に入らない †

  • どうしても譲れないと思ったのが、フォントだ。どうも半角英文字がナヨナヨとして頼りなく読みにくいと感じた。実は、OpenPNEだけでなく、トップページ等もフォントが全面的に入れ替わって入ることが判明した。（なお、掲示板とwikiは、内部的なフォント指定があるため変化はない。）
  • 同じコンテンツを、同じブラウザで見てるのに新旧サーバで文字フォントが違う？？？これは何じゃ？？　　と、しばらく悩み続けた。　それにはこんな理由があった。
  • CentOS５では文字コードセットが「UTF-8」に変更したことが関係している。WWWサーバとブラウザの間で、文字コードセットに対応したフォントを適用することになっているらしいのだ。
    　【IEの場合だが】
　旧サーバ：WhiteBOX3 [EUC-J] →　日本語セット(MS P ゴシック) 　Sans-Serif
　新サーバ：CentOS5 [UTF-8] →　  Latinセット(Roman)　　Century
　（Firefoxはこの限りではないみたいだが）
  • このcenturyというフォントが、日本語にたとえれば行書体みたいで、線が細く力不足さを感じる。どうしてもゴシック系にしたいというわけで、こればっかりはソースレベルの修正しかない。
↑

OpenPNEのフォント修正 †

  • まず、どこを直せばよいのかということになるが、default.cssファイルから、以下の記述を見つけて、font.cssかと思いきや。。color関係の設定しか書いてない。 
    ■default.css
/*サイト内コンテンツパート専用CSS*/
@import url(./main/font.css);/*フォント設定：フォント色、大きさ、フォントの設定>全般*/
  • FONT-familyの設定箇所があれば、そこを修正するだけなのだが、いくら探してもない。全ファイルをチェックしたがどこにもない。ないということがわかって、以下のように追加した。 
    vi /var/www/OpenPNE/public_html/commons.css/css/main/commons.css
----
/*基本設定*/
body { font-family: sans-serif,"MS ゴシック" ; } 
td { font-family: sans-serif,"MS ゴシック" ; }
img , a { font-family: sans-serif,"MS ゴシック" ; }

/*リンク関連*/
a:link { font-family: sans-serif,"MS ゴシック" ; }
a:visited { font-family: sans-serif,"MS ゴシック" ; }
a:hover ,a:active { font-family: sans-serif,"MS ゴシック" ; }

input , textarea , select { font-family: sans-serif,"MS ゴシック" ; }
  • なお、FONT変更した場合は、ブラウザを再起動しないと反映しないので要注意！！
  • これくらいかと思ったら、まだおかしい？ 実際のページのソースを表示させてチェックしたところ、フォントが直らない文字部分のタグ　<div> 　<span> 　<form>　がいくつか見つかり、 急遽追加して解消した 
    /*  2008/02/03 added font-family FINISHED!!!!*/
div , span , form { font-family: sans-serif,"MS ゴシック" ; }
  • まだ細かいところは出るかもしれないが、まぁまぁこの辺で手を打つことに！
↑

トップページ等にもフォント指定 †

  • ついでながら、トップページ等もフォント指定を追加して対応することにした。
  • CSSのfont指定を利用して、一括対応することにしたが、参考サイト 共通のCSSファイル[top.css]をひとつ作成し、各htmlファイルにリンクする形にした。この方が、一括修正や将来の拡張など、何かとメリットがありそう。 
    ー[top.css]ーーーーーーーーーーーーーーーーーーーーーーーーーー
BODY { font-family: sans-serif, "ＭＳ ゴシック"; }
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
  • 対象ファイルの<head＞～</head>内に、以下の行を挿入するだけ。 
    ー[xxx.html]ーーーーーーーーーーーーーーーーーーーーーーーーーー
<link rel="stylesheet" type="text/css" href="top.css">　
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
  • 対象htmlファイルは、以下の6本である。
    　index.php　 kurari_sys.html　 change.html　
    　kurari_ikou.html　howto.html　member.html　
トップ   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   リンク元