[Tips]OpenPNEを3ペイン化する

(現在編集中ですので、内容は随時変更いたします。)

投稿者

悪代官

手順

わたくし、悪代官はあるサイトを作る際の要求事項として見栄えをm○xiみたいにしてほしいという事があったので、その一環として3ペイン化に踏み切りました。 変更対象はh_home.tplとinc_header.tplです。

①cssを新規に作成します。→ソースコード参照 ②inc_header.tplを変更。 幅(width)を950に変更します。 ③h_home.tplを3ペイン仕様に作り替えます。詳細をソースコードの 項目で公開します。

ソースコード

先ずはcssを新規に作成します。 ファイル名は3pane.cssとします。 その内容を公開します。 基本構成は以下の通りになります。

div#lines {

border: 0.5px solid gray;

} div#header { }

#wrapper {

width: 960px; /* 基本ページ幅 */ color: #333333; /* 基本文字色 */ background-color:#ffffff; /* 基本背景 */ text-align:left;

}

#left-block{

width:675px; float:left; margin-top:2px;

}

div#left {

float: left; width: 270px; margin-top:2px;

} div#center {

width:400px; margin-left:2px; margin-top:2px; float:left;

} div#right {

float: left; width: 270px; margin-left:2px;

} div#footer {

clear: both;

} div.serch_bar {

text-align: center;

width: 950px;

} div.info_bar {

text-align: center;

width: 950px;

} div.get_point_bar {

bgcolor: #C0C0C0;

}

以上です。

次にh_home.tplを公開します。

({ext_include file="inc_header.tpl" no_use_alert=true})

<div id="wrapper" >

<div id="left-block">

<div class="search_bar">

<div id="lines"> ({t_form m=pc a=do_h_home_search}) <input type="hidden" name="sessid" value="({$PHPSESSID})"> <img src="({t_img_url_skin filename=icon_search})" alt="search" class="icon"> <input type="text" size="30" name="q" value="" style="width:180px;"> <input type="image" src="({t_img_url_skin filename=button_search_1})" value="diary" alt="日記" border="0" name="diary" class="button" style="width:62px;height:20px;"> <input type="image" src="({t_img_url_skin filename=button_search_2})" value="community" alt="コミュニティ" border="0" name="community" class="button" style="width:62px;height:20px;"> <input type="image" src="({t_img_url_skin filename=button_search_3})" value="message" alt="メッセージ" border="0" name="message" class="button" style="width:62px;height:20px;"> <input type="image" src="({t_img_url_skin filename=button_search_4})" value="web" alt="web" border="0" name="web" class="button" style="width:62px;height:20px;"> </form> </div>

</div> <div id="info_bar"> <div id="lines">

({********************************}) ({**ここから:旧inc_info.tplの内容**}) ({********************************})

<!-- インフォメーション & カレンダー --> <table border="0" cellspacing="0" cellpadding="0" style="width:680px;margin-top:3px;" class="info"> <tr> <td style="width:675px;" align="center" valign="middle">

<!--ここから:運営者からのお知らせ--> <table border="0" cellspacing="0" cellpadding="0" style="width:675px;" class="info_body"> <tr> <td align="center" class="bg_info" style="width:105px;border-right:none;"><img src="({t_img_url_skin filename=icon_information})" alt="お知らせ"></td> <td class="border_07 bg_02" style="width:570px;">

<table border="0" cellspacing="0" cellpadding="0" style="width:570px;"> <tr> <td class="padding_s">

({$site_info|smarty:nodefaults|default:" "})

</td> </tr> ({if $c_mokuhyopoint_list}) <tr> <td class="padding_s">

★<span class="caution">現在のモクエナジーは({$c_mokuhyopoint_list.point})ポイントです!</span>

</td> </tr> ({/if})

({if $mokuhyo_kigen}) <tr> <td class="padding_s">

★<span class="caution">まもなく期限日となる目標項目があります!ご確認下さい!!</span>

</td> </tr> ({/if})

({if $milestone_kigen}) <tr> <td class="padding_s">

★<span class="caution">まもなく期限日となるマイルストーン項目があります!ご確認下さい!!</span>

</td> </tr> ({/if})

({if $num_f_confirm_list}) <tr> <td class="padding_s">

★<span class="caution">承認待ちのメンバーが({$num_f_confirm_list})名います!</span>&nbsp;<a href="({t_url m=pc a=page_h_confirm_list})"><span class="b_b">承認・拒否</span></a>

</td> </tr> ({/if}) ({if $num_message_not_is_read}) <tr> <td class="padding_s">

★<span class="caution">新着メッセージが({$num_message_not_is_read})件あります!</span>&nbsp;<a href="({t_url m=pc a=page_h_message_box})"><span class="b_b">メッセージを読む</span></a>

</td> </tr> ({/if}) ({if $num_advise_not_is_read}) <tr> <td class="padding_s">

★<span class="caution">新着アドバイスが({$num_advise_not_is_read})件あります!</span>&nbsp;<a href="({t_url m=pc a=page_h_advise_box})"><span class="b_b">アドバイスを読む</span></a>

</td> </tr> ({/if})

({if $num_diary_not_is_read}) <tr> <td class="padding_s">

★<span class="caution">({$num_diary_not_is_read})件の日記に対して新着コメントがあります!</span>&nbsp;<a href="({t_url m=pc a=page_fh_diary})&amp;target_c_diary_id=({$first_diary_read})"><span class="caution">日記を見る</span></a>

</td> </tr> ({/if}) ({if $num_h_confirm_list}) <tr> <td class="padding_s">

★<span class="caution">コミュニティ参加承認待ちのメンバーが({$num_h_confirm_list})名います!</span>&nbsp;<a href="({t_url m=pc a=page_h_confirm_list})"><span class="b_b">承認・拒否</span></a>

</td> </tr> ({/if}) ({if $anatani_c_commu_admin_confirm_list}) <tr> <td class="padding_s">

★<span class="caution">コミュニティ管理者交代依頼が({$num_anatani_c_commu_admin_confirm_list})件きています。</span>&nbsp;<a href="({t_url m=pc a=page_h_confirm_list})"><span class="b_b">承認・拒否</span></a>

</td> </tr> ({/if}) ({if $anatani_c_commu_sub_admin_confirm_list}) <tr> <td class="padding_s">

★<span class="caution">コミュニティ副管理者依頼が({$num_anatani_c_commu_sub_admin_confirm_list})件きています。</span>&nbsp;<a href="({t_url m=pc a=page_h_confirm_list})"><span class="b_b">承認・拒否</span></a>

</td> </tr> ({/if})</table>

</td> </tr> </table> <!--ここまで:運営者からのお知らせ-->

</td> </tr> </table> ({********************************}) ({**ここまで:旧inc_info.tplの内容**}) ({********************************})

</div> </div> <div id="left">

          (左側のページ)

</div>

<div id="center">

               (真ん中のページ)

</div>

</div>

<div id="right">

               (右側のページ)

</div>

</div>

({ext_include file="inc_footer.tpl"})

以上になります。 == 課題 == 現段階では3ペイン固定ということを前提として作られています。 今後は製品化に向けて段階的に改良する予定です。 第一段階:管理画面から2ペインか3ペインかを選択できるようにする。 第二段階:トップページでユーザーが自由に2ペインか3ペインかを選択できるようにする。 (m○xiのような感じ)