「この記事へのコメント」をカスタマイズする (1)

j-170206-01.gif

これ↑デフォルトのコメント欄のデザインです。

な~んか地味だよね~。

コメント欄が目立たなくてスルーしてしまいそうな気がしてしまうんです。

他社のブログのデザインを見ると、もう少しデザイン上のアクセント的なものが入っているます。
やっぱりね!

だから、ここにも手を入れてみることにしました。

今回は、CSSをいじって、デザインを変えます。
表示する文言は次回やりますね。

というわけで、今日は前後編の前編です。


このデザインを…

j-170206-02.gif

↓ ↓ ↓


j-170206-03.gif

こんな風に変えます。

前後編の2回シリーズでお送りましす。

今回は、前編。
CSSをいじって、「この記事へのコメント」というタイトルのデザインを変えます。

 
SPONSORED LINK



 
 
CSSをカスタマイズするので、おなじみのこの画面を開きます。
「Alt」+「m」でメニュー画面を開いて、

j-170206-04.gif

「デザイン設定」をクリックします。


画面の下のほうにCSSのリストが表示されるので、カスタマイズするCSSをクリックします。

CSSの中から「comments-head」を探します。


j-170206-05.gif

「Ctrl」+「f」で探すと簡単です。

私の使っているブラウザはFirefox。ブラウザによって表示が違います。


comments-headの部分を書き換えます。

j-170206-06.gif

コピペできるコードはこちら。↓


.comments-head {
padding-bottom: .5em;
border-bottom: 1px solid #ccc;
position: relative;
padding-bottom: .5em;
border-bottom: 4px solid #ccc;
font-size: 16px;
}
.comments-head::after {
position: absolute;
bottom: -4px;
left: 0;
z-index: 2;
content: '';
width: 20%;
height: 4px;
background-color: #4a70b6;
}


色は、ご自分のサイトに合わせて変えてくださいね。

保存ボタンをクリックして、ひとまず終了です。

j-170206-07.gif

「この記事へのコメント」をカスタマイズする (2)につづく。

↓参考になったら、クリックで応援してね!↓




この記事へのコメント

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/446705513

※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック


SPONSORED LINK