コピペで簡単!Cocoonの記事部分を枠線で囲う方法

Cocoon 記事枠線 WordPress

Cocoonの記事部分を枠線で囲う方法を紹介します。

先代のSimplicityというテーマを使っていた人なら分かると思うんですが、もともと枠線で囲まれてたんですよね。

それがCocoonになってからなくなったわけなんですが…。違和感を感じる人も中にはいるんじゃないでしょうか?

 

といっても、これは完全に好みの問題です。

枠線があった方がサイトに締まりが出る気はしますが、枠がないことによる解放感に魅力を感じる人もいるでしょう。

そんなわけで、Simplicityから移行して違和感を感じている人は、参考程度に試してみてください。超簡単ですので。

スポンサーリンク

Cocoonの記事部分を枠線で囲む方法

枠線はcssを使うことで簡単に実装できます。

外観」→「テーマの編集」画面より、「スタイルシート(style.css)」を開きましょう。

CSSコードはここに追記していけばデザインが反映されます。

必ずCocoonの子テーマを使うように注意!

スタイルシートにコードをコピペするだけ

それでは、実際のコードを見ていきましょう。

こちらをご覧ください。

#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に関する知識をまとめた記事があるので、最初にこっちを見ると理解しやすいと思いますよ!