【コピペ用】「コメントを書く」ボックスのデザインをカスタマイズする方法

コメントを書く欄のデザインをカスタマイズする方法を紹介します。

デフォルトの「コメントを書く」は右寄せになっていて見えにくく、色もホバーすると緑になってしまいます。

そのため、「コメントを書く」をボックス型にして目立つようにし、マウスを上に乗せると指定の色へ変わるようにしました。

PC版コード

PC版は以下のコードをCSSへ挿入してください。

 

/*--------------------------------------
  コメント欄
--------------------------------------*/

.leave-comment-title {
    color: #ffffff !important;
    padding: 25 25 25 25;
    border: 2px solid #190710 !important;
    background: #2A0A1B !important;
    text-align:center !important;
    border-radius: 5px / 5px !important;
    width: 100% !important
}

.leave-comment-title:before {
    color: #ffffff !important;
}

.leave-comment-title:hover {
    color: #190710 !important;
    background: #ffffff !important;
    border: 2px solid #190710 !important;
    transition: all .3s !important;
}

.leave-comment-title:hover:before {
    color: #2A0A1B !important;
}

スマホ版コード

スマホ版は以下のコードをヘッダーへ挿入してください。

 

<style>

/*--------------------------------------

  コメント欄

--------------------------------------*/

.leave-comment-title {
    color: #ffffff !important;
    border: 2px solid #190710 !important;
    background: #2A0A1B !important;
    text-align:center !important;
    border-radius: 5px / 5px !important;
    width: 93% !important;
    margin:0 2 0 2 !important;
}

</style>

PC版、スマホ版ともに、色はそれぞれのブログの色と合うように変更してください。

<免責事項>

当サイトのすべてのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、必ずしも正確性・信頼性等を保証するものではありません。 当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねます。 本免責事項、および、当サイトに掲載しているコンテンツ・情報は、予告なしに変更・削除されることがあります。 また、当サイトに掲載されるリンク先に関して一切の責任を負いかねます。 予めご了承下さい。

 

<当サイトのプライバシーポリシー>

当サイトでは、第三者配信による広告サービスを利用しています。このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報 (氏名、住所、メール アドレス、電話番号は含まれません) を使用することがあります。このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、ここをクリックしてください。

・Google は第三者配信事業者として、Cookie を使用してサイトに広告を配信します。

・Google 広告 Cookie を使用することにより、お客様のサイトや他のサイトへのアクセス情報に基づいて、Google や Google のパートナーのユーザーに適切な広告を表示できます。

・ユーザーは Google の広告とコンテンツ ネットワークに関するプライバシー ポリシーにアクセスし、Google 広告 Cookie を使用しないよう設定できます。

 

Copyright © 2016 Blog Customize All Rights Reserved.