2012年08月08日

2012 08.08 Wed


訪問者によって書き込まれたコメントに対して、
管理人の返信(レス)を追加するカスタマイズ方法。



やりたかったのは、

・コメントのすぐ下に追加(コメント間に割り込む)
・CSSデザイン
・管理人のみ実行可
・訪問者コメントと区別してカウントしない
 (メール通知させない)
・モバイルからでも同じデザイン
・とにかく簡単に返事を書きたい(名前とか定型文追加)
・携帯からでも返信可能


機能としては、これらをほぼ実現できました。

スクリプト使わないので重くならないし簡単です。


実装
 ↓
はに丸素材



カスタマイズ方法


管理画面の
デザイン→コンテンツ→記事のHTML編集
<d​i​v​ ​c​l​a​s​s​=​"​c​o​m​m​e​n​t​s​-​h​e​a​d​"​>​こ​の​記​事​へ​の​コ​メ​ン​ト​<​/​d​i​v​>

​<​%​ ​l​o​o​p​:​l​i​s​t​_​i​n​d​i​v​i​d​u​a​l​_​a​r​t​i​c​l​e​_​c​h​i​l​d​r​e​n​ ​-​%​>
​<​d​i​v​ ​c​l​a​s​s​=​"​c​o​m​m​e​n​t​s​-​b​o​d​y​"​>
<​d​i​v​ ​c​l​a​s​s​=​"​t​e​x​t​"​>​<​%​ ​c​o​m​m​e​n​t​.​b​o​d​y​ ​|​ ​h​t​m​l​ ​|​ ​t​a​g​_​s​t​r​i​p​ ​|​ ​n​l​2​b​r​ ​|​ ​c​l​i​c​k​a​b​l​e​(​'​t​a​r​g​e​t​=​"​_​b​l​a​n​k​"​ ​r​e​l​=​"​n​o​f​o​l​l​o​w​"​'​)​ ​%​>​<​/​d​i​v​>
<​d​i​v​ ​c​l​a​s​s​=​"​c​o​m​m​e​n​t​s​-​p​o​s​t​"​>​P​o​s​t​e​d​ ​b​y​ ​<​%​ ​i​f​:​c​o​m​m​e​n​t​.​h​o​m​e​p​a​g​e​ ​%​>​<​a​ ​h​r​e​f​=​"​<​%​ ​c​o​m​m​e​n​t​.​h​o​m​e​p​a​g​e​ ​|​ ​h​t​m​l​ ​|​ ​t​a​g​_​s​t​r​i​p​ ​%​>​"​ ​t​a​r​g​e​t​=​"​_​b​l​a​n​k​"​ ​r​e​l​=​"​n​o​f​o​l​l​o​w​"​>​<​%​ ​c​o​m​m​e​n​t​.​w​r​i​t​e​r​ ​|​ ​h​t​m​l​ ​|​ ​t​a​g​_​s​t​r​i​p​ ​%​>​<​/​a​>​<​%​ ​e​l​s​e​ ​%​>​<​%​ ​c​o​m​m​e​n​t​.​w​r​i​t​e​r​ ​|​ ​h​t​m​l​ ​|​ ​t​a​g​_​s​t​r​i​p​ ​%​>​<​%​ ​/​i​f​ ​%​>​ ​a​t​ ​<​%​ ​c​o​m​m​e​n​t​.​c​r​e​a​t​e​s​t​a​m​p​ ​|​ ​d​a​t​e​_​f​o​r​m​a​t​(​'​%​Y​年​%​m​月​%​d​日​ ​%​H​:​%​M​'​)​ ​%​>​<​b​r​ ​/​>​<​/​d​i​v​>
​<​/​d​i​v​>
<​%​ ​i​f​:​c​o​m​m​e​n​t​.​e​m​a​i​l​ ​-​%​>​<​d​i​v​ ​c​l​a​s​s​=​"​r​e​s​"​>​<​%​ ​c​o​m​m​e​n​t​.​e​m​a​i​l​ ​|​ ​t​a​g​_​s​t​r​i​p​ ​%​>​ ​t​h​x​!​@​管理人<​/​d​i​v​>​<​%​ ​/​i​f​ ​-​%​>
​<​%​ ​/​l​o​o​p​ ​-​%​>
<​d​i​v​ ​c​l​a​s​s​=​"​r​e​s​"​>​古い記事にもコメントまってます!@​管理人​<​/​d​i​v​>
​<​%​ ​i​f​:​i​n​d​i​v​i​d​u​a​l​_​a​r​t​i​c​l​e​.​a​c​c​e​p​t​_​c​o​m​m​e​n​t​_​c​a​t​c​h​ ​-​%​>
<​d​i​v​ ​c​l​a​s​s​=​"​c​o​m​m​e​n​t​s​-​h​e​a​d​"​>​コ​メ​ン​ト​を​書​く​<​/​d​i​v​>
​<​f​o​r​m​ ​a​c​t​i​o​n​=​"​<​%​ ​b​l​o​g​.​p​a​g​e​_​u​r​l​ ​%​>​p​a​g​e​s​/​u​s​e​r​/​c​o​m​m​e​n​t​s​2​/​r​e​g​i​s​t​/​i​n​p​u​t​"​ ​m​e​t​h​o​d​=​"​p​o​s​t​"​ ​n​a​m​e​=​"​c​o​m​m​e​n​t​-​f​o​r​m​"​>
​<​d​i​v​ ​c​l​a​s​s​=​"​c​o​m​m​e​n​t​s​-​b​o​d​y​"​>
お​名​前​:​ ​<​%​ ​i​f​:​b​l​o​g​.​i​g​n​o​r​e​_​s​e​t​t​i​n​g​.​f​i​l​l​_​w​r​i​t​e​r​ ​%​>​[​必​須​入​力​]​<​%​ ​/​i​f​ ​%​>​<​b​r​ ​/​>
<​i​n​p​u​t​ ​t​y​p​e​=​"​t​e​x​t​"​ ​n​a​m​e​=​"​a​r​t​i​c​l​e​_​c​h​i​l​d​_​_​w​r​i​t​e​r​"​ ​s​i​z​e​=​"​5​0​"​ ​v​a​l​u​e​=​"​"​ ​/​>​<​b​r​ ​/​>
メ​ー​ル​ア​ド​レ​ス​:​ ​<​%​ ​i​f​:​b​l​o​g​.​i​g​n​o​r​e​_​s​e​t​t​i​n​g​.​f​i​l​l​_​e​m​a​i​l​ ​%​>​[​必​須​入​力​]​<​%​ ​/​i​f​ ​%​>​<​b​r​ ​/​>
<​i​n​p​u​t​ ​t​y​p​e​=​"​t​e​x​t​"​ ​n​a​m​e​=​"​a​r​t​i​c​l​e​_​c​h​i​l​d​_​_​e​m​a​i​l​"​ ​s​i​z​e​=​"​5​0​"​ ​v​a​l​u​e​=​"​"​ ​/​>​<​b​r​ ​/​>

