過去記事の…
…で…コメント投稿フォームを折りたたむ方法を書きました…
コメントをイッパイ書いてもらえるサイト運営者の方は…
ありがたいけれど…デザイン的にちょっと…
…と…思っている方も多いかと…
なので…折りたたんでクリックで開閉できるようにしましょう…
尚且つ…コメントの文字色と文字サイズも変更します…
過去記事と…ほぼ同じなのですが…
上記記事の設定では…複数箇所のクリックイベントが行えませんので…
新たに記事にします…
これに伴い…上記記事も書き換えましたので…ご確認を…
それと…コメント無しの記事では変化無しになってしまいますので…
重複表示になりますがコメント数を表示させるようにしました…
更に…過去記事の…
…も…導入していますので…
必要無い場合は…過去記事を参照して…
「<ol>」「<li>」「</li>」「</ol>」を削除して下さい…
導入すると…こんな感じ…
(画像クリックで拡大)
クリックすると投稿済みコメントが表示されます…
(画像クリックで拡大)
コメント無しの記事では…
「0 Comments:」が出ます…
(画像クリックで拡大)
先ずは…下準備です…
過去記事を参照して…
コメント投稿用のボタンを作成します…
文字リンクにするなら必要ありません…
「設定」「コメント」で…
コメントを「表示」にチェックして下さい…
下記コードを「メモ帳」にコピペして…
<!--
function OC(a){if(document.getElementById(a).style.display=="none"){document.getElementById(a).style.display="block"}else{document.getElementById(a).style.display="none"}};
// -->
文字コードを「UTF-8」拡張子を「js」で…
任意の名前(例 : collapse.js)で保存し…
任意の場所にホストします…
参照 :
外部ファイル化したくない方は…
「HTML/JavaScript」ガジェットでも結構です…
その場合は…このように書き換えて下さい…
<script type='text/javascript'> ここに上記コードを挿入 </script>
尚…「HTML/JavaScript」ガジェットは…
単独で使用すると…枠線を設定している場合は…
枠線しか表示されない間抜けなガジェットが表示されますので…
他で使用している「HTML/JavaScript」ガジェットの…
末尾に追記する形で問題ありません…
外部ファイル化した方は…
「デザイン」「HTMLの編集」「ウィジェットのテンプレートを展開」から…
「</body>」の直前に…
<script async='async' charset='utf-8' src='js ファイルの URL' type='text/javascript'/>
…と…ご自身の「js ファイルの URL」と差し替えてから記述します…
さて…本番です…同様に…
「デザイン」「HTMLの編集」「ウィジェットのテンプレートを編集」から…
「Ctrl + F」で…
「<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>」
…を検索すると該当箇所はこんな感じ…
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>
これに…下記コードの黄色文字の部分を追加します…
文字色・文字サイズは…ご自身のデフォルトのままで…って方は…
文字色・文字サイズの追加は無しで結構です…
文字色・文字サイズは…
「style='font-size: 12px; color: green;'」
…ってな感じで指定してください…
3行目・7行目・17行目・24行目・35行目の説明は…
コメントアウトされて表示されませんが…
設定が終われば必要ありませんので削除して OK です…
コメントが無い投稿で…
「0 Comments:」を重複表示させないで…
クリックしても何も起こらなくて良い場合は…
4行目も不要です…
<a href='javascript:;' onclick='OC('collapse1')'>ここにボタンタグかリンク文字を挿入</a> <div id='collapse1' style='display:none'> <div expr:id='data:widget.instanceId + "_comments-block-wrapper"'> <!-- コメント数を表示させます --> <h4> <b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/>: <b:else/> <data:post.numComments/> <data:commentLabelPlural/>: </b:if> </h4> <ol><dl expr:class='data:post.avatarIndentClass' id='comments-block'> <b:loop values='data:post.comments' var='comment'> <!-- URLを入力していない投稿者の文字色・文字サイズ --> <li><dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName' style='font-size: 12px;'> <b:if cond='data:comment.favicon'> <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/> </b:if> <a expr:name='data:comment.anchorName'/> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if> <b:if cond='data:comment.authorUrl'> <!-- URLを入力した投稿者の文字色・文字サイズ --> <a expr:href='data:comment.authorUrl' rel='nofollow' style='font-size: 12px; color: #8AC75A;'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/> </dt></li> <!-- 投稿本文の文字色・文字サイズ --> <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix' style='font-size: 12px;'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p> <data:comment.body/> </p> </b:if> </dd> <dd class='comment-footer'> <!-- コメントのタイムスタンプの文字色・文字サイズ --> <span class='comment-timestamp' style='font-size: 10px;'> <a expr:href='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span> </dd> </b:loop> </dl></ol> </div> </div>
以上です…
お疲れ様でした…
こちらの記事も…お奨めします…
★・。。・゜゜・。。・☆・。。・゜゜・。。・★・。。・゜゜・。。・☆
Time goes by...INFINITY へ御訪問頂きありがとうございます
もし…当ブログの内容を気に入って頂けましたら…上記ボタンにて RSS リーダー
タイトル上のボタンで各種ソーシャルブックマークへの登録も宜しくお願い致します
