/* ----------------------------------
ヘッダー: ヘッダーバー
---------------------------------- */
#header {
    background: #b0c4de; /* ヘッダーバーの色 */
}

/* ----------------------------------
ヘッダーバー: プライマリーナビ
---------------------------------- */
#header-fnav-area #header-fnav-btn a {
    background-color: #4682b4; /* ボタン背景色 */
}
#header a {
    color: #fff; /* アイコン色 */
}

/* ----------------------------------
ファーストビュー: 背景を画像に変更
---------------------------------- */
body.home #main_visual {
    background-image: url(http://www.good-link.co.jp/wp/wp-content/uploads/2021/07/TP4-100g.jpg);
    background-color: #fff; /* 画像の下地色 */
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
}
 
/* ----------------------------------
ファーストビュー: 背景画像にオーバーレイをかける
---------------------------------- */
body.home #main_visual::before{
    position: absolute;
    background-color: rgba(0,0,0,.1); /* オーバーレイの色 */
    content: ' ';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
body.home #main_visual,
body.home #main_visual h2,
body.home #main_visual p {
    position: relative;
}
 
/* ----------------------------------
ファーストビュー: キャチコピーの調整
---------------------------------- */
body.home #main_visual h2 {
    font-weight: bold; /* 太字に */
    font-size: 54px; /* デフォルトは48px */
    color: #fff; /* 背景画像の色に合わせて変更 */ 
}
 
/* ----------------------------------
キャチコピーの調整: レスポンシブ
---------------------------------- */
@media screen and (max-width: 480px) {
    body.home #main_visual h2 {
        font-size: 24px; /* 文字サイズ */
        }
}
 
/* ----------------------------------
ファーストビュー: サイト説明文の調整
---------------------------------- */ 
body.home #main_visual p {
    font-size: 18px; /* デフォルトは15px */
    color: #fff; /* 背景画像の色に合わせて変更 */ 
}
 
/* ----------------------------------
サイト説明文の調整: レスポンシブ
---------------------------------- */
@media screen and (max-width: 480px) {
    body.home #main_visual p {
        font-size: 14px; /* 文字サイズ */
        }
    body.home #main_visual p br {
        display: none; /* 改行をなくす */
        }
}
トップページ
参考資料: Xeory_Extention_トップページ_完成形

下の記事では、トップページのデフォルトのベースカラーを会社のイメージカラーに変更したり、お好みのデザインへとカスタマイズしたい場合などに利用可能なCSSコードを、ボックス別に紹介しています。CSSコードすべてを記述すると、参考資料のデザインに完成します。

コピペでOK！Xeory Extention「トップページ」のデザイン変更～CSSカスタマイズ編～
2019.10.29
コピペでOK！Xeory Extention「トップページ」のデザイン変更～CSSカスタマイズ編～
トップページ 無料テーマ「Xeory Extention」は初心者にやさしい素晴らしいテーマですが、ベースカラーやレイアウトを自由に変更できない点においては、唯一デメリットと言えます。ここでは「トップページ」の固定デザインをカスタマイズするための、すぐに使えるCSSコードを紹介します。 この記事で紹介するのは、...
トップページCSS
/*---------------------------------- 
トップページ: ブログ記事一覧
---------------------------------- */
#popular_post_content h2 i,
#recent_post_content h2 i {
    display: none; /* 見出しアイコンを消す */
}
body.home .front-loop .popular_post_box .p_category {
    color: #079292; /* カテゴリーの文字色 */
    background-color: #fff; /* カテゴリーのテキストの背景色 */
    border: 1px solid #079292; /* カテゴリーの枠線の色と太さ */
}

/* ----------------------------------
トップページ: クローズアップ記事
---------------------------------- */
body.home #front-contents .c_number {
    background-color: #003037; /* 数字の背景色 */
}
body.home #front-contents h3 {
    color: #079292; /* タイトル色 */
}
body.home #front-contents .c_english {
    color: #079292; /* サブタイトル色 */
}

/* ----------------------------------
トップページ: サービス記事
---------------------------------- */
body.home #front-service .front-service-inner h3 {
    color: #079292; /* タイトルの文字色 */
}
body.home #front-service .front-service-inner .c_english {
    color: #079292; /* サブタイトルの文字色 */
}
 
/* ----------------------------------
サービス記事: スクリーンサイズ991px以下
---------------------------------- */
@media screen and (max-width: 991px) {
    body.home #front-service .front-cont-header {
        margin-bottom: 30px; /* タイトル下の余白 */
    } 
    body.home #front-service .front-service-inner .c_box {
        padding-top: 10px; /* 項目ボックス上の余白 */
    }
    body.home #front-service .front-service-inner .c_box:first-child {
        border-bottom: 1px solid #ababab; /* 区切り線の色と太さ */
    } 
    body.home #front-service .front-service-inner .c_box h3 {
        margin-top: 5px; /* 項目タイトル上の余白 */
        font-size: 25px; /* 項目タイトルの文字サイズ */
    } 
    body.home #front-service .front-service-inner .c_box .c_text br {
        display: none; /* 改行をなくす */
    }  
}

