こんにちは！悠です！
私はずっとWordPressのブログテーマ『Cocoon』を使用しています。
Cocoonは無料テーマなのに多機能かつシンプルなデザインなので、非常に気に入っています。
そんな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の基本的な仕組みを勉強するのに活用した参考書です。
どちらも初心者でもわかりやすい簡単な表現で書かれていて、コーディングの例題も豊富なので、これからプログラムの勉強を始めてみたい方におすすめです(*´▽｀*)
コメント