.wpcf7-submit:disabled{cursor:not-allowed}よく試し、よく作るブログ実験室naelabCocoonの補足情報ボックス(?/!/i)を少しかわいくカスタマイズしてみたCocoon2018.04.03Cocoon標準の「補足情報ボックス」を、少し明るくポップな感じにかわいくしてみたので、やり方を共有します。CSSのコピペだけで導入できるので、お好みにあわせてご利用ください。0.4.4よりCocoonのテーマに組み込み済みです。下記のCSSを、子テーマのstyle.cssまたは「外観>カスタマイズ>追加CSS」に貼り付けてください。rgba(240,128,128,.5);}色味を変える場合は、「color」や「background」属性のカラーコードを変えてみてください。HTMLカラーコードまた、CSSのセレクタを以下の通り置き換えればSimplicityでも使えるはずなので、Simplicityユーザの方はどうぞ。.alert注意事項コピペ前に念のため、CSSのバックアップをとっておくことをおすすめします。心配ならテスト環境で事前に確認すると安心です。WordPressを無料お試しする方法まとめ。無料でお試しする方法を解説します。おすすめはレンタルサーバーの無料お試しプログラムを利用することです。bloglab.naenote.net2016.10.23まとめ:Cocoonを自分色に染めよう以上、Cocoonの補足情報ボックスを少しポップめにかわいくするカスタマイズ方法を共有してみました。そのままでも十分スタイリッシュなCocoonですが、デフォルトのまま使うより少しのカスタムで自分色に染めて他所のブログと差別化することで、より楽しく美しく使えるのではないでしょうか。同じデザインで、?や!のマークと色だけを変更したい場合これだけではダメなのでしょうか。書いてみたのですが実装されませんでした。17:12namiさんコメントありがとうございます。こちらのカスタマイズは、Cocoonにもともと入っている「ベースのCSS」に対し、ボックスやマークの色・配置を整える「追加CSS」という位置づけです。「ベースCSS」と「追加CSS」が両方そろってはじめて、ボックスデザインが実装されます。そのため、こちらの「追加CSS」のみをコピペしても「?」や「!」と同じボックスデザインにはなりません。Cocoonの親テーマフォルダから「ベースCSS」部分を探してコピペしたうえで、上記「追加CSS」をかぶせてみてください。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。管理人NAEただのブログ好き。お問合わせはこちらもしくはTwitterのDMまでどうぞ。ブログ実験室naelab.タイトルとURLをコピーしました。