WordPress 꾸미기 - ブログページのポストリストの丸い角と影の効果を追加する（feat.CSS)
ワードプレスのブログの投稿一覧ページは、メインページの次に訪問者が一番最初に目にするスペースです。 ワードプレス デコレーションでこのページのデザインを改善することで、ユーザーエクスペリエンスを大幅に向上させることができます。
今回の記事では簡単なCSSコードを適用してブログページのポストリストの形状を角度をつけて硬いものより少し美的な感じにするために 丸い角に変更することを教えてあげます。 さらに、マウスを乗せたときに 影の効果が発生するより魅力的に見える方法を紹介します。
WordPress 꾸미기適用前：硬い正方形のデザイン
WordPressを飾る前に、上の図のように、基本的にポストリストは、基本的に単純な正方形の形で表示されます。このようなデザインは、すっきりですが、時にはあまりにも硬くて地味に見えることがあります。場合によっては、各ポスト項目間の区分がそれほど明確ではないので、ユーザーが個々のポストを認識するのに苦労することがあります。
WordPressにCSSを適用する方法
CSSを適用する前に、 WordPressでCSSを追加する方法を説明します。 その経路は次のとおりです。
- WordPress 管理者ページにログインします。
- 左側のメニューから "外観"または"形状"をクリックします。
- “カスタマイズ"または"飾る"を選択します。
- “追加CSS" セクションを見つけてクリックします。
- ここにCSSコードを入力します(そのコードは下にあります)。
- “公開"または"公開"ボタンをクリックして変更を適用します。
この方法を使用すると、テーマファイルを直接修正する必要がなく、テーマの更新時にも変更が維持されます。
CSSコードを適用する
次のCSSコードを上記のように WordPressの ユーザー定義 - 追加CSSセクションに追加して、ポストリストのデザインを改善することができます。下のコードをコピーして上で教えてくれたパス通りに移動して貼り付けます。
/* 個々のポストボックスを丸く設定し、コンテンツが溢れないように処理 */.
.post { {} の場合
border-radius: 10px; /* コーナーを丸くする (10pxの曲率) */ /* 枠を丸くする */
overflow: hidden; /* コンテンツがボックスの境界線を越えないように設定 */ .post { box-shadow: 0px
box-shadow: 0 4px 8px rgba(0, 0, 0, 0, 0.1); /* ボックスにソフトシャドウを追加 (0pxのX軸、4pxのY軸、8pxの広がり) */ /* 枠に滑らかな影を追加する
transition: all 0.3s ease-in-out; /* すべてのスタイル変更を0.3秒間スムースに処理する */ } } } } } } } } } } } } } } } } } } }
}
/* ポストボックスにマウスを乗せた時のスタイル */ } /* ポストボックスにマウスを乗せた時のスタイル */ }
.post:hover {
transform: scale(1.02); /* ボックスサイズを少し拡大 (1.02倍) */ } /* .post:transform: scale(1.02) */ } /* .post:hover: 0px
box-shadow: 0 6px 12px rgba(0, 0, 0, 0, 0.15); /* 影をより鮮明に変更(6px Y軸、12px広げる) */
}上のコードで border-radius: 10px この行の数字を調整して曲率を変更することができます。下の図では、この数値を5に設定した結果、丸みを帯びた角になりました。
適用後: 滑らかで洗練されたデザイン
このCSSコードを適用した後、ポストリストの各項目は、次のような変化を見せます。 もしかしたら、左のポストの外観と右のポストの外観の違いを感じますか？ 右側は、ポストリストにマウスを乗せて拡大および 影の効果が表示された状態です。
- 丸みを帯びた角: 各ポストボックスの角が丸く処理されており、柔らかい印象を与えます。
- 影の効果: 少し入り込んだ影で、各ポストがページ上で目立つようになります。
- ホバー効果を表示します：ポストにマウスを乗せると少し拡大され、影が強調されてインタラクティブ性が向上します。
- スムーズな移行: すべてのスタイルの変更がスムーズに適用され、視覚的に滑らかな体験を提供します。
このような変更により、ポスト一覧ページはよりモダンで洗練された外観に生まれ変わります。 そして、各ポスト項目が明確に区分され、ユーザーがコンテンツをより簡単にナビゲートできるようになります。 また、ホバー効果によりユーザーとのインタラクションが増加し、よりユーザーフレンドリーな体験を提供します。
結論
簡単なCSSコード数行で WordPress ブログのポストリストを本当に素敵に改善することができました。 このような視覚的な改善は、単に美的側面だけでなく、ユーザーエクスペリエンスと直結して、ブログの全体的な品質を高めることに貢献します。皆さんもこのようなCSSコードの適用方法でより魅力的でユーザーフレンドリーなデザインで訪問者を迎えてみてください。
ちなみに、もう一つのヒントをお伝えします。 みんな注目！ 目立つボタンアニメーションの秘訣を公開（feat.WordPress) ポストで使用するボタンは、ぜひポストできれいに飾ってみてください。
# コード詳細解説
/* 個々のポストボックスを丸く設定し、コンテンツが溢れないように処理 */. .post { {...この行は'.post'クラスを持つ要素のスタイルを定義します。主にブログポストを表す要素に適用されます。
border-radius: 10px; /* 角を丸くする(10pxの曲率)*//。このプロパティは、要素の角を10ピクセル半径で丸くします。これにより、正方形の角が滑らかな曲線になります。
overflow: hidden; /* 内容がボックスの境界線を超えないように設定 */ /*...この属性は、要素内のコンテンツが定義された境界から外れないようにします。 特に、丸い角と一緒に使用する場合に重要です。
box-shadow: 0 4px 8px rgba(0, 0, 0, 0, 0.1); /* ボックスにソフトシャドウを追加(0px X軸、4px Y軸、8px 拡散) */)この行は、要素にシャドウ効果を追加します。水平オフセットは0、垂直オフセットは4px、ぼかし度は8px、黒の10%の不透明度を持ちます。
transition: all 0.3s ease-in-out; /* すべてのスタイル変更をスムーズに0.3秒間処理する */ */ */ */ */ */ */ */ } }このプロパティは、すべてのスタイル変更が0.3秒間スムーズに行われるように設定します。 'ease-in-out'タイミング関数は、変更がゆっくりと始まり、速くなり、再びゆっくりと終了するようにします。
/* ポストボックスにマウスオーバーしたときのスタイル */ /*... .post:hover {.このセレクタは、ユーザーが「.post」要素の上にマウスを置いたときに適用されるスタイルを定義します。
transform: scale(1.02); /* 箱のサイズを少し拡大 (1.02倍) */ //.このプロパティは、要素のサイズを元のサイズの1.02倍に拡大します。これにより、マウスを乗せたときに要素が少し大きくなる効果があります。
box-shadow: 0 6px 12px rgba(0, 0, 0, 0, 0.15); /* 影をより鮮明に変更(6px Y軸、12px拡散) */) }この行は、マウスオーバー時の影をより強調します。垂直オフセットが6pxに増加し、ぼかし度は12pxに増加し、不透明度も15%に増加します。
