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

CocoonスキンSeason(シーズン) WEB

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

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

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

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

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

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

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

※重要

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

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

そもそもスキンとは?

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

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

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

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

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

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

春歌秋冬の配色

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

Seasonの配色

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

Spring

spring-demo

Summer

summer-demo

Autumn

autumn-demo

Winter

winter-demo

 

見出し

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

Spring 見出しスタイル

Summer 見出しスタイル

Autumn 見出しスタイル

Winter 見出しスタイル

ブログカード

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

Season ブログカードスタイル

SNSボタン

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

season SNSボタン

プロフィール

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

Season プロフィールスタイル

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

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

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

season リスト1

season リスト2

season リスト3

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

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

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

season ボックスデザイン1

season ボックスデザイン2

season ボックスデザイン3

season ボックスデザイン4

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

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

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

season アコーディオン

デモサイトはこちら

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

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

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

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

Springダウンロード

Summerダウンロード

Autumnダウンロード

Winterダウンロード

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

バグや表示の崩れ、やり方がわからない、カスタマイズしたい場合

Cocoonはカスタマイズ性に優れているので、全てをテストすることが難しく、もしかしたら環境によって表示が崩れる場合がございます。

確認できているところはスキン制御を行っています。

その他に見つかったらお手数ですが連絡をいただけると助かります。

また、さらにカスタマイズをしたいという方もご相談受け付けていますので、お気軽にお問い合わせください。

コメント

  1. 凄くおしゃれな感じになっていますね
    使ってみます。

    素敵な機能、ありがとうございます

    • おぉー!
      そういっていただけると作った甲斐があります!

      ありがとうございます!

  2. 素敵なスキンが紹介されていたので
    拝見させていただいていたところ…

    https://ponhiro.com/cocoon-box-design/
    ↑ こちらのページに、参考サイトとして
    https://love-wave.com/css-waku/
    うちのブログが紹介されていたので驚きました!

    リンクを貼って頂いて、ありがとうございます。

    これからもお互いに「Cocoon」を盛り上げながら
    ブログ運営も頑張っていきましょう。

    それでは失礼いたします。

    • Purple Life(りこ)さん

      まさかのご本人様登場!!
      ボックスのCSS大変参考にさせていただきました。
      こちらこそありがとうございます。

      >これからもお互いに「Cocoon」を盛り上げながら
      >ブログ運営も頑張っていきましょう。
      そうですね!頑張りましょう!

      Purple Life(りこ)さんのサイトには他にも素敵なボックスたくさんあるので、カスタマイズしたい方必見ですね!

  3. はじめまして♪
    Cocoonで「Season」のスキンが選択できるようになるのを今か今かと待ちわびてまして、
    昨日、スキンを「Season」が変更することができました。

    素敵なスキンを作っていただいて、本当にありがとうございます!
    「春」「夏」「秋」「冬」と4シーズンとも今後利用させていただく予定です。(^^)

    またぽんひろさんのブログも非常に勉強になりました。
    これからも、参考にさせていただきますので、今後ともよろしくお願いいたします。

    • >けろら〜さん

      はじめまして!
      そういっていただけるととても嬉しいです♪

      ちょくちょくデザイン崩れなど変更していますのでCocoonは常に最新版にしていただけるとありがたいです!

      今後もよろしくお願いいたします!

  4. ぽんひろさん

    はじめまして。
    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

    こちらで対策できることなど、ご教授いただけますと幸いです。
    よろしくおねがいします。

    • >なすあやさん

      ありがとうございます。

      お知らせしておくべきでしたがグローバルメニューの重複問題は最近修正しましたので最新版を新たにダウンロードするか、次回の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;
      }
      

      お手数おかけして申し訳ありませんが、必ず最新版に変更してからでお願いします。

      上手くいかない、もっとこうしたいなどあれば改めてご連絡ください!

      • >ぽんひろさん

        ご丁寧にご回答くださり、ありがとうございます!
        cocoonをアップデートし、ご指示いただいた通りに
        スタイルシートに追記しましたところ、
        重複表示は解消され、モバイル版も思い通りの表示になりました。

        ただ、デスクトップのメニューが下記のようにクシャっと
        なってしまい…。
        https://i.gyazo.com/04cea57ed1aa2d9bc282159dea74157f.png

        こちら、解消法ありますでしょうか?

        お手数おかけしますが、何卒宜しくお願いします。

ページトップへ