WordPressCocoon

【Cocoon】コメントを書き込むボタンをカスタマイズする

アイキャッチ画像 Cocoon
この記事は約2分で読めます。
スポンサーリンク

WordPressテーマ Cocoonのコメントを書き込むボタン

WordPressテーマ Cocoonで使われている「コメントを書き込むボタン」のカスタマイズについてまとめてみました。

テーマCocoonのコメントを書き込むボタン

WordPressテーマ Cocoonで使われている「コメントを書き込むボタン」は次の様になっています。

【WordPress】コメントを書き込むボタンをカスタマイズする

前回のエントリー記事で「源ノ角ゴシック(Webフォント)」から「游ゴシック体, ヒラギノ角ゴ」に変更しましたが、それに伴いフォントが弱々しくなったため色々と設定を変更しました。

【Cocoon】Cocoonのサイトフォント設定を変更する
WordPressテーマ Cocoonの設定フォントを「源ノ角ゴシック(Webフォント)」から内蔵フォントの「游ゴシック体, ヒラギノ角ゴ」に変更してみました。これにより「PageSpeed Insights」などのスコア向上を目指します。

今回追記する形で、「コメントを書き込むボタン」を強調させるデザインに変更したいと思います。

コメントの書き込むボタンのカスタマイズ

今回のカスタマイズ内容は、「コメントを書き込むボタン」に対して、フォントとその枠の強調についてカスタマイズします。

カスタマイズ内容

「コメントを書き込むボタン」のカスタマイズは、下記の通りです。

このカスタマイズ内容を「スタイルシート(style.css)」に追記します。

/************************************
** ■コメントを書き込むの強調
************************************/
.comment-btn.key-btn {
  border: solid 2px #fe619a; /*枠線*/
  border-radius: 6px; /*角丸コーナー*/
  font-weight:bold; /*文字強調*/
  font-size: 18px; /*フォントサイズ*/
}

カスタマイズ後のコメントの書き込むボタン

今回のカスタマイズによって、WordPressテーマ Cocoonで使われている「コメントを書き込むボタン」は、次のようになりました。

【WordPress】コメントを書き込むボタンをカスタマイズする

これまでの「コメントを書き込むボタン」よりも強調される形となり見つけやすくなりました。

最後に

「コメントを書き込むボタン」を強調したことによって、コメントが増えれば良いですね。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
ナナリズムダッシュ
パズルガールズ
イース6オンライン
幻獣レジェンド -百妖志-
リネージュ2M
ドラゴンとガールズ交響曲
エグゾスヒーローズ
魔剣伝説
パズにゃん
龍が如くONLINE
ロードモバイル

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント