Cocoonスキン「Season(シーズン)」を作りました！【WordPress】

2020.03.18

Cocoon愛用者の方もそうでない方もこんにちは！ぽんひろ(@ponhiroo)です。

タイトルの通り、Cocoonのスキンを作成したので紹介します！

名前は「Season(シーズン)」です。春夏秋冬の4種類の配色に分けられたスキンになっています。

オリジナルのスタイルは20種類以上！既存のスタイルも大幅チェンジしました！

Cocoonは元々シンプルなデザインが特徴でしたが、どこか「無機質な男らしさ」を感じる点がありました。

それはそれで良いのですが女性がデフォルト(最初の状態)で使うにはちょっと抵抗があるかなと。カスタマイズをしたくても初心者だとどうしても難しかったりしますよね。

そういった方に向けて、優しさを感じられるデザインを目指して作成してみました。

※重要

AMPには対応していないのでAMPを切るかCocoon最新版まで利用を控えるようにお願いします。

AMPページはスキンが制御されるようになります。

クリックでジャンプ

そもそもスキンとは？
春歌秋冬の配色
見出し
ブログカード
SNSボタン
プロフィール
【オリジナル】リスト(箇条書き)10種類
【オリジナル】ボックス10種類
【オリジナル】アコーディオン
デモサイトはこちら
スキンのダウンロードはこちら

そもそもスキンとは？

分からない方もいると思うので、初めにCocoonのスキンについて説明します。

まず、CocoonとはWordPressのテーマで無料で利用可能です。そのCocoonに搭載されている機能の一つに「スキン」があります。

スキンとはデザインのテンプレートのようなもので一瞬でデザインが変更できるものです。

スキンの変更はWordPressの管理画面にあるCocoon設定という項目から行えます。スキンという項目から変更できますが、そこにあるのは公式で同梱されたものだけになります。

Seasonもありがたいことに同梱させていただくことになりましたので、そこから変更が可能になる予定です。

Cocoonについて詳しくは公式をご覧ください。

Cocoon

SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。

春歌秋冬の配色

Seasonは春夏秋冬の4つの配色があります。

文字色など細かいところも色を変えているので季節感が出てるのではないかなと思います。

Spring

spring-demo

Summer

summer-demo

Autumn

autumn-demo

Winter

winter-demo

見出し

それぞれの見出しのスタイルです。

ブログカード

ブログカードのスタイルも変更しました。詳細はデモページをご覧ください。

SNSボタン

SNSボタンはこのようになっています。

プロフィール

プロフィールはこのようになっています。

【オリジナル】リスト(箇条書き)10種類

当サイト(下記リンク参照)のオリジナルスタイルのリストを同梱しています。

【Cocoon】全40通り！おしゃれなリスト(箇条書き)を作る！コピペOK！

Cocoonのリスト(箇条書き)のカスタマイズ記事です。組み合わせ次第で40種類作れます。色やアイコンも変えられるようになっています。設定は面倒ですが一度カスタマイズしてしまえば簡単にリスト(箇条書き)が使えるのでオススメです。他にもCocoonカスタマイズをやってるのでよかったらそちらもご覧ください。

季節によって色が変わります。詳細はデモページをご覧ください。

【オリジナル】ボックス10種類

当サイト(下記リンク参照)のオリジナルスタイルのボックスを同梱しています。

【Cocoon】コピペで簡単！タイトル入力可のおしゃれなボックスを作る！

Cocoonカスタマイズです！オリジナルのボックスを作ります！Cocoonにあるボックスはシンプルで使いやすいですが、それよりも見やすくてオシャレなボックスを紹介します！コピペで出来るので簡単かと思います！他にもCocoonカスタマイズしてますのでそちらも良かったらご覧ください！

季節によって色が変わります。詳細はデモページをご覧ください。

【オリジナル】アコーディオン

クリックすると表示されるアコーディオンを同梱しています。

詳細はデモページをご覧ください。

デモサイトはこちら

デモページ

