On Blog

ブログというものを運営していて、どうすれば読者に見てもらいやすくなるのか、ということについて日頃から考察を深めてきた成果を惜しみなく紹介しています。戦略コンサルタントならではの視点で、ブログをどのように運営していけばいいのかについてわかり易く説明しています。素人のブログ論とは一味違います。

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

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

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

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

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版、スマホ版ともに、色はそれぞれのブログの色と合うように変更してください。

プライバシ―ポリシー 免責事項

 

Copyright © 2016-2018 Blog Customize All Rights Reserved.