【Cocoon】コピペでOK！おしゃれなブログにするためのCSS -カード編

CSSカスタマイズ

はじめに

ブログカードをもっとカッコよくしたい！…という気持ち、よくわかります。Cocoonではリンク先の記事をアイキャッチ画像と抜粋文でカード形式にまとめる「ブログカード」機能があり、テキストリンクよりも内容が伝わりやすいんですよね。

でも、デフォルトのデザインはかなりシンプルで味気なく、そのままでは「地味だな…」と感じる方も多いはず。実際、訪問者は見た目の魅力にも敏感で、デザインが素敵だとついクリックしたくなります。

COCOON実装手順

  1. WordPress管理画面にログイン
  2. Cocoon設定メニューに移動
  3. カスタムCSS入力フィールドを見つける
  4. 生成されたCSSコードを貼り付ける
  5. ページを更新し、デザインを確認

ホログラフィックグラデーションカラフルカード

プレビュー

Beautiful Card
  • このカードはホログラフィックな外観とカラフルなアニメーションを特徴としています。
  • グラデーションには、4色の虹色スペクトラム（#ff00ff, #00ffff, #ffff00, #ff69b4）が使用されており、カードが動くたびにホログラフィックな光沢が際立ちます。
  • ホバー時には、カードが0.95から1.05へとスムーズに拡大し、box-shadowが増強されることで、浮遊感を強化します。
  • グラデーションの色相は徐々に変化し、視覚的な豊かさを加味。
  • 背景にはオーラ効果を取り入れ、立体的で深い印象を与えます。
  • さらに、border-radiusとclip-pathでクリエイティブな形状を描き、視覚的な興味を喚起しています。

CSSコード

/* Button with holographic gradient and interactive animation */
.btn-6cgvfgec {
    background: linear-gradient(135deg, #ff00ff, #00ffff, #ffff00, #ff69b4);
    background-size: 300% 300%;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    color: #fff;
    display: inline-block;
    font-size: 1.2rem;
    margin: 20px;
    overflow: hidden;
    padding: 20px 40px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
}

.btn-6cgvfgec:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    background-position: right;
}

.btn-6cgvfgec::before {
    content: "";
    position: absolute;
    top: -200%;
    left: -200%;
    width: 400%;
    height: 400%;
    background: radial-gradient(circle, rgba(255,255,255,0.1), rgba(255,255,255,0));
    transition: all 0.5s;
}

.btn-6cgvfgec:hover::before {
    top: -250%;
    left: -250%;
    background: radial-gradient(circle, rgba(255,255,255,0.3), rgba(255,255,255,0));
}

ギャラクシーオーラカードボタン

プレビュー

Explore the Galaxy
  • このデザインは、ギャラクシーをイメージした深い青から紫のグラデーションを背景に採用し、発光するオーラのような周辺エフェクトを加えています。
  • ホバー時にはカード全体が柔らかく拡大し、2色のグローエフェクトが浮かび上がり、神秘的な雰囲気を演出します。
  • さらに、全体に3D回転アニメーションが加わり、ギャラクシーの立体感を強調します。

CSSコード

.btn-l555ow5l {
    position: relative;
    display: inline-block;
    padding: 20px 40px;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #2e3c8b 100%);
    border: none;
    border-radius: 15px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow 0.4s ease;
    overflow: hidden;
}

.btn-l555ow5l::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(0,0,0,0) 80%);
    transform: translate(-50%, -50%) scale(0.5);
    transition: transform 0.6s ease;
    z-index: 0;
    border-radius: 50%;
}

