今回は「Xeory Base」のトップとフッターに色つきのボーダーを追加するカスタマイズ方法を紹介します。まぁ、このボーダーはなくてもいいものですが、少しサイトの色を出すならアリだと思います。

因みに、無料で配布されている「Xeory Base」のテンプレートには通常、トップとフッターには何もありません。配布されているバズ部のワードプレステーマは以下の様にシンプルです。

Xeory Base

このシンプルなデザインのトップとフッターに、青色のボーダーば追加します。とても簡単なので是非、チャレンジしてみてください。

SPONSORED LINK

「Xeory Base」のトップに青色のボーダーを追加

まず、ヘッダーの部分からボーダーを追加するカスタマイズを紹介しましょう。

ワードプレス管理画面の外観からテーマ編集にいき、スタイルシート (style.css)に移行する。

外観 → テーマ編集 → スタイルシート (style.css)

このスタイルシートの中から『header』のタグを探し、そして以下のタグを追加します(画像参照)。

 border-top: 10px solid #1450aa;

タグを追加したら以下のような感じになります。

Xeory Baseカスタマイズ2

タグを追加し更新すれば完了です。すると以下の様にボーダーが表示されます。

Xeory Baseカスタマイズ3

なお、タグの数字はボーダーの太さをあらわし「#1450aa;」は色のタグになります。ボーダーを太くしたければ数値を大きくすればいいし、色を変更したければ他の色タグに変更してもいいです。

「Xeory Base」のフッターにボーダーを追加

つづいて、フッターにボーダーを追加するカスタマイズです。

Xeory Baseのフッターのカスタマイズも基本、ヘッダーと変わりません。ヘッダー同様にスタイルシートの中から「footer-02」を探し、以下のタグを追加するだけ。

 border-bottom: 10px solid #1450aa;

ただ、ここでひとつ注意して欲しいのは、ボーダーを追加する箇所がフッターなのでタグの一部が「bottom」になっていることです。ここをヘッダー同様に「top」にしてしまうと変になってしまうので注意しましょう(画像参照)。

Xeory Baseカスタマイズ4

タグを追加し、更新すればフッターにもボーダーが追加されています。

Xeory Baseカスタマイズ5

なお、ここでも色のタグや数値を変更する事も可能なので、お好みに合わせてカスタマイズするといいです。

個人的にはボーダーがあった方がサイトが締まって見えるし、色を出しているのでオリジナル性も感じます。シンプルなカスタマイズですが、その効果は大きいと思います。

SPONSORED LINK