【COCOON・ボックス】角丸を四角にするカスタマイズCSS

Tips

こんにちは!

今回は、COCOONのデザインに関するTips、白抜きボックスの形をカスタマイズする方法をシェアします。

四角い枠線を角丸にするカスタマイズはたくさん紹介されていましたが、wordpressとっても初心者の私にとっては、

「逆に角丸を四角にするにはどうれば…」

と散々悩み、ようやく見つけた解決方法です。

 

Sponsored

便利なボックス機能

COCOONには、文字や画像を枠線で囲む「ボックス」というデザインがあります。

中でももっともシンプルなのが、白抜きボックス。

これが白抜きボックスのデフォルトです。

ブロックの設定画面から、枠線や背景色が変更できます。

 ここまでは非常に簡単・便利です。

角が丸い

↑のように、デフォルトの白抜きボックスは角が丸いデザインをしています。

しかし、私が使用したかったのは、角が四角いボックス。

サイトをよりソリッドな印象にしたく、角の丸みを取りたかったのです。

そこで、試行錯誤し(結論は超シンプルなのですが…)CSSでカスタマイズすることができました!

  

カスタムCSS

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

.blank-box{
border-radius:0;
}

を追記すると、白抜きボックスの角の丸みがなくなり、四角ボックスになります。

白抜きボックスを指定するのが「.blank-box」です。

「border-radius」は角の丸みを指定するコードで、数字が大きいほど丸みがでます。

そこで、これを「0」にすることで丸みを抹消する、という仕組みです。

枠線の太さもカスタマイズ

ついでに枠線の太さももう少し細くしたかったので、「border-width」で線の太さを追記。(数字が大きいほど太くなります)

最終的には下記のCSSを使いました。

.blank-box{
border-width: 0.1px;
border-radius:0;
}

他のボックスにも使える

今回は白抜きボックスに対してカスタマイズしましたが、他のボックスの丸みを取りたい場合は、「.blank-box」部分を変更すればOKです。

 

Before / After

上記のCSSを追記した結果がこちらです。

 

Before

 

After

 

角の丸みが取れて、線が細くなったことがわかります。

他の要素と合わせて全体的に見てみると、デザインの印象がよりソリッドになったかと思います。↓

Before

 

After

 

ちなみに、この画面は固定ページの一部なのですが、COCOONの機能でここまで自力で作り込めます。

改めてCOCOONのすごさに感謝!

 

以上、白抜きボックスの角の丸みをとるカスタムCSSでした!

Profile
Written by

転職を機にシンガポールに2年、現在はイギリスに住んでいます。
海外での生活や美容について載せています。お仕事の依頼はコンタクトフォーム、またはSNSよりお願いします。

Let's connect with...
Tips
Sponsored
Tap to Share
Let's connect with...
Latest Trends
  • Teeth Whitening
  • Sustainable Sun Screen
  • Self Tanning
YURIKA'S BLOG