現在の接続環境は
です

記事内にプロモーションが含まれています。

プロモーションを含みます

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録

コメント欄を開閉式にする方法

Stinger6,Stinger5,StingerPLUS+コメント欄を開閉式スライドにする方法

所要時間目安:3

This session is using  IPv4  is established in

この記事は2017年1月11日のものです。現在は状況が異なる可能性がありますのでご注意ください。

目次に行く・戻る

2025年4月3日 (木曜日)↓における週間月間人気記事トップ3は?↓

  • 本日
  • 週間
  • 月間
  1. コメント欄を開閉式にする方法

    Stinger6,Stinger5,StingerPLUS+コメント欄を開閉式スライドにする方法 1PV

    前々から気にかけてどうにか出来たらいいなぁ…。なんて思っていたコメント欄です。 コメント欄を非表示にしてしまうというのもありかなぁ。と思ったこともありましたが、 いくつかのブログにてコメント欄が開閉式…

    もっと読む

  2. 新型デイズステアリングエクストレイルT32に取り付け夜間点灯

    新型デイズプロパイロットのステアリングをエクストレイルT32に取り付ける 1PV

    新型デイズB44W(B40系)が今年2019年3月28日に公表されて、3月29日新発売されてから早いもので約3ヶ月半が過ぎました。中古で良いのでオークションなどないかなぁと思いながら2週間くらい見てい…

    もっと読む

  3. ガソリンが高いトリガー条項は?一番安いガソリンスタンドは?go.go.gs 1PV

    一昨年・昨年からガソリン代(ガソリン価格)が全国的に上がり高くなっています。その原因はなんなのかはおそらく海外との情勢などが影響しているのだと思われます。 2000年代後半にも、一時期ガソリン価格が1…

    もっと読む

  1. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 27PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  2. アイドリングストップシステム異常警告灯表示対処方法 24PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に(自動的に)アイド…

    もっと読む

  3. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 22PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  1. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 11PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  2. アイドリングストップシステム異常警告灯表示対処方法 10PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に(自動的に)アイド…

    もっと読む

  3. 純正シートベルトバックル

    シートベルトがきついのでシートベルト延長(バックル延長) 8PV

    すべての車に付いているシートベルト…。 ですが、体型や車種によってシートベルトのバックルが短いとシートベルトを締めた際にきつくて運転自体がしにくくなってしまいます。 それでは、せっかくの安全装置である…

    もっと読む

今日は2025年4月3日です。

メルカリ招待コード:

前々から気にかけてどうにか出来たらいいなぁ…。なんて思っていたコメント欄です。

コメント欄を非表示にしてしまうというのもありかなぁ。と思ったこともありましたが、
いくつかのブログにてコメント欄が開閉式というのでしょうかスライド式というのでしょうか。

うまい具合に省略化されていらっしゃるブログもちらほらと拝見していたことがあります。
コメント欄を非表示にしてしまうとせっかくの訪問者のコメントが見えなくなってしまうというのと、今後コメントされなくなってしまうというのがありなかなか悩んだりしていました。

そこで今回kanamiさんのツイートにて発見させて頂きました。ありがとうございます。(人-)謝謝(-人)謝謝

アドセンス336pxPC閲覧記事下表示1つ目コード

この記事を読む方へのオススメ


