wordpress_simplicity_custom

運営しているブログのtravelnavi.linkではSEOに強い無料テンプレートのSimplicityを使用させていただいております。

今回、無料テンプレートマテリアルのコメント欄のギミックに影響されまして、simplicityでも、必要な時にコメント欄を開いたり閉じたりできるようにしてみました。

簡単なソースコピペで実現できるかと思います。

スマホ表示では、コメント欄のエリア分高さを稼ぐことができるため、他のコンテンツを見てもらえるようになるといいなあと期待しております。

ではソースを見てみましょう。

ちなみに、クリックで表示・非表示でなく、ただ純粋にコメント欄の入力項目を非表示にしたい場合は、以下のリンクをご参照ください。




スポンサードリンク


jQuery - Simplicityのコメント欄をクリックで表示・非表示

クリックでスタイルをコントロールしたいので、jQueryを使いますよ。
以前書いたjQueryとCSSでライブドアブログでも楽々固定ヘッダナビ - スクロール位置でナビゲーションを固定にするやり方 | jQuery css コピペで簡単 - ライブドアブログでも少し説明しておりますが、タイミングや仕組みをjQueryが担当し、見た目はCSSさんが担当する。
そんな感じです。

では、Simplicityテーマのsingle.phpファイルに以下ソースをコピペしましょう。
(本当はこのファイルで無い方がよいのかもしれませんが、作業がわかりやすいので自分はこのファイルの下部に記述しました。)


<script type="text/javascript">
(function($){
$("#reply-title").click(function(){
	$("#commentform").toggleClass("exist");
});
})(jQuery);
</script>

toggleClass()が便利ですね

上のソースで、toggleClass()に注目してみましょう。
toggleClass()は、今回のように表示・非表示をするような仕組みの際にとても便利です。

クリックするたびにクラスをつけたり外したりを一行で命令できちゃいますからね~。


CSS - Simplicityのコメント欄をクリックで表示・非表示

cssはこちらです。Simplicityテーマのstyle.cssに以下をコピペしましょう。
もし、コメント欄各所のID名やclass名が違うようでしたら、それに合わせて書き換えてください。


#reply-title:hover{
	opacity:0.7;
	cursor:pointer;
}

#reply-title:before{
    content: "Click▼";
    font-size: 11px;
    background: #666666;
    padding: 3px 20px;
    position: relative;
    top: -3px;
    margin: 0 7px 0 0;
    color: #fff;
}

#commentform{
	display:none;
}

#commentform.exist{
	display:block;
}

まとめ - Simplicityのコメント欄をクリックで表示・非表示

いかかですか?
もし実装できたら、travelnavi.linkのコメント欄のような感じで、見出しに「Click▼」のマークがついて、これをクリックでコメント欄が出たり消えたりするはずです。
簡単ですので、ぜひお試しくださいね~。


おすすめ入門書 - amazon


おすすめ入門書 - 楽天

160201追記

おすすめ書籍にjQueryの本が無くてすみません~。
自分は書籍でなくてネットで調べて使いたいところだけ覚えたんですよね。そのため基礎がボロボロですね。

もちろんネットでも基礎からしっかり説明しているサイトがたくさんありますよ。

デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方
jQuery日本語リファレンス

ただ、何かよさそうな本があったらご紹介できれば…と思っております。


jQueryのプラグインの本は買ってましたね - 160202追記

jQueryの基礎の本はしっかりと読んでないのですが、おもしろそうなプラグインが無いかなーと、プラグイン紹介の本を購入してました。
古い部分もありますが、どんなことができるかがわかって良かったです。


jQueryプラグイン本 - amazon

jQueryプラグイン本 - 楽天

jQueryプラグインブック [ ネクスト(1997) ]

価格:2,052円
(2016/2/2 12:39時点)

またjQueryのプラグイン紹介などの記事は結構いっぱいありますね。

全部チェックしているだけで時間かかっちゃいそうですけど、たくさんのプラグインを見ているとわくわくしてきますね(ほどほどにですけど)。


スポンサードリンク

この記事が役立ちましたら「いいね!」などクリックお願いします!

ブログランキング・にほんブログ村へ とれまが人気ブログランキング アフィリエイト
最新記事 - トップinfoに戻る 記事一覧 - サイトマップ 海外旅行情報ブログやってます - トラベルナビリンク