2024年10月29日 (火曜日)本日の人気記事トップ10
今日は2024年10月29日です。
目次に行く・戻る
メルカリ招待コード: 招待コードをコピー
前々から気にかけてどうにか出来たらいいなぁ…。なんて思っていたコメント欄です。
コメント欄を非表示にしてしまうというのもありかなぁ。と思ったこともありましたが、 いくつかのブログにてコメント欄が開閉式というのでしょうかスライド式というのでしょうか。
うまい具合に省略化されていらっしゃるブログもちらほらと拝見していたことがあります。 コメント欄を非表示にしてしまうとせっかくの訪問者のコメントが見えなくなってしまうというのと、今後コメントされなくなってしまうというのがありなかなか悩んだりしていました。
そこで今回kanami さんのツイートにて発見させて頂きました。ありがとうございます。(人-)謝謝(-人)謝謝
アドセンス336pxPC閲覧記事下表示1つ目コード
+これまでによく読まれている記事一覧クリックでOPEN+
150,737件の PV
106,741件の PV
75,752件の PV
67,240件の PV
44,824件の PV
40,747件の PV
38,216件の PV
37,259件の PV
36,629件の PV
33,450件の PV
紹介先のサイトさんではテーマがStingerPLUS+でのカスタマイズ方法で、Stinger6では実装出来なかったのでStinger5とStinger6においてのコメント欄を開閉式にする方法です。 (もしかしたら、Stinger7でも可能かもしれません。未検証ですが…。)
完成形は以下のようになります。
ほとんどと言いますかコードは紹介先のサイト様と同じものになります。
StingerPLUS+においては、 comments.phpの2行目に以下のコードを追加するようですが、 Stinger6においては、一番上(はじめ)に追加・追記します。
以下のような感じです。
<div id="comments-toggle">コメントを閉じる</div>
上記コードを、
<div id="comments">
の上に追記します。
<div id="comments">
の下(2行目)に追記してcssにてボタン表示にしてもjQueryを記述するとコメント欄が消えてしまいます。
jQueryは以下のコードを上記したコードの真下に直下に追記します。
<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=\"fa fa-commenting\"></i> <?php echo get_comments_number(); ?>)");
}
});
if (location.hash.indexOf("comment-") == -1) {
$("#comments").hide();
$("#comments-toggle").html("この記事にコメントする(<i class=\"fa fa-commenting\"></i> <?php echo get_comments_number(); ?>)");
}
});
</script>
comments.php内の全体としては以下のようになります。
<div id="comments-toggle">コメントを閉じる</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=\"fa fa-commenting\"></i> <?php echo get_comments_number(); ?>)");
}
});
if (location.hash.indexOf("comment-") == -1) {
$("#comments").hide();
$("#comments-toggle").html("この記事にコメントする(<i class=\"fa fa-commenting\"></i> <?php echo get_comments_number(); ?>)");
}
});
</script>
そして、CSSは以下のコードを記述します。
/* コメント欄の開閉ボタン */
#comments-toggle {
display: block;
margin-top: 10px;
padding: 3px 0px;
background-color: gray;
border-radius: 3px;
color: #fff;
font-size: 16px;
font-weight: bold;
text-align: center;
}
#comments-toggle:hover {
cursor: pointer;
opacity: 0.8;
}
私の場合は「この記事のコメントする」の背景色はグレー色にしてみました。
カラーコードですと#808080になります。
参考サイトと言いますかテーマが違うだけでほぼ同じ内容でかつ詳細な説明をされていらっしゃるブログです。
Stinger5でのカスタマイズ方法は上記サイトにも紹介されていますが、以下のサイトを拝見してStinger6において実装できました。
私の場合の完成形は以下のようになりました。
コメント欄が閉じている際には以下のようになります。
あなたにおすすめな関連記事 WordPress 伝えたいこと 備忘録
WordPressへのプラグインは多数のものがあります。その一つにJetpackがありますが、このJetpackには様々な機能がワンパックに入っているような多機能なものです。アクセスの統計情報やサイト…
もっと読む
AdSense WordPress カスタマイズ カスタマイズ 備忘録
さて、さて、自分のブログやサイトにおいて収益や収入を得ている人は多くなってきているのではないでしょうか。 アフィリエイト広告からのアフィリエイト収入やGoogle AdSenseや忍者アドやnendや…
もっと読む
メンテナンス 伝えたいこと 備忘録 時事ネタ 車
なんでもそうですが、新たに新しいことを始める時に(家の配置替えや片付けや家電の買い替えやいろいろ)これまであったものを整理整頓して、新しいものを迎え入れたいと思います。 そんなこんなでこれまでにあった…
もっと読む
伝えたいこと 備忘録 時事ネタ
この1周間北海道の7才の男児の大和君が本日(6月3日)の早朝に無事に発見されました。良かった!! しかし、 この発見される数日前に教育評論家で「ホンマでっかTV」などで有名になった尾木ママこと尾木直樹…
もっと読む
WordPress カスタマイズ 備忘録
WordPressの有名なプラグインはいくつかあります。そんな中のひとつで多機能(ある意味重い?)なプラグインでjetpackがあります。使っている機能は人それぞれかと思われますが、私はphotonと…
もっと読む
php WordPress テーマ
WordPressのテーマをカスタマイズしてみました。 カスタマイズしてみた内容は、 ちょっと試行錯誤し過ぎて明確には覚えていないのですが…。バックグラウンドの色の変更。新しい記事の表示件数の変更。(…
もっと読む
おすすめの記事一部広告 Total459
アドセンス336pxPC閲覧記事下表示1つ目コード
目次に戻る
-STINGER PLUS+ , Stinger6 , Stinger7 , WordPress , カスタマイズ , 伝えたいこと , 備忘録
目次に戻る
目次に戻る
Opt-out complete; your visits to this website will not be recorded by the Web Analytics tool. Note that if you clear your cookies, delete the opt-out cookie, or if you change computers or Web browsers, you will need to perform the opt-out procedure again.
You may choose to prevent this website from aggregating and analyzing the actions you take here. Doing so will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.
This opt out feature requires JavaScript.
The tracking opt-out feature requires cookies to be enabled.
わあ…格好良くて可愛いサイトですねえ。
惚れ惚れしてしまう(*´∇`*)
色合いとかもすごい好き♡
あっ、あの
スポンサーリンクが2個表示されてるのを1つ消すやり方を教えて頂いて、お礼にやってきました。
http://いたちのおうち.xyzの滝川です。
親切にありがとうございました。
ちゃんと出来ました。
嬉しかったです。
また「技を盗ませて」もらいに来ますww
本当に可愛いサイトだあ♡
ありがとうございました。