【Cocoon】ブログカードにマウスオーバーした時に影を付ける方法【コピペでOK】

スポンサーリンク
スポンサーリンク

こんにちは!悠です!

私はずっとWordPressのブログテーマ『Cocoon』を使用しています。

Cocoonは無料テーマなのに多機能かつシンプルなデザインなので、非常に気に入っています。

そんなCocoonの機能の一つに、内部リンクや外部リンクをブログカードとして表示させるものがあります。例として私の過去記事を下に貼っておきます。

【WordPress】囲み枠を挿入後、エディタ画面で段落が表示されない問題の対処法
ブログ執筆のとき、重要箇所の強調でよく使う囲み枠を挿入した後、エディタ画面で段落が表示されない問題の原因と対処法をご紹介しています。

リンクを見やすく修飾してくれる優れものですが、デフォルトでは上のようにマウスオーバーした際にブログカードに影が付きません。

そこで今回は、

『Cocoon』の内部(外部)リンクを表示するブログカードにマウスオーバー時に影を付ける方法

をご紹介いたします!

リンクがブログカードとして表示されない場合

そもそも内部リンクや外部リンクがブログカードとして表示されないよ!という方はCocoon設定が間違っている可能性があります。

内部リンクがブログカードとして表示されない場合は、Cocoon設定からブログカードを選択し、内部ブログカード設定のブログカード表示を有効にするにチェックがついているか確認してください。

 

また、外部リンクがブログカードとして表示されない場合は、Cocoon設定のブログカードを下にスクロールすると出てくる、外部ブログカード設定のブログカード表示を有効にするにチェックがついているか確認してください。

 

マウスオーバー時に影を付ける方法

Cocoonの子テーマのスタイルシート(style.css)に下のコードを貼りつけます。

/*ブログカードにマウスオーバーした時に影を付ける*/
.blogcard-wrap:hover{
	box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
}

 

Cocoonのスタイルシートは、WordPressの管理画面の「外観」→「テーマエディター」から編集できます。

下画像の赤枠で囲んでいる『 /*必要ならばここにコードを書く*/ 』の下にコピペして貼りつければOKです。

 

box-shadowの使い方

box-shadowはCSSのプロパティの一種で、ボックスに影を付ける際に使用します。

:(コロン)の後に続く値には、下の画像のような役割があります。

わかりやすいように、実際の使用例を見ていきましょう。

 

box-shadow: 20px 20px

 

box-shadow: -20px -20px

 

box-shadow: 20px 20px 20px

 

box-shadow: 20px 20px 20px 20px

 

box-shadow: 20px 20px 20px -20px

 

box-shadow: 20px 20px 20px 20px rgba(255,0,0)

 

box-shadow: 20px 20px 20px 20px rgba(255,0,0,0.2)

透明度は0(完全に透明)から1の範囲で指定します。

 

まとめ

以上が、WordPressのテーマ『Cocoon』で、内部(外部)リンクブログカードに影を付ける方法でした。

マウスオーバー時のアニメーションを追加するだけでも、ブログの印象は結構変わると思います。

簡単にできるのでぜひお試しください!

では、ここまで読んでいただきありがとうございました!

 

プログラムの勉強に活用した参考書

私がHTML、CSS、JavaScriptの基本的な仕組みを勉強するのに活用した参考書です。

どちらも初心者でもわかりやすい簡単な表現で書かれていて、コーディングの例題も豊富なので、これからプログラムの勉強を始めてみたい方におすすめです(*´▽`*)

コメント

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