フェレットと子供

さりこちゃんと小さい親友

AFFINGERコメント欄を可愛くついでに開閉式にする方法(超シンプル)

2017年10月21日

大切なお知らせ

諸事情により全ての記事のURLが変更になりました。
2024年11月以前の記事をブックマークして下さっている方は、お手数ですが新しいページ(今、ご覧頂いているのが新しいURLとなります)から登録の変更をお願いいたします。

この記事はリライトどころか、丸っとタイトルから書き直しています。

当初はSTINGER(AFFINGFRの前身)を使っていたので、その当時、あちこちからお世話になっていたカスタマイズ方法をその都度、忘備録的に書いていたのですが、それらはAFFINGERになったら管理画面とカスタマイザーで全部できるようになりました。

それにともないなのか、時代の流れなのか、その当時にお世話になっていたブロガーさん達は、1人いなくなり、また1人いなくなり、今ではあの当時にお世話になった方はもう誰も、サイトもTwitterのアカウントも、本当に何にも誰1人として残っておられません。

なので、「この人にお世話になったよー!」を全面に押し出して書いた記事は全部、下書きに降ろしたりページごと削除したり…寂しいな。

この記事もまたそのうちそうなるんだろうけど、「AFFINGER」ってカテゴリーを作っちゃってるから、パーマリンクがカテゴリーベースだから、ちょっとはページを入れとかないとと思って無理やり記事にしています。

誰かの参考になれれば…

※他テーマでの動作確認はしていません。

AFFINGER6のオリジナル子テーマとJET2では確認とれました。

そう…この記事は元々「JET化」するにあたってのあれこれを書いていたものです…寂しいな(二回目)

コメント欄を可愛く&開閉式にする方法

ちなみに「邪魔な項目を消す」とかはやってません。

お使いのテーマにもよるのかもしれませんが、AFFINGERには「何々の入力欄を非表示にする」から「コメント欄・コメントフォームを非表示にする」が管理画面からできるので、あじゃこじゃいじらなくて良いのです。

これまで運営してきて、コメント欄の必要性をそこまで感じているわけでは無いのですが、丸っとなくしてしまうのはなんだかなって思うし、でも、記事の下にデカデカと場所をとられているのも気に入らないし、そんな訳で可愛く開閉式にする事にしました。

ワードプレスの設定「ダッシュボード→設定→ディスカッション」は必ず先に設定しておいて下さいね。

後からでも良いんだとは思いますけど、「可愛くなってるか」の出来栄えを見ながらやるのですから土台は先に作っておいた方が作業が楽ですからね。

テーマファイルをいじるので、「子テーマ」の準備をして下さい。

バックアップとかもとっておいた方が良いのかもしれません。

プラグインでも何でもご自身のやりやすいやり方で、万が一に備えて下さい。

邪魔なコメント欄を開閉式に

子テーマに「comments.php」が無かったら、親テーマから丸ごとコピー(やダウンロード)して下さい。

そこから

<hr class="hrcss">
<div id="comments">

を見つけます。

そしたら、その間に

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

を差し込みます。

そしたら今度はこの命令が人間の目に見えるように、ボタンを作ります。

「Stylesheet(style.css)」に(AFFIGERをお使いでしたらカスタマイザーの追加cssに)

/* コメント欄の開閉ボタンのデザイン修正 */
#comments-toggle {
display: block;
margin: 25px 15% 25px 15%;
padding: 3px 0px;
background-color: #98d98e; /* ここを変更して好きな色に変更 */
border-radius: 3px;
color: #fff;
font-size: 1em;
font-weight: bold;
text-align: center;
}
#comments-toggle:hover {
cursor: pointer;
opacity: 0.8;
}

大きさの変更はご自身のサイトに合わせたサイズにして下さい。

デザインは白抜き文字の横長長方形のボタンになります。

解説

coments.php

コメントフォームの上部に【コメント欄を閉じる】というボタンを作ります。

コメントフォームは普段は閉じていてください。

スライド式で開くようにします。

コメントフォームが閉じている時、そのボタンは【コメント欄を開く (コメントがついたらその数を表示する)】というボタンになります。

style.css

そのボタンはこんな形でこんな色にします。

みたいな。

なので、「コメント欄を開く」「コメント欄を閉じる」の文字はお好きに変更して下さい。

味も素っ気もないボタンの色つけはフォームの色つけと一緒にやりましょう。

コメントフォームとボタンを可愛く

いくら開閉式にしたからって、開けたら急に、びっくりするくらい可愛くないからせめて色をサイトのカラーと合わせます。

Style.css(AFFINGERの(以下略

/*コメント欄に色つける*/
#comments{
	border:3px solid #38b48b; /* 外枠の色 */
	border-radius:20px;
}
#comments textarea,
#comments input{
	border:1px solid #38b48b; /* 入力欄の枠の色 */
}
#comments input[type="submit"]{
	background-color:#98d98e; /* 送信ボタンの色 */
}

以上です。

ちなみに上記はこちらのサイトと同じ仕様になります。

もう1個のサイト
フェレットの病気やしつけを分かりやすく
フェレットの病気やしつけを分かりやすく

フェレットの飼い方やしつけ方法、かかりやすい病気など、「いたちのおうち」に散らばってる記事を分かりやすくまとめました。

ferret.xn--n8jel7fkc2g.xyz

最初の記事にあった残したいもの

この記事のアイキャッチは私の一番小さい(当時)親友とお姉ちゃんのさりこちゃん(フェレット)です。

親友はとっても優しくていい子で、毒のスライムをぶつけられる関係です。

この写真と超悩みました。

フェレットと小さい親友

こちらは、その小さい親友と弟分のムギオ君(フェレット)

このムギムギの顔がめちゃくちゃ「ムギオ♪」っぽくて本当に可愛い♡私のお気に入りです。

そんなムギオ君のお話しはこちらです。

フェレットは飽き性?超グルメ?隣の芝は青く見える?無邪気なムギオくんの「つまみ食い」で確信したこと
フェレットは飽き性?超グルメ?隣の芝は青く見える?無邪気なムギオくんの「つまみ食い」で確信したこと

隣の芝生は青い 《The grass is always greener on the other side of th ...

xn--n8jel7fkc2g.xyz

ムギオ君の「ムギムギっぽい」ところを是非、ご確認頂ければと思います。

マジでメッチャ可愛いんです♡

追記:

「小さい親友」も、もうすっかり大きくなったんだろうなぁ…

人気ブログランキング

-WordPress
-