wiki:pne-customize-note
 ここの情報は古いです。ご理解頂いた上でお取り扱いください。

Version 10 (modified by ogawa, 14 years ago) (diff)

見出しのアンカーを修正

OpenPNEカスタマイズ(ノート)

TOC(inline,heading=目次,depth=3)?

古いバージョンでカスタマイズを行う

MyNews

対応バージョン

  • OpenPNE2.10

入力フォームの作成

管理画面「テンプレート挿入」の「【PC版】 h_home 9」に以下を入力してください。 

<!-- ***************************** -->
<!-- ******ここから：一言****** -->
<table border="0" cellspacing="0" cellpadding="0" style="width:438px;margin:0px auto;" class="border_07">
<tr>
<td style="width:7px;" class="bg_00"><img src="./skin/dummy.gif" alt="" style="width:7px;height:7px;" class="dummy"></td>
<td style="width:424px;" class="bg_00"><img src="./skin/dummy.gif" alt="" style="width:424px;height:7px;" class="dummy"></td>
<td style="width:7px;" class="bg_00"><img src="./skin/dummy.gif" alt="" style="width:7px;height:7px;" class="dummy"></td>
</tr>
<tr>
<td class="bg_00"><img src="./skin/dummy.gif" alt="" style="width:7px;height:7px;" class="dummy"></td>
<td class="bg_01" style="width:424px;">
<!-- ここから：主内容＞＞一言 -->
<div class="border_01">
<table border="0" cellspacing="0" cellpadding="0" style="width:422px;">
<tr>
<td style="width:36px;" class="bg_06"><img src="({t_img_url_skin filename=content_header_1})" style="width:30px;height:20px;" class="dummy"></td>
<td style="width:100px;padding:2px 0px;" class="bg_06"><span class="b_b c_00">My News!</span></td>
<td style="width:286px;" align="right" class="bg_06">&nbsp;</td>
</tr>
</table>
</div>
<div class="border_01">
<table border="0" cellspacing="0" cellpadding="0" style="width:422px;">
<tr>
<td style="width:36px;" class="bg_09"></td>
<td style="width:200px;padding:2px 0px;" class="bg_09"><span class="b_b c_00">({if $target_c_member.profile.PNE_MY_NEWS_DATETIME.value})({$target_c_member.profile.PNE_MY_NEWS_DATETIME.value|date_format:"%m/%d %H:%M"}) 更新({/if}) </span></td>
<td style="width:186px;" align="right" class="bg_09">&nbsp;</td>
</tr>
</table>
</div>
<div class="border_01 bg_02 padding_s" align="left">

({$target_c_member.profile.PNE_MY_NEWS.value|nl2br|t_url2a})

</div>
<!-- ここまで：主内容＞＞一言 -->
</td>
<td class="bg_00"><img src="./skin/dummy.gif" alt=""></td>
</tr>
<tr>
<td class="bg_00"><img src="./skin/dummy.gif" alt="" style="width:7px;height:7px;" class="dummy"></td>
<td class="bg_00"><img src="./skin/dummy.gif" alt="" style="width:424px;height:7px;" class="dummy"></td>
<td class="bg_00"><img src="./skin/dummy.gif" alt="" style="width:7px;height:7px;" class="dummy"></td>
</tr>
</table>

<!-- ******ここまで：一言****** -->
<!-- ***************************** -->

<img src="./skin/dummy.gif" alt="" class="v_spacer_m">

表示部分の作成

管理画面「テンプレート挿入」の「【PC版】 f_home (h_prof) 7」に以下を入力してください。 

