賢威のリンクカードに目立つように影を追加してみた

WEBサイト内を回遊してもらう事を目的として、使われることが多いのでリンクカード機能です。

といった、ショートコードを使う事で、下記のようなリンクカードを作ることができます。

リンクカード（例）

にゃのらいと

もう少し「リンクカード」を目立たせたいにゃ

そんな悩みを解決するCSSです。

なお、この記事を作成している時点での、ワードプレスのテーマと環境は以下の通りです。

ワードプレス環境

テーマ：賢威８
WordPressバージョン：5.8.2
PHPバージョン：7.4
サーバー：さくらインターネット

リンクカードに影を追加するCSS

賢威のリンクカードに影を追加するCSSです。

.keni-link-card_wrap {
border: 1px solid #333;
box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 6px 12px rgba(0,0,0,0.05);
}

上記のCSSは、box-shadowに複数（２つ）の影を適用して、より立体感を出しているつもりです。

どうでしょうか？

腱鞘炎で悩んでいる人にすすめるマウス選び
https://best-item.work/item/mouse/
自分は職業柄、長時間マウスを使っていた為、７年程前に腱鞘炎と診断されました。その時、医者からはなるべく手首を使わないように言われましたが、納期がある為、そんなわけにはいかず、色々なマウスを試し続けてきました。そんな自 …

なお、box-shadowは、

box-shadow: [水平方向のオフセット] [垂直方向のオフセット] [ぼかしの範囲] [広がりの範囲] [色];

といったルールになっています。

リンクカードを別ウインドウで開かせたい場合

リンクカードを別ウインドウで開かせたい場合は、

と、URLの後に「target=”_blank”」を追加してやると、別ウィンドウで開かせることができます。

補足：ワードプレスのカスタムCSSの編集箇所について

現在のワードプレステーマにCSSを追加したい場合、左メニューにある、

外観 > カスタマイズ

を選択します。

「追加CSS」を選択します。

追加したいCSSを記述します（コピペして貼り付けます）。

「公開」ボタンを押して保存すれば完了です。

※全角スペースが入るとレイアウトが崩れる事があります。余計な全角スペースが入らないように気を付けてください。

楽天市場の検索結果

1冊ですべて身につくWordPress入門講座 [ Mana ]

2,200円(税込)【送料込】

楽天ブックス

Mana SBクリエイティブイチサツデスベテミニツクワードプレスニュウモンコウザマナ発行年月：2022年03月24日予約締切日：2022年01月26日ページ数：344p サイズ：単行本 ISBN：9784815609405 Mana（MANA）日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作

今すぐ使えるかんたん　WordPress　やさしい入門［6.x対応版］ [ 桑名

1,760円(税込)【送料込】

楽天ブックス

桑名由美はつみ技術評論社イマスグツカエルカンタンワードプレスヤサシイニュウモンロクテンエックスタイオウバンクワナユミハツミ発行年月：2023年09月28日予約締切日：2023年06月02日ページ数：256p サイズ：単行本 ISBN：9784297136253 桑名由美（クワナユミ） 2023年8月、合同会社ワイズベスト

HTMLサイトをWordPressにする本 [ 久保田涼子 ]

2,640円(税込)【送料込】

楽天ブックス

久保田涼子西原礼奈ソシムエイチティーエムエルサイトヲワードプレスニスルホンクボタリョウコニシハラアヤナ発行年月：2023年08月29日予約締切日：2023年06月06日ページ数：360p サイズ：単行本 ISBN：9784802614214 久保田涼子（クボタリョウコ）「ワクワクするモノ・時間・場所を生み出す」をテ

たった1日で基本が身に付く！　WordPress 超入門［改訂2版］ [ 佐々

1,980円(税込)【送料込】

楽天ブックス

佐々木恵リブロワークス技術評論社タッタイチニチデキホンガミニツクワードプレスチョウニュウモンカイテイニハンササキメグミリブロワークス発行年月：2022年04月14日予約締切日：2022年01月05日ページ数：192p サイズ：単行本 ISBN：9784297126957 佐々木恵（ササキメグミ） 2002年より独学でWe

ゼロから学ぶはじめてのWordPress [ 泰道ゆりか ]

1,980円(税込)【送料込】

楽天ブックス

泰道ゆりか SBクリエイティブゼロカラマナブハジメテノワードプレスタイドウユリカ発行年月：2022年10月12日予約締切日：2022年07月22日ページ数：352p サイズ：単行本 ISBN：9784815615222 泰道ゆりか（タイドウユリカ） Webデザイナー／株式会社CORELILY代表取締役。立教大学卒業後、銀行に就職。