紹介先のサイトさんではテーマが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>&nbsp;<?php echo get_comments_number(); ?>)");
 }
 });
 if (location.hash.indexOf("comment-") == -1) {
 $("#comments").hide();
 $("#comments-toggle").html("この記事にコメントする(<i class=\"fa fa-commenting\"></i>&nbsp;<?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>&nbsp;<?php echo get_comments_number(); ?>)");
 }
 });
 if (location.hash.indexOf("comment-") == -1) {
 $("#comments").hide();
 $("#comments-toggle").html("この記事にコメントする(<i class=\"fa fa-commenting\"></i>&nbsp;<?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において実装できました。

コメントがまだ0件のうちは、表示するコメントが無いので「入力フォームを表示する」というボタンを配置する。そしてコメントが付いた状態ではコメントも表示されるので、「コメント・入力フォームを表示する」とテキストを変更する。コメントや入力フォームを表示させている間は、「表示する」ではなく「隠す」に変更する。

私の場合の完成形は以下のようになりました。

コメント欄開閉式開く

コメント欄が閉じている際には以下のようになります。

コメント欄閉じる

Windows10サポート終了まで

【AmazonタイムセールSALE車&バイク】!


人気の商品が日替わりで登場。毎日お得なタイムセール「Amazonタイムセール全体」

出展:Amazonタイムセール

人気の商品が日替わりで登場。毎日お得なタイムセール

あなたにおすすめな関連記事

紅葉

php WordPress テーマ

WordPressテーマカスタマイズしてみた。

WordPressのテーマをカスタマイズしてみました。 カスタマイズしてみた内容は、 ちょっと試行錯誤し過ぎて明確には覚えていないのですが…。バックグラウンドの色の変更。新しい記事の表示件数の変更。(…

もっと読む

インフィード広告アドセンス

スマホ電波状態が悪い時の改善方法

Android iPhone スマホ 伝えたいこと 備忘録 旅行

スマホの電波状態が悪い時に手っ取り早く改善する1つの方法

今では携帯電話の電波が悪いというよりスマホの電波状態が悪いということの方が多いと思われます。 そんなスマホの電波が悪くて途切れ途切れになってしまったりした時に、電波が悪い状態を一発で改善するひとつの方…

もっと読む

インフィード広告アドセンス

BloggerとWordPressロゴ

WordPress カスタマイズ テーマ 伝えたいこと 備忘録 時事ネタ

ブログやサイト運営はBloggerとWordPressどっちがいい?

ブログは今や庶民である私や普通の一般人でも見事にサイトとして運営できるようになってきます。ブログが出始めた頃はブログとホームページは明確に違いがあり検索ポータルサイトなどでも通常の検索とブログ用の検索…

もっと読む

インフィード広告アドセンス

AFFINGER5

WordPress カスタマイズ テーマ 備忘録

AFFINGER5でプラグインなしで機能制限なくクレジット削除方法

WordPressで人気なテーマのひとつにAFFINGER5があります。その他にもCocoonなども無料テーマであります。AFFINGER5においてはフッター部分にPoweredByAFFINGER5…

もっと読む

インフィード広告アドセンス

光コラボ

PC インターネット 伝えたいこと 備忘録 光コラボ 時事ネタ

光コラボはおすすめ?コラボ光一覧と光コラボとは?光コラボレーションはNTTが卸売に

昨年にNTTが光回線を卸売として、各ISP(プロバイダー)などにフレッツ光や光ネクストなどでエンドユーザー(消費者)に提供していた光回線を、各事業者にその光回線を卸売に踏み切った事により、コラボレーシ…

もっと読む

インフィード広告アドセンス

記事上に人気記事表示

Stinger6 Stinger7 WordPress テーマ 伝えたいこと 備忘録

究極のSEOそれは…。

 よくGoogleに対する検索上位表示させる方法・手法・技法などを総称してSEO(Search Engine Optimization)と言います。一個人である私もブログを始めてから意識して…

もっと読む

あなたが訪問してから

0 秒経過 🎉

STINGER PLUS+, Stinger6, Stinger7, WordPress, カスタマイズ, 伝えたいこと, 備忘録」の人気記事

入学入社まであと…入学入社祝いはどんなPresent(プレゼント)でどのように過ごされますか?

ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

ブログサービスが始まってから:


カウントダウンタイマー

おすすめの記事一部広告

お小遣い稼ぎにアンケート。

Multiplex 広告

Total670


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

よろしかったらシェアよろしくお願いします。

-STINGER PLUS+, Stinger6, Stinger7, WordPress, カスタマイズ, 伝えたいこと, 備忘録

目次に戻る

目次に戻る


コメントを閉じる
  1. わあ…格好良くて可愛いサイトですねえ。
    惚れ惚れしてしまう(*´∇`*)
    色合いとかもすごい好き♡

    あっ、あの
    スポンサーリンクが2個表示されてるのを1つ消すやり方を教えて頂いて、お礼にやってきました。
    http://いたちのおうち.xyzの滝川です。

    親切にありがとうございました。
    ちゃんと出来ました。

    嬉しかったです。

    また「技を盗ませて」もらいに来ますww
    本当に可愛いサイトだあ♡

    ありがとうございました。

    • danna より:

      はなこさん(^-^)、
      早速ご訪問とコメントありがとうございます。

      褒めていただいて嬉しい限りです( ^ω^ )
      昨日の夜に背景をちょっとアダルトちっくに黒っぽいものにしたばかりなんです^^;)

      また、2つ表示解消されて良かったですねねd(*^ω^*)ネッ!
      こちらこそお役に立てて良かったです(*^^*)

comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


This site uses Akismet to reduce spam. Learn how your comment data is processed.