【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つ言えるのは、スマホで表示した時のコメント欄は縦長で邪魔ということ。

とりあえずは、コメント欄を残しつつ、スマホ表示をスッキリさせられたので、しばらくはこの状態でいこうと思います。

スポンサーリンク

プロフィール

iMacと猫が好きな完全インドア派。

コメントを残す