Cocoonはデフォルトで枠線角に丸めが入っている個所があるのですが、この丸めの打ち消し方は、該当箇所のCSSに「 border-radius: 0; 」を追加する という簡単な作業です。
たったこれだけなのですが、私のような初心者にとっては、何も知らない状態から、この作業に到達するのは、結構難易度が高いなぁと感じましたので記事にしてみました。どなたかの参考になれば嬉しいです。
Cocoonのデフォルトの装飾
私がCocoonのデフォルトで枠線の角に丸めが入っているのに気が付いたのは、記事全体に枠を付けた時でした。
以前の記事：記事全体に枠線をつける
それまでは気にも留めていなかったのですが、よく見たらサイドバーの項目でも枠線角に丸めが入っています。border-radius はCocoonで設定されている数少ない装飾のうちの一つのようです。
Cocoonのサイト記事 Cocoonのデフォルトスタイルをシンプルにしている理由 で、作者のわいひらさんはCocoonでは基本的に以下の装飾しか行っていないと仰っています。
- マージン（margin：外側の余白）
- パディング（padding：内側の余白）
- 文字色（color）
- 背景色（background-color）
- 文字サイズ（font-size）
- 枠線（border）
- 枠線の丸め（border-radius）
たいていは、デフォルトから変更したい個所（カラー指定する、フォントサイズを変える など）のCSSを追加（上書き）することで対処できるのではないかと思うのですが、私の場合、やりたかったことは、枠線の丸めを 取る＝打ち消す ということでしたので、どうすればいいのか、ググっても出てこなくて、まったくわからない状態でした。
当てずっぽうで、border-radious: 0; を入れたら、たまたま正解で、思い通りにできたのですが、一旦設定したCSSを打ち消す方法というのは、ググってもあまり出てこないようです。
一旦設定したCSSを打ち消すCSS
わいひらさんが上記サイト記事で、「CSS初期値一覧なチートシート」という、CSSを初期値に戻すCSSがまとめられているQiitaの記事を紹介されていました。私のように、一旦設定されたCSSを打ち消す方法が、ググっても出てこなくて困ってた方が、ご自身でお調べになって対処CSSをまとめられたものです。（ありがたいです）
７年前に書かれた記事ですが、今でも参考にできる内容ではないかと思います。活用していきたいですね。
コメント