↓サイドバー(スマートフォンの場合は画面下部)からスキンを変更できます。

スキンのダウンロードはこちら

~~本体に同梱されるまでは手動でダウンロード、設定する必要があります。~~
Cocoonに正式に同梱していただいたのでCocoonを最新版にしていただければスキン設定から変更可能です。

※最新版 2019/05/12
・モバイルヘッダーメニューとPCヘッダーメニュー分割
・SNSアイコンの数値の配置変更
・モバイルフッターメニュー微調整
・iPhoneXのセーフエリア調整

設定方法などスキンについての詳細は公式を参考にしてください。

Cocoonスキンの機能の仕様

Cocoonのスキン機能に関する詳細な仕様書です。スキン機能を利用すれば、洋服を着替える感覚でサイトデザインを変更することが可能です。

名前:papua :投稿日：2019/05/04(土) 06:22:49 ID：A2MDY3MTE
凄くおしゃれな感じになっていますね
使ってみます。
素敵な機能、ありがとうございます
返信

名前:ぽんひろ :投稿日：2019/05/04(土) 13:18:59 ID：U1ODA0MTk
おぉー！
そういっていただけると作った甲斐があります！
ありがとうございます！
返信

名前:Purple Life（りこ） :投稿日：2019/05/05(日) 21:39:42 ID：AyNjU4Nzc
素敵なスキンが紹介されていたので
拝見させていただいていたところ…
https://ponhiro.com/cocoon-box-design/
↑　こちらのページに、参考サイトとして
https://love-wave.com/css-waku/
うちのブログが紹介されていたので驚きました！
リンクを貼って頂いて、ありがとうございます。
これからもお互いに「Cocoon」を盛り上げながら
ブログ運営も頑張っていきましょう。
それでは失礼いたします。
返信

名前:ぽんひろ :投稿日：2019/05/07(火) 12:59:56 ID：kzNTQ4OTQ
Purple Life（りこ）さん
まさかのご本人様登場！！
ボックスのCSS大変参考にさせていただきました。
こちらこそありがとうございます。
>これからもお互いに「Cocoon」を盛り上げながら
>ブログ運営も頑張っていきましょう。
そうですね！頑張りましょう！
Purple Life（りこ）さんのサイトには他にも素敵なボックスたくさんあるので、カスタマイズしたい方必見ですね！
返信

名前:けろら～ :投稿日：2019/05/13(月) 09:48:22 ID：E0NDE4OTY
はじめまして♪
Cocoonで「Season」のスキンが選択できるようになるのを今か今かと待ちわびてまして、
昨日、スキンを「Season」が変更することができました。
素敵なスキンを作っていただいて、本当にありがとうございます！
「春」「夏」「秋」「冬」と4シーズンとも今後利用させていただく予定です。(^^)
またぽんひろさんのブログも非常に勉強になりました。
これからも、参考にさせていただきますので、今後ともよろしくお願いいたします。
返信

名前:ぽんひろ :投稿日：2019/05/14(火) 15:51:21 ID：c0MTk0NjM
>けろら〜さん
はじめまして！
そういっていただけるととても嬉しいです♪
ちょくちょくデザイン崩れなど変更していますのでCocoonは常に最新版にしていただけるとありがたいです！
今後もよろしくお願いいたします！
返信

名前:なすあや :投稿日：2019/05/15(水) 00:14:27 ID：c3MjE4Nzg
ぽんひろさん
はじめまして。
Seasonスキン、スッキリ可愛くて早速サイトに反映しました。
ところが、モバイルのメニュー（グローバルナビ）が重複して表示されてしまいます。
▼Seasonスキン適用中の私のサイト
https://i.gyazo.com/4714b1d649d1102dcf1f437ac3cb7b3f.png
cocoonの外観＞メニュー設定はこのようにしています。
https://i.gyazo.com/a9efd505d64316fe6b98b4d1539dd0e5.png
スキン変更前は、上部の横スクロール形式のメニューは出ておりませんでした。
私のサイトのユーザはITリテラシーが低い人ばかりなので、メニューの横スクロールよりも、下記のように見せたいです。
https://i.gyazo.com/20ed23c8ff664829cb3beb101b4bc1c9.png
私のサイトのURLは以下となります。
https://oyaben.tokyo
こちらで対策できることなど、ご教授いただけますと幸いです。
よろしくおねがいします。
返信

