Xeory Extention
無料テーマ「Xeory Extention」は初心者にやさしい素晴らしいテーマですが、ベースカラーやレイアウトを自由に変更できない点においては、唯一デメリットと言えます。ここでは「トップページ」の固定デザインをカスタマイズするための、すぐに使えるCSSコードを紹介します。
ひとまずはカスタマイズ画面の「追加CSS」に記述し、プレビュー画面で確認しながら進めて、全体のカスタマイズが完了したらCSSコードをテーマエディターの「スタイルシート(style.css)」に移動しておきましょう。その際、CSSが効かない現象が起きた場合は、ページ下部で紹介する対処法で解決できます。
CSSまとめ
ヘッダー
ヘッダーは、全てのページの上部に共通して表示されるもので、閲覧者が迷子にならないための目次となるメニューを配置されたり、ウェブサイトのブランドイメージを訴求するなどの役割を担っています。
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 |
/* ---------------------------------- ヘッダー: ヘッダーバー ---------------------------------- */ #header { background: #079292; /* ヘッダーバーの色 */ } /* ---------------------------------- ヘッダーバー: グローバルナビ ---------------------------------- */ #gnav { background-color: #079292; /* 隙間 */ } #gnav ul li a { background-color: #079292; /* 背景色 */ color: #fff; /* 文字色 */ } #gnav ul li:hover a { background: #0d7484; /* ホバー色 */ } #gnav ul li.current-menu-item a { background: #0d7484; /* セレクト色 */ } /* ---------------------------------- ヘッダーバー: プライマリーナビ ---------------------------------- */ #header-fnav-area #header-fnav-btn a { background-color: #003037; /* ボタン背景色 */ } #header a { color: #fff; /* アイコン色 */ } /* --------------------------------- ヘッダーナビ: スクリーンサイズ991px以下 ---------------------------------- */ #header-nav-btn a { background-color: #0d7484; /* ヘッダーメニューの色 */ } #gnav-sp { background: #003037; /* メニュー背景色 */ } /* ---------------------------------- スクリーンサイズ767px以下: ロゴ ---------------------------------- */ @media screen and (max-width: 767px) { #header #logo { float: left; display: inline-block; padding: 15px 0 10px 10px; /* 余白: 上右下左 */ } #header #logo a img { width: 150px; /* 横サイズ */ height: 38px; /* 縦サイズ */ } } /* ---------------------------------- スクリーンサイズ767px以下: ハンバーガーメニュー ---------------------------------- */ @media screen and (max-width: 767px) { #header-nav-btn { display: block; width: auto; line-height: 1; float: right; margin: 0; } #header-nav-btn a { display: block; text-align: center; font-size: 24px; /* アイコンサイズ */ padding: 22px 10px 10px 10px; /* 余白: 上右下左 */ line-height: 1; background: none; width: auto; } } /* ---------------------------------- スクリーンサイズ767px以下: ヘッダーの固定 ---------------------------------- */ @media screen and (max-width: 767px) { #header { position: fixed; left: 0; right: 0; z-index: 999; } #main_visual, .breadcrumb-area { padding-top: 65px; } } |
ファーストビュー
ファーストビューは、ウェブサイトの「第一印象」となる重要な部分です。「Xeory Extention」のファーストビューはとてもシンプルですが、デフォルトデザインの単色背景を画像に変えるなど、より印象的にカスタマイズするためのCSSコードをこの記事で紹介していきます。上記画像は、記事内で紹介するコードすべてを入力した場合のデザインです。
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 |
/* ---------------------------------- ファーストビュー: 背景を画像に変更 ---------------------------------- */ body.home #main_visual { background-image: url(画像ファイルのURL); background-color: #000; /* 画像の下地色 */ width: 100%; background-position: center center; background-repeat: no-repeat; } /* ---------------------------------- ファーストビュー: 背景画像にオーバーレイをかける ---------------------------------- */ body.home #main_visual::before{ position: absolute; background-color: rgba(0,0,0,.6); /* オーバーレイの色 */ 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コードすべてを記述すると、参考資料のデザインに完成します。
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; /* 見出しの突起を消す */ } |
固定・投稿ページ
参考資料: Xeory_Extention_固定・投稿ページ _完成形
個別ページと投稿ページのデフォルトデザインをカスタマイズするためのCSSコードです。下記記事では、細やかなデザインの変更についてまで項目別に紹介しています。参考資料は、CSSコードすべてを記述した場合のデザインです。
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 |
/* ---------------------------------- 投稿ページ: アーカイブ等の記事一覧ページ ---------------------------------- */ .post-header .cat-name span { border: 1px solid #079292; /* カテゴリーの枠線の色と太さ */ color: #079292; /* カテゴリーの文字色 */ } #content .post-title a:hover { color: #079292; /* タイトルのホバー色 */ } #content .post-footer a.morelink { background-color: #0d7484; /* 「続きを読む」の背景色 */ } /* ---------------------------------- 個別・投稿ページ: 記事外デザイン ---------------------------------- */ #content { background-color: #fafafa; /* 背景を単色に*/ } .breadcrumb-area a { color: #079292; /* パンくずリストのリンク色 */ } .side-widget a { color: #079292; /* サイドバーのリンクの色 */ text-decoration: none; /* リンクの下線を消す */ } .side-widget a:hover { color: #003037; /* サイドバーのリンクのホバー色 */ } /* ---------------------------------- 固定・投稿ページ: 記事内デザイン ---------------------------------- */ li.comments { display:none !important; /* コメント数の表示を消す */ } .single #main article a, .page #main article a { color: #079292; /* 本文リンクの色 */ } #content .pagination .current { background-color: #079292; /* ページャーの色 */ } .pagination a:hover { background: #079292; /* ページャーのホバー背景色 */ color: #fff !important; /* ページャーのホバー文字色 */ } /* ---------------------------------- 記事内デザイン: 見出し2 ---------------------------------- */ #content .post-content h2 { background-color:#003037; /* 文字の背景色 */ border-left:solid 10px #079292; /* 左線の色と太さ */ } /* ---------------------------------- 記事内デザイン: 見出し3 ---------------------------------- */ #content .post-content h3 { border-bottom: 2px solid #079292; /* 下線の色と太さ */ font-weight: bold; /* 太字に */ } /* ---------------------------------- 記事内デザイン: 見出し4 ---------------------------------- */ #content .post-content h4 { border-left: 5px solid #079292; /* 左線の色と太さ */ font-weight: bold; /* 太字に */ } /* ---------------------------------- 投稿ページ: CTAボックス ---------------------------------- */ #content .post-cta { background-color: #003037; /* 背景色 */ } #main article .post-cta-btn .button { background-color: #079292; /* ボタンの背景色 */ color: #fff; /* ボタンの文字色 */ } /* ---------------------------------- 投稿ページ: コメント欄 ---------------------------------- */ #content #comments h4 { border-bottom: 3px solid #079292; /* タイトルの下線 */ } #content #comments a { color: #079292; /* リンクの色 */ } #content form input[type="submit"] { background-color: #0d7484; /* ボタンの背景色 */ } |
フッター
フッターは、ヘッダーと同じく前ページに共通表示される部分です。サイトマップを配置していることから、別のページへの誘導を促す役割を担っている部分です。下記記事では、デフォルトデザインには存在しないフッターメニューの追加方法についても紹介しています。
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 |
/* ---------------------------------- フッター: サブフッターメニュー ---------------------------------- */ #sub-footer-menu a { font-size: 12px; /* 文字サイズ */ text-decoration: none; } #sub-footer-menu ul li { display: inline-block; /* 横並び */ list-style-type: none; text-transform: uppercase; } #sub-footer-menu ul li::before { content: "|"; /* 区切り線 */ padding: 0 0.6em; } #sub-footer-menu ul li:first-child::before { content: ""; padding: 0; } #sub-footer-menu ul { text-align: center; margin: 10px 0; color: #079292; /* 区切り線の色 */ } #sub-footer-menu ul .sub-menu { display: none; } /* ---------------------------------- サブフッターメニュー: レスポンシブ ---------------------------------- */ @media screen and (max-width: 767px) { #sub-footer-menu { display: list-item; /* 縦並び */ } } /* ---------------------------------- フッター: カラーの変更 ---------------------------------- */ #footer .footer-01 { background-color: #003037; /* 背景色 */ } #footer { border-top: 8px solid #fff; /* 上部ボーダーの色と太さ */ } #footer #footer-brand-area { border-bottom: 1px solid #079292; /* 区切り線の色と太さ */ } #footer .footer-02 { background-color: #079292; /* 最下部フッターの色 */ } .footer-address { text-align: left !important; /* フッターテキストの左寄せ */ } |
【補足】CSSが効かない場合の対処法
まずはウェブサイトを開いた状態で、画面上のどこでも構いませんので「右クリック」します。
表示されるウィンドウの中から「検証」を選択すると、ページを構成するソースコードなどが画面右側に表示され、表示中のウェブサイトが検証モードになります。
この状態でブラウザの「更新ボタン」を「右クリック」し、「キャッシュの削除とハード再読み込み」をクリックしましょう。以上の手順で、CSSが反映されなかった現象は解決されるはずです。