Bloggerのコメント関連の構成要素をデザイン構築のために検証する

概要

「MinimaBlack」のコメントですが…

トップページでは…設定が「フル ページ」のようですから…

別窓で「フル ページ」が開く文字リンクのみが表示されていて…

個別ページでは…記事下部に…

「フル ページ」への文字リンクだけが表示されています…

コメント欄

コメントフォーム

クリックすると…トホホデザインの…

2カラムで…コメント欄が左に…

コメントフォームが右に表示されます…

コメント関連は… Blogger では…

「埋め込み」を選択する方が多数派でしょうが…

「CSS」や「HTML」で装飾しようとしても…

割り当てられている…

「id」名や「class」名が解らないと…

お話になりませんね…

なので…構成部品は共通ですから…

「フル ページ」を例に検証してみましょう…

「データタグ」に関してはテンプレートによって扱いが様々でしょうから…

【 HTML 】部分に「データタグ」が使われている場合に…

置換出来る「データタグ」ならば置換する…的なスタンスで行って下さい…

「フル ページ」へのリンクを検証する

トップページの場合

トップページでの文字リンク…

【 CSS 】
span.post-comment-link{…}
【 HTML 】
<span class="post-comment-link"><a class="comment-link" href="「フル ページ」の URL" onclick="">7comments</a></span>
【 data tags 】
<data:top.commentLabel/>
<data:top.commentLabelPlural/>

「comment」「comments」部分ですので置換するのは…微妙ですね…

個別ページの場合

個別ページでの文字リンク…

【 CSS 】
p.comment-footer{…}
【 HTML 】
<p class="comment-footer"><a href="「フル ページ」の URL" onclick="">Post a Comment</a></p>
【 data tags 】
<data:postCommentMsg/>

このリンクは…文字列・データタグの…どちらで呼びだされていても…

地味過ぎますので…画像リンクやボタンリンクに変更するべきです…

「jQuery」と「Font Awesome」を組み合わせると…

 「jQuery」「jQuery UI」第２回「Button」リンクとフォームをボタン化

 「Font Awesome」のCDNでアイコンをWebフォント機能を使ってBloggerに表示【CSS3】


こんな感じのボタンリンクが作成出来ます…

Post a Comment

<span class="buttons"><a href="「フル ページ」の URL"><i class="fa fa-comment fa-lg fa-fw"/> Post a Comment <i class="fa fa-comment fa-lg fa-fw"/></a></span>

コメント欄を検証する

【 CSS 】
div.postContentToggle{…}
【 HTML 】
<div class="postContentToggle">…</div>

【 CSS 】
h4.post-title{…}
【 HTML 】
<h4 class="post-title"><a…>"Minima Series"</a></h4>

【 CSS 】
h4.total{…}
【 HTML 】
<h4 class="total"> 7 Comments
……</h4>

【 CSS 】
a#showOrHidePost{…}
【 HTML 】
<a id="showOrHidePost"…>Show Original Post</a>

【 CSS 】
a#btnAll .hide{…}
【 HTML 】
<a id="btnAll" class="hide"…>Collapse comments</a>

【 CSS 】
span.paging-control-container{…}
【 HTML 】
<span class="paging-control-container">1 – 7 of 7</span>

【 CSS 】
dl#comments-block{…}
【 HTML 】
<dl id="comments-block">…</dl>

【 CSS 】
dl#comments-block dt{…}
【 HTML 】
<dt id="…"><img…><span…><a…>John</a></span> said...</dt>

【 CSS 】
dl#comments-block dd{…}
dd.comment-timestamp{…}
【 HTML 】
<dd><p>コメント</p>
<p class="comment-timestamp">日時</p></dd>

コメントフォームを検証する

【 CSS 】
h2.form-title{…}

【 HTML 】
<h2 class="sidebar-title form-title">…</h2>

【 CSS 】
label.cbody{…}

【 HTML 】
<label for="comment-body" class="cbody">Leave your comment</label>

【 CSS 】
div#comment-msg{…}

【 HTML 】
<div id="comment-msg"></div>

【 CSS 】
textarea#comment-body.comment{…}

【 HTML 】
<textarea name="postBody" id="comment-body" class="comment"…></textarea>

【 CSS 】
div#html-usage-msg{…}

【 HTML 】
<div id="html-usage-msg">You can use some HTML tags, such as <b style="white-space:nowrap;"> &lt;b&gt;, &lt;i&gt;, &lt;a&gt; </b></div>

【 CSS 】
h2.access-msg{…}

【 HTML 】
<h2 class="access-msg">This blog does not allow anonymous comments.</h2>

【 CSS 】
div#identity-options div.options label{…}

【 HTML 】
<div id="identity-options"><div class="options"><input id="iden-bname"…><label for="iden-bname">ユーザー名(Google Account)–<a…>Sign Out</a>
</label></div></div>

【 CSS 】
div#identity-options div.options label a{…}

【 HTML 】
<a href="ログアウト用 URL">Sign Out</a>

【 CSS 】
div#commentsubscribe{…}

【 HTML 】
<div id="commentsubscribe"><label for="subscribe" class="comment-subscribe">Email follow-up comments to <b>メールアドレス</b></label></div>

【 CSS 】
a#publishBtn{…}

【 HTML 】
<a id="publishBtn" class="kd-button bg-primary"…>Publish Your Comment</a>

【 CSS 】
a#previewBtn{…}

【 HTML 】
<a id="previewBtn" class="kd-button"…>Preview</a>

おわりに…

白系テンプレートならいざ知らず…黒系テンプレートでは…

「フル ページ」のコメント表示は違和感ありまくりですね…

是非とも…是正していただきたいものです…

Tips Universal Header Sidebar Footer Current-Label : Main