【画像解説】ワードプレスCocoonのコメントフォームカスタマイズ基本編WEB関連の記事を気楽に書いています。2019.10.05こんにちわ。この記事では、ワードプレステーマCocoonのコメントフォームのカスタマイズを書いていこうと思います。記事の内容は、コメントフォームの項目欄の枠線のデザイン変更と送信ボタンのデザイン変更です。CSSコードの例とCocoon内への設置方法まで一連の流れを書いていきますので参考にしてください。目次CocoonのコメントフォームカスタマイズCocoonのコメントフォームデザイン例とCSSコードCSSコードを設置する手順カスタマイズ反映を確認する前にワードプレスCocoonコメントフォームカスタマイズまとめCocoonのコメントフォームカスタマイズ前回の記事で、サイト内に常にコメントフォームを表示していない場合のカスタマイズを紹介しました。以下の画像のようなボタンのデザイン装飾で、このボタンをクリックするとコメントフォームが表示される仕様になっています。コメントフォームのデザインも変更したい方へ向けて、今回は、フォーム内のデザインカスタマイズを紹介しようと思います。(シンプル仕様です)デザイン例の下のトグルボックス内に、CSSコードを書いておきますのでCocoonのスタイルシートに設置(貼り付け)してください。ちなみにCocoonのデフォルトでは以下のようなデザインです。Cocoonのコメントフォームデザイン例とCSSコードコメント欄の枠線の太さと色。送信ボタンの背景色と文字色(大きさ)を変更しています。シンプルな装飾ですが、コメント送信者の方が送信完了と認識できるくらいの簡単なカスタマイズがいいのかな?どうでしょうか。CSSコードの赤文字の説明は(コメントアウト)は反映されません。そのまま全コピで設置してください。*/CSSコードの#○○○○○○;の数字とアルファベットを変更して好きな色にカスタマイズしてください。#(シャープ)と;(セミコロン)はそのままで、○○○○○○の数字とアルファベットだけ変更してください。下の画像は、送信ボタンの背景色を変更した時の例です。数字とアルファベットは以下のサイトを参考にしてください。HTMLカラーコード色の名前とカラーコードが一目でわかるWEB色見本www.colordic.orgCSSコードを設置する手順CSSコードを設置する手順は難しくありませんが、注意点は、前回のコードをコピーしてメモ帳などに残しておいてください。(バックアップ保存)ちなみにですが、先日別のブログ(本業の集客用jimdoのHP)でデザインCSSのコードをすべて消してしまって大失敗しました。バックアップを残していなかったので大泣きしたかったです^^;結果的に1週間ほどでほぼほぼ元に戻せたんですが、かなりしんどかったです。ほんと慣れてきたころに失敗しますね。バックアップ必須ですよね、つくづく思います。スイマセンこれは余談でした。CSSコードは子テーマのスタイルシートに設置(貼り付け)してくださいね。ダッシュボードの外観にカーソルを置くとサブメニューが表示されるので、その中のテーマの編集をクリックしてください。通常は子テーマが表示されるはずです。Cocoonのスタイルシート(子テーマ)が表示されるので、コピーしたCSSコードを設置(貼り付け)してください。外観⇒テーマの編集で通常は子テーマが表示されますが、以下の画像を参考に必ず子テーマであることを確認してくださいね。以前に設置したコードがある場合はバックアップも忘れずにお願いします。CSSコードを初めて設置する場合は、/*必要ならばここにコードを書く*/の下に設置して、ページ下部のファイルを更新をクリックします。(赤枠内にコードを貼り付け)以前にCSSコードを設置している場合は、最後に設置したコードの下に今回のコードを設置して、ページ下部のファイルを更新をクリックします。(赤枠内にコードを貼り付け)カスタマイズ反映を確認する前に画面の右上のプレビューボタンをクリックすると、別タブ(画面)が開きます。そこで結果が反映されているか確認できます。しました」と表示されるので、つい安心して下書き保存しないことがありますよね。この文章(段落)も先ほど下書き保存するのを忘れていたので思い出しながら書き直しています。このブログだけで50記事以上書いていても失敗することがあります・・・。下書きとして保存しておけばダッシュボード内の下書き一覧の中に格納されるので、いつでも編集することができます。(下書き保存を押しても画面はそのまま編集画面のままです)ワードプレスCocoonコメントフォームカスタマイズまとめいかがでしたでしょうか。プレビュー画面で確認してみてください。うまく反映されていると思います。簡単な装飾でもちょっとカスタマイズするだけでもオリジナリティが出せますよね。ワードプレスのテーマCocoonは、無料テーマの中では一番人気のテーマになっていると思いますが、ほとんどの方はアフィリエイトに有利ということで選んでいるようです。僕もそのうちの一人ですがアフィリエイトの結果はよくありません。最近では、1カ月に1、2記事程度しか更新していないので当然の結果ですが・・・。サーバー代とドメイン代は稼げてるんで満足しちゃってますね。本気でアフィリエイトに取り組んでいる方には申し訳ないんですが、初心者の方は反面教師にしてくださいね。ココで踏ん張っていけば少しは収益も望めるんでしょうけど・・・。今日なんかは世界陸上を見ながら記事を書いているので余計忙しいんですけど・・・この記事を書き始めてかれこれ6時間ほど経ちますが、なかなか完成しないんですよね。パソコン画面見たり、テレビ画面観たりほんと忙しい。気になって気になって^^;ちょっとさぼって我が家の状況を撮影してみました。夜中(am5:00前)なんで静かにカシャッ!男子陸上4×100m予選が横でやってる状況ですから。日本がんばれ~!こんな感じですからね。アフィリエイトは向いてないかも・・・。来月はもうちょっと頑張ろうかな・・・なんてね^^最後がうまくまとめられなくてスイマセンm(__)mりゅうまるでした☆コメントボタン(コメントを書き込む)カスタマイズは以下から↓↓↓↓↓↓ワードプレスCocoonのコメントボタンのカスタマイズ8選ワードプレスの無料テーマCocoonのコメントボタンのデザインカスタマイズの記事です。8種類のデモ画像(変化有り)とCSSコードを掲載しています。コメントフォームを常に表示せずボタンで切り替えにしている方向けの記事です。問題が新たに検出されました。コメントをキャンセルメールアドレスが公開されることはありません。*サイトプロフィールこんにちわ。建築系の自営業をしている既婚者です。自分で初めて作成したホームページで少しずつ集客できるようになってきたので趣味でブログをはじめてみようと思いました。ジャンルにとらわれない自由なブログにしたいと思っています。プロフィールこんにちわ。建築系の自営業をしている既婚者です。自分で初めて作成したホームページで少しずつ集客できるようになってきたので趣味でブログをはじめてみようと思いました。ジャンルにとらわれない自由なブログにしたいと思っています。7デザインカスタマイズ【シンプル3選】2019.12.152020.01.28楽天モーションウィジェットが動かないときの対処法【スマホ最適化】2019.10.242020.02.09アドセンスポリシー違反の対処法【違反画像と修正画像公開中】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。