現在の接続環境は
です

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

Windows10サポート終了まで
国民総株主
¥1,650 （2024/11/30 16:49時点 | Amazon調べ）
Amazon
楽天市場
Yahooショッピング
メルカリ

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

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

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

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

所要時間目安：約3分

This session is using　 IPv4 　is established in

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

カーメンテナンスWAKO'S

2024年12月11日 (水曜日)↓における週間月間人気記事トップ３は？↓

  • 本日
  • 週間
  • 月間
  1. キーレスリモコン破損

    車のキーナンバー確認方法。キーレス紛失や壊れた時 7PV

    初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

    もっと読む

  2. マウス分解清掃前

    マウスの左クリックや右クリックが効かないのでマウス分解して直す方法 6PV

    マウスは今やパソコンなどにはなくてはならない入力装置です。入力機器。昔のキーボードのみでの操作には戻れませんね。そこで長年使ってきたマウスの右クリックではなく左クリックが効かなかったりジャダー（チャタ…

    もっと読む

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

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

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

    もっと読む

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

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

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

    もっと読む

  2. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 215PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

  3. つぶつぶ入りのスクラブ洗顔料

    マイクロプラスチック・マイクロビーズがつぶつぶ入り洗顔料や歯磨き粉に…。環境汚染も 99PV

    画像出典元：5 Gyres今年に入ってから、 インターネットニュースサイトやテレビのニュースなどでも報道されているマイクロプラスチック（もしくは、マイクロビーズ）というものがあります。このマイクロプラ…

    もっと読む

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

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

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

    もっと読む

  2. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 215PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

  3. つぶつぶ入りのスクラブ洗顔料

    マイクロプラスチック・マイクロビーズがつぶつぶ入り洗顔料や歯磨き粉に…。環境汚染も 99PV

    画像出典元：5 Gyres今年に入ってから、 インターネットニュースサイトやテレビのニュースなどでも報道されているマイクロプラスチック（もしくは、マイクロビーズ）というものがあります。このマイクロプラ…

    もっと読む

今日は2024年12月11日です。

目次に行く･戻る

2024年12月11日 (水曜日)本日の人気記事トップ１０

メルカリ招待コード：

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

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

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

そこで今回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になります。

参考サイトと言いますかテーマが違うだけでほぼ同じ内容でかつ詳細な説明をされていらっしゃるブログです。

【STINGER PLUS+】コメント欄を開閉式にして省スペース化！クリックで表示・非表示を切り替える
記事下のコメント欄って結構スペースをとってしまうし、無くしてしまえばスッキリするかな…とも考えました。しかし、そうすると、せっかくコメントを送ってきてくれる読者のことを無視してしまうことになるし、読者との貴重なコミュニケーションの機会を失ってしまいます。コメント欄は残しつつ、もう少しコンパクトにできれば理想的なんじゃないの？
Life Jam

Stinger5でのカスタマイズ方法は上記サイトにも紹介されていますが、以下のサイトを拝見してStinger6において実装できました。

【WordPress】コメント入力フォームのカスタマイズ②jQueryのスライド機能で表示を切替える
コメントがまだ0件のうちは、表示するコメントが無いので「入力フォームを表示する」というボタンを配置する。そしてコメントが付いた状態ではコメントも表示されるので、「コメント・入力フォームを表示する」とテキストを変更する。コメントや入力フォームを表示させている間は、「表示する」ではなく「隠す」に変更する。
はぴすぷ

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

コメント欄開閉式開く

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

コメント欄閉じる

クリスマスまであと…プレゼントは用意されましたか？

おすすめ！！

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

詳細ページへ

No.1シェアAmazon

おすすめ2

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

詳細ページへ

楽天市場

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

0

カウントダウンタイマー

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

🎉 Counting Up! 🎉
Loading...
つぶつぶ入りのスクラブ洗顔料

伝えたいこと 備忘録 時事ネタ

マイクロプラスチック・マイクロビーズがつぶつぶ入り洗顔料や歯磨き粉に…。環境汚染も

画像出典元：5 Gyres今年に入ってから、 インターネットニュースサイトやテレビのニュースなどでも報道されているマイクロプラスチック（もしくは、マイクロビーズ）というものがあります。このマイクロプラ…

もっと読む

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

スマホの保護フィルムの中に空気の気泡を入れない方法

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

スマホの保護フィルム貼りを失敗しない貼り方法ガラスザムライのクリップ使用

いまやスマホは当たり前になってきています。そんなスマホの画面保護に保護フィルムを貼る方が多いと思います。 その保護フィルムを貼る際に、多くの場合中に空気が入って気泡が残ってしまうことも多々経験していま…

もっと読む

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

錦織圭君ノドグロ

伝えたいこと

ノドグロ枯渇の恐れが…。錦織君影響スゴイなぁ

 2014年の全米オープンテニスで見事準優勝という偉業を成し遂げたプロテニスプレーヤーの錦織圭君です。もうみなさん周知の事実ですよね。世界的にも、 超有名人になってくれました。（＾ｖ＾）&n…

もっと読む

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

24時間営業深夜営業

伝えたいこと 備忘録 時事ネタ

24時間営業ファミレスは転換期なのか?見直している企業など

そもそも24時間営業という店舗や企業が出てきたのは、バブルがはじける少し前かバブルがはじけてから多くの企業が海外進出のグローバリゼーション化（グローバル化）と共に多くなってきました。そこで、当時はセブ…

もっと読む

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

Pixlrオンライン画像編集サイトにて作成

WordPress カスタマイズ 伝えたいこと 備忘録

ページ表示速度が遅いのでphotonが使いたくてJetpackプラグインをインストールしてみた…。

ここのところ、サイト（ブログ）のページ表示速度が気になってしまいます。以前に運営していたBloggerブログでも同様のことを考えたりしていました。ですが、サイトのページ表示速度が少しくらい遅くても時代…

もっと読む

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

Amazonプライム会員アイキャッチ画像

インターネット 伝えたいこと 備忘録 時事ネタ

Amazonプライム会員になる10のメリットを紹介してみます。

Amazonプライムを見てみる以前に「Amazon（アマゾン）で間違った商品の返品方法」というタイトルで記事にしたことがありますが、 今回はそのAmazon（アマゾン）のプライム会員になるメリットを1…

もっと読む

あなたが訪問してから

⏰ 0 秒経過 🎉

あなたが訪問してから

0 秒

おすすめの記事一部広告


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

Multiplex 広告

Total505


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

目次に戻る

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

この記事タイトルとURLをコピー

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

目次に戻る

目次に戻る

コメントを閉じる
  1. ｱﾀﾁはなこです より:
    2017年1月14日 12:22 PM

    わあ…格好良くて可愛いサイトですねえ。
    惚れ惚れしてしまう(*´∇｀*)
    色合いとかもすごい好き♡

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

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

    嬉しかったです。

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

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

    返信
    • danna より:
      2017年1月14日 2:06 PM

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

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

      また、２つ表示解消されて良かったですねねd(*^ω^*)ﾈｯ！
      こちらこそお役に立てて良かったです(*^^*)

      返信

comment

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


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

あと5秒で記事が閲覧できます。

Protected by AFFINGER