Cocoonの使い方やカスタマイズとオリジナルスキン

Cocoonの文字装飾ボタンの色やデザインをカスタマイズ

スポンサーリンク
カスタマイズ
この記事は約6分で読めます。

Cocoonに初めから用意されている文字装飾のスタイルを好みのデザインや色にカスタマイズしてみます。

投稿編集の「スタイル」

 

文字装飾の一覧は以下にまとめています。

 

この記事はボタンのカスタマイズ方法です。

 

スポンサーリンク

カスタマイズ方法

簡単なCSS追記のみです。

CSS追記は以下のいずれかから行って下さい。

外観→カスタマイズ追加CSS

外観→テーマエディターstyle.css

 

ボタン

Before

スタイル・ボタン

 

以下すべての装飾に上記「レッド」同様、小・中・大あり

 

初期値のCSS

デフォルトのCSSは以下の通り。

サイズや形状設定

/*ボタン*/
.btn{
  color: #fff;
  background-color: #32373c;
  font-weight: bold;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
  line-height: normal;
  padding: 7px 13px;
  text-decoration: none;
  text-align: center;
  font-size: 14px;
  border: 2px solid transparent;
  position: relative;
}
.btn-m{
  padding: 14px 45px;
  font-size: 16px;
}
.btn-l{
  padding: 14px 20px;
  font-size: 18px;
  margin: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-white{
  color: #333;
  background-color: #fff;
}
#container .btn-white:hover{color: #333;}
.btn-red{background-color: #e60033;}
.btn-pink{background-color: #e95295;}
.btn-purple{background-color: #884898;}
.btn-deep{background-color: #55295b;}
.btn-indigo{background-color: #1e50a2;}
.btn-blue{background-color: #0095d9;}
.btn-light-blue{background-color: #2ca9e1;}
.btn-cyan{background-color: #00a3af;}
.btn-teal{background-color: #007b43;}
.btn-green{background-color: #3eb370;}
.btn-light-green{background-color: #8bc34a;}
.btn-lime{ background-color: #c3d825;}
.btn-yellow{ background-color: #ffd900;}
.btn-amber{background-color: #ffc107;}
.btn-orange{background-color: #f39800;}
.btn-deep-orange{background-color: #ea5506;}
.btn-brown{background-color: #954e2a;}
.btn-grey{background-color: #949495;}
.btn-blue-grey{background-color: #607d8b;}
.btn-black{background-color: #333;}

以降、カスタマイズに必要な部分のみを追記してご利用下さい。

色を変える

薄い色にしてみる

ボタンカスタマイズ

.btn-red{background-color: #bf4762;}
.btn-pink{background-color: #ebb2cb;}
.btn-purple{background-color: #bb8bc7;}
.btn-deep{background-color: #7b5980;}
.btn-indigo{background-color: #5475ab;}
.btn-blue{background-color: #0095d9;}
.btn-light-blue{background-color: #92c1d6;}
.btn-cyan{background-color: #89d1d6;}
.btn-teal{background-color: #85d4b0;}
.btn-green{background-color: #8bd9ac;}
.btn-light-green{background-color: #c6eb9b;}
.btn-lime{ background-color: #e2eba0;}
.btn-yellow{ background-color: #edde8a;}
.btn-amber{background-color: #edd793;}
.btn-orange{background-color: #e60033;}
.btn-deep-orange{background-color: #e6a583;}
.btn-brown{background-color: #8f6e5d;}
.btn-grey{background-color: #b9b9bd;}
.btn-blue-grey{background-color: #9aa5ab;}
.btn-black{background-color: #696666;}

 

ボタンの色を薄くして文字が見えにくい場合は以下のように文字色を追記して下さい。

.btn-yellow {
background-color: #edde8a;
color:#000; /*文字色*/
}

ボタンカスタマイズ

 

枠の形状を変える

少し大きくし、角の丸みを大きく、文字も大きくしてみます。

Before

ボタンカスタマイズ

After

ボタンカスタマイズ

 

.btn{ /*ボタン(小と全体)
border-radius: 10px;
padding: 10px 20px;
font-size: 15px;
border: 2px solid transparent;
}
.btn-m{ /*ボタン(中)
padding: 20px 60px;
font-size: 18px;
}
.btn-l{ /*ボタン(大)
padding: 20px 30px;
font-size: 20px;
}

余白のサイズ指定「padding」は、1つ目の値が上下の余白、2つ目の値が左右の余白になります。

 

その他の文字装飾

その他、文字装飾のカスタマイズは以下をご覧ください。

 

カラーの変更

お好きなカラー設定には以下もご利用下さい。

マカロンビビッドパステル伝統色和色セーフ色名

 

コメント

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