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

Xeory Baseカスタマイズ3

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

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

Xeory Base

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

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

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

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

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

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

 border-top: 10px solid #1450aa;

タグを追加したらこんな感じだ。

Xeory Baseカスタマイズ2

タグを追加し更新すればOK。すると以下の様になる。

Xeory Baseカスタマイズ3

見事にヘッダーの上にボーダーが追加されているはずだ。

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

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

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

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

 border-bottom: 10px solid #1450aa;

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

Xeory Baseカスタマイズ4

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

Xeory Baseカスタマイズ5

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

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

[cc id=6738]

SPONSORED LINK

SNSでもご購読できます。