トップページ
無料テーマ「Xeory Extention」は初心者にやさしい素晴らしいテーマですが、ベースカラーやレイアウトを自由に変更できない点においては、唯一デメリットと言えます。ここでは「トップページ」の固定デザインをカスタマイズするための、すぐに使えるCSSコードを紹介します。
この記事で紹介するのは、トップページのデフォルトのベースカラーを会社のイメージカラーに変更したり、お好みのデザインへとカスタマイズしたい場合などに利用可能なCSSコードです。ボックス別に紹介するすべてのコード記述すると、下記参考資料のデザインに完成します。カスタマイズ画面の「追加CSS」に記述し、プレビュー画面で確認しながら進めましょう。
参考資料: Xeory_Extention_トップページ_完成形
CSSカスタマイズ
コーディングを始める前に、必ずテーマの初期設定のカラー設定が「デフォルト」になっていることを確認してください。
ブログ記事一覧
トップページの上部にある記事一覧ボックスのデザインです。
4～7行目のコードは、「人気のある投稿」と「最近の投稿」という見出しの前に表示されるアイコンを削除するコードです。必要なければ省略してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/*---------------------------------- トップページ: ブログ記事一覧 ---------------------------------- */ #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; /* カテゴリーの枠線の色と太さ */ } |
クローズアップ記事
テーマ設定で作成したクローズアップ記事が表示されるボックスのデザインです。
ここでのコーディングは、クローズアップ記事のすべての項目にデザインが反映されます。タイトルの色においては完成後のカラー指定（#079292）がデフォルトの緑色に似ているので、下記8行目と11行目のカラーコードを赤色（#ff0000）に置き換えています。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* ---------------------------------- トップページ: クローズアップ記事 ---------------------------------- */ body.home #front-contents .c_number { background-color: #003037; /* 数字の背景色 */ } body.home #front-contents h3 { color: #ff0000; /* タイトル色 */ } body.home #front-contents .c_english { color: #ff0000; /* サブタイトル色 */ } |
サービス記事
テーマ設定で作成したサービス記事が表示されるボックスのデザインです。
11行目以降のコードは、スクリーンサイズが991px以下のときのレイアウトをカスタマイズするものです。主に余白を調整するものですので、コードの記述前と記述後でのレイアウトの変化を比較確認してください。
|
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 |
/* ---------------------------------- トップページ: サービス記事 ---------------------------------- */ body.home #front-service .front-service-inner h3 { color: #ff0000; /* タイトルの文字色 */ } body.home #front-service .front-service-inner .c_english { color: #ff0000; /* サブタイトルの文字色 */ } /* ---------------------------------- サービス記事: スクリーンサイズ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; /* 改行をなくす */ } } |
会社情報
ページ下部の会社情報ボックスのデザインです。
下記5行目は、テーブル（表）のアクセントカラーを変更するコードですので、自由に任意のカラーを指定してください。またこのボックスでGoogleマップを表示するには、テーマ設定の「アクセスマップ」という項目にGoogleマップのコードを入力する必要があります。
|
1 2 3 4 5 6 |
/* ---------------------------------- トップページ: 会社情報 ---------------------------------- */ body.home #front-company dl#front-company-1 dt { border-top: 2px solid #079292; /* 表のアクセントカラー */ } |
お問い合わせフォーム
トップページ最下部の、お問い合わせフォームボックスのデザインです。
上記の画像ではプラグインの「Contact Form 7」を使用していますが、このボックスは「Xeory Extention」のトップページで唯一、フリースペースとしての編集が行える部分ですので、お問い合わせフォーム以外の内容にすることも可能です。プラグインの導入手順については、この記事の最下部で補足説明します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* ---------------------------------- トップページ: お問い合わせフォーム ---------------------------------- */ #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; /* 送信ボタンの枠線を消す */ } |
ボックス共通項目
最後に、クローズアップ記事からお問い合わせフォームまでの4つボックスに共通するデザインです。
下記コードを記述することで、4つのボックスのデザインをまとめて変更することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* ---------------------------------- トップページ: ボックス共通項目 ---------------------------------- */ 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; /* 見出しの突起を消す */ } |
以上で、トップページのカスタマイズは完了です。
次回の記事では、「固定ページ」と「投稿ページ」をカスタマイズするCSSコードを紹介します。
【補足】プラグインの導入
まずは管理画面の左側メニューから「プラグイン」をクリックし、続けてタイトル横にある「新規追加」ボタンをクリックします。
画面右上の検索ボックスに『contact form 7』と入力すると、一番上に該当のプラグインが表示されます。「今すぐインストール」をクリックし、ボタンが切り替わり次第プラグインを「有効化」します。
「Contact Form 7」が有効化されると、左側メニューに「お問い合わせ」という項目が追加されるのでクリックし、「コンタクトフォーム1」という項目のショートコードをコピーします。（お問い合わせフォーム自体のカスタマイズについては、ここでは省略させていただきます。）
左側メニューから「テーマ設定」に移動し、ページ下段の「お問い合わせフォーム設定」の「お問い合わせフォーム本文」に、先ほどコピーしたショートコードを貼り付けて完了です。
