コメント-プラグイン-

参照サイト1:FC2公式プラグイン概要
参照サイト2:FC2テンプレート用 変数一覧

コメントを新しい順に表示してくれるもの。
最初に入っている公式プラグインは本当に必要最低限のもののみ。

さて、そこでHTML/CSSを少しだけいじります。
中身と外見を変えてみましょう。

公式プラグインのHTML

0_2013112013045861e.jpg

<ul><!--rcomment--> <li &align>
<a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_title>"><%rcomment_name>:<%rcomment_etitle> (<%rcomment_month>/<%rcomment_day>)</a>
</li> <!--/rcomment--></ul>

<!--rcomment-->~<!--/rcomment-->:コメントを新着順に一覧表示
<ul><li>~</li></ul>:上記をリスト化
<a href=****>~</a>:コメントへのリンク

「コメント投稿者の名前:元記事のタイトル(着信月日)」という書式で、
当該記事の個別ページへリンクされます。
「#comment(+コメント番号)」というアンカーが付加されています。

(補足)
FC2ブログのコメントには1から順に番号が振られます。

2_201311201319233ce.jpg
たとえば377は鯉たん、376は銀行のコメントです。
※元記事のURLもあるため純粋に#377→376では飛びません。



基本はこのままで外見を整えた結果がこちら。

1_201311201304573bc.jpg

現在右に表示されいる状態です。
「Newマーク」「数行の本文」が追加されただけなのが分かります。

HTMLはこちら
表示したものがこちら

クラスは2つを用意

・cmbox_user
・cm_cody


今回は<%rcomment_body>(本文)部分にのみ枠線を入れたかったためこのように2つに分ける結果となりました。
では肝心のCSSの中身を見てみましょう。

cmbox_user
<STYLE type="text/css">

/************************▼ 投稿者 ▼**/

.cmbox_user{
text-align:left;
margin:5px 0 5px 0;
}
.cmbox_user a{
font-size:12px;
font-weight:bold;
}

.cmbox_user span{
font-size:10px;
}

フォント12px:ユーザー名前(というよりリンクが貼ってある箇所)
フォント10px:「元記事のタイトル(着信月日)」を少し小さめに

cm_body
/************************▼ 全体 ▼**/

#cm_body{
display:block;
margin:0; 
font-size:12px;
text-align:left;
padding:1px 5px;
max-height: 30px;
overflow-y:hidden;

border-left: 1px solid #000000;
border-bottom: 1px dotted #000000;
clear:both;
}

#cm_dody p{
weight:90%;
}

</STYLE>

本文全てを表示してしまうと縦に長くなってしまうため
30px上限を設け、はみ出した部分は隠します。
設けないとこのように全て表示されます。

余白を考えたりすればもう1つdivで囲ってあげるのも。


コメント

    コメントの投稿

    (コメントの編集・削除時に必要)



    最新記事