+本日の人気記事TOP10+
- カーメイトのエンジンスターターでエラー15表示と対処方法31
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法30
- 車のキーナンバー確認方法。キーレス紛失や壊れた時14
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく11
- エクストレイルでカーテシランプ新設、増設取り付け方法7
- エクストレイルおすすめエンジンオイルにプロステージSの10W-40を試してみた6
- Windows10,Windows8.1プロダクトキー確認方法5
- エクストレイル自動ドアミラー格納装置取り付けと有効化無効化方法5
- WAKO'Sエンジンオイル添加剤SUPERHVはかなりおすすめです5
- 年賀状無料テンプレート無料イラスト素材でGoogleスライドで作成方法5
前々から気にかけてどうにか出来たらいいなぁ…。なんて思っていたコメント欄です。
コメント欄を非表示にしてしまうというのもありかなぁ。と思ったこともありましたが、
いくつかのブログにてコメント欄が開閉式というのでしょうかスライド式というのでしょうか。
うまい具合に省略化されていらっしゃるブログもちらほらと拝見していたことがあります。
コメント欄を非表示にしてしまうとせっかくの訪問者のコメントが見えなくなってしまうというのと、今後コメントされなくなってしまうというのがありなかなか悩んだりしていました。
そこで今回kanamiさんのツイートにて発見させて頂きました。ありがとうございます。(人-)謝謝(-人)謝謝
アドセンス336pxPC閲覧記事下表示1つ目コード
+これまでによく読まれている記事一覧クリックでOPEN+
人気記事一覧
車のキーナンバー確認方法。キーレス紛失や壊れた時
148,546件の PV
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく
105,350件の PV
Windows10,Windows8.1プロダクトキー確認方法
75,484件の PV
Windows10でエラーコード0x800705b4の対処方法
67,219件の PV
ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法
41,121件の PV
スロットルポジションセンサー調整で不安定なアイドリング調整
40,218件の PV
車から異音の原因。カラカラ、カタカタ、コトコトなど…。
38,151件の PV
Office2010・2013でプラダクトキー紛失して確認・再発行してもった方法
37,221件の PV
ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法
36,223件の PV
カーメイトのエンジンスターターでエラー15表示と対処方法
31,376件の PV
車のキーナンバー確認方法。キーレス紛失や壊れた時 148,546件の PV
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 105,350件の PV
Windows10,Windows8.1プロダクトキー確認方法 75,484件の PV
Windows10でエラーコード0x800705b4の対処方法 67,219件の PV
ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 41,121件の PV
スロットルポジションセンサー調整で不安定なアイドリング調整 40,218件の PV
車から異音の原因。カラカラ、カタカタ、コトコトなど…。 38,151件の PV
Office2010・2013でプラダクトキー紛失して確認・再発行してもった方法 37,221件の PV
ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法 36,223件の PV
カーメイトのエンジンスターターでエラー15表示と対処方法 31,376件の 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において実装できました。
私の場合の完成形は以下のようになりました。
コメント欄が閉じている際には以下のようになります。
おすすめの記事一部広告
- カーメイトのエンジンスターターでエラー15表示と対処方法31
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法30
- 車のキーナンバー確認方法。キーレス紛失や壊れた時14
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく11
- エクストレイルでカーテシランプ新設、増設取り付け方法7
- エクストレイルおすすめエンジンオイルにプロステージSの10W-40を試してみた6
- Windows10,Windows8.1プロダクトキー確認方法5
- エクストレイル自動ドアミラー格納装置取り付けと有効化無効化方法5
- WAKO'Sエンジンオイル添加剤SUPERHVはかなりおすすめです5
- 年賀状無料テンプレート無料イラスト素材でGoogleスライドで作成方法5
おすすめ!!
世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!
Multiplex 広告
あなたにおすすめ
-
エアコン冷えない原因はエバポレーターガス漏れ
今年の夏になっての出来事です。今年の冬までは正常に動いていた(動作していた)エアコンが、クーラーがきかないのです。一切冷えない…。エアコンで冷房ではなく逆に暖房を入れてみようとこの暑い夏に暖房にスイッ…
インフィード広告アドセンス
-
ショートコード作り方テンプレートから呼び出す方法などいろいろ
ショートコードって学べば学ぶほど色々な活用方法があるんだなぁ。と実感している毎日です。 もちろん、他にも様々な関数を使ってもっともっと多くのカスタマイズなどができると思います。 今の私には、 そこまで…
インフィード広告アドセンス
-
Android iPhone スマホ 伝えたいこと 備忘録 治療
ストレートネック症状と原因そして治し方など
昨今、首の骨(頚椎)の正常な彎曲がなくなって7個(C1からC7)の首の骨がその名の通りまっすぐになっているストレートネックが注目されています。 ですが、 このストレートネックは昔からあるもので最近にな…
インフィード広告アドセンス
「STINGER PLUS+, Stinger6, Stinger7, WordPress, カスタマイズ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧
アドセンス336pxPC閲覧記事下表示1つ目コード
アクセスランキング
よろしかったらシェアよろしくお願いします。
-STINGER PLUS+, Stinger6, Stinger7, WordPress, カスタマイズ, 伝えたいこと, 備忘録
danna より:
はなこさん(^-^)、
早速ご訪問とコメントありがとうございます。褒めていただいて嬉しい限りです( ^ω^ )
昨日の夜に背景をちょっとアダルトちっくに黒っぽいものにしたばかりなんです^^;)また、2つ表示解消されて良かったですねねd(*^ω^*)ネッ!
こちらこそお役に立てて良かったです(*^^*)
comment コメントをキャンセル
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
わあ…格好良くて可愛いサイトですねえ。
惚れ惚れしてしまう(*´∇`*)
色合いとかもすごい好き♡
あっ、あの
スポンサーリンクが2個表示されてるのを1つ消すやり方を教えて頂いて、お礼にやってきました。
http://いたちのおうち.xyzの滝川です。
親切にありがとうございました。
ちゃんと出来ました。
嬉しかったです。
また「技を盗ませて」もらいに来ますww
本当に可愛いサイトだあ♡
ありがとうございました。