HTML構造を変えずに、CSSだけでコメント本文を吹き出し風に装飾

HTML構造を変えずに、CSSだけでコメント本文を吹き出し風に装飾する方法です。画像やJavaScriptは使いません。IE7以下は非対応です。valid-seo-2c と valid-seo-3c のver1.0.1までについてです。

追記:ver1.1.0以降のテンプレートは、吹き出し風コメントがデフォルトになっています。不要な場合はbodyタグ内のclassにあるfukidashiを削除するだけでシンプルなコメントにできます。

表現できる吹き出し

  1. コメントの本文の<dd>要素の下部に吹き出しの先っちょが出ます。下図はシンプルバージョンです。

    valid-seo-101-spouting-1.png
  2. 先っちょの大きさ変更、枠線や角丸も適用できます。下図はカスタムバージョンです。

    valid-seo-101-spouting-4.png
  3. 上記2つはあくまでも例示しているだけですので、CSSの編集次第でわりと自由にカスタムできます。

テンプレートのCSSを編集

シンプルバージョン

  1. テンプレートのCSSで、下図で示した部分(/*コメント・トラックバック */の段落)の下に次のコードを追加します(シンプルバージョン)。

    
    .comments .comment-body{
    background:#fcf;
    margin-bottom:30px;
    padding:5px;
    }
    
    .comment-body:after{
    left:270px;
    bottom:-20px;
    border-top:20px solid #fcf;
    border-left:20px solid transparent;
    content:"";position:relative;display:block;width:0;height:0;
    }
    
    valid-seo-101-spouting-2.png
  2. 上記コード追加後のCSSは下図のとおりです。

    valid-seo-101-spouting-3.png
  3. 上記コードと機能的には同じですが、CSS内コメントで簡易説明を入れてみました。

    
    /*コメント本文についての定義*/
    .comments .comment-body{
    background:#fcf; /*背景色*/
    padding:5px; /*余白*/
    margin-bottom:30px; /*コメントフッター(日付など)との距離*/
    }
    
    /*吹き出し先っちょについての定義*/
    .comment-body:after{
    left:270px; /*配置(コメント本文の左端からの距離)*/
    bottom:-20px; /*一行下のborder-topと正負逆で同等の値*/
    border-top:20px solid #fcf; /*高さと色*/
    border-left:20px solid transparent; /*横幅、leftをrightに変えると先端方向変更*/
    content:"";position:relative;display:block;width:0;height:0; /*この行は変更非推奨*/
    }
    
    valid-seo-101-spouting-1.png

カスタムバージョン

  1. カスタムバージョンのコードは以下のとおりです。赤字がシンプルバージョンのコードとの変更点です。

    • 背景色を淡い黄色にした
    • 先っちょを大きくした
    • 黒色の枠線をつけ、先っちょも黒色にした
    • 角丸にした
    
    .comments .comment-body{
    background:#ffc;
    margin-bottom:50px;
    padding:5px;
    border:3px solid #222; /*枠線追加*/
    border-radius:10px; /*角丸*/
    }
    
    .comment-body:after{
    left:270px;
    bottom:-46px; /*枠線分(上下3pxで6px)を相殺したので、一行下と正負逆で同値にならず*/
    border-top:40px solid #222;
    border-left:40px solid transparent;
    content:"";position:relative;display:block;width:0;height:0;
    }
    
    valid-seo-101-spouting-4.png

お気づきの点がありましたら、ご指摘いただけますと幸いです。

このページで紹介した方法はコメント下部に先っちょがくる吹き出しでしたが、次のサイトではコメントの左に先っちょが来るコードを紹介されています。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)