/* ----------------------------------
トップページ: 会社情報
---------------------------------- */
body.home #front-company dl#front-company-1 dt {
    border-top: 2px solid #079292; /* 表のアクセントカラー */
}

/* ----------------------------------
トップページ: お問い合わせフォーム
---------------------------------- */
#front-contact .c_box {
    background-color: #fff; /* 背景色 */
}
#front-contact label {
    color: #000; /* お問い合わせ項目の文字色 */
}
body.home #front-contact input,
body.home #front-contact textarea {
    border: 1px solid #0d7484; /* 入力欄の枠線の色と太さ */
    width: 100% !important; /* 入力欄とボタンの幅を最大に */
}
body.home #front-contact input.wpcf7-submit {
    background-color: #0d7484 !important; /* 送信ボタンの色 */
    border: none; /* 送信ボタンの枠線を消す */
}

/* ----------------------------------
トップページ: ボックス共通項目
---------------------------------- */
body.home .front-main-cont .front-cont-header {
    background-color: #003037; /* タイトルバーの背景色 */
}
.c_btn .btn {
    background-color: #0d7484 !important; /* 詳細ボタンの背景色 */ 
    color: #fff !important; /* 詳細ボタンの文字色 */ 
}
body.home .tri-border {
    display: none; /* 見出しの突起を消す */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/*---------------------------------- 
トップページ: ブログ記事一覧
---------------------------------- */
#popular_post_content h2 i,
#recent_post_content h2 i {
    display: none; /* 見出しアイコンを消す */
}
body.home .front-loop .popular_post_box .p_category {
    color: #079292; /* カテゴリーの文字色 */
    background-color: #fff; /* カテゴリーのテキストの背景色 */
    border: 1px solid #079292; /* カテゴリーの枠線の色と太さ */
}
 
/* ----------------------------------
トップページ: クローズアップ記事
---------------------------------- */
body.home #front-contents .c_number {
    background-color: #003037; /* 数字の背景色 */
}
body.home #front-contents h3 {
    color: #079292; /* タイトル色 */
}
body.home #front-contents .c_english {
    color: #079292; /* サブタイトル色 */
}
 
/* ----------------------------------
トップページ: サービス記事
---------------------------------- */
body.home #front-service .front-service-inner h3 {
    color: #079292; /* タイトルの文字色 */
}
body.home #front-service .front-service-inner .c_english {
    color: #079292; /* サブタイトルの文字色 */
}
 
/* ----------------------------------
サービス記事: スクリーンサイズ991px以下
---------------------------------- */
@media screen and (max-width: 991px) {
    body.home #front-service .front-cont-header {
        margin-bottom: 30px; /* タイトル下の余白 */
    } 
    body.home #front-service .front-service-inner .c_box {
        padding-top: 10px; /* 項目ボックス上の余白 */
    }
    body.home #front-service .front-service-inner .c_box:first-child {
        border-bottom: 1px solid #ababab; /* 区切り線の色と太さ */
    } 
    body.home #front-service .front-service-inner .c_box h3 {
        margin-top: 5px; /* 項目タイトル上の余白 */
        font-size: 25px; /* 項目タイトルの文字サイズ */
    } 
    body.home #front-service .front-service-inner .c_box .c_text br {
        display: none; /* 改行をなくす */
    }  
}
 
/* ----------------------------------
トップページ: 会社情報
---------------------------------- */
body.home #front-company dl#front-company-1 dt {
    border-top: 2px solid #079292; /* 表のアクセントカラー */
}
 
/* ----------------------------------
トップページ: お問い合わせフォーム
---------------------------------- */
#front-contact .c_box {
    background-color: #fff; /* 背景色 */
}
#front-contact label {
    color: #000; /* お問い合わせ項目の文字色 */
}
body.home #front-contact input,
body.home #front-contact textarea {
    border: 1px solid #0d7484; /* 入力欄の枠線の色と太さ */
    width: 100% !important; /* 入力欄とボタンの幅を最大に */
}
body.home #front-contact input.wpcf7-submit {
    background-color: #0d7484 !important; /* 送信ボタンの色 */
    border: none; /* 送信ボタンの枠線を消す */
}
 
/* ----------------------------------
トップページ: ボックス共通項目
---------------------------------- */
body.home .front-main-cont .front-cont-header {
    background-color: #003037; /* タイトルバーの背景色 */
}
.c_btn .btn {
    background-color: #0d7484 !important; /* 詳細ボタンの背景色 */ 
    color: #fff !important; /* 詳細ボタンの文字色 */ 
}
body.home .tri-border {
    display: none; /* 見出しの突起を消す */