​ホ​ー​ム​ペ​ー​ジ​ア​ド​レ​ス​:​ ​<​%​ ​i​f​:​b​l​o​g​.​i​g​n​o​r​e​_​s​e​t​t​i​n​g​.​f​i​l​l​_​h​o​m​e​p​a​g​e​ ​%​>​[​必​須​入​力​]​<​%​ ​/​i​f​ ​%​>​<​b​r​ ​/​>
​<​i​n​p​u​t​ ​t​y​p​e​=​"​t​e​x​t​"​ ​n​a​m​e​=​"​a​r​t​i​c​l​e​_​c​h​i​l​d​_​_​h​o​m​e​p​a​g​e​"​ ​s​i​z​e​=​"​5​0​"​ ​v​a​l​u​e​=​"​"​ ​/​>​<​b​r​ ​/​>
コ​メ​ン​ト​:​ ​<​%​ ​i​f​:​b​l​o​g​.​i​g​n​o​r​e​_​s​e​t​t​i​n​g​.​f​i​l​l​_​b​o​d​y​ ​%​>​[​必​須​入​力​]​<​%​ ​/​i​f​ ​%​>​<​b​r​ ​/​>
<​t​e​x​t​a​r​e​a​ ​n​a​m​e​=​"​a​r​t​i​c​l​e​_​c​h​i​l​d​_​_​b​o​d​y​"​ ​r​o​w​s​=​"​1​0​"​ ​c​o​l​s​=​"​4​5​"​>​<​/​t​e​x​t​a​r​e​a​>​<​b​r​ ​/​>
...


の赤字部分を削除。青字部分を追加。


デザイン→デザイン設定→CSS編集
.res{margin:5px;
padding:5px;
background-color:#E6D7AD;
font-size:13px;
color:#776644;
text-align:right;
}



要は、
メールアドレス入力欄を消して、
管理画面から返信用コメント欄として入力、
メールアドレス(返信コメント)をコメント下に表示させる

で実装できました。

他社のブログは全然カスタマイズしてないから知らないけど、
もしかしたら、応用できるのかも。

お疲れさまでした。
参考になりましたらソーシャルメディアで共有してくださいませ。
posted by こさめ
edit  re

■ この記事へのトラックバック
カテゴリ
インターネット>ブラウザ・WEBメール(24)
インターネット>Firefoxアドオン、設定(15)
インターネット>Proxomitronフィルター(32)
インターネット>ブログ、WEBサービス(53)
インターネット>アフィリエイト・ポイントサイト(27)
インターネット>楽天、ポイントあれこれ(5)
インターネット>Windows最適設定(32)
インターネット>インターネット設定(17)
インターネット>デスクトップ改造・拡張(7)
インターネット>セキュリティソフト(6)
ブログカスタマイズ>カテゴリー、記事一覧系(38)
ブログカスタマイズ>jQuery(Script)文字系(23)
ブログカスタマイズ>CSS(Script)デザイン(28)
ブログカスタマイズ>ブログパーツ(7)
ブログカスタマイズ>携帯モバイル系(3)
ブログカスタマイズ>SEO・アクセスアップ(31)
マルチメディア>Brackets(5)
マルチメディア>画像系ソフト(6)
マルチメディア>DVD・動画プレイヤー(15)
マルチメディア>動画編集ソフト(6)
マルチメディア>音楽再生プレイヤー(16)
マルチメディア>ネットラジオ配信・編集(3)
マルチメディア>P2Pテレビソフト(4)
マルチメディア>おもしろ動画・感動動画(25)
デザイン>フリー素材 画像(5)
デザイン>HP・ブログ フリー素材(6)
デザイン>イラスト(非素材)(8)
デザイン>作詞作曲編曲MP3(5)
雑記>PC部品・音楽機材(7)
雑記>映画・アニメ・漫画・芸能(14)
雑記>どうでもいい雑学知識(6)
雑記>ゲーム(6)
雑記>スマホ・携帯電話(6)
雑記>カーナビ・ETC(3)
雑記>ネット銀行とか(2)
雑記>18禁?ちょいエロネタ(3)

 (C) 2006 - kosame All rights.
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。