Version 10 (modified by 13 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"> </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"> </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"> </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"> </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画像の登録
管理画面「画像・書き込み」の「画像のアップロード・削除」を選択します 「通話中画像」「チャット中画像」の2種類の画像をご登録ください
アップロード画像リストから、 アップした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> </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> </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> </td></tr> <tr> <td align="center"> <input type="submit" style="color:文字の色; background-color:背景の色; border-color: 境界線の色" value="今日のお題は? Click! Click!" onClick="randomodai()"> </td> </tr> <tr><td> </td></tr> <tr> <td class="bg_05"> <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>
内容の変更
「テンプレート挿入」より、 お題データの追加("お題1","お題2"…)やボタンの名前(「今日のお題は? Click! Click!」)、 本文に挿入される文字列(「今日のお題はこれ!本文のみ…)を自由に変更してください
また、「みんなのお題日記は」の(SNSのURLを入力)のところに使用しているSNSのURLを入れてください