Simplicity2をカスタマイズ中。
サイトタイトルを中心にしてフォローボタンを表示。
サイトタイトルの文字サイズも変更。
サイトタイトル文字サイズ指定の保持
　　　　—見出しタグh1に依存させない方法。

今年の目標にしている映画情報サイトの構築。

映画情報サイトの方はSimplicity2（β版-2.0.5a）で見栄えを整えてみる事にしました。
このサイトでは、Simplicityの1系（1.9.3t）のまま暫く運営する事にしたのですが、
わいひらさんが仰せの様にSimplicity2とSimplicity1系では別物でした。

頭がごちゃごちゃになりそーなので、映画サイトのカスタマイズ録をメモ記事にする事に。

そして、WordPressを始めたばかりで
simplicity2を使っていらっしゃる方のお役に立てば良いなぁ。と思っています。

このページのメニュ

A.サイトタイトルを中心にしてフォローボタンを表示する
1. カスタマイザーの設定と子テーマのCSS
B.サイトタイトルの文字のサイズを変更。
1. サイトタイトルの文字サイズを30pxから24pxに小さめに変更
2. サイトキャッチフレーズの文字サイズを15pxから13pxに少し小さく
サイトタイトル文字サイズ指定の保持—見出しタグh1に依存させない方法。

A.サイトタイトルを中心にしてフォローボタンを表示する

通常は左寄りのこの状態。

サイトタイトルをセンターにし、フォローボタンを表示させている状態。

直ぐ上の画像の様に表示するように作業します。

2016/02/12*追記　完成形はこんな感じです。⇓⇓⇓　DEMOサイト公開しました。
DEMOSITEをみてみる

何もないDEMOサイトですけど、こんな感じでセンターリングしてます。

📋 この作業に必要な設定とファイル

テーマのカスタマイザー【外観⇒カスタマイズ⇒レイアウト（全体・リスト）とSNSの設定】
Simplicity2の子テーマのスタイルシート【Simplicity child2 (style.css)】

カスタマイザーの設定と子テーマのCSS

Simplicityは、外観⇒カスタマイズ⇒レイアウト（全体・リスト）で、
サイトタイトルをセンターに表示させる事が可能です。

「サイトタイトルの中央寄せ
サイトのタイトルをヘッダーの中央にするか。」に
チェックを入れれば良いだけですが、
ここにチェックをすると、
「（※トップのフォローボタンは表示されなくなります）」と
記してあるように、フォローボタンが隠れてしまいます。

タイトルをセンタリングするとシェアボタンが非表示になる。

これをヘッダーの中央にしてもフォローボタンを表示出来る様にカスタマイザーの設定をします。

SNS設定「ページトップフォローボタンの表示」にチェックを入れる。

1.外観⇒カスタマイズ⇒レイアウト（全体・リスト）で
「サイトタイトルの中央寄せ
サイトのタイトルをヘッダーの中央にするか。」の
チェックを外す。

2.SNSの設定「ページトップフォローボタンの表示」に
チェックを入れる。

次に、Simplicity2の子テーマのスタイルシートに以下の様に書きます。

Simplicity child2 (style.css)

テーマの編集で左図の画面を開いて書き入れます。

#header {
text-align: center;
}

んー。これだけなんです😓

TJ Custom CSSの様な
CSS系プラグインを使用している方や、
jetpackのCSSスタイルシートエディターを
使用している方はそちらに書いてもOK。

#header {
    text-align: center;
}

B.サイトタイトルの文字のサイズを変更。

些か大袈裟に表現ですが、これもCSSに書き足すだけです。

📋 この作業に必要なファイルは、Simplicity2の子テーマのスタイルシート【Simplicity child2 (style.css)】。

サイトタイトルの文字サイズを30pxから24pxに小さめに変更

Simplicity2の子テーマのスタイルシートに以下の様に書きます。

TJ Custom CSSの様なCSSプラグインを使用している方や、
jetpackのCSSスタイルシートエディターを使用している方はそちらに書いてもOK。

#site-title a{ font-size:24px; font-weight:normal; }

#site-title a{
  font-size:24px;
  font-weight:normal;
}

これでタイトルが小さくなりました。(24px指定)
文字を大きくしたい場合は、24pxの部分を好みサイズに(数字)指定します。

サイトタイトルを30pxから24pxに小さめに変更

サイトキャッチフレーズの文字サイズを15pxから13pxに少し小さく

タイトルの文字を小さくしたので、キャッチフレーズも少しだけ調整します。

#site-description{ font-size:13px; font-weight:normal; }

#site-description{
  font-size:13px;
  font-weight:normal;
}

これでサイトキャッチフレーズも小さくなりました。(13px指定…微妙)
文字を大きくしたい場合は、13pxを好みのサイズに(数字)指定します。

サイトキャッチフレーズ（コンテンツ概要）文字を15pxから13pxに少し小さくした。

A・Bをまとめて書くと以下の様になります。

#header {
    text-align: center;
}

#site-title a{
  font-size:24px;
  font-weight:normal;
}

#site-description{
  font-size:13px;
  font-weight:normal;
}

文字フォントサイズは”font-size:○○px”の○○部分を好みのサイズを数字で指定してあげて、
大きくしたり、小さくしたりします。

サイトタイトルの変更は以上です。

がっ、見出しタグを”h1″と書いて指定している場合、
トップページのタイトルは、見出しタグ”h1″の指定で表示される事になります。

例えば、
「#site-title a{font-size:24px;」と書いても、
見出しタグ「h1 {font-size: 18px;」と書いていたとすると、24pxでは表示されず、
18pxで表示される事に。(Simplicityのトップタイトルは”site-title h1″となっているので。)

サイトタイトル文字サイズ指定の保持—見出しタグh1に依存させない方法。

見出しタグの各々の変更については、別の記事で書きますが、
見出しタグを単に”h1″と書いている方は、
見出しタグの方を”h1″を”.article h1“に書き換えてみて下さい。

そうすると、サイトタイトルのサイズ指定は保持されます。

文字色(フォントカラー)は、カスタマイザーで指定出来るので楽チンですね。

何れはこのサイトも2系にチェンジするかも知れないので、
映画サイトのカスタマイズ録をメモってみましたけど、
1系から2系にチェンジするのは、以外と簡単かも知れないです。😓

わいひらさんの所でも移行については「注意点」として記事にして下さっていますし
（有難いですね。お忙しいでしょうに。頭が下がります。）
Simplicity1.9.3tを入れたまま、Simplicity2.0.5aもインストールする事が可能なので(別物の証！)
カスタマイザーで確認しつつ、完成後にSimplicity2に適応させれば良いだけなので。
（Simplicity2の子テーマのcssファイルを新たにローカルで書いていけば簡単にチェンジ出来る）

映画情報サイトの見栄えを変える為に色々と弄っているので、暫くメモ記事が続きます・・・😓

ご閲覧ありがとうございます。お粗末でした😑

ページのトップへ

ヘッダー廻りのカスタマイズ関連記事