WordPress/Stingerカスタマイズ

Stinger7カスタマイズ サイトのデザインを工事中のメモ

こんにちは、ライターのてんむすです。

サイト開設から一か月が経ちました。最初からStinger7を使っていて、デザインをいじってきたのですが、何もわからないまま、何の記録も取らないまま、あちこちいじったので、不安になってきました。そのうえ、更にデザインをいじろうとしたら、過去の変更が悪さをして思い通りに変更ができないという事態になりました。

そのため、ここいらで心を入れ替えて、一からちゃんと記録を取ったうえでStinger7のカスタマイズをしようと思います。

おことわりですが、とにかくcssやらphpは初心者で、ちんぷんかんぷんな僕なので、カスタマイズはすべて他のサイトを参考にさせてもらっています
ただし細かいところは僕なりにアレンジを入れているので、もしかしたら他の人に参考になるかもと思って細かく書いていきます。

 

0.Stinger7のインストール

Stinger7とその子テーマをインストールしました。

 

1.Stinger7本体から、各phpファイルを子テーマのフォルダにコピー

親テーマにあるstyle.cssとfunction.php以外のphpファイルを、全て子テーマフォルダにコピーしました。

寝ログさんの記事から子テーマの意味・使い方を学びました。
僕の理解として、ポイントは以下の3点。

・テーマはアップデートがあると、それに引きずられてデザイン等も初期化されてしまうことがある。子テーマを使っていればアップデートの影響を受けずに済むというメリットがある。

・子テーマを使った場合、style.cssとfunction.phpの2つに関しては、Wordpress上、親のファイルを先に読み、その後で子のファイルが読まれ上書き適用される仕組み。

・style.cssと、function.php以外については、Wordpress上、子テーマに同名のものがあれば、子のファイルを読む。無ければ親のファイルを読み込む仕組み。

これを踏まえて、style.cssとfunction.php以外のphpファイルも、子テーマフォルダに全てコピーして編集したほうがいいと判断。
特にphpは記述に失敗するとWordpressのダッシュボードにすら入れなくなったりするので、親を失敗した時のオリジナル/バックアップとして取っておきたいことから。

 

2.ロゴと背景色を設定

外観のカスタマイズからロゴをアップロード。

サイト基本色は #f4f4f0 に設定。

※ちなみにロゴは、フリーソフトのgimpを使って作成しています。

 

 

3.ヘッダーとグローバルメニューをカスタマイズ

以下、うぇぶあしびさんを参考にした。

3.1.ヘッダーのカスタマイズ

①子テーマのheader.phpを修正

以下の箇所を切り取って、最下部にある</header>の下に貼り付ける。

<div id="wrapper" class="<?php st_wrap_class(); ?>">

(ここまでで、ヘッダーがブラウザのウィンドウ幅いっぱいに広がるようになる。)

 

<div class="inner clearfix"> を、下の2行の間に挿入する。

<div class="clearfix" id="headbox">
<!-- アコーディオン -->

 

</div><!-- /#inner clearfix --> を、下の2行の間に挿入する。

</div><!-- /#header-r -->
</div><!-- /#clearfix -->

 

 

②子テーマのstyle.cssを修正。

以下の記述を最下部に追記する。

.inner {
max-width: 1060px;
padding: 0 10px;
margin: 0 auto;
}

(ここまでで、ヘッダー内のロゴ、サイト名やキャッチフレーズが左寄せになってしまっていたのが元の位置に戻るようになる。)

 

 

③親テーマのstyle.cssを修正

以下の記述の箇所(2か所)を削除。

#headbox {
padding: 0 10px;
margin:0 -10px;
}

なお、似たような記述で以下のもの(1か所ある)は削除しない。

#headbox {
padding: 10px 0px;
margin:0;
}

(ここまでで、スマホやタブレット向けの表示がずれる不具合を解消。)

 

下記のとおり修正する。

<修正前>
#header-l {
float:left;
max-width:380px;
}

<修正後>
#header-l {
text-align: center;
}

 

下記のとおり修正する。

<修正前>
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 414px) {
#wrapper {

}

header {
text-align: left;
}

.sitename img {
max-width: 300px;
margin: 0;
}

<修正後>
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 414px) {
#wrapper {

}

header {
text-align: center; 
}

.sitename img {
max-width: 300px;
margin: 0 auto;
}

(ここまでで、ヘッダー内のロゴ、サイト名やキャッチフレーズが中央寄せになる。)

 

④子テーマのstyle.cssを修正

最後尾に下記を追記。

#headbox {
background-color: #fff;
}

(ここまでで、ヘッダーの背景色が白になる。)

 

 

3.2.グローバルメニューのカスタマイズ

①親テーマのstyle.cssを修正。

下記のとおり修正する。

<修正前>
header ul.menu li{
list-style-type:none;
float:left;
width:160px;
height:40px;
text-align:center;
border-right:solid 1px #f3f3f3;
position:relative;
border-right:solid 1px #f3f3f3;
}

<修正後>
header ul.menu li{
list-style-type:none;
float:left;
width:160px;
height:60px;
text-align:center;
border-right:solid 1px #f3f3f3;
position:relative;
border-right:solid 1px #f3f3f3;
}

(ここまでで、メニューの高さが少し広くなる。)

 

下記のとおり修正する。

<修正前>
/*--------------------------------
メニュー
---------------------------------*/

nav.smanone {

border-radius: 1px;
border: solid 1px #E0DEDE;
margin-bottom: 0px;
padding: 0px 6px;

/*Other Browser*/
background: #f3f3f3;
/*For Old WebKit*/
background: -webkit-linear-gradient(
#fff 0%,
#f3f3f3 100%
);
/*For Modern Browser*/
background: linear-gradient(
#fff 0%,
#f3f3f3 100%
);

}

<修正後>
/*--------------------------------
メニュー
---------------------------------*/

nav.smanone {
background: #b1d5b9;
}

(ここまでで、メニューの背景色が薄い緑色になる。)

 

 

②子テーマのstyle.cssを修正。

最後尾に下記を追記。

nav.smanone ul {
max-width: 1060px;
padding: 0 10px;
margin: 0 auto;
}

nav.smanone ul li {
float:none;
display:inline-block;
vertical-align:bottom;
}

(ここまでで、メニューの項目が中央寄せになる。)

 

最後尾に下記を追記。

nav.smanone ul li a {
font-weight: bold;
color: #fff;
line-height:60px;
}
nav.smanone ul li a:hover {
color: #e52625;
background-color:#fff;
}

(ここまでで、メニュー項目のテキストが白色で上下中央寄せに、マウスオーバーで白地で赤字になる。)

 

スポンサードリンク

まとめ

今日はここまで。

ここまでで下の画像のようになった。

tochu
おわり

スポンサーリンク

-WordPress/Stingerカスタマイズ
-