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

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

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

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

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

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

Cocoonカスタマイズ他にもやってます!

他にもいろいろCocoonカスタマイズをやってますので良かったらご覧ください!

あわせて読む Cocoonカスタマイズをまとめ!おしゃれなものや機能性をあげるものなど!

Cocoonカスタマイズまとめ!おしゃれなものや機能性をあげるものなど!
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

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

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

        • >なすあやさん

          良かったです!

          横幅の調整は下記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に書かれていると思うので該当箇所の数値を変更してみてください。

          もし変わらなければまたご連絡をお待ちしてます!

          • ぽんひろ様

            お返事が遅くなり、大変失礼いたしました。

            ご丁寧なご回答のおかげさまで、無事こちらの思い通りに表示されました。
            ありがとうございました。

            今後、身の回りでWordPressの話題になるたびに、cocoonとぽんひろ様を紹介させていただきます!

  5. ぽんひろ様

    はじめまして。
    とてもカワイイseasonのスキンを作っていただきありがとうございます。
    数日前にサイトを立ち上げ、気に入って使わせていただいております。

    細かいことかもしれませんが、フッターのリンクのホバー時に文字も背景も白くなってしまい見ずらいことがあります。

    https://d.kuku.lu/9ac5ce6b85
    実際は画像よりもっと白い感じです。

    ヘッダーメニューのように反転してくれるといいのですが、どこかにcssなど変更する方法などは記載ありますでしょうか?

    お忙しいところ申し訳ありませんが、よろしくおねがいします。

    • >くるみさん

      はじめまして!コメントありがとうございます!

      確かに文字見えなくなりますね!

      下記コードをstyle.cssにコピペしてみてください。変わらなかったらすみません!

      
      #footer a:hover {
          color: #89c997;
      }
      

      カラーコードは各テーマのメインカラーにすると綺麗に見えるかもです。

      春:#89c997
      夏:#00a0e9
      秋:#9b7b6c
      冬:#88abda

      • ぽんひろ様

        早速のご対応ありがとうございます!
        春と夏を使わせてもらっていたので助かりました。
        無事に表示できました!

  6. >なすあやさん
    >くるみさん

    無事動いたみたいでよかったです!
    また何かありましたらご連絡ください!

ページトップへ