テイルズ・オブ・シングルマン

テイルズ・オブ・シングルマン

アラフィフ・シングルマンの徒然なる毎日♪

久々のプチカスタマイズなのです(^-^)v

★コメント欄が色づいたのです♪

 

●皆さんおはようございます。

 こんにちは、こんばんはです♪

 

 はてなブロガーの皆さんであれば一度は目に耳にしたことがあるマジカルスペルCSSコード」

 

 これを「デザインCSS等に貼り付けることでブログのカスタマイズができる事はとても有名だと思います。

 

 自分も過去に何度かカスタマイズして今の形に落ち着いております。

 

talesofme.hatenablog.com

talesofme.hatenablog.com

 

 今回久々にカスタマイズしようと思ったのは「コメント欄が下の方にありすぎて分かりにくいので何とかしたい!」と言う理由でした。

 

 目にして下さったブロ友さん達が残してくれた温かいコメントの数々や、ブコメ(ブックマーク・コメント)を頂いたブロ友さんへのお礼のコメント返しを目立たせたかったのです。

( ・`ー・´) + キリッ

 

そこで2つのカスタマイズを実行しました。

 

①関連記事を表示しない。

②コメント欄の背景に色をつけて華やかにする。


  ①に関しては設定から簡単に関連記事の「表示」「非表示」を選ぶことができてるので、「表示」の横にあるチェックを外し「非表示」にする事にしました。

f:id:MyStory:20220123230312j:image

 

 関連記事はあまり役に立っているイメージがなく、非表示にするとブックマークのすぐ下にコメント欄が表示され、ブログ自体も少し軽くなるので一石二鳥です。

d(^_^o)

 

 ②に関してはこちらの方の記事を参考にさせて頂きました。

 わかりやすい解説とCSSコードをありがとうございます♫

 

 「カスタマイズ」の「デザインCSS 」にCSSコードを貼り付けるだけで簡単にカスタマイズできるのですが、この方のコードをそのままコピペすると、自分のブログではコメント頂いた方のお名前とIDがアイコンで隠れてしまいコメント欄がバグってしまいました。

(><)

f:id:MyStory:20220123230338j:image

f:id:MyStory:20220123230356j:image

 

 過去に何度かカスタマイズしているのでその辺が原因かもしれません。

σ(^_^;)

 

 そこでこのCSSコードの解説文を読み、背景色の変更コメント欄の間にスペースを開ける所だけを抜粋し、背景色は自分の好みの色に置き換える形でカスタマイズする事にしました。

 

ちなみにそのCSSコードはこちらです。

■コメント欄背景色変更■

.comment li{

background-image:radial-gradient(circle 300px at 35% 35%,#fffef2,#fff3b8)!important;

margin:1em;

}

 

 背景色は「しんじゅいろ(ホワイトパール)」から「クリームイエロー」外側に円を描くようにグラデーションしていく形になります。

 

 ちなみに色指定は「十六進の色コード」から、しんじゅいろ(ホワイトパール)が#fffef2、クリームイエローが#fff3b8になります。

 

 つまりこの部分を変更することで自分好みの色に変える事が可能です★

 

(「十六進の色コード」はこちらのサイトに詳しく触れられています。)


 ちなみにこのような形にカスタマイズされました。

(^-^)v

f:id:MyStory:20220125173434j:image

 なかなかいい感じに仕上がったのではないかと思います★

 もし気にいった方がいらっしゃれば、自分色にコメント欄を染め上げてみては如何でしょうか♫

^_−☆