最近、バズ部の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
コメント
[…] 【Xeory Extension】トップの画像とサイズの変更カスタマイズ Xeoryカスタマイズ!トップの見出しの高さを変更する方法(Extension) […]
大変参考になります。ありがとうございます。
はじめまして。
はじめまして。
wordpressでブログを始めて1年の初心者です。
この記事を参考に、トップページの高さを変更するべく試みてみたのですが、うんともすんとも変わりません…変更に時間がかかるものなのでしょうか?
xeory ektensionの評判が良いので使ってみたいと選びましたが、何をどう変更したらいいのか分からなくて…..初心者には無理なテーマなのでしょうか?
トップページをどうやって変更するのか、何日も調べてみたのですが、技術的な言葉が分からなくて挫折しそうです。
もし何か参考になる書籍などありましたら、オススメをおしえていただけると助かります。
Sayakaさん、
コメントありがとうございます。
時間はかからないと思いますし、私も初心者ながらGoogle先生に尋ねながら手を加えていったりしています。
body.home #main_visual {
height: 300px !important;
}
スタイルシートにこの文言加えても全く変わりませんでした??
はじめまして。
わたしもSayakaさん同様にスタイルシートにこのコードを追加してもうんともすんとも変わりません。
body.home #main_visual {
height: 200px !important;
}
わたしもウントモスントモでどないやねん!と思いつつ
少し時間経ったら
変わりましたよー!
[…] 【Xeory Extension】トップの画像とサイズの変更カスタマイズ […]
[…] 参考にしたのはこちら➡【Xeory Extension】トップの画像とサイズの変更カスタマイズ|BUNLOG […]