テーマを「SANGO」に変更しました。

【STINGER5】スマホ画面のタッチでコメント欄を表示・非表示にする方法

eyecatch-comments-form-customize-stinger5 どうも、(@nekonotesou)です。 スマホでブログを表示した時のコメント欄を、画面のタッチで、表示・非表示できるようにしました。 もちろん、PCでも可能です。  コメントフォーム非表示 IMG_0013     コメントフォーム表示 comments-form-customize-stinger02 「コメントフォームを表示」の部分をタッチすると、コメントフォームがスライドして表示されます。   参考にしたサイトはこちら リンクコピペ一発10秒でできる!「ニュッ」と表示させるスライドコンテンツ daiさん、ありがとうございます!  

 footer.phpの編集

「/body」の前に、以下のコードを追加。
<script type="text/javascript">
$(function(){
        $('.slide2').hide();        
        $('.slide1').click(function(){
                $('.slide2').slideUp();
                if($('.slide2').css('display') == 'none'){
                        $('.slide2').slideDown();
                }
        });
});
</script>
 

使用する場所にコードを貼り付ける

<div class="slide1">クリックする部分</div>
<div class="slide2">クリックすると表示される部分</div>
以上です。  

このブログのコメント欄の場合

クリックする部分
<h3 class="point"><i class="fa fa-chevron-down"></i>&nbsp;  コメントフォームを表示</h3>
  表示される部分(コメントフォーム読み出し)
 <?php if( comments_open() || get_comments_number() ){comments_template(); } ?>
  結果
<div class="slide1">
<h3 class="point"><i class="fa fa-chevron-down"></i>コメントフォームを表示</h3>
</div>
<div class="slide2"><?php if( comments_open() || get_comments_number() ){
          comments_template(); } ?></div>
 

PCとスマホで条件分岐する

<?php if (is_mobile()) :?>
	スマートフォン向けコンテンツ
<?php else: ?>
	PC向けコンテンツ
<?php endif; ?>
スマホで表示したいものを、「スマートフォン向けコンテンツ」へ追加。 PCで表示したいものを、「PC向けコンテンツ」へ追加。  
<?php if (is_mobile()) :?>
<div class="slide1"><h3 class="point"><i class="fa fa-chevron-down"></i>
&nbsp;  コメントフォームを表示</h3></div>
<div class="slide2"><?php if( comments_open() || get_comments_number() ){
          comments_template(); } ?></div>
<?php else: ?>
<h3 class="point"><i class="fa fa-comments-o"></i>&nbsp;  コメントはこちら</h3>
<?php if( comments_open() || get_comments_number() ){comments_template(); } ?>
<?php endif; ?>
 

さいごに

正直、コメント欄はいらないと思っています。でも、たまに記事についての質問があるので、今のところは一応残しています。 1つ言えるのは、スマホで表示した時のコメント欄は縦長で邪魔ということ。 とりあえずは、コメント欄を残しつつ、スマホ表示をスッキリさせられたので、しばらくはこの状態でいこうと思います。

コメントを残す