Luxeritas 「コメント欄」を開閉式へ「コメント送信ボタン」を中央へ

2019年12月27日ソフトウェアルクセリタス

二日前にコメント欄を復活させました。デザインも落ち着いたのでメモしておきます。

Stinger8を使っていた時は設置していたのですが、ルクセリタスに変えてからはスピードが命なので取り外していました。しかし、結局スピードを求めるには「エックスサーバー」とか「mixhost」などを使用しないと意味ないなって思うようになり、コメント欄を復活させました。

ルクセリタスのコメント欄を開閉式にする方法を探したのですが、見つけることが出来ませんでした。それならと、Stinger8で使っていたものを使ってみたら動くではありませんか。灯台下暗しってやつです。

コメント欄を開閉式にするには jQuery を使います。詳しい説明は「Life Jam」サイトが参考になります。

【STINGER PLUS+】コメント欄を開閉式にして省スペース化！クリックで表示・非表示を

ブログをやっていると、たまにコメントを頂くことがありますよね。読者からの質問であったり、意見で ...

https://life-jam.com/stingerplus-comment-openable-switch/

1. jQueryコードをcomments.phpへ
2. 開閉式ボタンコードをstyle.cssへ
3. コメント送信ボタンの装飾と中央へ
4. 追記
5. その後

jQueryコードをcomments.phpへ

次のコードを comments.php に追記します。場所は、ver3.7.4 – 3.9.0 なら２２行目と2３行目の間です。

メッセージは自分好みに変えればいいです。

22行目:?>
23行目:<div id="comments" class="grid">

<div id="comments-toggle" class="grid">コメントを閉じる</div>
 <script>
	$(function() {
 		$("#comments-toggle").click(function() {
		if ($("#comments").css("display") == "none") {
			$("#comments").slideToggle();
			$("#comments-toggle").text("コメント欄を閉じる");
		} else {
			$("#comments").slideToggle("fast");
			$("#comments-toggle").html("コメント欄を開く（<i class=\"fas fa-comment-dots\"></i> <?php echo get_comments_number(); ?>）");
		}
	});
	if (location.hash.indexOf("comment-") == -1) {
		$("#comments").hide();
		$("#comments-toggle").html("コメント欄を開く（<i class=\"fas fa-comment-dots\"></i> <?php echo get_comments_number(); ?>）");
	}
	});
 </script>

開閉式ボタンコードをstyle.cssへ

このままでも動きますが、「コメント欄を開く」が文字列ですのでボタンに変更。style.css へ追記します。

/* コメントトグル表示ボタン */
#comments-toggle {
	display:block;
	padding:5px;
	background-color:#009999;
	color:#fff;
	font-size:16px;
	font-weight:bold;
	text-align:center; 
}
#comments-toggle:hover {
	color:#ffccff;
	cursor:pointer;
}

このようになりました。ボタンというよりバーでした。

コメント送信ボタンの装飾と中央へ

デフォルトでは、グレーの背景色で左揃えですので装飾を施して中央に配置させます。自分としては、マウスの移動量が少ない右揃えがいいと思ったりしますが、ここは見た目重視で。これも style.css へ追記します。

/* コメント送信ボタン */
#comments [type="submit"] {
	padding-top:12px;
	padding-bottom:12px;
	background:#009999;
	border-radius:5px;
}
#comments [type="submit"]:hover {
	background:#ff66cc;
}
#comments .form-submit {
	width:150px;
	margin-top:0;
	margin-left:auto;
	margin-bottom:10px;
	margin-right:auto;
}