.btn-l555ow5l:hover {
    transform: scale(1.05) rotateY(15deg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

.btn-l555ow5l:hover::before {
    transform: translate(-50%, -50%) scale(1);
}

メッシュオーロラグラデーションカード

プレビュー

カードを見る
  • このCSSは、カードボタンに対して、見事なメッシュオーロラグラデーションを背景に持たせています。
  • オーロラのように幻想的な色合いを生成するため、特殊なグラデーションを適用しました。
  • ホバー時には、グラデーションがゆっくりと45度交差移動し、微妙に拡大して浮き上がる効果が追加されます。
  • 視覚的効果としては、ソフトなボックスシャドウが追加され、カードの3D効果が強調されています。
  • 全体として、幻想的かつインタラクティブなデザインが実現され、ユーザを包み込むような体験を提供します。

CSSコード

/* メッシュオーロラグラデーションを用いたカードスタイル */
.btn-e5i0hwml {
    background: linear-gradient(60deg, #ff9a9e 0%, #fecfef 70%, #c1cfe1 100%);
    border-radius: 12px;
    color: #ffffff;
    padding: 20px 40px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s, box-shadow 0.3s, background-position 0.5s;
    background-size: 200% 200%;
    display: inline-block;
}

.btn-e5i0hwml:hover {
    background-position: 120% 60%;
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

シャドウ付きフレックスカードレイアウト

プレビュー

カードタイトル

カードの説明文

  • このカードデザインは、コンテナに合わせて配置される柔軟なフレックスレイアウトを採用し、影（シャドウ）を用いて立体感を演出しています。
  • カードの四辺には8pxの丸みがあり、親しみやすくモダンな印象を与えます。
  • 背景は白色で、シンプルながらも内容を際立たせるデザインです。
  • カード全体は軽い灰色のボーダーで囲まれ、視覚的な区切りを適切に行います。
  • さらに、カード上にホバーしたときは、影が濃くなるアニメーションが加わり、ユーザーのアクションへの応答を視覚的に認識させます。

CSSコード

.btn-q7lda28z {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 120px;
    background-color: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.btn-q7lda28z:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-q7lda28z h3 {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.btn-q7lda28z p {
    font-size: 14px;
    color: #555;
}

ホログラフィックグラデーション3Dフリップカード

プレビュー

Hover me!

Amazing effects await!

  • このデザインはホログラフィックグラデーションをメインに使用しており、見る角度によって色が虹色に変わるように見える効果を持っています。
  • デフォルトでは、カードはやや浮いている印象を与えるディープシャドウを持ち、hoverすると3Dフリップアニメーションがトリガーされ、カード全体が180度回転します。
  • このフリップ時にアニメーションが滑らかに実行されるよう、トランスフォームとopacityのみを変更しています。
  • 背景にはメッシュグラデーションが使用され、さらに幻想的な雰囲気を演出。
  • コンテンツにフォーカスすることができ、視覚的に引き込まれるデザインです。

CSSコード

.btn-ac7hfo8g {
  background: linear-gradient(145deg, rgba(255,0,255,0.8), rgba(0,255,255,0.7), rgba(255,255,0,0.6));
  background-size: 200% 200%;
  display: block;
  padding: 20px;
  max-width: 300px;
  border-radius: 15px;
  color: white;
  text-align: center;
  text-decoration: none;
  transition: transform 0.6s, box-shadow 0.3s, background-position 1s;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.btn-ac7hfo8g::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 15px;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1), rgba(0,0,0,0));
}

.btn-ac7hfo8g:hover {
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5);
  background-position: 100% 0;
  transform: rotateY(180deg);
}

ホログラフィックメッシュグラデーション3Dシルエットカード

プレビュー

Explore More
  • このデザインでは、ホログラフィックなメッシュグラデーションを背景に設定し、ボタンに立体的な深みを持たせました。
  • メッシュグラデーションには複数の虹色を組み合わせて、幻想的な視覚効果を演出しています。
  • hover時には、ボタンが1.05倍に拡大し、わずかに回転することでインタラクティブなフィードバックを提供します。
  • また、影や光沢を追加したことで、カードに浮遊感とリッチなテクスチャを与えています。
  • トランジションにはスムーズなcubic-bezierを使用し、hover時の変化を優雅にしています。

CSSコード

/* ホログラフィックメッシュグラデーション3Dシルエットカード */
.btn-wa87ybo5 {
    display: inline-block;
    padding: 20px 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 0, 150, 0.5), rgba(0, 255, 233, 0.5));
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25), inset 0 0 15px rgba(255, 255, 255, 0.1);
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
                box-shadow 0.4s ease-in-out;
    position: relative;
    overflow: hidden;
    will-change: transform, box-shadow;
}

.btn-wa87ybo5:hover {
    transform: scale(1.05) rotate(3deg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.35), inset 0 0 20px rgba(255, 255, 255, 0.15);
}

.btn-wa87ybo5::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(255, 255, 255, 0.1) 70%, transparent 85%);
    opacity: 0.8;
    transition: all 0.5s ease;
}

.btn-wa87ybo5:hover::before {
    transform: scale(1.2) rotate(15deg);
    opacity: 1;
}

シャドウ付きグラデーションカード

プレビュー

カードコンテンツ
  • このスタイリッシュなカードデザインでは、背景に微妙なグラデーションを使用し、カード全体に奥行きを与えるボックスシャドウを加えています。
  • 背景は青から紫への鮮やかなグラデーションで視覚的な魅力を高めています。
  • カードの四隅はわずかに丸みを帯びており、柔らかな印象を持たせます。
  • ホバー時には軽いスケールアップと色の変化でインタラクティブなエフェクトを実現し、ユーザーの興味を引きつけます。

