現在の接続環境は
です

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

Windows10サポート終了まで

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

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

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

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

所要時間目安：約3分

This session is using　 IPv4 　is established in

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

カーメンテナンスWAKO'S

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

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

目次に行く･戻る

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

  • 本日
  • 週間
  • 月間
  1. エクストレイルフォグランプの光軸調整後

    エクストレイルフォグランプが下を向きすぎている光軸調整方法 39PV

    人気車種のSUVで日産エクストレイルT32型のフォグランプは、光軸が下を向きすぎているためせっかくLEDフォグランプにしたりHIDにしたりしてもその恩恵をあまりかんじられません。要は、ボンネットが少し…

    もっと読む

  2. Windows10で動かないアプリを動かす方法2 16PV

    先日も書きましたWindows10の不具合？に関することです。 不具合と言うのか仕様と言えば良いのかわかりませんが、とにかくWindows10にアップグレードしたりWindows10に若干古めのアプリ…

    もっと読む

  3. エクストレイルステアリング内のスパイラルケーブル接続部コネクタ

    ステアリング交換とステアリングスイッチの増設と外し方後期型仕様に 9PV

    NISSANエクストレイルは日産の中でも人気のSUV車です。そのエクストレイルは今年の6月8日にT32型の後期型がマイナーチェンジして発売されました。新しい後期型にはメーカーオプションで話題の半分自動…

    もっと読む

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

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

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

    もっと読む

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

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

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

    もっと読む

  3. TRDステアリングTOYOTA純正品

    ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法 81PV

    ここ最近のハイブリッド車や電気自動車においては、ハンドル（ステアリング）を交換することなどは滅多にないかもしれません。 ですが、個体差というものがあって新車だとしてもハンドルの真ん中の位置がズレてしま…

    もっと読む

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

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

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

    もっと読む

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

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

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

    もっと読む

  3. TRDステアリングTOYOTA純正品

    ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法 81PV

    ここ最近のハイブリッド車や電気自動車においては、ハンドル（ステアリング）を交換することなどは滅多にないかもしれません。 ですが、個体差というものがあって新車だとしてもハンドルの真ん中の位置がズレてしま…

    もっと読む

メルカリ招待コード：

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

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

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

そこで今回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件のうちは、表示するコメントが無いので「入力フォームを表示する」というボタンを配置する。そしてコメントが付いた状態ではコメントも表示されるので、「コメント・入力フォームを表示する」とテキストを変更する。コメントや入力フォームを表示させている間は、「表示する」ではなく「隠す」に変更する。
はぴすぷ

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

コメント欄開閉式開く

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

コメント欄閉じる

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

🎉 Counting Up! 🎉
Loading...

おすすめ！！

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

詳細ページへ

No.1シェアAmazon

おすすめ2

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

詳細ページへ

楽天市場

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

0

カウントダウンタイマー

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

温泉の入り方

伝えたいこと 備忘録 旅行

温泉の入り方とマナーが分かりやすい

温泉の入り方やマナーを日本人であれば概ね分かっていると思います。ですが、外国人の観光客の方などは温泉や湯船に浸かるという入浴方法などの文化がない国もあります。なので、温泉への入り方やマナー自体が分から…

もっと読む

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

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

米FTCアマゾンを独禁法違反疑いで提訴と日立家電品正規取扱店制度

具体的には、アマゾンが主力事業のネット通販で出店している小規模事業者に対して高額な手数料を請求したほか、事業者が他の競合サイトで安く販売した場合、アマゾンのサイトでは検索しづらくしたなどと指摘していま…

もっと読む

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

乙武洋匡さん

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

乙武洋匡さんもTwitter裏アカウント使ってたの…。「純愛エロメガネ」らしい

（アイキャッチ画像出典元：乙武洋匡さん公式Twitterより：https://twitter.com/h_ototake）先日、おとといかな…。 Twitter（ツイッター）に裏アカウント（通称：裏垢…

もっと読む

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

引用元サイトのテキスト選択部分を自動的に作成するブックマークレット

PC ツール ブックマークレット 伝えたいこと 備忘録

WordPressのインラインリンク化が嫌な場合ブックマークレットにてリンクコード作成方法

私自体、インライン化されたリンク機能はあまり使ったことがないのですが、 ほとんど以前記載したブログカードによるリンクか、 引用元をコピーしてペーストして、 さらにタイトルをコピーして。。。。 という作…

もっと読む

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

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

YouTubeが広告ブロッカーAdblock Plusを遮断するもAdblock Plus側も対策を検討とのこと

先日の記事として、以下の記事を投稿しましたが、逆にAdblock Plus側もその広告ブロック遮断に対して対策をとあります。 どちらの言い分もあるのかもしれませんが、一応You Tubeの利用規約には…

もっと読む

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

Windows10スタートアップフォルダ

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

Windows10でスタートアップ登録してアプリ自動起動する方法すべてのユーザと自分のみがユーザの場合

かれこれWindows10がリリースされてあと約2ヶ月で早いもので2年になってしまいます。昨年の夏にはAnniversaryUpdateのメジャーアップデートがあり、その前にはリリースされた2015年…

もっと読む

あなたが訪問してから

⏰ 0 秒経過 🎉

あなたが訪問してから

0 秒

おすすめの記事一部広告


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

Multiplex 広告

Total480


アドセンス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