WordPressのコメント欄をLINE風にカスタマイズ(賢威)

公開日: 2014年07月08日
最終更新日: 2015年04月06日

メッセージアプリ風

Wordpressのコメント欄を、LINEなどのメッセージアプリ風のデザインにカスタマイズしてみました。また、Gravatarを使うことでコメント欄のアバターを任意の画像に変更するとともに、コメントとトラックバックを別々に表示させるようにしました。

もくじ

はじめに

inosh blogで最近ときどきコメントをいただくようになったので(盛りました。2件しかいただいてません)、Wordpressのコメント欄を少しカスタマイズしようと思います。

今現在、コメント欄は私が使用しているWordpressテーマ「賢威6.1 コーポレート版」のデフォルトのままです。

こんな感じ↓
inosh blogのコメント欄

何となくテンプレートのデザインをそのまま使うっていうのはあまり好きじゃないので、ここをカスタマイズします。

デフォルトで表示される「”記事タイトル”への4件のフィードバック」っていうのも、個人的に気に入らないんですよね。

ってことで、色々とカスタマイズします。

まず、やりたいことは以下の4つ。

やりたいこと

  1. アバターを表示させてみる
  2. トラックバックをコメントとは別にする
  3. 返信をどのコメントに対する返信なのか分かるようにする
  4. LINEみたいな感じで会話してる風のデザイン

という感じです。

3番と4番は関連してくるのですが、先ほど上記で紹介した画像だと、返信した感がありませんよね。

そこで、返信した感を出すとともに、デザイン的にはLINEとかのメッセージアプリ風にしてみたいと思います。

アバターの表示

WordPressの管理画面から、「設定 > ディスカッション」を開き、下の方にスクロールして「アバターを表示する」部分にチェックし、「変更を保存」をクリックします。

これでコメント欄にアバターは表示されますが、画像はミステリーマンミステリーマンのまま。

訪問者の方からのコメントはデフォルトのミステリーマンでも良いですが、自分のアバターに関してはブログのロゴとかTwitterで使ってるアイコンとか自分の写真とか、ミステリーマンじゃない何らかの画像にしておきたいですね。

TATSUO IKURAさんの記事(Gravatarを利用した独自アバターの設定 – WordPressの使い方)などを参考に、Gravatarに登録、画像を変更してみました。

すると、コメント欄のアバターの画像が任意のものinoshとなりました。

デザインをLINE風にして、トラックバックをコメントと別にする

コメント欄を、メッセージアプリ風のデザインにしてみます。

また、コメント欄の中にトラックバックが混ざってたりすると、何か邪魔ですよねー。なので、コメント欄とトラックバック一覧は別にしたいと思います。

これは、*youさんの記事(WordPressのコメントとトラックバックを分けてカスタマイズ *Ateitexe)を参考に、ちょっと自分用にカスタマイズして利用させていただきました。

comments.phpを編集

comments.php(デフォルト)

	if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('Please do not load this page directly. Thanks!');

	if ( post_password_required() ) { ?>
		<p class="nocomments"><?php _e('This post is password protected. Enter the password to view comments.'); ?></p>
	<?php
		return;
	}
?>

<!-- You can start editing here. -->

<?php if ( have_comments() ) : ?>
	<h3 id="comments"><?php	printf( _n( 'One Response to %2$s', '%1$s Responses to %2$s', get_comments_number() ),
									number_format_i18n( get_comments_number() ), '&#8220;' . get_the_title() . '&#8221;' ); ?></h3>

	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>

	<ol class="commentlist">
	<?php wp_list_comments();?>
	</ol>

	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>
 <?php else : // this is displayed if there are no comments so far ?>

	<?php if ( comments_open() ) : ?>
		<!-- If comments are open, but there are no comments. -->

	 <?php else : // comments are closed ?>
		<!-- If comments are closed. -->
		<p class="nocomments"><?php _e('Comments are closed.'); ?></p>

	<?php endif; ?>
<?php endif; ?>

下矢印

comments.php(修正後)

if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
	die ('Please do not load this page directly. Thanks!');
if ( post_password_required() ) { ?>
	<p class="nocomments"><?php _e('This post is password protected. Enter the password to view comments.'); ?></p>
<?php return; } ?>

