小粋空間: phpBB アーカイブ

Top ＞ツール＞ phpBB [全て開く]

2006年9月12日

phpBB2 テンプレートのカスタマイズ

September 12,2006 1:32 AM
Tag：[Customize, phpBB, Template]
Permalink

phpBB2 のテンプレートを修正してブログのページとして表示させる方法をご紹介します。ここでは公開テンプレートの1カラム固定レイアウトに適用させてみました。
表示は Windows 2000・XP+IE6.0/Firefox1.5/Opera9 で確認しています。

修正前

修正後

phpBB では公式サイトのStyles ページから多くのスタイルが提供されており、ダウンロードしたスタイルを「スタイル管理」というメニューから適用することで切り替えることができます（デモページ）。
また管理ページから「テーマの作成」を利用してのカスタマイズも可能ですが、ここでご紹介するのはそのようなエレガントな方法ではありません。予めご容赦ください。

テンプレートの変更に際しては下記のサイトを参考にさせて頂きました。ありがとうございました。

SWEET WATER Web Server *BGMあり

カスタマイズにあたっては、phpBB2 がインストールされていることが必要です。

なお本エントリーでは文字コードについて言及しておりません。
phpBB2 の文字コードは Shift_JIS です。ブログの文字コードは UTF-8 や EUC の場合、同じサイトに表示する場合、文字コードを変換する必要があるかもしれません（phpBB2 日本語サポートフォーラムで他の文字コード版が配布されているようです）。
また、PHP や MySQL をブログと併用する場合も同様です。

１．概要

デザインを変更するには、phpBB2 のテンプレートである

templates/subSilver/overall_header.tpl

templates/subSilver/overall_footer.tpl

を修正します。
ファイル名からお分かりの通り、それぞれがページのヘッダとフッタに対応しています。

それぞれ次のような変更を行います。

ヘッダ：ブログのタイトルバナーおよびCSSを追加とphpBB2 のタイトルバナー削除（２項）
フッタ：ヘッダに追加したタグの終了タグおよびフッタを追加（3項）

厳密には、固定レイアウト表示で影響のあるタグの削除を行うため、

language/lang_japanese/lang_main.php

も併せて修正します（４項）。

２．ヘッダの修正

templates/subSilver/overall_header.tpl を任意のエディタで開き、以下の修正を行います。念のためバックアップをとっておきましょう。

２．１ CSSの修正

ページ全体のスタイルを設定している body / bodyline / h1 / h2 のセレクタを無効にし、新しいセレクタを追加します。追加するセレクタは、全体のレイアウトとバナータイトル用で、公開テンプレートの一部を抜粋しています。

サンプルページのカラム幅は .layout-one-column #box で 700px に設定してみましたが、カラム幅を変更したい場合はこのセレクタの width プロパティ値を変更してください。

また body / bodyline を無効にする場合は青色の /* ? */ で括るか、赤色部分を削除してください（どちらも同じ効果です）。h1 / h2 は赤色を削除してください。

　　　　　　　　　　：
/* General page style. The scroll bar colours only visible in IE5.5+ */
/*body { 
    background-color: {T_BODY_BGCOLOR};
    scrollbar-face-color: {T_TR_COLOR2};
    scrollbar-highlight-color: {T_TD_COLOR2};
    scrollbar-shadow-color: {T_TR_COLOR2};
    scrollbar-3dlight-color: {T_TR_COLOR3};
    scrollbar-arrow-color:  {T_BODY_LINK};
    scrollbar-track-color: {T_TR_COLOR1};
    scrollbar-darkshadow-color: {T_TH_COLOR1};
}*/
 
body {
    margin: 0;
    padding: 0;
    margin-bottom: 20px;
    text-align: center;
    background: #36414d;
}
 
/* phpBB全体 */
#box {
    width: 700px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
    padding: 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}
 
/* タイトルバナー */
#banner h1 {
    margin: 0;
    font-weight: normal;
}
#banner {
    padding: 15px 0 15px 15px;
    border-bottom: 1px solid #666699;
    color: #999999;
    background: #8fabbe;
    text-align: left;
}
#banner a,
#banner a:link,
#banner a:visited {
    color: #ffffff;
    font-size: 32px;
    text-decoration: none;
}
#banner a:hover {}
#banner a:active {}
 
/* タイトルバナー下の説明 */
#banner-description {
    font-size: 12px;
}
 
/* phpBB */
.bbs {
    padding: 10px 0;
    font-size: small;
    color: #36414d;
    background: none;
}
 
/* フッタ */
#footer {
    padding: 10px;
    border-top: 1px solid #666699;
    color: #ffffff;
    background: #8fabbe;
    font-size: 12px;
    text-align: center;
}
 
/* General font families for common tags */
font,th,td,p { font-family: {T_FONTFACE1} }
a:link,a:active,a:visited { color : {T_BODY_LINK}; }
a:hover     { text-decoration: underline; color : {T_BODY_HLINK}; }
hr  { height: 0px; border: solid {T_TR_COLOR3} 0px; border-top-width: 1px;}
 
/* This is the border line & background colour round the entire page */
/*.bodyline    { background-color: {T_TD_COLOR2}; border: 1px {T_TH_COLOR1} solid; }*/
 
