CSSでテーマCocoonの記事に枠をつける方法

ブログ運営

Cocoonはデフォルト状態では全体がつながった真っ白いデザインになっています。

好みの問題ではありますが枠線をつけることでメリハリができます。

ワードプレスCSSカスタマイズをする前に

CSSで記事部分に枠線をつける

Cocoonのデフォルトのデザインに違和感なく枠をつけるにはこのコードをコピペすれば大丈夫です。

#main{
border: 1px solid #ccc;
border-radius: 0px;
}

枠線CSSコードの解説

上のようなコードがどういう意味を持つのかわかっていると自分好みに変更できます。

main セレクタ

#main{
}

#main」という部分はCSSのセレクタ(適用範囲)を指します。

記事部分は「main」というid名がつけられた「mainタグ」によって囲まれているので、このセレクタに対してCSSを適用させることができます。

border プロパティ

    border: 1px solid #ccc;

border」は線に関するスタイルを扱うプロパティです。

線の太さ、線のデザイン、線の色の順番で指定していきます。

この場合は線の太さは1pxsolid(一本線)で#ccc(淡いグレー)となります。

Cocoonのデフォルトの枠線の多くはこの#ccc(淡いグレー)が使われているのでデザインとして違和感なく馴染みます。

border-radius プロパティ

    border-radius: 0px;

border-radius」は枠線の丸みに関するプロパティです。

数字を大きくすれば丸みが大きくなります。

Cocoonのデフォルトでは4pxほど元から丸みがある設定になっています。

コメント