名前:ぽんひろ :投稿日：2019/05/15(水) 12:28:16 ID：U2OTk5MjI
>なすあやさん
ありがとうございます。
お知らせしておくべきでしたがグローバルメニューの重複問題は最近修正しましたので最新版を新たにダウンロードするか、次回のCocoonアップデートを待っていただくかになります。
ただ、なすあやさんのように表示したい場合はCSSを編集する必要があります。
最新版にすると横スクロールだけになってしまうので「Wordpress管理画面→外観→テーマエディター→スタイルシート(子テーマ)」に下記コードをコピペしてください。
コピペする場所は「以下の必要ならばここにコードを書く」の下になります。
/*1030px以下*/
@media screen and (max-width: 1030px){
/*必要ならばここにコードを書く*/
ここにコピペ！！！！！
}
コード
```
 .navi-in> .menu-mobile {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
}
#header-container #navi a{
  padding:0.5em 0;
}
```
お手数おかけして申し訳ありませんが、必ず最新版に変更してからでお願いします。
上手くいかない、もっとこうしたいなどあれば改めてご連絡ください！
返信

名前:なすあや :投稿日：2019/05/20(月) 01:04:21 ID：Y2NjQ0MjU
＞ぽんひろさん
ご丁寧にご回答くださり、ありがとうございます！
cocoonをアップデートし、ご指示いただいた通りに
スタイルシートに追記しましたところ、
重複表示は解消され、モバイル版も思い通りの表示になりました。
ただ、デスクトップのメニューが下記のようにクシャっと
なってしまい…。
https://i.gyazo.com/04cea57ed1aa2d9bc282159dea74157f.png
こちら、解消法ありますでしょうか？
お手数おかけしますが、何卒宜しくお願いします。
返信

名前:ぽんひろ :投稿日：2019/05/20(月) 10:49:07 ID：A3NjQ0MTM
>なすあやさん
良かったです！
横幅の調整は下記CSSを追加してみてください。
```
 #navi .navi-in>ul>li {
    width: 150px;
}
```
150pxは横幅の数値なので好きな数字にして大丈夫です。
もし変更しても変わらない場合は
```
 #navi .navi-in>ul>li {
    width: 150px !important;
}
```
にしてみてください。
あと、高さが余白の影響でずれてしまっているので
```
#header-container #navi a {
    padding: 0;
}
@media screen and (max-width: 1030px)
#header-container #navi a {
    padding: 1em 1.2em !important;
}
```
こちらもいれてみてください。#header-container #navi a はすでにCSSに書かれていると思うので該当箇所の数値を変更してみてください。
もし変わらなければまたご連絡をお待ちしてます！
返信

名前:なすあや :投稿日：2019/05/27(月) 01:18:58 ID：kxODM5ODE
ぽんひろ様
お返事が遅くなり、大変失礼いたしました。
ご丁寧なご回答のおかげさまで、無事こちらの思い通りに表示されました。
ありがとうございました。
今後、身の回りでWordPressの話題になるたびに、cocoonとぽんひろ様を紹介させていただきます！

名前:くるみ :投稿日：2019/05/20(月) 15:21:00 ID：I4Njg2MTA
ぽんひろ様
はじめまして。
とてもカワイイseasonのスキンを作っていただきありがとうございます。
数日前にサイトを立ち上げ、気に入って使わせていただいております。
細かいことかもしれませんが、フッターのリンクのホバー時に文字も背景も白くなってしまい見ずらいことがあります。
https://d.kuku.lu/9ac5ce6b85
実際は画像よりもっと白い感じです。
ヘッダーメニューのように反転してくれるといいのですが、どこかにcssなど変更する方法などは記載ありますでしょうか？
お忙しいところ申し訳ありませんが、よろしくおねがいします。
返信

