【Xeory Extension】トップの画像とサイズの変更カスタマイズ

最近、バズ部のXeoryという無料テーマが好きではまってます。

このサイトは、Xeory Baseというブログ型テーマを使っていますが、別のサイトではXeory Extensionというサイト型テーマで構築しています。

Xeory Extensionのトップページのメインビジュアルが、ちょっと大きすぎるかなという点が気になったので色々調べて修正してみました。

好み分かれるXeory Extensionの初期トップページ

Xeory Extensionは、初期のままだと、トップページが中々に大きいです。

インパクトあっていいのですが、
さすがに、何度もやってると下にスクロールするのが面倒になり、
これでは、コンテンツの露出が減るのではと思い、縦幅を小さくすることにしました。

また、単色の背景だと淋しいので、画像を入れてみることにしました。

カスタマイズ時は、子テーマを作ってから始めると、
今後、テーマがアップデートされた際に変更が維持されて便利です。（参照）

高さの変更をCSSに記載する

まずは、高さを変えるために、CSSに記載していきます。

この部分は、「body.home #main_visual」という項目で指定されているので、
子テーマのCSSに下記のように記載します。

body.home #main_visual {
height: 500px !important;
}

これで、高さの変更は完了です。

子テーマをつくらずに変更する際は、「body.home #main_visual」内に、
「height: 500px !important;」を追加しておけば大丈夫です。

もしもっと高さを低くしたければ、
500pxと記載した数値を小さく入力すれば可能です。

「!important」は優先順位を上げる際に記載するもののようですが、
これがないと変更されませんでした。

画像をアップロードする

続いて、画像に差し替えたい場合は、
まず最初に画像をアップロードしておきます。

変更した高さによって、画像のサイズは適したサイズを選んでください。

画像の表示をCSSに記載する

画像がアップロードされたら、画像を表示するようCSSに記載していきます。

同じく、「body.home #main_visual」内に、追記していきます。

body.home #main_visual {
background-image: URL(http://xxxxxxxx.jpg);
background-size: cover;
height: 500px !important;
}

xxxxxxxx.jpgには、アップロードした画像のアドレスを入力してください。
これによって、画像が表示されるようになります。

「background-image」にて表示する画像を記載し、
「background-size」によって、表示方法を指定しています。

coverをautoやcontain等に変更することで表示方法を変更することが出来ます。

また、明るい写真を使ってしまったため、白い文字が目立たなくなってしまった場合には、
「color: #000;」という形で、文字の色を指定してあげると解決します。

body.home #main_visual {
background-image: URL(http://xxxxxxxx.jpg);
background-size: cover;
height: 500px !important;
color: #000;
text-align: center;
}

以上、Xeory Extensionのトップページをカスタマイズする方法でした。

元に戻っちゃったときの為に、自分への備忘録として。

参考にしたサイト：
http://dyd.jp/blog003-wordpress/
http://triz-web.com/toronomado/xeory-headline-hight-change/
http://feb29.org/xeory-customise-main-visual-change.html