【Cocoon】記事一覧をふわっと浮き上がらせるマテリアルデザイン「SANGO」風カスタマイズ

Cocoonカスタマイズ

こんにちは。さいとう(@S41T0H)です。

今回は無料WordPressテーマ「Cocoon」の記事一覧をSANGO風にマウスオーバーでふわっと浮き上がらせるマテリアルデザイン風カスタマイズをご紹介します。

スポンサーリンク

Cocoonをマテリアルデザイン風にしてみよう

マテリアルデザインの説明は下記記事がわかりやすいです。

0から分かるマテリアルデザインの作り方:基本概念とガイドライン
初心者でも分かるマテリアルデザイン入門です。基礎知識からマテリアルWebデザインの作り方、CSSでのアレンジの方法まで総まとめしてます。

要約すると「物質(マテリアル)的なデザイン」のことですね。

紙を置いた風に影をつけたり、触るとふわっと動いたりして直感的に操作しやすいデザインです。

マテリアルデザインを採り入れたWordPressテーマに「SANGO(有料)」や「マテリアル2(無料)」などがあります。

下準備:記事一覧をカードデザインにする

「Cocoon設定」→「インデックス」からインデックス設定を開き、「カードタイプ」を「縦型カード2列」にしておきましょう。

さらにSANGO風にするには「投稿関連情報の表示」から「スニペット(抜粋)の表示」「投稿日の表示」のチェックも外しておきましょう(スマホ端末でのスニペットの表示も自動でOFFになります)。

さらに、サイト背景に色を付けておくとGOOD。

「Cocoon設定」→「全体」の「サイト背景色」をグレー(#f0ebebなど。お好みで)とします。

するとこんな感じに。

おっと。メインカラムの背景色が表示されてしまっていますね。

それではCSSの編集に参りましょう。

CSSを編集して、メインカラムの背景を透明に。

このメインカラム、インデックスリストページ(トップページ、タグページ、カテゴリページ)だけ透明にしたいんです。

なので、下記のように子テーマのstyle.cssに記述しましょう。

.home main, .archive main{
    background-color: transparent;
    margin-top: 0;
    padding-top: 0;
}

「.home main」はフロントページのmain要素、「.archive main」はアーカイブページ(タグやカテゴリ、著者別のアーカイブページ)のmain要素を指定しています。フロントページに固定ページを指定している場合は「.home main」は削除してください。

こうすることでメインカラムの背景を透明(transparent)にできます。

ついでにmargin-topとpadding-topを0にすることでサイドバーと位置を合わせています。下げておきたい場合は適宜削除してください。

次にカードの背景を白く、角を丸くします。

.entry-card-wrap{
    background-color: white;
    border-radius: 4px;
    margin-bottom: 1em!important;
}

するとこうなります。

だんだんマテって(=マテリアル化されて)きましたね。

カーソルを乗せると浮き上がるようにする。

カーソルを乗せるとホバーするようにしてみましょう。

下記のCSSをstyle.cssに追記します。

.entry-card-wrap:hover{
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
    transform: translateY(-2px);
    background-color: white; 
    transition: all .3s ease;
}

すると……。

グ、グレイト!!!!!!!

別パターン:カーソルをのせると沈み込むように。

今度は逆にカーソルを乗せると沈み込むようにしてみましょう。

下記コードをstyle.cssに書き込みます。

.entry-card-wrap{
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
    transition: all .3s ease;
}

.entry-card-wrap:hover{
    box-shadow: none;
    transform: translateY(2px);
    background-color: white; 
}

こちらも直感的でイイですね。甲乙つけがたい。

ちなみに、上記スクショのようにマウスオーバーでリンクが貼られた画像を薄くしたい場合は

a:hover img{ opacity: 0.8 }

とか書いておけばできます。お好みで。

コピペできるCSSカスタマイズまとめ

まとめたものがこちら。

マウスオーバーで浮くCSS

.home main, .archive main{
background-color: transparent;
margin-top: 0;
padding-top: 0;
}

.category-content{
background-color: white;
padding: 1em 1em 0.2em;
margin-bottom: 1em;
}

.entry-card-wrap{
transition: all .3s ease;
margin-bottom: 1em!important;
background-color: white;
border-radius: 4px;
}

.entry-card-wrap:hover{
box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
transform: translateY(-2px);
background-color: white;
}

マウスオーバーで沈む

.home main, .archive main{
background-color: transparent;
margin-top: 0;
padding-top: 0;
}

.category-content{
background-color: white;
padding: 1em 1em 0.2em;
margin-bottom: 1em;
}

.entry-card-wrap{
box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
transition: all .3s ease;
margin-bottom: 1em!important;
background-color: white;
border-radius: 4px;
}

.entry-card-wrap:hover{
box-shadow: none;
transform: translateY(2px);
background-color: white; 
}

いかがだっただろうか。

他にもCocoonカスタマイズをまとめているので、そちらもぜひご覧くださいね。では。

【Cocoon】で記事一覧をSWALLOW風にぼかしながらフェードインさせるCSSカスタマイズ
こんにちは、さいとう(@S41T0H)です。 最近リリースされたWordPressテーマ「スワロー」 をご存知でしょうか。 有名ブロガー八木仁平さんが監修した有料WordPressテーマで、STORK(ストーク) やハミングバード とい...

【支援お待ちしております!】

当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです!(300円単位での投げ銭が可能です)

継続的な更新・サポートのためにご支援お願いいたします……!

▶支援先:サイトに掲載するCSSカスタマイズの支援をお待ちしています!

サイトに掲載するCSSカスタマイズの支援をお待ちしています! - polca(ポルカ)
"今後の記事執筆の励みになります!"を支援のおかえしとして受け取ることができます。

その他のカスタマイズは下記ボタンから。

コメント