Cocoonの記事部分を枠線で囲う方法を紹介します。
先代のSimplicityというテーマを使っていた人なら分かると思うんですが、もともと枠線で囲まれてたんですよね。
それがCocoonになってからなくなったわけなんですが…。違和感を感じる人も中にはいるんじゃないでしょうか？
といっても、これは完全に好みの問題です。
枠線があった方がサイトに締まりが出る気はしますが、枠がないことによる解放感に魅力を感じる人もいるでしょう。
そんなわけで、Simplicityから移行して違和感を感じている人は、参考程度に試してみてください。超簡単ですので。
Cocoonの記事部分を枠線で囲む方法
枠線はcssを使うことで簡単に実装できます。
「外観」→「テーマの編集」画面より、「スタイルシート（style.css）」を開きましょう。
CSSコードはここに追記していけばデザインが反映されます。
スタイルシートにコードをコピペするだけ
それでは、実際のコードを見ていきましょう。
こちらをご覧ください。
#main{
border: 1px solid #ddd;
border-radius: 4px;
}
これが記事部分を囲う枠線をつけるcssです。超簡単。
先ほどのスタイルシートに、このコードをコピペすれば枠線がつくはずです。
コードの意味を解説
せっかくなので内容を紹介しておきますね。
時間があればついでに勉強していってください！
＃main セレクタ
#main{ }最初の「＃main」はcssの適用範囲（セレクタ）を指しています。
記事の部分は「main」というid名がつけられた「mainタグ」によって囲まれているので、このセレクタに対してcssを適用させることで記事部分に外枠線が付きます。
より詳しく設定することで、一部ページのみに適用させることもできますよ！
border プロパティ
border: 1px solid #ddd;
borderプロパティはその名の通り、「線（ボーダー）」に関するスタイルを扱うプロパティ。
線の太さ、線のデザイン、線の色の3つを順番に指定しています。
サイトのデザインによっては、線の色を変えてみるのも面白いかもしれませんね。
border-radius プロパティ
border-radius: 4px;
border-radiusプロパティは、枠線の角を丸くするためのプロパティ。
数字を大きくすることでどんどん丸みを帯びていきます。
不要な人は削除してもらってかまいません。
cssを勉強したいならこちらの記事もご覧ください
簡単な紹介でよく分からない人は、一度cssの基礎知識に目を通しておくと良いかもしれません。
cssに関する知識をまとめた記事があるので、最初にこっちを見ると理解しやすいと思いますよ！
