Loading…

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

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

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

本日の人気記事BEST10

所要時間目安:3

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

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

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

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

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

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

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

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

コメント欄開閉式開く

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

コメント欄閉じる

0 views


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

おすすめの記事一部広告

    Multiplex 広告

STINGER PLUS+, Stinger6, Stinger7, WordPress, カスタマイズ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧


関連記事

windows10ピクチャフォルダ表示が遅いを早く表示させる方法

PC 伝えたいこと 備忘録 設定

ピクチャフォルダ、ビデオ、ドキュメントフォルダの表示が遅い時に早く表示させる方法

長い間パソコンを使用しているとピクチャフォルダやドキュメントフォルダそして、ビデオフォルダなどに多くのファイルが溜まってきてしまうと思われます。 そうなってくると、該当フォルダ(マイピクチャやドキュメ…

もっと読む

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

弔事

WordPress

テスト投稿

テスト投稿です。 今回は、見出し機能がちゃんとできるといいな!!    頼むよWordPressさん。 お願いします。 設定画面もちゃんとはいれたしFTP設定もちゃんとしたんだよ。 スポンサ…

もっと読む

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

奇跡という日常

伝えたいこと 備忘録

ありふれた奇跡。それが日常だったのかな…。奇跡の連続が…。

奇跡って、辞書などで引かなくても(調べなくても)誰もが当たり前に使っている言葉だと思います。でも、その奇跡っていう事象・事柄の連続が毎日毎日その都度その都度に起こっていて、その積み重ねが日常なのかな。…

もっと読む

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

2匹のネコ

WordPress 伝えたいこと 備忘録

SEOに強いのはBloggerとWordPressどっちなのか

昨今、(というか結構前から)言われているSEOですが…。 そのSEOについて、 良く言われるのがWordPressが良いと言われています。 また、 GoogleのサービスであるBloggerというブロ…

もっと読む

目次に戻る

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

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

目次に戻る

目次に戻る


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

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

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

    嬉しかったです。

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

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

    • danna より:

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

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

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

comment

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

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