名前:ぽんひろ :投稿日：2019/05/21(火) 16:17:59 ID：U0ODQwMzI
>くるみさん
はじめまして！コメントありがとうございます！
確かに文字見えなくなりますね！
下記コードをstyle.cssにコピペしてみてください。変わらなかったらすみません！
```
#footer a:hover {
    color: #89c997;
}
```
カラーコードは各テーマのメインカラーにすると綺麗に見えるかもです。
春：#89c997
夏：#00a0e9
秋：#9b7b6c
冬：#88abda
返信

名前:匿名 :投稿日：2019/05/22(水) 11:49:16 ID：gwMjY1MjM
ぽんひろ様
早速のご対応ありがとうございます！
春と夏を使わせてもらっていたので助かりました。
無事に表示できました！
返信

名前:ぽんひろ :投稿日：2019/06/01(土) 17:17:59 ID：YyMDYzNzE
＞なすあやさん
＞くるみさん
無事動いたみたいでよかったです！
また何かありましたらご連絡ください！
返信
名前:アメカイ :投稿日：2019/08/07(水) 08:32:00 ID：E5MTEyODE
フッター上部のページトップへのボタンどうやったら消せますか？
返信

名前:ぽんひろ :投稿日：2019/08/09(金) 12:35:41 ID：UyOTk2MzM
＞アメカイさん
CSSで
.page-top{
display:none;
}
と入力すれば消えるかと思います！
返信

名前:Sally :投稿日：2019/08/18(日) 19:54:12 ID：g4NTU0MjI
ぽんひろさん
はじめまして。
最近サイトを開設したばかりの初心者です。
Seasonのスキンを使用させていただいてるのですが、グローバルメニューバーの下の色が変わっている部分はどうすれば表示する事ができますか？
Summerでいうとメニューバーが青で、その下の黄色の部分の事です。
返信

名前:ぽんひろ :投稿日：2019/08/20(火) 14:31:32 ID：M2OTcxODA
>Sallyさん
はじめまして！
Cocoon設定の通知という項目から設定可能です！
色は変更する必要はありません。
返信

名前:Sally :投稿日：2019/08/20(火) 14:49:28 ID：QzMDQ0NTg
ぽんひろさん
回答ありがとうございます！
あと、いろいろいじってるうちにモバイル版のフッター上部にあったpage topボタンがいつの間にか消えてしまいました。
どうすればまた表示する事ができますか？
また記事へのコメント欄ですが、wordpressの設定では名前とアドレスを必須にするにチェックが入っていても、本文と送信ボタンしか表示されません。なぜでしょうか？
返信
名前:ぽんひろ :投稿日：2019/08/22(木) 13:04:47 ID：g4NjAzNzE
＞Sallyさん
それだけでは問題が特定できないのでサイトURLを教えていただいてもよろしいでしょうか。
問い合わせフォームからでも大丈夫ですので！
返信

名前:MK :投稿日：2019/08/19(月) 04:56:46 ID：EwMDU1NjE
シーズンそれぞれのカラー全般のclassって統一してますか？
『次のページ』や『PageTop』のボタンの色を変えたいんですがclassがわかりません。
返信

名前:ぽんひろ :投稿日：2019/08/20(火) 14:34:24 ID：M2OTcxODA
＞MKさん
全て統一はしていません。
「次のページ」は
#main .pagination-next-link
「PageTop」は
.page-top a
の値を変えれば色を変えられます。
返信

名前:ブログ開設1日目 :投稿日：2021/08/16(月) 01:15:29 ID：c1MjMyNDU
つい先日ブログを始めた者です。
Season　autumnを使わせていただいています。
Page topの色を変えたいと思い、こちらのページに行きつきました。
page-top a　を変更すればとのことですが、
どこに存在するのかがわからず困っております。
もしよろしければご教示ください。
返信