<!-- ***************************** -->
<!-- ******ここから：一言****** -->
<table border="0" cellspacing="0" cellpadding="0" style="width:438px;margin:0px auto;" class="border_07">
<tr>
<td style="width:7px;" class="bg_00"><img src="./skin/dummy.gif" alt="" style="width:7px;height:7px;" class="dummy"></td>
<td style="width:424px;" class="bg_00"><img src="./skin/dummy.gif" alt="" style="width:424px;height:7px;" class="dummy"></td>
<td style="width:7px;" class="bg_00"><img src="./skin/dummy.gif" alt="" style="width:7px;height:7px;" class="dummy"></td>
</tr>
<tr>
<td class="bg_00"><img src="./skin/dummy.gif" alt="" style="width:7px;height:7px;" class="dummy"></td>
<td class="bg_01" style="width:424px;">
<!-- ここから：主内容＞＞一言 -->
<div class="border_01">
<table border="0" cellspacing="0" cellpadding="0" style="width:422px;">
<tr>
<td style="width:36px;" class="bg_06"><img src="({t_img_url_skin filename=content_header_1})" style="width:30px;height:20px;" class="dummy"></td>
<td style="width:100px;padding:2px 0px;" class="bg_06"><span class="b_b c_00">My News!</span></td>
<td style="width:286px;" align="right" class="bg_06">&nbsp;</td>
</tr>
</table>
</div>
<div class="border_01">
<table border="0" cellspacing="0" cellpadding="0" style="width:422px;">
<tr>
<td style="width:36px;" class="bg_09"></td>
<td style="width:200px;padding:2px 0px;" class="bg_09"><span class="b_b c_00">({if $target_c_member.profile.PNE_MY_NEWS_DATETIME.value})({$target_c_member.profile.PNE_MY_NEWS_DATETIME.value|date_format:"%m/%d %H:%M"}) 更新({/if}) </span></td>
<td style="width:186px;" align="right" class="bg_09">&nbsp;</td>
</tr>
</table>
</div>
<div class="border_01 bg_02 padding_s" align="left">

({$target_c_member.profile.PNE_MY_NEWS.value|nl2br|t_url2a})

</div>
<!-- ここまで：主内容＞＞一言 -->
</td>
<td class="bg_00"><img src="./skin/dummy.gif" alt=""></td>
</tr>
<tr>
<td class="bg_00"><img src="./skin/dummy.gif" alt="" style="width:7px;height:7px;" class="dummy"></td>
<td class="bg_00"><img src="./skin/dummy.gif" alt="" style="width:424px;height:7px;" class="dummy"></td>
<td class="bg_00"><img src="./skin/dummy.gif" alt="" style="width:7px;height:7px;" class="dummy"></td>
</tr>
</table>

<!-- ******ここまで：一言****** -->
<!-- ***************************** -->

<img src="./skin/dummy.gif" alt="" class="v_spacer_m">

MyNews 携帯版の設置

対応バージョン

  • OpenPNE2.10

入力フォームの作成

管理画面「テンプレート挿入」の「【携帯版】 h_home 2」に以下を入力してください。 

({t_form m=ktai a=do_h_home_update_my_news})
<table width="100%" bgcolor="#({$ktai_color_config.bg_05})">
<tr><td>
<hr color="#({$ktai_color_config.border_01})" size="3">
<font color="#({$ktai_color_config.font_02})">My News!</font>　({if $c_member.profile.PNE_MY_NEWS_DATETIME.value})({$c_member.profile.PNE_MY_NEWS_DATETIME.value|date_format:"%m/%d %H:%M"}) 更新({/if})<br>
<textarea rows="1" name="prof_my_news">({$c_member.profile.PNE_MY_NEWS.value})</textarea>
<input type="hidden" name="ksid" value="({$PHPSESSID})">
<input type="submit" value="変更">
</td></tr>
</table>
</form>

表示部分の作成

管理画面「テンプレート挿入」の「【携帯版】 f_home 2」に以下を入力してください。 

<table width="100%" bgcolor="#({$ktai_color_config.bg_05})">
<tr><td>
<font color="#({$ktai_color_config.font_02})">My News!</font>　({if $target_c_member.profile.PNE_MY_NEWS_DATETIME.value})({$target_c_member.profile.PNE_MY_NEWS_DATETIME.value|date_format:"%m/%d %H:%M"}) 更新({/if})<br>
({$target_c_member.profile.PNE_MY_NEWS.value})
</td></tr>
</table>

