はるのぶろぐ。

情報系大学生ハルが、ゆるゆるとIT関係についてや日々の雑記を綴ります。ちょっとだけ、あなたの役に立てる、そんなブログを目指しています。

【ブログカスタマイズ】はてなブログで「コメントを書く」を大きく表示させる方法

参加してます!ポチッとお願いします

記事名と
URLをコピー

こんにちは、情報系大学生のハル(Blog_IT_haru)です。

今回は、コメント欄を大きく表示させる方法について解説します。

本当は上の方に表示させたりするのもやりたかったんですけど、なかなかうまく行きませんでした・・・。

f:id:Blog_IT:20220202104522p:plain

やり方

参考にしたサイトにあるコードを、デザイン→カスタマイズ→デザインCSSに貼り付けるだけです!

※Font awesomeを導入していない人は導入しましょう。

設定→詳細設定→headに要素を追加に追加しても良いですし、

デザイン→タイトル下に追加しても大丈夫です。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

私は、わかりやすく、コメントアウトでコメント欄を大きくする、と入れています。

また、枠の色を、私のブログのイメージカラーに変更し、マウスオーバー時も同様にし、文字の色を黒のままにするようにしました。

/***コメント欄を大きくする***/
.leave-comment-title {
	display:inline-block;
	width:100%;
	text-align:center;
	padding:1em 0;
	border:thin solid #e0edff;//枠の色
	border-radius:3px;
	transition: 0.3s ;
	font-size:16px;
}
.leave-comment-title:before {
	font-family: "FontAwesome";
	content: "\f0e5";
	padding-right:0.2em;
}

.leave-comment-title:hover {
	color:#000;//マウスオーバー時の文字色
	background-color:#e0edff;//マウスオーバー時の色
}

参考にしたサイト

www.dyoblog.com

まとめ

いかがでしたか?

今回は、「コメントを書く」を大きく表示させる方法について解説しました。

コメントを書く、をもう少し上に表示させるのと同時に行いたかったのですが、ちょっと上手く行かず、断念してしまいました笑

この記事がいいな、と思ってくれたら、SNSなどで拡散したり、

ブックマークやコメントなどしてくれると励みになります!

下の方とサイドバーにある、サポートもお待ちしています!

更に、読者になってくれたら、お返しに私も読者になります!

また、この記事の内容についてなにかありましたら、

お問い合わせ、コメント、TwitterのDMなどによろしくお願いします。

それでは。