現在デフォルトスキンとして「Momoon(アクア)」を適用中。

Cocoonを少しリッチな見た目に「COLORS」スキン6種作成

スキン
この記事は約2分で読めます。

Cocoon用のスキンを6種類作成しました。

Cocoonデフォルトのスタイルは、あえて装飾をつけていません。

Cocoonのデフォルトスタイルをシンプルにしている理由
Cocoonは、デフォルト状態ではシンプルにカスタマイズしやすいように。凝ったデザインは、スキンで手軽に変更という仕様にしたいと考えています。

最近ようやく、機能追加や要望も落ち着いてきたので、スキンを作る時間を取れるようになります。

「COLORS」スキンでは、Cocoonデフォルトのデザインよりも、少しリッチな装飾となるようにスタイリングしました。

スポンサーリンク

「COLORS」スキン

「COLORS」スキンは、とりあえず以下の6種類を作成しました。

  1. レッド
  2. ブルー
  3. イエロー
  4. グリーン
  5. ピンク
  6. ブラック

とりあえずは、戦隊ヒーローもののオーソドックスなレンジャー色分を作ってみました。

見た目はこんな感じ。

    レッド

    colors-red

    表示例。

    Cocoon 1.3.8公開。「COLORS」スキン5種追加。
    Cocoon 1.3.8のアップデート情報。Cocoonの見た目を多少リッチに。

    ブルー

    colors-blue

    表示例(このページ)。

    Cocoonを少しリッチな見た目に「COLORS」スキン6種作成
    サイトに合わせた色を選べるスキンを6色分作成しました。

    イエロー

    colors-yellow

    表示例。

    Cocoon 1.3.9公開。評価用のスターショートコード、ROOMフォローボタン実装。
    Cocoon 1.3.9のアップデート情報。評価用の星をつけるショートコードと、ROOMフォローボタンの実装。

    グリーン

    colors-green

    表示例。

    Cocoon 1.4.0を公開。SEOに対応したLazy Load機能を実装。
    Cocoon 1.4.0のアップデート情報。主に新しい仕様のPageSpeed Insights対策。

    ピンク

    colors-pink

    表示例。

    Cocoon 1.4.2公開。アイコンフォントの非同期読み込み機能追加。不具合修正。
    Cocoon 1.4.2のアップデート情報。ちょっとした高速化機能。

    ブラック

    colors-black

    表示例。

    Cocoon 1.4.1公開。COLORS(ブラック)スキン、シェアボタン2種追加。
    Cocoon 1.4.1のアップデート情報。落ち着いた色のスキン追加。

    見出し

    見出しはこんな感じになっています(ブルー)。

    カラーズスキンの見出し

    とりあえず、見やすさ重視。

    使い方

    「COLORS」スキンを利用するには、「Cocoon設定」の「スキン」タブから「COLORS」とついたものを選択してください。

    カラーズスキンの選択

    とりあえず、Cocoonデフォルトよりは装飾っ気があると思います。

    スキンに不具合があればご報告ください

    「デザインが崩れている」とか「ここにデザインが適用されていない」等の不具合がありましたら以下でご報告いただければ幸いです。

    Cocoon フォーラム
    Cocoon ディスカッション掲示板

    オリジナルスキンを紹介させてください

    スキンを作成した場合は、是非お知らせください。

    スキンを作成した際にはぜひ当サイトで紹介させてください
    スキンを作成したならば、是非当サイトで紹介させていただければと思います。また、親テーマに同梱させていただければ幸いです。

    当サイトの記事で紹介させていただきます。

    スキン
    スポンサーリンク
    わいひら

    無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

    わいひらをフォローする
    わいひらをフォローする
    おすすめレンタルサーバー

    性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

    ◎LiteSpeedを用いた高速サーバー(完全SSD)
    ◎http/2・QUIC(高速化プロトコル)に対応
    ◎東京・大阪でリージョン選択が可能
    ◎プランのアップ・ダウングレードが自由自在
    ◎同サービス内でドメイン管理が可能
    ◎転送量が多い
    ◎毎日無料バックアップ(14日分)
    ◎復元ポイントを指定して復旧可能(無料)
    ◎アダルト・出会い系サイト可
    ◎ドメインとサーバー代のチャージ払いが可能
    ○サーバ引っ越しオプションあり(有料)
    サービス運営期間:1年4ヶ月

    1年以上の契約をする場合は、クーポンコード入力でさらに20%割引(※2019/12/18 17:00まで)。

    クーポンコード:Y2KIC92J9Y

    クーポンの使用方法はこちら

    安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

    ◎nginxを用いた高速サーバー(完全SSD)
    ◎老舗サーバーなので安定感抜群
    ◎ディスク容量が多い
    ◎転送量が多い
    ◎同サービス内でドメイン管理が可能
    ○http/2(高速化プロトコル)に対応
    ○毎日無料バックアップ(14日分)
    △DBは7日分だけ無料復旧可能(ファイルは有料)
    ×プラン変更でCPUのスペックアップができない
    ×プラン変更しても即時反映されない
    ×アダルト・出会い系サイト不可
    サービス運営期間:16年

    プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

    ◎LiteSpeedを用いた高速サーバー(完全SSD)
    ◎http/2・QUIC(高速化プロトコル)に対応
    ◎プランのアップ・ダウングレードが自由自在
    ◎転送量が多い
    ◎毎日無料バックアップ(14日分)
    ◎復元ポイントを指定して復旧可能(無料)
    ◎アダルト・出会い系サイト可
    ○サーバ引っ越しオプションあり(有料)
    ○サーバー料金をチャージ払いが可能
    サービス運営期間:3年

    とにかく速い。サイトに表示スピードを求めるならココ。

    ◎nginxを用いた高速サーバー(完全SSD)
    ◎プランのアップ・ダウングレードが自由自在
    ◎ディスク容量が多い
    ◎転送量が多い
    ○http/2(高速化プロトコル)に対応
    ○毎日無料バックアップ(14日分)
    ○DB復旧は無料(ファイルは有料)
    ○サーバ引っ越しツールあり
    ○サーバー料金をチャージ払いが可能
    △新しいサービスなので運営櫪がまだ短い
    サービス運営期間:1年2ヶ月

    格安な値段で始められる高機能サーバーです。
    性能も備えつつ最安ならここ。
    サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

    ◎LiteSpeedを用いた高速サーバー(完全SSD)
    ◎激安プランが用意してある
    ◎値段あたりのスペックが高い(コスパ良し)
    ◎サーバ引っ越しオプションあり(無料)
    ◎アダルト・出会い系サイト可
    ○http/2(高速化プロトコル)に対応
    △プランのアップは可能だがダウンは不可
    △毎日自動バックアップ(1日分)
    △前日のバックアップからのみ復元できる(無料)
    サービス運営期間:3年

    Cocoon

    コメント テーマの質問はフォーラムへ

    1. mame より:

      始めまして、先日cocconを利用させて頂いております。
      サイドバーの文字がモバイル版では表示できず、
      困り果てています。
      ご教示頂ければ幸いです。

      Cocoon Child: スタイルシート style.cssに

      #sidebar h3{
      font-size: 1.0em;
      background: #95d666; /*背景色*/
      padding: 0.5em;/*文字周りの余白*/
      color: white;/*文字を白に*/
      border-radius: 0.3em;/*角の丸み*/
      letter-spacing: 0.2em;/*文字間*/
      }
      #sidebar h3:before {
      content: ‘*’;
      color: #f9f6ef;
      margin-right: 3px;
      }

      を書き込んでおります。

    タイトルとURLをコピーしました