【Simplicity】コメント欄をカスタマイズ！開閉式にしてみました

ゲーム大好き、カスタマイズだいすき！キーパー（@game_keeper1419）です。

このブログでは、ワードプレスのテーマ「Simplicity」を使わせていただいています。

カスタマイズしやすくて、ついついいろいろやってしまいます！笑

今回は、コメント欄を開閉式にするカスタマイズをやってみました。それと、コメント欄の場所移動も！カスタマイズ方法と、参考にさせていただいた記事（サイトさん）を紹介します。

ちなみに、完成したコメント欄の開閉ボタンはこんな感じ▽

見た目だけです！実際に動くボタンは、記事下で確認してもらえると助かります。

それでは、気になった方はお付き合いくださいっ！

コメント欄が気づかれにくい？

実はわたし、他のブログもやっていて、そのブログでも「Simplicity」にお世話になってます。

もう一度使ったらやみつきになる！そんなテーマです。わいひらさん、ありがとうございます。

で、今までは感じたことなかったんですけど・・・

ブログなれしてない人には「Simplicity」のコメント欄は、ちょっとだけ気づかれにくいのかなぁーと！

このブログはゲーム記事が中心。ゲーム記事って自分が知りたい内容が知れたら、すぐに閉じちゃいますよね。だから、なかなか隅々まで読んでもらうのは難しい！

そんな中で、「Simplicity」のコメント欄はデフォルトだと、「関連記事」の下にあってちょっと気づかれにくい。そこで、まずはコメント欄の場所を変えてみることにしました。

記事下にコメント欄を移動

まずは、気軽にコメントしてもらえるようにコメント欄を記事下に移動させます！

参考にさせてもらった記事はコチラ▽

画像付きで説明してくださってるので、簡単にコメント欄の移動をすることができました！これで、コメントが増える（にやり！笑）

コメント欄スペースを縮小したい

コメント欄を移動して、気づいてもらいやすくはなったけど。。。

記事下にコメント欄があると、スペースをとりすぎて関連記事を読んでもらえずに離脱されそう・・・どうにかならないかなぁーとググっていたら、またまたありがたいカスタマイズ記事を発見！

参考にさせてもらった記事▽

toggleClass()ってとっても便利！ブログをはじめたころは、jQueryとかCSSって言葉が何なのかも分からなかったけど、成長したなぁー！笑

基本的に分からないことを調べて、形にしていくのが大好きなのでブログをやってる内に分かるようになってきました♪

ググるだけでなく、本もちょっと読みましたけどね。

いちばんやさしいJavaScriptの教本 人気講師が教えるWebプログラミング入門(「いちばんやさしい教本」シリーズ)

posted with カエレバ

岩田宇史 インプレス 2017-03-27

Amazon

楽天市場

コメント欄-開閉ボタンのデザイン

前置きがとんでもなく、長くなっちゃっいました。すみません。

ここから、カスタマイズについてです！と言っても、重要な部分は先に紹介させていただいた記事で出来るので、今回はわたしがオリジナルでやったボタンデザインだけ紹介します。

コメント欄をクリックして表示・非表示を切り替えるカスタマイズ方法を書かれたtratraさんは、「コメントをどうぞ」の文字の横に「Click▼」のマークを付ける形にされています。

参考 トラベルナビリンク

わたしは、CSSをちょこっとだけイジって「コメントをどうぞ」の部分から「Click▼」までをひとつのボタンにしました。

style.cssに追加したCSS

/* コメント欄の開閉ボタン */
#reply-title {
display: block;
margin-top: 10px;
padding: 5px 0px;
background-color: #6FC9D8;
border-radius: 3px;
color: #fff !important;;
font-size: 18px;
font-weight: bold;
text-align: center;
}
#reply-title:after{
content: "（ Clickで開きます ▼ ）";
font-size: 16px;
color: #fff;
}
#reply-title:hover {
cursor: pointer;
opacity: 0.8;
}
#commentform{
display:none;
}

#commentform.exist{
display:block;
}

#reply-title:afterにすることで、「コメントをどうぞ」のあとに、（ Clickで開きます ▼ ）と表示されるようにしました。

文字の大きさも、「コメントをどうぞ」が18px、（ Clickで開きます ▼ ）を16pxにして少しだけ変化を付けてます。

変なこだわり（笑）

mobile.cssに追加したCSS

/*コメント欄*/
#reply-title {
    display: block;
    margin-top: 10px;
    padding: 10px 0px;
    background-color: #6FC9D8;
    border-radius: 3px;
    color: #fff;
    font-size: 17px !important;
    font-weight: bold;
    text-align: center; 
}
#reply-title:after{
    content: "（ Click▼ ）";
    font-size: 15px;
    color: #fff;
}

スマホはパソコンに比べて画面が狭いので、ボタンの文字の大きさを変更。それと、（ Clickで開きます ▼ ）→（ Click▼ ）に変更しています。

PC版と同じデザインじゃ収まりが悪かったんです。

スマホでコメント欄を開いた状態はこんな感じ▽

本当は、「この記事にコメントする」という文字とボタンは別で作りたかったんですけど、分からず…素人カスタマイズはこれが限界でした！

まとめ

間違っているところもあるかもしれないけど、忘却録として記事にしてみました。

参考にさせていただいた記事のおかげで、スムーズにカスタマイズできました。ありがとうございます！

この記事も誰かの役に立てばうれしいです。あと、せっかくカスタマイズしたので、ボタンの動作確認がてらコメントくださいっ！！

でも、スパムコメントはやめてね！笑

ではでは、キーパー（@game_keeper1419）でした！

ゲーム記事が多いけど、ブログカスタマイズや運営報告などもしていくのでよかったらツイッターフォローもお願いします♪