【Cocoon】で記事一覧をSWALLOW風にぼかしながらフェードインさせるCSSカスタマイズ

Cocoonカスタマイズ

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

最近リリースされたWordPressテーマ「スワロー」 をご存知でしょうか。

有名ブロガー八木仁平さんが監修した有料WordPressテーマで、STORK(ストーク) ハミングバード といった有名テーマをリリースしているOPENCAGE(オープンケージ) が開発したものです。

おしゃれで、洗練されていてステキです。

おなじく洗練されていてステキなWordPressテーマといえばわいひらさん作・最高な無料WordPressテーマ「Cocoon(コクーン)」ですよね(強引な展開)。

というわけで今回はCocoonで記事一覧をSWALLOW風にぼかしながらフェードインさせるCSSカスタマイズ方法を紹介します。

▼SWALLOWの詳細はコチラ!▼

スポンサーリンク

まずはCocoon設定から表示を縦型カード形式に変更

Cocoonには既に縦型カード形式に表示する機能が備わってますので、これを利用していきます。

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

こんな感じになります(既に素敵ですね)。

カスタマイズの基本方針

今回はあくまでも「SWALLOW風」のカスタマイズということで、完璧に再現する気はありません

SWALLOWは素敵なテーマですので、快適に、そして簡単に導入したいのであればSWALLOWの導入をご検討ください。

>>「SWALLOW」の詳細を見る

というわけで、必要最低限の再現になります。

僕が「これだけは参考にしたい!」と思った点はこちら。

  • カーソルを載せたときにアイキャッチ画像をぼかしながら拡大する
  • カーソルを載せたときにアイキャッチ画像に「READ MORE」の文字がフェードインする
  • 抜粋部分をグレーにして行間を広く取る

今回のカスタマイズの方針は以上です。

ではひとつずつカスタマイズしていきましょう。

過程はいい!手っ取り早くCSSをコピペしたい!という方へ
▼▼CSSコード部分までジャンプ▼▼

CocoonのCSSをカスタマイズしていこう

以降のCSSカスタマイズ例は全て小テーマのstyle.cssに追記していきます。

CSSをカスタマイズするには「外観」→「テーマの編集」から必ず「小テーマ(Cocoon Child)」の「スタイルシート(style.css)」に追記しましょう。

CSSの変更が反映されない場合はCtrl+F5ページキャッシュを削除してくださいね。

サーバーキャッシュ系のプラグイン(LiteSpeed Cacheなど)を使用している場合はCSSキャッシュをパージすることもお忘れなく。

カーソルを載せたときにアイキャッチ画像をぼかしながら拡大する

エントリーカードを包含するa要素が:hoverしたときに、その中にあるアイキャッチ画像を暗くしてぼかして拡大させていきます。

具体的には下のCSSを追加していきます。

a.entry-card-wrap:hover img.entry-card-thumb-image{
  filter: blur(3px) brightness(60%);
  transform: scale(1.03);
  opacity: 1;
  transition: 0.3s;
}

追記:blurを2pxにすると不具合が発生したので3pxに変更しました。

すると、こうなります。

フチがボケてしまう……。

というわけで、下記ページを参考に、修正します。

filter: blur するとフチがぼやける対策 - Qiita
!( ^これに ```lang:c...

親要素にoverflow: hidden;をしてあげればいいですね。

a.entry-card-wrap figure.entry-card-thumb{
  overflow: hidden;
  line-height: 0;
  margin-bottom: .5em;
}

a.entry-card-wrap figure.entry-card-thumb .cat-label{
  line-height: 1.7;
}

すると、こうなります。

下側へのはみ出しは消えませんでした……。

おそらく、包含するfigure要素の高さかパディング、下の要素のマージンが効いてしまっているからだと思うのですが、いろいろ試しても直らず……。だれか教えてください。

とりあえずご愛嬌ということで先に進みます。これは影だということにしましょう。

追記:「line-height: 0;」を指定することで消えました!!

カーソルを載せたときにアイキャッチ画像に「READ MORE」の文字がフェードインする

これは疑似要素を使えば実装できそうです。

a.entry-card-wrap figure.entry-card-thumb::before{
  z-index: 1;
  font-family: sans-serif;
  font-weight: bold;
  content: "READ MORE";
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  position: absolute;
  font-size: 100%;
  width: 100%;
  height: 100%;
  color: #fff;
  top: 0;
  left: 0;
  opacity: 0;
  transition: .25s ease;
  -webkit-transition: .4s ease;
  -moz-transition: .4s ease;
  -ms-transition: .4s ease;
}

a.entry-card-wrap:hover figure.entry-card-thumb::before{
  opacity: 0.9;
  font-size: 150%;
}

これで、カーソルを載せるとアイキャッチ中央に「READ MORE」が拡大しながらフェードインしてくれます。「content: “続きを読む”;」などアレンジしてみるといいかもしれませんね。

抜粋部分をグレーにして行間を広く取る

こんなかんじにしてみました。いかがでしょう?

.entry-card-snippet{
  font-size: 72%;
  line-height: 1.6;
  color: gray;
  text-align: justify;
  text-justify: inter-ideograph;
}

下2行の記述で両端揃えにすることができます。お好みでどうぞ。

カスタマイズ結果

なかなかイイ感じになったのではないでしょうか?

そのまま使えるCSS全体も載せておきます。

a.entry-card-wrap figure.entry-card-thumb{
  overflow: hidden;
  line-height: 0;
  margin-bottom: .5em;
}

a.entry-card-wrap figure.entry-card-thumb .cat-label{
  line-height: 1.7;
}

a.entry-card-wrap:hover img.entry-card-thumb-image{
  filter: blur(3px) brightness(60%);
  transform: scale(1.03);
  opacity: 1;
  transition: 0.3s;
}
a.entry-card-wrap figure.entry-card-thumb::before{
  z-index: 1;
  font-family: sans-serif;
  font-weight: bold;
  content: "READ MORE";
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  position: absolute;
  font-size: 100%;
  width: 100%;
  height: 100%;
  color: #fff;
  top: 0;
  left: 0;
  opacity: 0;
  transition: .25s ease;
  -webkit-transition: .4s ease;
  -moz-transition: .4s ease;
  -ms-transition: .4s ease;
}

a.entry-card-wrap:hover figure.entry-card-thumb::before{
  opacity: 0.9;
  font-size: 150%;
}

.entry-card-snippet{
  font-size: 72%;
  line-height: 1.6;
  color: gray;
  text-align: justify;
  text-justify: inter-ideograph;
}

Cocoon 0.5.3で動作確認していますが、今後のアップデートで使用できなくなる可能性もなくはないのでご了承ください。

▼SWALLOWの詳細はコチラ!▼

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

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

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

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

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

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

コメント