<?php if ( have_comments() ) : ?>
<?php $comments_cnt=get_comment_only_number(); ?>
<!-- コメント -->
<?php if ($comments_cnt > 0) { ?>
<h3 id="comments">この記事へ<?php echo $comments_cnt; ?>件のコメント</h3>
<ol class="commentlist">
<?php wp_list_comments('type=comment&callback=mytheme_comment');?>
</ol>
<?php } ?>
<!-- トラックバック -->
<?php if (get_comments_number()-$comments_cnt > 0) { ?>
<h3>この記事へ<?php echo get_comments_number()-$comments_cnt; ?>件のトラックバック</h3>
<ul class="pinglist">
<?php wp_list_comments('type=pings&callback=mytheme_pings'); ?>
</ul>
<?php } ?>
<?php endif; ?>

この変更により、コメント一覧(修正後の9行目~15行目)とトラックバック一覧(修正後の16行目~22行目)が別で表示されるようになりました。

といっても、8行目・13行目・20行目などで呼び出している関数をfunctions.phpに記述しないと、このままでは動作しません。

なお、私はコメント欄を分割する予定はないため、分割した際に「前のコメントへ」とか「次のコメントへ」などと表示される部分のコード(デフォルトの17行目~20行目、26行目~29行目)を削除しました。「div class=”navigation”」のところですね。

また過去記事含めコメントを受け付けない設定にする予定もないので、「if ( comments_open() ) :」と記述されていたりするデフォルトの30行目~39行目部分もバッサリ削除しました。

functions.phpを編集

上記comments.phpで修正したコードの中で、8行目はコメント数を取得する関数「get_comment_only_number();」、13行目ではコメント欄部分のhtmlを吐き出す関数「callback=mytheme_comment」、20行目ではトラックバック欄部分のhtmlを吐き出す関数「callback=mytheme_pings」などが呼び出されています。

これらを、functions.phpに記述します。

functions.php

// コメントの件数を取得
function get_comment_only_number() {
    global $wpdb, $tablecomments, $post;
    $comments = $wpdb->get_results("SELECT * FROM $wpdb->comments WHERE comment_post_ID = $post->ID AND
comment_type NOT REGEXP '^(trackback|pingback)$' AND comment_approved = '1'");
    $cnt = count($comments);
    return $cnt;
}

// コメントの取得
function mytheme_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
<div id="comment-<?php comment_ID(); ?>" class="comment-body">
<div id="comment_user_info">
<?php echo get_avatar( $comment, 48 ); ?>
<?php printf(__('<cite class="fn">%s</cite>'), get_comment_author_link()) ?>
<?php if ($comment->comment_approved == '0') : ?>
<p class="wait">*このコメントはただいま承認待ちです*</p>
<?php endif; ?>
<div class="comment-meta">
<?php printf(__('%1$s'), get_comment_date() . ' ' . get_comment_time('G:i')) ?><?php edit_comment_link(__('(Edit)'),'  ','') ?>
</div>
</div>
<div class="comment_text">
<?php comment_text() ?>
</div>
<div class="reply">
<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</div>
</div>
<?php }

// トラックバックの取得
function mytheme_pings($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
<div class="comment-meta">
<?php printf(__('%1$s'), get_comment_date()) ?><?php edit_comment_link(__('(Edit)'),'  ','') ?>
</div>
<div id="comment-<?php comment_ID(); ?>" class="comment-body">
<?php printf(__('%s'), get_comment_author_link()) ?>
<?php comment_text() ?>
</div>
<?php }

これで、コメント一覧とトラックバック一覧が表示されるようになりました。

CSSを編集

あとは、CSSで仕上げるのみです。
私はLINE風にしてみたいということから、CSSに以下のように記述しました。

mystyle.css

