採用案内ページのデザインを整えるために、CSSをどのように調整するかの解説を行います。特に、見出しの余白や、キャッチコピーの表示、カラムの配置、スマホ対応の画像非表示に関する設定方法について説明します。
1. 見出しの余白調整
まず、採用案内の見出し部分（.midori-heading-recruit）の余白調整について紹介します。このスタイルでは、見出しに上下の余白を加えることで、見た目が整い、デザインがスッキリします。コード例は次の通りです。
.midori-heading-recruit { margin-top: 20px !important; margin-bottom: 20px !important; }2. キャッチコピーの表示調整
キャッチコピーの表示についても調整が必要です。.recruit-section内のpタグを使って、フォントサイズや行間、幅を揃えます。これにより、テキストがセンター揃えになり、デザインが整います。
.recruit-section > .wp-block-group > p, .recruit-section > p.has-text-align-center { font-size: 16px !important; line-height: 1.8 !important; text-align: left !important; margin-left: auto !important; margin-right: auto !important; max-width: 280px !important; width: 100% !important; }3. カラムを縦並びにする方法
採用案内のカラムを縦並びにしたい場合は、.recruit-columnsに対してflexboxを使い、flex-directionをcolumnに設定します。これにより、カラムが縦に並び、レスポンシブ対応も簡単にできます。
.recruit-columns { flex-direction: column !important; }4. スマホ対応のデザイン調整
スマホ向けに、画像の表示を調整したり、テキストの表示を工夫することも大切です。ここでは、900px以下の画面幅において、画像を非表示にするCSSコードを紹介します。
@media (max-width: 900px) { .recruit-section img { display: none !important; } }5. まとめ
採用案内ページのデザイン調整は、CSSを使って余白やレイアウトを整えることが重要です。特に、レスポンシブデザインの対応や、スマホ用の設定を加えることで、どのデバイスでも見やすいページになります。
コメント