ブログシステム・ワードプレスの有能すぎる無料テーマCocoon。
少しカスタマイズすれは、簡単に有料テーマ級のサイトがサクサク作れます。
ここでは、当リンデンバウム（スピリチュアルサロン）のサイトで行ったCocoonのCSSカスタマイズをご紹介します。
CSSのカスタマイズ
Cocoonでは、親テーマと子テーマをインストールして、子テーマのほうを有効にします。その上で必要に応じて、子テーマのほうのスタイルシート(style.css)にカスタマイズのCSSを追加していきます。
今回わたしが追加したスタイルシート一覧は以下の通り。
/**************************
** 子テーマ用のスタイルを書く
***************************/
/* 新着記事表示 */
.new-entry-cards.large-thumb {
display: flex;
flex-wrap: wrap;
}
.new-entry-cards.large-thumb a {
width: 33.333%;
}
/768px以下/
@media screen and (max-width: 768px){
.new-entry-cards.large-thumb a {
width: 50%;
}
}
/480px以下/
@media screen and (max-width: 480px){
.new-entry-cards.large-thumb a {
width: 100%;
}
}
/* メインカラムとサイドバーの背景色指定 */
.main {
background-color: #e7efde;
}
.sidebar {
background: rgba(255,255,255,0.7);
}
/*フロント固定ページのタイトルを非表示 */
.home.page .entry-title{
display: none;
}
/* 固定ページの投稿日を消す */
.page .post-date {
display: none;
}
/* ブログカード */
.blogcard {
padding: 1rem;
color: #666;
position: relative;
border-color: #629b2d !important; /* 枠線の色 */
background-color: #f8f8f8;
}
うむ。いっぺんに並べられても、ようわからんゾイ。
というわけで、一つずつ解説していきますね。
新着記事表示
これはトップページのために記述しました。
まず、このスタイルシートを追加します。
/* 新着記事表示 */
.new-entry-cards.large-thumb {
display: flex;
flex-wrap: wrap;
}
.new-entry-cards.large-thumb a {
width: 33.333%;
}
/768px以下/
@media screen and (max-width: 768px){
.new-entry-cards.large-thumb a {
width: 50%;
}
}
/480px以下/
@media screen and (max-width: 480px){
.new-entry-cards.large-thumb a {
width: 100%;
}
}
次に、 ショートコードを新着記事を表示したい場所に記入します。
[new_list count=9 type=large_thumb children=1]
そうすると、こうなる！（ジャジャーン）
もちろんレスポンシブ対応で、スマホ表示だとこんな感じに。
――なんてすごいドヤってますけど、わいひらさんの書いてくれたコードをコピペしただけでーす。エヘヘ。
メインカラムとサイドバーの背景色指定
Cocoonって、白をメインとしたテーマなんです。
作成者のわいひらさんは、このようにおっしゃっています。
テーマ名のCocoon自体にも、以下のような意味があります。
https://wp-cocoon.com「シンプル」
繭
居心地のいい場所
繭に包む
(繭で包むように)保護する
新たな始まり
テーマ名をCocoon（繭）としたのは、繭のように白い、シンプルなテーマを作りたかったからです。
白いテーマが一番読みやすいと思うので。
素晴らしい！シンプルな白！いいですね！
でも、ウチみたいな仕事用サイトだとコーポレートカラーというものがございますので、Cocoonの理念自体はリスペクトしつつも変更させていただきました。白いいよね！私も大好きだよ！
/* メインカラムとサイドバーの背景色指定 */
.main {
background-color: #e7efde;
}
.sidebar {
background: rgba(255,255,255,0.7);
}
サイドバーはPC表示限定ですが、背景に木の画像を持ってきてその木目が透けているような感じに設定してあります。
これもわいひらさんの書いたコードをいじっただけです。
フロントページをサイトらしくカスタマイズする
「ワードプレスみを消す」というのは、一般的なブログでは大して重要なポイントじゃなかったりするのですが、コーポレートサイトとなると重要です。「ブログっぽい」と軽く見えてしまいます。
もちろんその軽さは「親しみやすさ」にもつながるので、一概に悪いとは言えません。まとめサイトなんかはむしろブログっぽいほうが良いでしょう。あくまで適材適所という話です。
特定の固定ページをトップページに指定し、1カラムにします。次に、こちらのスタイルシートを追加すると「サイト」っぽくなります。
/フロント固定ページのタイトルを非表示/
.home.page .entry-title{
display: none;
}
/固定ページの投稿日を消す/
.page .post-date {
display: none;
}
ホームページだけじゃなくて固定ページ全般の投稿日も、不要なので消しました。
ブログカード
これはなんでいじったんだっけ…枠線の色を変えたかったのか？
もうCocoon廃すぎてやれることやりたすぎてブルブルして来てるので、意味なくカスタマイズしたいわけです。機能的にはいじる必要は全くありません。
/* ブログカード */
.blogcard {
padding: 1rem;
color: #666;
position: relative;
border-color: #629b2d !important; /* 枠線の色 */
background-color: #f8f8f8;
}
最後に
このページではCSSでのカスタマイズにしぼってお伝えしています。Cocoonはデフォルトで色んなことができてしまうテーマなので、Cocoon設定でできることは以下の記事などを参照してください。
