WordPress Cocoon

【Cocoon】コメント欄をおしゃれにカスタマイズ

WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はコメント欄のカスタマイズをしてみました。

コメントがあった時に表示されるコメントリストはこんな感じになります。吹き出しを付けてみたり、コメントリストに続いて入力フォームの部分を隙間なく表示しています↓

コメントがない時はこうなります↓フォームの部分に大きな変更は加えていませんが、送信ボタンのCSSがiPhoneなどのiOSで見た時にもちゃんと反映されるようにしています。

それでは早速やっていきましょう〜!

コメント入力欄を表示するボタンのカスタマイズ

まずはCocoon設定でコメント入力欄を「ボタンで表示切り替え」に設定している時の、ボタンのカスタマイズです。

常に表示」に設定している人は不要なのでここは飛ばしてください。

CSSのコードはこちら。

.comment-btn:hover」がマウスを乗せた時の指定で、背景色だけふわっとアニメーションで変わるようにしてます。

この設定にするとコメントがない時の表示がこうなります↓

上記コードで「.comment-btn」に「margin-top: 0;」を追加すれば、見出しとボタンの隙間をなくしてくっつけることもできますが、あまり見た目がスマートじゃないので僕は「常に表示」にしています。

コメント入力欄のカスタマイズ

次はコメント入力欄ですが、コードはこちらです↓

レイアウトはあまり変える必要ないと思ったので、全体に枠を付けたり細かい部分のデザインを変更しています。

見出しがあるとデザインがおかしくなるので「Cocoon設定>コメント>コメント入力欄見出し」のところは空欄にしてください。

あと僕の場合は入力スペースのボーダーをなくしたり、背景をグレーにしていますが、この部分を変えるだけでもけっこう雰囲気が変わると思います。薄い青とかピンクとかにしても可愛いですね↓

送信ボタンは普通にCSSを指定しただけだと、iOSは独自のデザインが残って変な感じになってしまうので、CSSで自由にデザインできるように「-webkit-appearance: none;」を指定して、送信ボタンの装飾をリセットしています。

コメントリストのカスタマイズ

最後にコメントがあった時に表示されるコメントリストの部分ですが、コメントタイプによってCSSのコードが少し変わります

まずは「デフォルト」の場合のコードはこちら↓

次に「シンプルスレッド」の場合は以下のようになります↓

デフォルトとシンプルスレッドで違う部分は「.st-comment-content」などクラス名が変わったのと、吹き出しの位置を若干調整したりしています。

あと注意点としては吹き出しにする場合は「アバターを表示」しないとおかしくなります。もし表示されていない時は管理画面の「設定>ディスカッション」から変更してください↓

アバターを表示せず、吹き出しにもしない場合は以下の部分のコードを削除すればオッケーです↓

タイトルの部分は「Cocoon設定>コメント>コメント一覧見出し」でお好きな文字に変更できます。アイコンはFont Awesomeで表示していますので、以下の部分のコードを変更すれば好きなアイコンに変更できます↓

f27b」のところがアイコンを指定するコードですが、こちらのページから好きなアイコンのコードを調べて変更してください↓

Font Awesome Icons
Font Awesome, the iconic font and CSS framework

返信コメントの階層は「設定>ディスカッション>他のコメント設定」の部分で変更できます↓

返信コメントは左に余白(インデント)が付きますが、階層が深すぎると余白が大きくなりすぎて読みにくくなるので4階層ぐらいまでが良いかと思います。

ということでCocoonのコメント欄のカスタマイズでした!色々アレンジしてみてくださいね。参考になれば幸いです。

WordPress
\記事が役に立ったらシェアしてね/
うぇぶあしび

comment

  1. やながみ より:

    DICEさん、こんばんは。

    また素晴らしいカスタマイズの情報を公開して下さってありがとうございました。
    DICEさんの書いていることを参考にサイトを作り込んでいくうちに「このコメント欄のボタンだけ少し大きい気がして気になるな、白いままだし、どこかでカスタマイズする方法を調べなきゃ」と、思っていたところでした。
    もう以前に設定したものの表示が崩れたりする恐怖は味わいたくないと思って、何度もDICEさんの書いてることを読みながらでCSSに書かれてる内容も確認しながら一日以上かけてやっとできました。
    めっちゃかっこよくなった気がします。コメント欄のデザインが変わっただけで全体的な見栄えが!
    カスタマイズの方法を公開して下さったので、感謝の気持ちを伝えたくてコメントを残したいと思いました。

    これからも、素敵な記事が公開されることを楽しみにしています。

    PS)3年間ブログを運営してきた体験談もとても面白かったです。ブログってお金になるのですね(笑) 普通に好きなことを記録していこうと思っていましたが、路線を少しは変更していきたいと思いました(爆) カスタマイズ以外のDICEさんの記事も全部読みたくなりました。ありがとうございました。

    • DICE DICE より:

      ありがとうございます!お役に立てて何よりです。

      稼ぐことばかり優先にしてしまうとなかなかブログが続かない人も多いですが、好きなことを書きながらついでにお小遣い稼ぎみたいな感覚だと続けやすいかなと思います。楽しんでください〜

  2. hibizip より:

    コメント失礼します。
    初心者質問なんですが、
    cssは
    外観⇒テーマエディター⇒cocoonchild:style.css
    の中の、

    /************************************
    ** 子テーマ用のスタイルを書く
    ************************************/
    /*必要ならばここにコードを書く*/

    以下に貼り付ければ行くのでしょうか?
    上手くいかなかったので、他に場所があれば教えてください。
    また、間違っていたら教授してもらえると助かります。

    • DICE DICE より:

      はい、そこで合ってます。
      通常はコードを追加して更新すれば反映されると思いますが、全く変化なしでしたか?

  3. hibizip より:

    先ほどは失礼しました。
    自己解決しました。
    既存にある上で、CSSを書き込んだためか他のプログラムがかみ合っているのか、CSSが効いていることが分かりましたので、もう少し調整してみます。

タイトルとURLをコピーしました