Cocoonスキン『バブルブルー』を作ってみた

Cocoonスキン『バブルブルー』 追加スキン

Cocoonのスキン「バブルブルー」を作ってみた。

以下、特徴を書いてみます。

サイドバーの「スキン切り替え」メニューから、「バブルブルー」を選ぶと、実際のスキンが確認できます。

コンテンツエリアの背景

背景に泡が表示されます。(というか、ただの丸ですが)

カード全般のホバー

泡が浮かんできます。(ブログカード、関連記事のカード除く、ランキング表示のカードも除く)

本文の見出し

H2です

H3です

H4です

H5です
H6です

ページネーション

テーブル

テーブルのキャプション
ヘッダー ヘッダー
項目左1 項目右1
項目左2 項目右2
項目左3 項目右3
項目左4 項目右4

引用

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

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

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

ブログカード、関連記事カードのホバー

カードのホバーで、「Read More」が表示されます。

↓のブログカードにマウスを乗せると、ホバーの動作が確認できます。

ちなみに、↑のブログでは「バブルブルー」を適用しているので、スキンの全体的な確認ができます。

SNSボタンのホバー

SNSボタンが、マウスホバーで浮いてちょっと影ができます。

更に、ブランドカラー(白抜きできない方)の場合は、背景が透明に。

※この記事の、上か下のSNSボタンで確認できますよ。

「バブル」スキンのダウンロード

「バブル」スキンのダウンロードはこちら

スキンのダウンロード バブルスキン(ブルー、ブラック、ブラウン、グリーン、ピンク)

コメント

  1. おず より:

    試作中のブログにバブルグリーンを利用させていただいています
    ページオンロード時にアニメーションをさせている2重の泡ですがSafariですとoutlineプロパティにborder-radiusが効かないみたいで丸と四角で表示されています
    とりあえずoutlineプロパティの行だけコメントアウトしています
    他の解決法などあればご教授いただきたいです

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

      おずさん

      ヒロアキです!
      バブルグリーン使っていただき、ありがとうございます。

      調べたら、Safariはoutlineのborder-radiusがサポートされていないようですね。
      Safariでは、確認できてなかったです、すみません。

      となると、outlineの二重線をあきらめるしかないですかね。
      ※box-shadowでも二重線にできますが、線と線の間に隙間を作ることができないっぽい。

      すみませんが、ちょっと時間をもらえないですか?(今いろいろ忙しくて)

      いろいろ試してみたいと思います。

      よろしくお願いします。

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

        おずさん

        ヒロアキです。

        box-shadowでなんとかできたので、修正しました。
        このページのサイドバーメニューから「バブル・グリーン」にすると、修正版のCSSになります。

        すみませんが、Safariで確認してもらえないでしょうか。
        ※まだ、バブル・グリーンしか修正していません。

        なお、修正版は以下からダウンロードできます。
        https://zvalinf.info/cocoon-skin/archives/550

        修正版で問題ない場合は、こちらに結果を書いてもらえないでしょうか。
        他の色も修正したいと思います。

        よろしくお願いします。

  2. おず より:

    ヒロアキさん

    お忙しいところ対応いただきありがとうございます
    修正版、バッチリでした

    box-shadowをこういう風に記述すればいいんですね
    勉強になりました

    Mac,iPhone,iPadすべてのSafari(最新版)で確認できました

    • おず より:

      追記です

      まだのんびり試作中ってことで2重丸が直るまでの間はカラフルラインAに変更していました。その間にウィジェットのサイドバースクロール追従に[C]目次を入れる修正をしました

      バブルグリーンを修正いただいたのでスキンを差し替えたところサイドバーがメインカラムと一緒に流れて行ってしまいました
      再度カラフルラインAに戻してみたらちゃんとサイドバーが期待した動作をしています
      style.cssに追記したものを消してみても改善は見られません
      なにか余計なことしちゃっているんでしょうか?

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

      おずさん

      問題なかったということで、他の色も修正しておきます。

      確認ありがとうございました。

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