/* This is the outline round the main forum tables */
　　　　　　　　　　：
　　　　　　　　　（略）
　　　　　　　　　　：
/* titles for the topics: could specify viewed link colour too */
.topictitle,h1,h2    { font-weight: bold; font-size: {T_FONTSIZE2}px; color : {T_BODY_TEXT}; }
a.topictitle:link   { text-decoration: none; color : {T_BODY_LINK}; }
a.topictitle:visited { text-decoration: none; color : {T_BODY_VLINK}; }
a.topictitle:hover    { text-decoration: underline; color : {T_BODY_HLINK}; }
　　　　　　　　　　：

２．２ body 要素の修正

赤色部分を削除します。

<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

２．３タイトルバナーの追加

青色部分を追加します。

<body>
 
<a name="top"></a>
 
<div id="box">
<div id="banner">
<h1 id="banner-header"><a href="" accesskey="1">[ブログタイトル]</a></h1>
<div id="banner-description" style="color: #ffffff;">[ブログの説明]</div>
</div>
<div id="content">
<div class="bbs">
 
<table width="100%" cellspacing="0" cellpadding="10" border="0" align="center">
　　　　　　　　　　：

２．４テーブル要素の属性変更

テーブル幅の変更とCSSによるセンタリングのプロパティを追加します。

変更前

　　　　　　：
<div id="content">
<div class="bbs">
 
<table width="100%" cellspacing="0" cellpadding="10" border="0" align="center">
　　　　　　：

変更後

　　　　　　：
<div id="content">
<div class="bbs">
 
<table width="98%" cellspacing="0" cellpadding="10" border="0" align="center" style="margin-right : auto; margin-left : auto">
　　　　　　：

２．５ phpBBのバナーと説明の削除

table タグが始まる 5 行目辺りにある、phpBBのバナーと説明を削除します。コメントアウトする場合は青色の  で括り、削除する場合は赤色部分を削除してください（どちらも同じ効果です）。

　　　　　　：
<!--<td><a href="{U_INDEX}"><img src="templates/subSilver/images/logo_phpBB.gif" border="0" alt="{L_INDEX}" vspace="1" /></a></td>-->
<td align="center" width="100%" valign="middle"><!--<span class="maintitle">{SITENAME}</span><br /><span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>-->
　　　　　　：

３．フッタの修正

templates/subSilver/overall_footer.tpl を任意のエディタで開き、以下の青色部分を追加してください。

　　　：
</table>
 
</div>
</div>
</div>
 
</body>
</html>

冒頭のスクリーンショットのようにフッタを挿入する場合は下記のようにしてください。

　　　：
</table>
 
</div>
</div>
<div id="footer">Copyright &copy; 2005 xxxxx All Rights Reserved.</div>
</div>
 
</body>
</html>

４．テンプレートの修正

language/lang_japanese/lang_main.php を任意のエディタで開き、以下の赤色部分を削除してください。

$lang['Posted'] = "<nobr>時間";

これはトピックタイトルが長くなった場合にテーブルの幅が制御できなくなる不具合を解消するための修正です。

５．ブログから phpBB へリンクを設定する

phpBB2 自体の修正は４項まで完了です。
あとはブログのテンプレートに phpBB2 へのリンクを設定してください。phpBB の index.php があるパスがリンクのURLとなります。

Comments [6] | Trackbacks [0]

2006年9月11日

phpBB2のインストール

September 11,2006 2:20 AM
Tag：[phpBB2]
Permalink

phpBB は世界的に有名なオープンソースのWeb掲示板ソフトです。スクリーンショットは phpBB2 をインストールした後のサンプルです。

このエントリーでは phpBB2 のインストール方法について紹介します。次回は当サイトの公開テンプレート風にデザインを変更する方法をご紹介する予定です。

１．ダウンロード

download のページより phpBB 2.0.10 [ Full Package ] をダウンロードします。ここでは 3つのアイコンより zip パッケージを選択します。

phpBBダウンロードパッケージを選択

次ページでダウンロードホストの選択画面になるので適当なホストの download をクリック。

ホスト選択

さらに次ページで表示されたURLをクリックします。

ダウンロード

バージョンは適宜更新されると思いますので、最新バージョンをダウンロードしてください。

また、同じページの後方にある Language & Image Packs より日本語用パッケージ、および日本語化アイコンをダウンロードします。ここでは Language 欄および subSilver 欄の zip パッケージを選択します。

日本語用パッケージ

２．アップロード

最初にダウンロードした phpBB 本体を解凍すると phpBB2 というフォルダができ、その中に色々なフォルダやファイルがあると思います。この phpBB2 フォルダを丸ごとアップロードします。アップロードするパスはどこでもいいのですが、ここではブログのトップページにアップロードします。
当サイトを例にすると

http://www.koikikukan.com/phpBB2/

となるようにアップロードします。

また、日本語化パッケージを解凍すると lang_japanese というフォルダができ、その中に index.htm や php ファイル等があります。この lang_japanese をフォルダごと、

phpBB2/language/lang_japanese

となるようにアップロードします。

日本語化アイコンも同様に解凍すると、subSilver¥images¥lang_japanese というフォルダができますので、lang_japanese をフォルダごと、

phpBB2/templates/subSilver/images/lang_japanese

となるようにアップロードします。