#main-contents .commentlist{ padding:0; }
.depth-1,.depth-3,.depth-5{ text-align:left; }
.depth-2,.depth-4{ text-align:right; }
#main-contents .commentlist ul.children{ margin-left:15px !important; margin-bottom:0; }
#main-contents .commentlist li{ border-bottom:1px dashed #e41858; margin-top:30px; margin-bottom:30px; padding-bottom:30px; }
#main-contents .commentlist li li{ border-top:1px dashed #e41858; margin-top:30px; padding-top:30px; }
#comment_user_info{ width:300px; text-align:left; overflow:hidden; background:rgba(0,0,0,0.3); padding:5px; }
#comment_user_info img.avatar{ float:left; margin-right:10px; }
.depth-2 #comment_user_info img.avatar{ float:right; margin:0 0 0 10px; }
.depth-3 #comment_user_info img.avatar{ float:left; margin:0 10px 0 0; }
.depth-2 #comment_user_info{ float:right; text-align:right; }
.depth-3 #comment_user_info{ float:none; text-align:left; }
.fn{ font-weight:bold; }
.fn a{ color:#333; }
#main-contents .comment-meta{ font-size:80%; margin-bottom:0; }
.comment_text p{ margin-bottom:0 !important; }
.commentlist .comment_text{ margin-top:35px; color:#222; background:#ddd; display:inline-block; padding:1em; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; position:relative; text-align:left; }
.commentlist .comment_text:before{ position:absolute; top:-30px; left:25px; z-index:2; border-top:35px solid transparent; border-left:25px solid #ddd; content:""; }
.depth-2 .comment_text:before{ position:absolute; top:-30px; right:35px;  z-index:2; border-top:35px solid transparent; border-left:none; border-right:25px solid #ddd; content:""; }
.depth-3 .comment_text:before { position:absolute; top:-30px; left:25px; z-index:2; border-top:35px solid transparent; border-left:24px solid #ddd !important; border-right:none !important; content:""; }
.reply{ margin-top:15px; }
#main-contents .reply a{ background:none; padding:5px 10px; background:#222; color:#fff; text-decoration:none; }
#main-contents .reply a:hover{ background:#e41858; }

何か色々なところでハマって悩んで諦めかけて試行錯誤しながら仕上げたので、無駄なコードがあったり力技的なコードがあったりすると思うのですが、結果的にやりたいことは出来たので良しとしたいと思います。

ビフォーアフター

びふぉ
inosh blogのコメント欄

あふたぁ
inosh blogのコメント欄(カスタマイズ後)

ちなみに、ピンバックがあった場合にはコメント一覧の下の方にこんな感じで表示されます。
inosh blogのピンバック欄

2014/10/9追記 – 表示崩れの修正

テストさんがテストコメントを下さったので、それに返信コメントをしたところ、なんか表示が崩れてました。
表示崩れが発生しているコメント欄

右側に来て欲しい部分が左側に来てしまっています。

なので、CSSを以下のように修正しました…。

mystyle.css

#main-contents .commentlist{ padding:0; }
.depth-1,.depth-3,.depth-5{ text-align:left; }
.depth-2,.depth-4{ text-align:right; }
#main-contents .commentlist ul.children{ margin-left:15px !important; margin-bottom:0; }
#main-contents .commentlist li{ border-bottom:1px dashed #e41858; margin-top:30px; margin-bottom:30px; padding-bottom:30px; }
#main-contents .commentlist li li{ border-top:1px dashed #e41858; margin-top:30px; padding-top:30px; }
#comment_user_info{ width:300px; text-align:left; overflow:hidden; background:rgba(0,0,0,0.3); padding:5px; }
#comment_user_info img.avatar{ float:left; margin-right:10px; }
.depth-2 #comment_user_info img.avatar{ float:right; margin:0 0 0 10px; }
.depth-3 #comment_user_info img.avatar{ float:left; margin:0 10px 0 0; }
.depth-4 #comment_user_info img.avatar{ float:right; margin:0 0 0 10px; }
.depth-5 #comment_user_info img.avatar{ float:left; margin:0 10px 0 0; }
.depth-2 #comment_user_info{ margin:0 0 0 auto; text-align:right; }
.depth-3 #comment_user_info{ margin:0 auto 0 0; text-align:left; }
.depth-4 #comment_user_info{ margin:0 0 0 auto; text-align:right; }
.depth-5 #comment_user_info{ margin:0 auto 0 0; text-align:left; }
.fn{ font-weight:bold; }
.fn a{ color:#333; }
#main-contents .comment-meta{ font-size:80%; margin-bottom:0; }
.commentlist .comment_text{ margin-top:35px; color:#222; background:#ddd; display:inline-block; padding:1em 1em 0; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; position:relative; text-align:left; }
.commentlist .comment_text:before{ position:absolute; top:-30px; left:25px; z-index:2; border-top:35px solid transparent; border-left:25px solid #ddd; content:""; }
.depth-2 .comment_text:before{ position:absolute; top:-30px; right:35px;  z-index:2; border-top:35px solid transparent; border-left:none; border-right:25px solid #ddd; content:""; }
.depth-3 .comment_text:before { position:absolute; top:-30px; left:25px; z-index:2; border-top:35px solid transparent; border-left:24px solid #ddd; border-right:none; content:""; }
.depth-4 .comment_text:before{ position:absolute; top:-30px; right:35px;  z-index:2; border-top:35px solid transparent; border-left:none; border-right:25px solid #ddd; content:""; }
.depth-5 .comment_text:before { position:absolute; top:-30px; left:25px; z-index:2; border-top:35px solid transparent; border-left:24px solid #ddd; border-right:none; content:""; }
.reply{ margin-top:15px; }
#main-contents .reply a{ background:none; padding:5px 10px; background:#222; color:#fff; text-decoration:none; }
#main-contents .reply a:hover{ background:#e41858; }

コメント部分のpaddingなど、今回の不具合とは関係ないところも何箇所か修正しています。

色々と無駄な記述がありますが、表示が良ければ全て良しとしたいと思います。

2015/4/6追記 – スマホ表示崩れの修正

返信コメントの多い記事だとスマホで表示が崩れていることに気づきましたので、CSSに以下のコードを追記しました。

mystyle.css

@media (max-width:640px) {
#comment_user_info{ width:100%; }
}

\(^o^)/ ぼっけぇシェア \(^o^)/

この記事へ54件のコメント

  1. *you
    2014年7月8日 11:28

    こんにちは!ご紹介ありがとうございます、お役に立てて光栄ですー(*´ω`*)

    • inosh
      2014年7月8日 12:05

      こんにちは。お礼なんてとんでもないです!
      こちらこそ有益な情報ありがとうございますー(^ω^)

      • テスト
        2014年10月7日 22:17

        すみません。テスト返信させてください。

        • inosh
          2014年10月7日 23:11

          ご自由にどうぞ!

    • 返信テスト
      2015年5月7日 19:52

      返信テストさせてください。

      • 返信テスト2
        2015年5月7日 19:52

        返信テスト2

      • inosh
        2015年6月5日 2:11

        どうぞー!

      • 匿名
        2015年12月8日 0:40

        返信テスト

  2. inosh
    2014年10月7日 23:12

    あぁなんと…返信に対する返信に対する返信の表示が崩れてますね…。
    明日、修正作業をして、その内容を記事の中に追記しておこうと思います…。

    テストさん、テスト返信していただき誠にありがとうございます(TДT)

    • テスト
      2015年2月16日 17:25

      すいませんテストコメントさせて頂きましたm(_ _)m
      見た目も見やすいですね!!

      • inosh
        2015年2月20日 2:26

        テストコメントいただいたおかげで表示崩れに気付けてこちらとしても助かりました!
        見やすいとのことありがとうございます!嬉しいです(^o^)

        • 無法者
          2016年2月12日 12:17

          大変参考になりました!ありがとうございます。
          テストがてら、#comment_user_infoは.comment_user_infoの方がcss的に正しいと思います。

  3. 通りすがりのオヤジ
    2015年2月19日 18:51

    うーん 素晴らしい(*´ω`)

    • 通りすがりのオヤジ
      2015年2月19日 18:52

      返信にテストしてみた( ´ー`)y-~

      • 通りすがりのオヤジ
        2015年2月19日 18:53

        返信にテストしてみた( ´ー`)y-~

        にさらに返信してみた。。。

        いろいろテストさせてもらって申し訳ないm(__)m

        • inosh
          2015年2月20日 2:30

          コメントいただきありがとうございます!お褒めのお言葉も嬉しいです!
          何でもご自由に書いていただいて大丈夫ですのでお気兼ねなく( ´∀`)

  4. 匿名
    2015年4月6日 21:54

    エラーが出てしまいます…

    • inosh
      2015年4月6日 22:27

      コメントいただきありがとうございます。
      エラーが出てしまいますか…

      テーマは賢威ですか?
      解決できるかは分かりませんが、URLをお知らせいただけましたらどのようになっているか見させていただきます。

    • 匿名
      2015年7月2日 22:54

      返信

  5. 匿名希望
    2015年4月13日 16:36

    練習させてください。
    すごいですね。

    • 匿名希望
      2015年4月13日 16:36

      練習2です。

      • 匿名希望
        2015年4月13日 16:42

        練習3です。

    • inosh
      2015年6月5日 2:13

      どうぞ!
      凄いなんてとんでもないです~ありがとうございます!(=゚ω゚)ノ

    • 匿名
      2015年6月5日 18:47

      返信テスト

  6. 匿名希望
    2015年4月13日 16:43

    新たな練習です。

  7. inosh
    2015年6月5日 2:18

    執筆者 対 訪問者など1対1での1問1答形式だと分かりやすいと思いますが(自分で言うのもあれですがw)、複数の方が入り乱れる形でのコメントだと、どれがどれに対する返信なのか少し分かりづらいかもしれませんね…。

    もし分かりにくかったり、変えたほうが良さそうな点などがありましたら、お知らせいただけると幸いです< (_ _)>

  8. 匿名
    2015年6月5日 18:59

    function.phpへの記述はそのまま追加すればいいのでしょうか?

    • inosh
      2015年6月5日 19:09

      はい。最下部にコピペしていただけたら、たぶん大丈夫かと思います。念のためバックアップは取っておいて下さい!

      • 匿名
        2015年6月5日 19:10

        ありがとうございます!!

      • 匿名
        2015年12月8日 0:39

        返信テストさせてください!

  9. 匿名
    2015年6月5日 19:10

    mystyle.cssってどこに記述すればいいのでしょうか??

    • inosh
      2015年6月5日 19:22

      すみません、それは自分で作ったCSSファイルをheader.phpから読み込んでいます。

      http://inosh.jp/keni-multiple-read-css-summarize/

      上記のページをご覧いただけると分かるかもしれません!
      ※テーマが賢威なのであれば

  10. 匿名
    2015年6月5日 22:15

    すごいですね!
    でも1カラムだと崩れてしまいます。。。

    • 匿名
      2015年6月5日 22:16

      http://www.binyuchan.com/
      こちらです!

      • inosh
        2015年6月5日 22:35

        確認いたしました。
        たぶんですが、CSSが古い(バグ修正前)方のコードを使われていると思いますので、mystyle.cssの中身を全部

        http://inosh.jp/wordpress-comment-line-customize/#p5

        こちらで掲載しているコードに変更して試してみていただけたらと思います!

  11. 匿名
    2015年6月5日 23:39

    スゴイです!治りました。ありがとうございます!

    • inosh
      2015年6月7日 15:40

      とんでもないです!治ったようで良かったです。
      カスタマイズ等がんばってください!(=゚ω゚)ノ

  12. 匿名
    2015年7月2日 21:41

    テストしてるの

    • 匿名
      2015年7月2日 22:55

      返信

  13. 匿名
    2015年7月2日 22:53

    すごい!!

    • inosh
      2015年7月3日 0:17

      ありがとうございます!
      ご自由にテストしてください~( ・∇・)

  14. 匿名
    2015年7月5日 10:53

    アラビア

    • 匿名
      2015年9月22日 8:52

      アイルトンセナ

  15. 匿名
    2015年12月13日 16:11

    コメント欄の見た目を変えたいとおもい彷徨っていたらたどり着けました。Line風にするとすごい見やすくなりますね。申し訳ありませんが掲載されているコードを利用してもよろしいでしょうか?

    • inosh
      2015年12月13日 17:55

      コメントいただきありがとうございます。
      大丈夫ですよ。ご自由にお使い下さいー!

      • 匿名
        2015年12月13日 18:23

        お早いお返事ありがとうございます。

        早速使用してみました。思い通りに配置はでき、各部分がどのような動きをしているのか確認することが出来ましたが、
        コメントの箇所を移動する。

        .commentlist .comment_text:before{
        position:absolute;
        top:-30px;
        left:25px;
        z-index:2;
        border-top:35px solid transparent;
        border-left:25px solid #ddd;
        content:”";
        }

        .depth-2 ..comment_text:before{
        position:absolute;
        top:-30px;
        right:35px;
        z-index:2;
        border-top:35px solid transparent;
        border-left:none;
        border-right:25px solid #ddd;
        content:”";
        }

        .depth-3 .comment_text:before {
        position:absolute;
        top:-30px;
        left:25px;
        z-index:2;
        border-top:35px solid transparent;
        border-left:24px solid #ddd;
        border-right:none;
        content:”";
        }

        .depth-4 .comment_text:before{
        position:absolute;
        top:-30px;
        right:35px;
        z-index:2;
        border-top:35px solid transparent;
        border-left:none;
        border-right:25px solid #ddd;
        content:”";
        }

        .depth-5 .comment_text:before {
        position:absolute;
        top:-30px;
        left:25px;
        z-index:2;
        border-top:35px solid transparent;
        border-left:24px solid #ddd;
        border-right:none;
        content:”";
        }

        の箇所でコメント全体が動いてしまい全体を囲っている#main-contentsのから離れてしまい少し困っています。
        これは、.commentlistの箇所をposition:relativeにすればよろしいのでしょうか?

        お手数おかけいたします。

        • 匿名
          2015年12月13日 19:04

          あ、CSSの部分が消えていました。

          上記の修正後のCSS内の.fnの下にある

          .commentlist .comment_textから.commentlist comment_text:before及び.depath-2 .comennt_text:beforeから.depath-5 .comment_text:beforeの部分を打ち込むと.fnまでレイアウトはうまくいってたのですが、擬似要素を入れてposition:absoluteを記述すると、コメントの部分が大きく崩れてしまいます。

          • inosh
            2015年12月13日 19:15

            あ、入れ違いになっちゃいましたね。CSSの部分も確認できたので大丈夫ですよ。
            WordPressのコメント欄は一般的にHTMLタグを使用できますので、< !- - を使うとコメント扱いになるのです。 こちらでコメントタグを削除させていただきますね。

        • inosh
          2015年12月13日 19:11

          .comment_textをposition:relativeにしていれば大丈夫だと思うのですが、実際のサイトを拝見しないと何とも言えないです…申し訳ございません。

          ただ、いただいたコメントの内容そのままをCSSに記述されているのであれば、

          .commentlist .comment_text:before{
          .depth-2 ..comment_text:before{

          例えば上記の部分に全角スペースが2つ含まれていること、クラス指定の部分でピリオドが2つ入っていることなど、元のCSSとは違う形になっています。

          なので、見にくいとは思いますが1度改行などの改変を一切加えず、当ページでご紹介しているCSSをそのままコピペして、当該不具合が発生するかどうか試してみていただけますと幸いです。

          • 匿名
            2015年12月13日 19:37

            お返事ありがとうございます。
            なるほど、.comment_textをposition:relativeですかやってみます。ご助言ありがとうございました。

          • 匿名
            2015年12月13日 19:56

            ご指摘された箇所を修正したらうまくいきました。ありがとうございます。

          • inosh
            2015年12月13日 20:46

            ちなみに.comment_textをposition:relativeは元々記載されています。

            とりあえず解決したようで良かったです(^-^)

  16. 無法者
    2016年2月12日 12:20

    大変参考になりました!ありがとうございます。
    テストがてら、#comment_user_infoは.comment_user_infoの方がcss的に正しいと思います。

    • inosh
      2016年2月23日 3:49

      コメントありがとうございます!

       > #comment_user_infoは.comment_user_infoの方がcss的に正しいと思います。

      確認してみましたがHTMLの方がclassではなくIDで指定されているので、#じゃないと効かないように思いますが…いかがでしょうか?
      賢威のバージョンにもよるのかもしれないですね。

コメントを残す

サブコンテンツ
ページトップへ戻る ページエンドへ進む