CSSコード

.btn-s2j2ij5a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 100px;
    background: linear-gradient(135deg, #3b83f6, #944bf5);
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, background 0.3s;
    color: white;
    font-size: 16px;
    text-align: center;
}

.btn-s2j2ij5a:hover {
    transform: scale(1.05);
    background: linear-gradient(135deg, #2e72f2, #8a45ef);
}

オーロラネオングローリングカード

Hover me!

プレビュー

  • このデザインは、ネオンのような発光効果とオーロラグラデーションを組み合わせたカードスタイルです。
  • 背景には幻想的なオーロラグラデーションを使用し、ホバー時に内側からネオンの発光を加えます。
  • また、カード全体にわたって柔らかく広がるグロー効果により、周囲に美しい光の輪が広がります。
  • これには、色相回転のアニメーションを加え、ホバー時にカードが360度の回転を見せることで、視覚的に一層のダイナミックさと魅力を付与しています。
  • 主な色は#ff89e9（ピンク）、#89ffef（アクア）、#89ffb2（ミント）で、これらが絶妙に変化しながら垂直方向に展開されます。

CSSコード

.btn-gc9vdz86 {
  background: linear-gradient(135deg, #ff89e9, #89ffef, #89ffb2);
  border-radius: 15px;
  box-shadow: 0 0 30px rgba(137, 255, 239, 0.5), 0 0 20px rgba(137, 255, 178, 0.5);
  color: #fff;
  padding: 20px 30px;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  text-align: center;
  font-family: 'Arial', sans-serif;
  cursor: pointer;
}

.btn-gc9vdz86:hover {
  transform: rotateY(360deg);
  box-shadow: 0 0 40px rgba(137, 255, 239, 0.7), inset 0 0 20px rgba(255, 137, 233, 0.5);
}

.btn-gc9vdz86::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(295deg, #ff89e9, #89ffef, #89ffb2);
  border-radius: 50%;
  transition: transform 0.5s;
  z-index: -1;
}

.btn-gc9vdz86:hover::before {
  transform: scale(1.2);
}

影付きフロストガラスカード

プレビュー

Card Content
  • このCSSコードは、カードにフロストガラスの効果を与えるデザインです。
  • 背景は半透明の白で、背後の要素がぼんやりと透けて見えるようになります。
  • ボックスシャドウを使用して影が付与され、3Dの深さを強調しています。
  • また、カードの角は丸められており、滑らかな視覚効果を与えています。
  • ホバー時には、影が拡大されカードが浮き上がるようなアニメーションが加わります。

CSSコード

.btn-v58t9dvd {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  padding: 20px;
  transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.btn-v58t9dvd:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
}

オーロラグラデーションネオモーフィズムカード

プレビュー

Hover Me
  • このデザインは、オーロラのような幻想的な色の流れを持つ背景グラデーションを持つカードです。
  • #00c6ffから#0072ffへと続く青のグラデーションに、オーロラを思わせる色を加えました。
  • ホバー時には、カードがわずかに持ち上がり、inner shadowがaddされることで、より強い視覚的な深みを提供します。
  • backdrop-filter: blur(30px)を使用して、背景が柔らかくぼやけ、グラスモーフィズム風の視覚効果を演出しています。

CSSコード

.btn-0u3tcfr5 {
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    color: #ffffff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), inset 0 -5px 10px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(30px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform, box-shadow;
    cursor: pointer;
}

.btn-0u3tcfr5:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    background: linear-gradient(135deg, #0072ff, #00c6ff);
}

シャドウ付きグラデーションカード

プレビュー

サンプルカード

詳細解説

  • このカードデザインは、上部が柔らかなピンクから下部の淡いオレンジへと変化するグラデーション背景を特徴としています。
  • ボックスには柔らかなシャドウが付いており、浮き上がるようなデザインを実現します。
  • また、ホバー時にはシャドウの拡大と背景色の輝度が少し上がり、視覚的な楽しさを提供します。
  • px単位の境界線とパディングがバランスの取れたレイアウトを支援します。
  • 非常に軽やかで清潔感のあるカードデザインです。

CSSコード

.btn-oo9w2v6e {
  width: 200px;
  height: 100px;
  background: linear-gradient(135deg, #ffcccb, #fff0e1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  transition: box-shadow 0.3s ease, background 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.btn-oo9w2v6e:hover {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, #ffd5d2, #ffebd1);
}

コメント

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