ポイント・ランクのフレンドホーム表示

対応バージョン

  • OpenPNE2.8～OpenPNE2.10

表示部分の作成

管理画面「テンプレート挿入」の「【PC版】 f_home (h_prof) 4」に以下を入力してください 

({if ($rank.image_filename) || ($point)})
<img src="./skin/dummy.gif" class="v_spacer_m">
<div style="text-align:center">
({if $rank.image_filename)
<img src="({t_img_url filename=$rank.image_filename})" class="pict" alt="({$rank.name})" style="margin:2px"><br>
({/if})
({if $point})
({$point}) Point<br>
({/if})
</div>
<img src="./skin/dummy.gif" class="v_spacer_m">
({/if})

Skype機能の設置

SkypeIDの設定

管理画面「SNS設定」の「プロフィール項目設定」を選択します プロフィール項目追加を選択し、下記の項目を追加してください 

①項目名・・・SkypeID
②識別名・・・skype_id
③公開設定・・固定
④公開デフォルト値・・・フレンドまで公開
⑤メンバー検索・・・表示しない
⑥フォームタイプ・・・テキスト
⑦入力タイプ・・・文字列

Skype画像の登録

管理画面「画像・書き込み」の「画像のアップロード・削除」を選択します 「通話中画像」「チャット中画像」の２種類の画像をご登録ください

アップロード画像リストから、　アップしたSkype画像を選択し、表示されるURLを保存してください

表示部分の作成

管理画面「テンプレート挿入」の「【PC版】 f_home (h_prof) 4」に以下を入力してください （※先ほど保存したURLに書き換えます） 

({if $target_c_member.profile.skype_id})

<table style="margin: 0px auto; width: 270px;" class="border_07" border="0" cellpadding="0" cellspacing="0"><tbody>
<tr>
<td style="width: 7px; height: 7px;" class="bg_05"><img src="./skin/dummy.gif" style="width: 7px; height: 7px;" class="dummy"></td>
<td style="width: 127px; height: 7px;" class="bg_05"><img src="./skin/dummy.gif" style="width: 127px; height: 7px;" class="dummy"></td>
<td style="width: 127px; height: 7px;" class="bg_05"><img src="./skin/dummy.gif" style="width: 127px; height: 7px;" class="dummy"></td>
<td style="width: 7px; height: 7px;" class="bg_05"><img src="./skin/dummy.gif" style="width: 7px; height: 7px;" class="dummy"></td>
</tr>
<tr>
<td style="width: 7px; height: 7px;" class="bg_05"><img src="./skin/dummy.gif" style="width: 7px; height: 7px;" class="dummy"></td>
<td class="bg_05" align=center>
<script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>
<a href="skype:({$target_c_member.profile.skype_id.value})?call" onclick="return skypeCheck();">
<img src="先ほど保存したSkype通話の画像URL" width="120" height="40" alt="通話" style="border: medium none ;"></a>
</td>
<td class="bg_05" align=center>
<a href="skype:({$target_c_member.profile.skype_id.value})?chat" onclick="return skypeCheck();">
<img src="先ほど保存したSkypeチャットの画像URL" width="120" height="40" alt="チャット" style="border: medium none ;"></a>
</td>
<td style="width: 7px; height: 7px;" class="bg_05"><img src="./skin/dummy.gif" style="width: 7px; height: 7px;" class="dummy"></td>
</tr>
<tr>
<td class="bg_05"><img src="./skin/dummy.gif" style="width: 7px; height: 7px;" class="dummy"></td>
<td class="bg_05"><img src="./skin/dummy.gif" style="width: 7px; height: 7px;" class="dummy"></td>
<td class="bg_05"><img src="./skin/dummy.gif" style="width: 7px; height: 7px;" class="dummy"></td>
<td class="bg_05"><img src="./skin/dummy.gif" style="width: 7px; height: 7px;" class="dummy"></td>
</tr>
</tbody></table>

<img src="./skin/dummy.gif" class="v_spacer_m">

({/if})

あしあと帳作成の表示

表示部分の作成

管理画面「テンプレート挿入」の「【PC版】 f_home (h_prof) 5」に以下を入力してください 

({if !$c_diary_list})
<table style="margin: 0px auto; width: 270px;" class="border_07" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr><td>&nbsp;</td></tr>
<tr>
<td align="center">
<form action="./" method="post">
<input type="hidden" name="m" value="pc">
<input type="hidden" name="a" value="page_h_diary_add">
<input type="hidden" name="subject" value="あしあと帳">
<input type="hidden" name="body" value="あしあと帳を作ってみました。
皆さんお気軽にコメントを残して下さい！">
<input type="hidden" name="category" value="あしあと帳">
<input type="submit" value="まずは「あしあと帳」作成から ">
</form>
</td>
</tr>
<tr><td>&nbsp;</td></tr>
</tbody>
</table>
({/if})

内容の変更

「テンプレート挿入」より、 ボタンの名前（「まずは「あしあと帳」作成から」）や本文に挿入される文字列（「あしあと帳つくってみました…）を自由に変更してください

お題日記機能の設置

表示部分の作成

管理画面「テンプレート挿入」の「【PC版】 h_home 4」に以下を入力してください 

<script language="javascript">
<!--//
function randomodai()
{
//お題データを用意します。
var arrData = new Array("マイフレンドに一言","マイブーム","今欲しいもの","昨日の晩御飯","最近気になる人","楽しかった想い出","悲しかった想い出","恥ずかしかった出来事","想い出の曲","オススメの本","オススメの曲","オススメの映画","好きな芸能人","近所のおすすめスポット","今日のファッション","今日の髪型","腹の立つ話","信じられない話","怒りの話","ありえない話","腹の立つ話","信じられない話","情けない話","せつない話","へこんだ話","どうでもいい話","私の弱点","笑える話","変な夢","ダイエット","好きなTV番組");//処理スタート
nTemp = Math.round(Math.random()*(arrData.length - 1));
document.odaibotan.subject.value = "【お題日記】"+arrData[nTemp];
}
//-->
</script>

<form name="odaibotan" action="./" method="post">
<input type="hidden" name="m" value="pc">
<input type="hidden" name="a" value="page_h_diary_add">
<input type="hidden" name="subject" value="">
<input type="hidden" name="body" value="今日のお題はこれ！
本文のみ修正して日記を書いてみましょう。">
<input type="hidden" name="category" value="お題日記">
<table style="margin: 0px auto; width: 270px;" class="border_07" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr><td>&nbsp;</td></tr>
<tr>
<td align="center">
<input type="submit" style="color:文字の色; background-color:背景の色; border-color: 境界線の色" value="今日のお題は？ Click! Click!" onClick="randomodai()">
</td>
</tr>
<tr><td>&nbsp;</td></tr>
<tr>
<td class="bg_05">
&nbsp;&nbsp;&nbsp;&nbsp;<font color>みんなのお題日記は
<a href="（SNSのURLを入力）/?m=pc&a=page_h_diary_list_all&keyword=+%E3%80%90%E3%81%8A%E9%A1%8C%E6%97%A5%E8%A8%98%E3%80%91+"><b>コチラ</b></a>
</td>
</tr>
</tbody>
</table>
</form>

内容の変更

「テンプレート挿入」より、 お題データの追加（"お題１","お題２"…）やボタンの名前（「今日のお題は？ Click! Click!」）、 本文に挿入される文字列（「今日のお題はこれ！本文のみ…）を自由に変更してください

また、「みんなのお題日記は」の（SNSのURLを入力）のところに使用しているSNSのURLを入れてください