Cocoonスキン『ミックススキン』の特徴

スキンの特徴

以前からやろうと思っていた、ミックスシリーズ(ミックスグリーン、ミックスブルー、ミックスレッド)のアップデートがようやくできました!

ミックスシリーズの特徴を書いてみます。

サイドバーの上に「スキン切り替え」プルダウンを用意したので、それぞれのスキンに切り替えて、デザイン、色、動作などを確認することができます。

グローバルメニュー

前バージョンでは、メニューにマウスを乗せた時に文字と文字の間を少し広げてましたが、文字がメニューの幅を超えることが多かったようなので、普通のメニューに戻しました。

マウスを乗せると、単純に背景が白っぽくなるだけです。

エントリカード、ブログカードのマウスホバー

エントリカードやブログカードにマウスを乗せるとふわっと浮きますが、前バージョンより浮き幅を小さくしました。

トップページで動きを確認することができます。

ページネーション

ページ番号のボタンは丸いボタンに変更して、マウスを乗せるとちょっとだけ浮くようにしました。

トップページに戻って、画面下でページネーションの動きを確認することができます。

見出しの変更

続いて、見出しの変更。

見出し(H2)

H2の見出しです。

前バージョンでは、先頭の文字のみ大きくなるものでしたが、WordPressのエディタでは先頭文字が正しく編集できない問題があったため、先頭文字を大きくするのをやめました。

あわせて、吹き出しやグラーデーションもやめて、シンプルなH2に変更しています。

見出し(H3)

H3の見出しです。

見出し(H4)

H4の見出しです。

見出し(H5)

H5の見出しです。

見出し(H6)

H6の見出しです。

テーブル

テーブルも色を変更しています。

表のタイトル
ヘッダーヘッダー
項目項目
項目項目
項目項目

引用

引用は意外と使うので、標準から変更しています。

Cocoonは、SEO・高速化・モバイルフレンドリーに最適化した無料テーマです。

見た目はシンプルですが、初めての方でも感覚的に使えるように便利な機能を織り込んで作りました。

100%GPLテーマなので自由にご利用いただけます。

目次

上の方を見るとかわると思いますが、目次はタイトルに色をつけただけのごくシンプルなものです。

ブログカード

ブログカードはこんな感じ。

人気記事のランキング

標準のランキングよりちょとだけ派手にしてみました^^

以上ですが、細かいところも含めると前バージョンから結構変更しています。

サイドバーの上に「スキン切り替え」プルダウンを用意したので、それぞれのスキンに切り替えて、デザイン、色、動作などを確認することができます。

コメント

  1. ヒロアキhiroaki より:

    コメントを入れてみました!

  2. katsuhiko より:

    はじめまして。
    この度ブログを始めるにあたってヒロアキさんのミックスブルースキンを使わせて戴こうと思っています。
    ちょっとしたカスタム(色変更)に関して2点ご相談させてください。

    (1)エントリーカード、ブログカードの背景色グラデーション(薄青〜薄赤)を、単色またはブルー系に統一したい。
    (2)サイドバーの見出しカラー(薄赤〜ブルー)をブルー系に統一したい

    お忙しいと思いますが、ご都合着つきましたらご教示いただけたらと思います。
    どうぞよろしくお願いしますm(_ _)m

    • ヒロアキヒロアキ より:

      katsuhikoさん

      お問い合わせありがとうございます、ヒロアキです!

      さっそくですが、ご質問の件について回答いたします。

      ——————————————————-
      > (1)エントリーカード、ブログカードの背景色グラデーション(薄青〜薄赤)を、単色またはブルー系に統一したい。
      次のCSSを子テーマのstyle.cssに追加すれば、グラデーションがなくなって青い色(#e9e9fb)になります。

      .entry-card-wrap.a-wrap,
      .related-entry-card-wrap.a-wrap,
      .prev-post.a-wrap,
      .next-post.a-wrap {
        background: none;
        background-color: #e9e9fb;
      }

      ※背景の色は、#e9e9fbをお好きな色に変更してください。

      ——————————————————-
      > (2)サイドバーの見出しカラー(薄赤〜ブルー)をブルー系に統一したい
      2色のボーダーのことですよね?
      こちらも、以下のCSSを子テーマのstyle.cssに追加すれば、ブルー系(#3261ab)になります。

      .sidebar h3:after {
        border: none;
      }
      
      .sidebar h3 {
        border-bottom: solid 3px #3261ab;
      }

      ※ボーダーの色は、#3261abをお好きな色に変更してください。

      色を変更したイメージ

      子テーマのstyle.cssに追加する方法は以下を参照してください。
      子テーマのCSSにコードを追加する手順

      以上、よろしくお願いします!

  3. katsuhiko より:

    ヒロアキさん

    お世話になります。
    大変御丁寧な上に、ものすごく早いご回答本当に感謝します。

    お教えいただいたcssで完璧に解決しました!

    なかなか思い通りにいかず困っていました。。助かりました。
    どうもありがとうございます。
    スキン活用させていただきます!

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