ザ・ボディショップは、人権擁護・環境保護・動物実験反対の先駆けエシカルトレードを行っています。




WordPressテーマ「Xeory Extension」の無地トップをスライダーにカスタマイズ

ハズ部さんのテーマ「Xeory Extension」

私にとってネットの神様である「ハズ部」さん

最近、バズ部のXeoryという無料テーマができたので、Xeory Extensionというサイト型テーマで構築・カスタマイズしてみたいと思います。

Xeory Extensionのトップページのメインビジュアルは、爽やかな無地にメッセージととてもシンプルになっていますが、私個人としてはちょっと大きすぎるかなという気がしたので修正してみました。

Xeory Extensionの初期トップページ

Xeory Base(ブログ型)とXeory Extension(サイト型)が出ています。

サイト型のExtensionももちろんブログとして使えるので、私はXeory Extensionで制作してみます。

私はトップはしっかりデザインされていて、記事ページは2カラムになるタイプを探していたので、今回のXeory Extensionは理想どおりでした。

しかし、デデデーンとしたTOPで記事がまだ少い今は、ちょっと強調しすぎて恥ずかしいので、ちょっとカスタマイズします。

ヘッダーをスライダー画像に設定

スライダー式にしようと思うので、画像を4枚用意しました。

私の場合は画像サイズ:1400×400にしました。

ヘッターに「Meta SLider」を差し込み、バックのカラーをホワイトに変更してスライダーに使用する画像カラーを目立つように変更しました。

スライダーの画像によっては、バックになるカラーでスマートさがなくなるので、淡いカラーが良いと思います。

フッターのバックカラーの変更

管理画面>外観>テーマの編集>スタイルシート (style.css)

/* —————————————-
* header
—————————————- */
#header {
background: #47B39D;
padding: 0;
overflow: visible;
}

上記の部分の background: #◯◯◯◯◯がカラーになっているので ホワイトの場合は #ffffff に変更と、好きなカラーに変更してください。

私の場合は…ホワイトなので下記のように変更しました。

 

/* —————————————-
* header
—————————————- */
#header {
background: #ffffff;
padding: 0;
overflow: visible;
}

 

 

スライドショーを入れる

今回はプラグイン「Meta Slider」を使用して制作しました。

「Meta SLider」はテンプレートに含めるショートコードが作成できるので、簡単にheader.phpに差し込むことができます。

「Meta SLider」のショートコートをテーマヘッダー (header.php)に貼ります。

管理画面 > 外観 > テーマの編集 > テーマヘッダー (header.php)

下にショートコートを貼り付けます。

場所が気に入らない方もいらっしゃると思います。

私の場合はヘッダーをバックを白くしてスライダーというイメージだったので、上記の方法でカスタマイズしました。

テンプレートに含めるショートコートを利用して好きな場所にセットしてみてください。

バックアップして「もしもの対策」をしておきましょう。

 

トップの見出し無地(ビジュアル:グリーン系)の高さを変更する方法

style.cssに追記することで解決します。

変更する部分

body.home #main_visual =トータルの高さを変更(400px)
body.home #main_visual .wrap =見出し文字の上の空白の高さを変更 (100px)
body.home #main_visual h2 = 大見出し文字の下との間隔を変更 (10px)

実際は記述される文字数によって、数字は変更していくことになりますが、まずはわかりやすいように上記の変更数値で表現します。

 

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

body.home #main_visual .wrap {
padding-top: 100px !important; }

body.home #main_visual h2 {
margin-bottom: 10px;
}

 

強制的に「!important」を付け、優先順位を上げちゃいました。

ビジュアルでグリーンはh2の見出しになっているので、無地の高さ変更ではなく画像にする場合は、設定画面にh2にふさわしい文面を記述してくださいね。

テーマXeory Extensionカスタマイズ

上段が4枚のスライダーで、下段が高さ400pxになっています。

まだまだカスタマイズ方法がありそうなので、試していこうと思っています。


SPONSORED LINK


サブコンテンツ