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

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

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

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

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

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

xeory_extension_top

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

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

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

高さの変更を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

 

About 2310 268 Articles
日系損保、外資系コンサルティングファームを経て、2012年、結婚を機に夫婦で365日世界一周。その後、日本と世界をつないで楽しい世の中を創れないかと観光で起業。日々試行錯誤中。趣味は旅行と食べ歩き。世の中にちゃんと付加価値をうみだしていきたい。ワクワクする世界を創っていきましょう。

5 Comments

  1. はじめまして。
    はじめまして。
    wordpressでブログを始めて1年の初心者です。
    この記事を参考に、トップページの高さを変更するべく試みてみたのですが、うんともすんとも変わりません…変更に時間がかかるものなのでしょうか?

    xeory ektensionの評判が良いので使ってみたいと選びましたが、何をどう変更したらいいのか分からなくて…..初心者には無理なテーマなのでしょうか?

    トップページをどうやって変更するのか、何日も調べてみたのですが、技術的な言葉が分からなくて挫折しそうです。
    もし何か参考になる書籍などありましたら、オススメをおしえていただけると助かります。

    • Sayakaさん、
      コメントありがとうございます。
      時間はかからないと思いますし、私も初心者ながらGoogle先生に尋ねながら手を加えていったりしています。

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

      スタイルシートにこの文言加えても全く変わりませんでした??

  2. はじめまして。
    わたしもSayakaさん同様にスタイルシートにこのコードを追加してもうんともすんとも変わりません。
    body.home #main_visual {
    height: 200px !important;
    }

  3. わたしもウントモスントモでどないやねん!と思いつつ
    少し時間経ったら
    変わりましたよー!

3 Trackbacks / Pingbacks

  1. Xeory Extensionカスタマイズ参考まとめ | LIBRE
  2. 「Xeory Extension」をもっと便利にするカスタム方法まとめ
  3. Xeory Extensionのカスタムメモ① – あるWEBディレクターのブログ

Leave a Reply

Your email address will not be published.