The other way round

こんにちは ('0')/

> ②~③、修正を行いました〜

えっと、修正されていないと思います。内緒さんはダークモードをご利用ということですが、訪問される方が必ずしもダークモードにしているとは限りません。なのでダークモード以外の対応もしておく必要があります。
内緒さんのブログ背景が黒なのはダークモードがONになっているからではなく元々が黒背景なので、通常のモードの方を全て色反転させなければダメですよ。

> マウスホバーを行った際にカードを浮き上がらせる等、異なるアニメーションをこちらのブログカードに組み込んで使用することは可能なのでしょうか？〜

元々浮き上がるようなデザインになっています。内緒さんの場合は黒背景ですから黒に黒のシャドウでは相当強く(暗く)シャドウを入れないと浮き上がるようには見えません。黒シャドウの色を強くするか、背景色の黒の方を一段明るくするか、シャドウの色を白系統に変更するか、です。
記事内で言及している通り、デフォルトでは
通常(白背景を想定) --- 浮き上がる
ダークモードON --- 沈む
というエフェクトを付けてあります。浮いて見えない原因は
・ダークモード状態で見ている
・黒同士なので気づいていない
のいずれかです。

-----
rgb(white)
というカラーコードはありません。whiteはカラーネームですから
color: white;
ならOKです。rgb値を使う場合は
color: rgb(255,255,255)
が白です。

-----
「スタイルシートの最終」というのは @media (prefers-color-scheme: dark) のルールセットの中に入れるという意味ではありません。全ての内容の一番後ろに入れるという意味です。

×
/* OSダークモード対応 */
@media (prefers-color-scheme: dark) {
  .blogcard {
    border: 1px solid rgb(68,68,68) !important;
    box-shadow: 0 10px 6px -6px rgba(0,0,0,.7) !important;
    background: rgb(51,51,51) !important;
  }
  .blogcard > a,
  .blogcard:hover > a {
    color: rgb(240,240,240) !important;
  }
}

✓
/* OSダークモード対応 */
@media (prefers-color-scheme: dark) {
  .blogcard {
    border: 1px solid rgb(68,68,68);
    box-shadow: 0 10px 6px -6px rgba(0,0,0,.7);
    background: rgb(51,51,51);
  }
}

.blogcard > a,
  .blogcard:hover > a {
    color: rgb(240,240,240);
  }

一度デフォルトのCSS内容に戻してから作業されてはいかがでしょうか。

-----
内緒さんがすべき作業

1. ダークモードの内容を取り除く(元が黒なので対応する意味が無いため)
2. デフォルトの色指定を全て反転させる(黒系から白系へ)
3. 指南通りに追加内容を正しい位置に正しく記載する

-----
テンプレートの件ですが、内緒さんのテンプレートは固定幅です。なのでスマートフォンでは全く別の、こちらは白背景のテンプレートで表示されています。
PC, スマホ各テンプレート両者間に互換性はありませんので、[太字]スマートフォン版テンプレートでも作業を行う必要があります[/太字]。
現時点でスマホではデザイン適用されていません。

テンプレートの再選択をおすすめしましたが、昨今ではほとんどのテンプレートがレスポンシブウェブデザインでPC, タブレット, スマホ など全デバイス適用設計されています。内緒さんのPCテンプレートはスマホ非対応です。
レスポンシブを採用されれば今回のような作業の一度で済みます。現状を維持されるのであればスマホテンプレートでもう一度作業が必須です(こちらは白背景で設定, ダークモード非対応なので取り除く)

また、現状で50あまりのJSエラーが存在してるためページの表示も重たいです。私からのアドバイスはこれで最後にしますので、諸々お考え併せの上ご自身でお決めくださいね。

管理者にだけ表示を許可する