7e OFFICIAL BLOG

コピペでOK!Xeory Extention「トップページ」のデザイン変更~CSSカスタマイズ編~

トップページ

無料テーマ「Xeory Extention」は初心者にやさしい素晴らしいテーマですが、ベースカラーやレイアウトを自由に変更できない点においては、唯一デメリットと言えます。ここでは「トップページ」の固定デザインをカスタマイズするための、すぐに使えるCSSコードを紹介します。

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

参考資料: Xeory_Extention_トップページ_完成形

CSSカスタマイズ

コーディングを始める前に、必ずテーマの初期設定のカラー設定が「デフォルトになっていることを確認してください。

ブログ記事一覧


トップページの上部にある記事一覧ボックスのデザインです。
4
7行目のコードは、「人気のある投稿」と「最近の投稿」という見出しの前に表示されるアイコンを削除するコードです。必要なければ省略してください。

クローズアップ記事


テーマ設定で作成したクローズアップ記事が表示されるボックスのデザインです。
ここでのコーディングは、クローズアップ記事のすべての項目にデザインが反映されます。タイトルの色においては完成後のカラー指定(#079292)がデフォルトの緑色に似ているので、下記8行目と11行目のカラーコードを赤色(#ff0000)に置き換えています

サービス記事


テーマ設定で作成したサービス記事が表示されるボックスのデザインです。
11行目以降のコードは、スクリーンサイズが991px以下のときのレイアウトをカスタマイズするものです。主に余白を調整するものですので、コードの記述前と記述後でのレイアウトの変化を比較確認してください。

会社情報


ページ下部の会社情報ボックスのデザインです。
下記5行目は、テーブル(表)のアクセントカラーを変更するコードですので、自由に任意のカラーを指定してください。またこのボックスでGoogleマップを表示するには、テーマ設定の「アクセスマップ」という項目にGoogleマップのコードを入力する必要があります。

お問い合わせフォーム


トップページ最下部の、お問い合わせフォームボックスのデザインです。
上記の画像ではプラグインの「Contact Form 7」を使用していますが、このボックスは「Xeory Extention」のトップページで唯一、フリースペースとしての編集が行える部分ですので、お問い合わせフォーム以外の内容にすることも可能です。プラグインの導入手順については、この記事の最下部で補足説明します。

ボックス共通項目


最後に、クローズアップ記事からお問い合わせフォームまでの4つボックスに共通するデザインです。
下記コードを記述することで、4つのボックスのデザインをまとめて変更することができます。

以上で、トップページのカスタマイズは完了です。

次回の記事では、「固定ページ」と「投稿ページ」をカスタマイズするCSSコードを紹介します。

【補足】プラグインの導入

まずは管理画面の左側メニューから「プラグイン」をクリックし、続けてタイトル横にある「新規追加」ボタンをクリックします。

画面右上の検索ボックスに『contact form 7』と入力すると、一番上に該当のプラグインが表示されます。「今すぐインストール」をクリックし、ボタンが切り替わり次第プラグインを「有効化」します。

「Contact Form 7」が有効化されると、左側メニューに「お問い合わせ」という項目が追加されるのでクリックし、「コンタクトフォーム1」という項目のショートコードをコピーします。(お問い合わせフォーム自体のカスタマイズについては、ここでは省略させていただきます。)

左側メニューから「テーマ設定」に移動し、ページ下段の「お問い合わせフォーム設定」の「お問い合わせフォーム本文」に、先ほどコピーしたショートコードを貼り付けて完了です。

Xeory Extention シリーズ

関連記事一覧

PAGE TOP