ワードプレスCocoonのコメントボタンのカスタマイズ8選WEB関連の記事を気楽に書いています。2019.09.30こんにちわ。今回は、ワードプレステーマCocoonのコメントボタン(コメントを書き込む)のカスタマイズを記事にしていきたいと思います。丸型(楕円)背景色CSSコードの設置(貼り付け)手順コメントボタンカスタマイズのまとめCocoonのコメントボタンをカスタマイズしようCocoonのコメントフォームを、ボタンで表示切替えに設定している方向けのカスタマイズです。(このブログはボタンで表示にしています)ダッシュボードのCocoon設定から、コメントをクリックすると、コメントフォームを常に表示しておくか、コメントを書き込むボタンのみ表示にしておくか切り替えることができます。ボタン表示で切り替えに設定していない場合は、常にコメントフォーム全体が表示されている状態になるので、このボタン(コメントを書き込む)は表示されていません。ボタン表示で切り替えに設定している場合は、このボタンをクリックするとコメントフォームが表示される仕様です。記事の内容は、ボタンのデザイン(色、形)カスタマイズのための、CSSコードの設置方法と8パターンのデザインの紹介です。テーマCocoonを例にしています。お問い合わせフォームとコメントフォームの使い分けブログ内にお問い合わせフォームを設置している方も多くいると思いますが、お問い合わせとなるとなんだか気を使いませんか?僕は、このブログ以外にもアフィリエイトのサイトを運営してるんですが、お問い合わせフォームに届くのはASPからの広告設置依頼や、個人名での広告設置依頼が数回届いたくらいなんですよね。僕自身、アフィリエイターというほどの実績はないのでなんだか照れ臭いだけで、お問い合わせ返信したことはありません。一方で、コメント欄には、「ブログ内の記事が参考になりました」とか、記事の内容への質問だったり、気楽な意見が届くんですよね。こちらは、気楽に返信できますよね。「ありがとうございます・・・」とか「お互い頑張りましょう・・・」とか。お問い合わせは、きちんと返信が欲しいときに使って、コメントは記事への感想など別に返信がなくてもいいときに使うって感じですかね。お問い合わせはグローバルナビや、サイドバーなどにわざわざ設置場所を設けてますが、コメントフォームは記事の最下部に設置することが多いですもんね。このブログは、Cocoonというテーマを使わせてもらって1年ほどたつんですが、最近になってコメントボタンがデフォルトだとちょっとシンプルかな?と思ったのでデザインを変えてみようと思ったわけです。コメントボタンのデザインを変えたからといって、大きなメリットがあるわけじゃないと思うんですが、サイトのデザインをカスタマイズするって楽しいですもんね^^今回紹介するボタンのデザインは、マウスカーソルを置く前と置いた後で変化するバージョンを8パターン紹介します。デモボタンを使ってわかりやすく解説していきますので是非参考にしてください。カスタマイズコード設置の流れ記事内の、CSSコードをコピーCocoon子テーマ(Child)のスタイルシートにコードを設置ファイルを更新まずは、おすすめデザインを8パターンと、CSSコードを紹介します。CSSコードは各デザイン下のトグルボックス内からコピーしてください。ちなみに、デザインの色を変更する場合は、コードの中の#○○○○○○の6桁の数字とアルファベットを変更するだけです。好きな色を選んで変更してくださいね。デザインコード(数字&アルファベット)は以下のサイトを参考にしてください。HTMLカラーコード色の名前とカラーコードが一目でわかるWEB色見本www.colordic.org#(シャープ)はそのままで6桁の数字とアルファベットを変更してね^^コメントボタンおすすめ8選(デモ&CSSコード)ココで紹介するCSSコードは、ワードプレス4.0バージョンと5.0バージョンで実際に設置して、正常に表示されることを確認しています。コード内の説明(赤文字)は、コメントアウトなので実際には反映されません。すべてコピーしてスタイルシートに貼り付けてください。*/CSSコードの設置(貼り付け)手順まずはダッシュボード画面の外観→テーマの編集へと進みます。外観にカーソルを置いて、テーマの編集をクリックします。テーマの編集をクリックすると、CSSコードを設置できるスタイルシート画面に変わります。ここで、テーマが子テーマ(Child)であることを確認してください。Childに切り替えてください。スタイルシート内に初めてコードを設置する場合は、子テーマ用のスタイルを書く(必要ならばここにコードを書く)の下にコードを設置(貼り付け)します。以前に、CSSコードを設置している場合は、最後に設置したコードの下に今回のコードを設置します。以前にコードを設置している場合スタイルシートにコードを貼り付けたら、その下のファイルを更新ボタンをクリックしてください。これで、デザイン変更が反映されます。(プレビューでも反映を確認できます)コメントボタンカスタマイズのまとめいかがでしたでしょうか?うまく反映されたと思います。珍しいカスタマイズではないんですが、簡単にデザインを変更することができるのでおすすめです。コメントボタンをクリックして、コメントフォームに移動したらそこでもデザインのカスタマイズをしたくなりますよね。コメント欄をあまりコテコテにカスタマイズすると送信者の方が使いにくくなると思うので、僕はあまりカスタマイズはしていませんが、機会があればコメントフォームのカスタマイズなど記事にしていこうと思っています。アフィリエイトは記事の更新が何よりも大切だと思いますが、時には息抜き代わりにちょっとしたカスタマイズなんかも面白いですよね。ワードプレスCocoonのコメントフォームカスタマイズ基本編ワードプレステーマCocoonのコメントフォームのデザインカスタマイズの記事です。わかりやすい記事になっていると思います。問題が新たに検出されました。コメントをキャンセルメールアドレスが公開されることはありません。*サイトプロフィールこんにちわ。建築系の自営業をしている既婚者です。自分で初めて作成したホームページで少しずつ集客できるようになってきたので趣味でブログをはじめてみようと思いました。ジャンルにとらわれない自由なブログにしたいと思っています。プロフィールこんにちわ。建築系の自営業をしている既婚者です。自分で初めて作成したホームページで少しずつ集客できるようになってきたので趣味でブログをはじめてみようと思いました。ジャンルにとらわれない自由なブログにしたいと思っています。7デザインカスタマイズ【シンプル3選】2019.12.152019.12.25楽天モーションウィジェットが動かないときの対処法【スマホ最適化】2019.10.242019.11.12アドセンスポリシー違反の対処法【違反画像と修正画像公開中】2019.10.082019.12.02【画像解説】ワードプレスCocoonのコメントフォームカスタマイズ基本編2019.10.052019.12.25ワードプレスCocoonのコメントボタンのカスタマイズ8選2019.09.302019.12.25Chromeの画面が真っ白!検索出来ないときの対処方は3クリックで解決2019.08.142019.08.27トレンドネタはアクセス数を稼げるのか?初心者が無料ブログで検証してみた2019.07.042019.07.12はてなブログにGoogleアナリティクスを導入しよう【画像解説】2019.07.032019.07.27。