「この記事へのコメント」をカスタマイズする (2)



「この記事へのコメント」をカスタマイズする (1)の続きです。

前回は、コメント欄のタイトルのCSSをカスタマイズしました。

今回は、コメント欄のタイトルの言葉を変えます。
それから、テンプレートによっては調整が必要になりますので、CSSで調整していきます。

 
 
PR




記事のHTMLの中の comments-head を書き換える



メニュー一覧を開きます。
(ショートカットは、Alt+m)

j-170225-01.gif

コンテンツ:PC をクリックします。

j-170225-02.gif

メインコンテンツの記事の設定(歯車アイコン)をクリックします。

j-170225-03.gif

コンテンツHTML編集 をクリックします。

HTMLの中にある「この記事へのコメント」という文字を探します。

j-170225-04.gif

Ctrl+fで検索するのが早いです。


<div class="comments-head">この記事へのコメント</div>

というの、見つかりましたね?

この部分を下のコードに書き換えてください。コピペすればOKです。

<div class="comments-head">この記事へのコメントが <% article.children_count | __or__ | echo('0') %> 件あります</div>


保存ボタンは押さずに、次に行きます。


並び順を変更する


デフォルトでは、

 コメント本文
 Posted by 投稿者 at 投稿日時

となっている順番を

 投稿者 より:投稿日
 コメント本文

に変更しますよ。

いま開いている画面のまま、次のコードを探します。

<div class="comments-body">
<div class="text"><% comment.body | html | tag_strip | nl2br | clickable('target="_blank" rel="nofollow"') %></div>
<div class="comments-post">Posted by <% if:comment.homepage %><a href="<% comment.homepage | html | tag_strip %>" target="_blank" rel="nofollow"><% comment.writer | html | tag_strip %></a><% else %><% comment.writer | html | tag_strip %><% /if %> at <% comment.createstamp | date_format('%Y年%m月%d日 %H:%M') %><br /></div>
</div>

これを丸ごと、次のコードに書き換えます。


<div class="comments-body">
<div class="comments-post"><% if:comment.homepage %><a href="<% comment.homepage | html | tag_strip %>" target="_blank" rel="nofollow"><% comment.writer | html | tag_strip %></a><% else %><% comment.writer | html | tag_strip %><% /if %> より: <% comment.createstamp | date_format('%Y年%m月%d日') %><br /></div>
<div class="text"><% comment.body | html | tag_strip | nl2br | clickable('target="_blank" rel="nofollow"') %></div>
</div>

※私は時刻は不要だと考えているので、'%Y年%m月%d日'にしました。
時刻も必要な人は、'%Y年%m月%d日 %H:%M'としてください。

保存ボタンをクリックして、記事の編集は終わりです。


CSSを若干手直し


この時点て表示を確認してください。
結果はテンプレートによってまちまちだと思います。

私が使用しているシンプルDの場合、右寄せ&下線を修正したいなーと思ったので、次のようにしました。


.comments-body {
margin: 1em 0 1em 0;
padding: 0 0 1em 0;
border-bottom: 1px dotted #ccc;
}
.comments-post {
padding: 5px 10px 5px 0;
text-align: left;
border-bottom: none;
margin-bottom: 0;
}



それと、これはおまけ。
投稿者のお名前が太字のほうが目立っていいかなーと思って、

.comments-writer { 
font-weight: 700;
}
.comments-writer a {
font-weight: 700;
}


これは、記事HTMLにも記述が必要です。

さっき書き換えだHTMLの中の

<div class="comments-body"><% if:comment.homepage %><a href="<% comment.homepage | html | tag_strip %>" target="_blank" rel="nofollow"><% comment.writer | html | tag_strip %></a><% else %><% comment.writer | html | tag_strip %><% /if %></div>

の部分を…

<span class="comments-writer">
<div class="comments-body"><% if:comment.homepage %><a href="<% comment.homepage | html | tag_strip %>" target="_blank" rel="nofollow"><% comment.writer | html | tag_strip %></a><% else %><% comment.writer | html | tag_strip %><% /if %></div>
</span>


要は、投稿者名の部分にcomments-writerを指定しているわけです。


これらの設定が終わると、



こうなります。


今回は、ちょっと長すぎたかなー。

それでは、また。

↓参考になったら、今日もぜひクリックで応援してね!↓



この記事へのコメント

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/447333520

※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック


SPONSORED LINK