名前:Dai :投稿日：2019/11/10(日) 20:39:28 ID：Y3MTY5MTQ
はじめまして。
ブログを始めたばかりでやっとスキンのこともわかりました。
素敵なスキンで早速設定いたしました！
ボックスやリストが同梱されているということは、リンク先のCSSの設定は要らないということですか？
しかし「スタイル」には見当たらないのでやはりCSSに追記する必要があるのかな？と悩んでいます。
よろしくお願いいたします。
返信

名前:Dai :投稿日：2019/11/10(日) 20:56:00 ID：Y3MTY5MTQ
すいません、AddQuicktagを導入し使えるようになりました。ありがとうございます。
返信

名前:匿名 :投稿日：2020/02/03(月) 14:34:18 ID：IxMTQzOTA
開設したばかりでいろいろいじっているのですが、このスキンでは記事の表示タイプを「縦型カード3列」にすることはできませんか？
一列表示にしたくないのですが、デザインが気に入っているので解決方法があれば教えてください
返信

名前:ぽんひろ :投稿日：2020/02/28(金) 18:18:53 ID：I5NTg5MDI
連絡遅くなりまして申し訳ございません。
記事のカードタイプは固定しており、変更はできない仕様になっています。
返信

名前:naonao :投稿日：2020/03/14(土) 20:52:53 ID：IyNjE3MzQ
seasonを使わせていただいて、すごく気に入ってます！
ただインデックスを「縦型カード2列」に出来ないのが非常に残念です。
コメントを見る限り対応されていないようなのですが、
HTMLやCSSなどで対応出来る方法はないでしょうか？
宜しくお願い致しますm(_ _)m
返信

名前:ぽんひろ :投稿日：2020/03/18(水) 14:46:03 ID：QzNjY5NTE
＞naonaoさん
ありがとうございます！
そうですよね…自分でも何でそうしたのか後悔しています
できることはできるのですがサクッとできるものではないので大変申し訳ないのですが対応は難しいです。。ごめんなさい
返信

名前:初心者ブロガー :投稿日：2020/05/04(月) 12:21:27 ID：M2MzMwNjA
初めまして、こんにちは
ブログを最近はじめてseasonを見た瞬間　
一目ぼれして使わせて貰ってます
わからないながらも色々さわってるのですが
インデックスのカードタイプの２列に表示をしたかったのですが
スキン制御ということで使えません
お忙しいとは思うのですが対応可能には出来ないでしょうか？
宜しくお願いします！
返信

名前:匿名 :投稿日：2020/05/04(月) 14:12:50 ID：M2MzMwNjA
すみません、上のコメント読んでませんでした
対応が難しいとのこと了承しました
返信

名前:匿名 :投稿日：2020/07/17(金) 18:00:03 ID：U2MzA5MTM
Summerのやつオシャレですね！
返信

名前:ぽんひろ :投稿日：2020/08/09(日) 15:46:49 ID：g0MDQxMzc
ありがとうございます！
返信

名前:katsuhiko :投稿日：2021/03/31(水) 11:43:59 ID：QzNDk3Mzk
はじめまして。
season、数あるスキンの中で群を抜いて文字サイズやレイアウトのバランスが素晴らしいです。
自分がおじさんなので配色に関して少し落ち着いた感じに変更できたら嬉しいなと思っていました。
…が、
過去質問や記事など確認したところ、基本３色はかなり細かく（classなど）指定されているようです。
簡単なものではなさそうですね（-_-;）
いつの日にか、大人バージョン配色のスキンなども期待しております！
返信
名前:やぎ :投稿日：2021/04/29(木) 13:11:45 ID：YzMjM5NjA
seasonを利用しています。
とても可愛くて非常に気に入っています！
お聞きしたいのですが、HPのトップページに表示させているSNS等のフォローアイコンが左に寄るのですが、仕様でしょうか？
固定ページと投稿ページはきちんと中央にあり、フォローを促すコメントとズレがないのですが、トップページのみズレていて少し気になったもので…
丸いSNSアイコン、すごく可愛いです！
返信