【XeoryBase】タイトルとメニューをセンタリング(中央寄せ)する方法【WordPress】

WordPressでつまづく人の大半は、思い通りにテーマをカスタマイズ出来ない点ではないだろうか。私自身エンジニアだが（Webデザイナーではない）現在進行形でめちゃくちゃ苦労している。そのひとつがタイトルとメニューのセンタリング（中央寄せ）だった。テーマがXeoryBase以外だとすんなりいくのか情報も少なかったので、備忘録として記載しておく。

当ブログは２０１９年３月に『cocoon』に移行した。よって、あくまでも参考程度に見て欲しい。

前準備
タイトルをセンタリング（中央寄せ）する
1. style.cssの変更
2. header.phpの変更
メニューをセンタリング（中央寄せ）する
1. style.cssの変更
まとめ

前準備

子テーマを作成していない場合は作成しておくことをお勧めする。子テーマを作成する方法や意味は以下のサイトが参考になった。

子テーマを作ってWordPressの既存テーマをカスタイマイズする方法

XeoryBaseの子テーマ作成の場合、style.cssに記載するTheme Nameを「xeory_base_child」、Templateを「xeory_base」とし、作成したstyle.cssとfunctions.phpを「xeory_base_child」フォルダに入れ、FTPなどで「/wp-content/themes」フォルダにアップロードすれば認識される。

子テーマを作成し、カスタマイズする前に「外観」－「テーマ編集」の編集するテーマの選択で「xeory_base_child」を選択するのを忘れずに！

タイトルをセンタリング（中央寄せ）する

style.cssの変更

タイトルを中央寄せするにはstyle.cssの「#header #logo」と「#header #header-sns」部分を以下のように変更すれば良い。

#header #logo {
    float: none;
    font-size: 24px;
    text-align: center;
}
#header #header-sns {
    float: none;
}

変更箇所はfloat部分である。これらをnoneにする。これで回り込みというものを解除している。
それから「text-align:center」を追記する形だ。これがセンタリング（中央寄せ）を行っている。
コードがきちんと動作していれば以下のようになる。

お気づきのとおり、タイトルはセンタリング（中央寄せ）されたが、よく分からないマークが下に行ってしまった。このマークの消す方法は以下に続くので慌てず読み進めて欲しい。
（よく分からんマークを残してセンタリングする方法は私には出来なかった。メニューのようにfloatでひとつに固めて、それから丸ごとセンタリングすれば理論上いけるはずだが私はよく分からんマークに固執する必要は無かったため断念した）

header.phpの変更

よく分からんマークの削除方法はheader.phpの「<?php bzb_header_social_buttons();?>」記述をコメントアウトもしくは削除すれば良い。

  <!-- <?php bzb_header_social_buttons();?> -->

綺麗によく分からんマークが消えただろうか。
「xeory_base_child」に「header.php」がない場合は、「xeory_base」からheader.phpをダウンロードして、「xeory_base_child」にアップロードしてから、編集するテーマの選択を選択しなおせば出てくる。

メニューをセンタリング（中央寄せ）する

style.cssの変更

メニューをセンタリング（中央寄せ）するにはstyle.cssを変更すれば良い。

 #gnav ul {
    margin: 0;
    padding: 0;
    position: relative;
    left: 30%;
    float: left;
    text-align: center;
 }

メニューがセンタリング（中央寄せ）されただろうか。

幾つか注意点がある。「left」の値は使い方によって調整が必要だ。左から何％の配置という意味っぽいので、各自適当に値を変えて調整して欲しい。また、このコードは初期設定のカラー設定が「デフォルト」の場合のみ有効だ。デフォルト以外の色を指定している場合は「style.css」に以下のコードの追加が必要となる。

body.color03 #gnav ul {
    text-align: center;
}

緑はbody.color01、赤はbody.color02、オレンジはbody.color03、ピンクはbody.color04で読みかえること。

まとめ

カスタマイズしてて悟ったが「XeoryBase」はなかなかクセがある。いや、寧ろ、「Wordpress」が、だろうか。私はエンジニアという名のプログラマなので、ある程度耐性があるが初心者にはきついと思う。いや、ほんとに。ただ、慣れてくると何となく仕組みが分かってくるので記事を書きつつも、ちょこちょこカスタマイズに励んでいってほしい。経験大事。

ちなみに今回、画像に出てきたサイトはエックスドメインの無料サーバを利用している。ある程度、制限はあるがドメイン契約してなくても使える。ドメイン契約すると更に使い勝手の良い無料サーバになる。もっと早くに知りたかった。

あとできちんと記事にするつもりだが、とりあえず試したい or 自信のない方はエックスドメインの無料サーバを借りて試してみることをお勧めする。その上でやっていけそうだなと思ったらエックスドメイン（独自ドメイン）契約＆レンタルサーバ契約すると後々に幸せになれるかもしれない。

ちなみに、このサイトはエックスドメイン（独自ドメイン）＋さくらインターネット（レンタルサーバ）で運営している。

エックスドメイン