今までのお仕事履歴 & まったりお仕事募集中♪

【質の良い無料コンテンツ紹介】

【ブラックレーベル】謎解き特集!【SCRAPゲームブック】

【通信制大学】産業能率大学に三年次編入しました

【悲報】ジュニアNISAで、買い付け口座を間違えていた話【NISA預りと特定預りは違うのよ】

当サイトではアフィリエイト広告を利用して商品を紹介しています。

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

ブログ関連

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

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

前準備

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

子テーマを作って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 自信のない方はエックスドメインの無料サーバを借りて試してみることをお勧めする。その上でやっていけそうだなと思ったらエックスドメイン(独自ドメイン)契約&レンタルサーバ契約すると後々に幸せになれるかもしれない。

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

エックスドメイン

さくらインターネット ※WordPressはスタンダート以上から

独自ドメインについては、こちらの記事を参考に。

【レンタルサーバ契約よりも】Wordpressでブログを作るその前に【独自ドメイン】
Wordpressを使ってブログ立ち上げたい! アフィリエイトサイト運営したい! 様々な想いがあることだろう。そして次に出てくる言葉は「レンタルサーバを契約しなくちゃ!」になると思うのだが、ちょっと待って欲しい。ブログ立ち上げてみたいけどW...

コメント