現在は「jQuery」の「Accordion」で開閉させています…
jQuery UI Bloggerのコメント関連を「Accordion」で開閉してしてスタイリッシュにする
★・。。・゜゜・。。・☆・。。・゜゜・。。・★・。。・゜゜・。。・☆
過去記事の…
Bloggerの埋め込みコメントフォームを折りたたんでクリックで開閉する記述
…で…コメント投稿フォームを折りたたむ方法を書きました…
コメントをイッパイ書いてもらえるサイト運営者の方は…
ありがたいけれど…デザイン的にちょっと…
…と…思っている方も多いかと…
なので…折りたたんでクリックで開閉できるようにしましょう…
尚且つ…コメントの文字色と文字サイズも変更します…
過去記事と…ほぼ同じなのですが…
上記記事の設定では…複数箇所のクリックイベントが行えませんので…
新たに記事にします…
これに伴い…上記記事も書き換えましたので…ご確認を…
それと…コメント無しの記事では変化無しになってしまいますので…
重複表示になりますがコメント数を表示させるようにしました…
更に…過去記事の…
Bloggerのコメント欄にコメント順に通し番号を付ける記述
…も…導入していますので…
必要無い場合は…過去記事を参照して…
「<ol>」「<li>」「</li>」「</ol>」を削除して下さい…
導入すると…
こんな感じ…
クリックすると…
投稿済みコメントが表示されます…
コメント無しの記事では…
「0 Comments:」が出ます…
先ずは…下準備です…
過去記事を参照して…
コメント投稿用のボタンを作成します…
文字リンクにするなら必要ありません…
Bloggerでコメントフォームとバックリンクを変更する設定と記述…page2
「設定」「コメント」で…
コメントを「表示」にチェックして下さい…
下記コードを「メモ帳」にコピペして…
- <!--
- 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)で保存し…
任意の場所にホストします…
Blogger用の外部ファイル保存場所として「GitHub」の「GitHub Pages」を活用しよう
Blogger用のファイル保存場所としてのクラウド型オンライン ストレージ「Google Drive」
Blogger用のファイル保存場所としてのクラウド型オンライン ストレージ「Dropbox」
Google Blogger用のファイル保存場所としてのGoogle sites/Picasa
外部ファイル化したくない方は…
「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"'>」
…を検索すると該当箇所はこんな感じ…
該当箇所の「HTML」
- <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行目も不要です…
変更後の「HTML」
- <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>
以上です…
お疲れ様でした…
こちらの記事も…お奨めします…
HTML要素を折りたたんでクリックで動的に開閉するJavaScript…複数設置可能
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