サイト全体に「モダンブラック 」スキン適用中。

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

スキン

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デフォルトよりは装飾っ気があると思います。

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

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

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

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

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

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

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

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

    ◎LiteSpeedを用いた高速サーバー(完全SSD)
    ◎http/2・QUIC(高速化プロトコル)に対応
    ◎東京・大阪でリージョン選択が可能
    ◎プランのアップ・ダウングレードが自由自在
    ◎同サービス内でドメイン管理が可能
    ◎転送量が多い
    ◎毎日無料バックアップ(14日分)
    ◎復元ポイントを指定して復旧可能(無料)
    ○サーバ引っ越しオプションあり(有料)
    △アダルト・出会い系サイト可(条件あり)
    △開始したてなので運営能力は未知数(対応良)

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

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

    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;
      }

      を書き込んでおります。

      • わいひら わいひら より:

        コメントの案内にもあるように、よろしければトピックの方に書き込んでいただいてよろしいでしょうか。
        https://wp-cocoon.com/community/customs/
        コメントだと、機能が貧弱なので。書き込んだ内容をコピペで良いのでトピックを立てて書き込んでいただければと思います。

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