Sponsor Link

サイトタイトルを中心にしフォローボタンを表示し文字サイズも変更—Simplicity2をカスタマイズ中

20160204-simplicity2-customize-image

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

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

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

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

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

Sponsor Link

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

demo-site-title-1

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

demo-site-title-3

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

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

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

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

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

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

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

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

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

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

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

demo-site-title-image2

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

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

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

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

demo-site-title-css

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の部分を好みサイズに(数字)指定します。

demo-site-title-4

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

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

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

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

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

demo-site-title-5

サイトキャッチフレーズ(コンテンツ概要)文字を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ファイルを新たにローカルで書いていけば簡単にチェンジ出来る)

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

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

ヘッダー廻りのカスタマイズ関連記事
グローバルナビメニューの位置をスクロールでヘッダー最上部に固定—Simplicity2をカスタマイズ中—
グローバルナビメニューの位置を スクロールでヘッダー最上部に固定する方法    —Simplicity2をカスタマイズ中— jQuery必要なしで簡単に。 ***
トップ(ヘッダー)のフォローボタンの位置替え!フォローボタンをサイドバーに移動—Simplicity2カスタマイズ中—
このサイトではなく、現在構築中の映画情報サイトの方のカスタマイズ録をメモ記事にしています。 ヘッダー部分に表示されるフォローボタン。 Simp***