【THE THOR】コメントを書くのカスタマイズ

INDEX

WordPressテーマ THE THOR（ザ・トール）
1. WordPressテーマ THE THOR（ザ・トール）関連記事
コメントを書くのカスタマイズ
1. カスタマイズ内容
2. カスタマイズ後のコメントを書く
最後に

WordPressテーマ THE THOR（ザ・トール）

別ブログのZMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト

今回は、WordPressテーマ THE THOR（ザ・トール）での「コメントを書く」のカスタマイズについてまとめてみました。

WordPressテーマ THE THOR（ザ・トール）関連記事

「コメントを書く」に関しては、過去にもカスタマイズを行ってきました。

【THE THOR】コメントをキャンセルボタンのカスタマイズ

WordPressテーマ THE THOR（ザ・トール）の「コメントをキャンセルボタン」のカスタマイズについてまとめてみました。今回の「コメントをキャンセルボタン」のカスタマイズでは、サイトデザインに合わせたデザインにしてみました。

【THE THOR】コメント送信ボタンホバー時のカスタマイズ

WordPressテーマ THE THOR（ザ・トール）の「コメント送信ボタンホバー時」のカスタマイズについてまとめてみました。今回のカスタマイズでコメント送信ボタンをホバーした時の背景色を薄くして、滑らかに変化するようにしてみました。

現在のWordPressテーマ THE THOR（ザ・トール）の「コメントを書く」のスタイルは次の様になっています。

前回のエントリー記事でWordPressテーマ THE THOR（ザ・トール）の「関連記事」に関するカスタマイズを行いました。

【THE THOR】関連記事のカスタマイズ

WordPressテーマ THE THOR（ザ・トール）での「関連記事」のカスタマイズについてまとめてみました。今回のカスタマイズでは、記事と記事の間に区切りラインの表示、「関連記事」見出しのスタイル変更などを行いました。

その流れとして、WordPressテーマ THE THOR（ザ・トール）での「コメントを書く」についてもカスタマイズを行いたいと思います。

コメントを書くのカスタマイズ

WordPressテーマ THE THOR（ザ・トール）での「コメントを書く」のカスタマイズを行います。

カスタマイズ内容

「コメントを書く」のカスタマイズの内容は、下記の通りです。

「スタイルシート(style-user.css)」を開き、今回のカスタマイズ内容を追記します。

/************************************
** ■コメントを書く見出しカスタマイ
************************************/
.comments .heading.heading-secondary {
	position: relative;
	background: -webkit-repeating-linear-gradient(-45deg, #ffddee, #ffddee 3px,#fff9fc 3px, #fff9fc 7px); /*背景カラー*/
	background: repeating-linear-gradient(-45deg, #ffddee, #ffddee 3px,#fff9fc 3px, #fff9fc 7px); /*背景カラー*/
	font-size: 20px; /*フォントサイズ*/
	letter-spacing: 2px; /*文字間隔*/
	margin: 30px -8px 25px -8px; /*外側余白設定*/
	padding: 8px 7px 8px 10px; /*内側余白設定*/
	border-left: 8px solid #fe619a; /*左ラインの太さとカラー*/
	border-bottom: 2px solid #fe619a; /*アンダーラインの太さとカラー*/
	line-height: 27px; /*行の高さ*/
	border-radius: 3px; /*角丸コーナー*/
}
.comments {
	border-top: 2px dotted #fe619a;
}
.comment-respond label {
	font-size: 18px; /*フォントサイズ*/
}
.comment-respond label::before {
	font-family: "Font Awesome 5 Free"; /*FontAwesome 5に設定*/
	content: "\f075"; /*アイコン*/
	color: #191919; /*アイコンカラー*/
	font-size: 19px;
	font-weight: 900;
}