WordPress Sydney(シドニー) テーマのカスタマイズ・ブログ設定から背景画像の設定まで(その2)
Contents
Sydney(シドニー)テーマについて
WordPressの海外製のテーマSydneyをインストールしてカスタマイズの設定を行った時の備忘録その2。
この記事ではブログ設定から背景画像までの記事とする。
尚、インストールからヘッダーエリアの設定までの前回の記事はこちらを参照
カスタマイズについて
ブログ設定
プログの投稿一覧、個別ページの表示項目、レイアウトなどを設定する
フォント
全体のフォント
フォント名/スタイル/セット | 全体のフォント名を指定する デフォルトは”Source+Sans+Pro:400,400italic,600”が指定されていた |
フォントファミリー | フォントファミリーを指定する デフォルトは’Source Sans Pro’, sans-serifが指定されていた |
海外製のテーマの場合、フォントを指定しても日本語に反映されないので、今このブログで使っているHeumanもそうだがテーマのカスタマイズ設定でフォントを変更してもあまり意味が無い。
それよりも日本語のフリーフォントをダウンロードして設定するかWebフォントを設定するのがオススメ。
ちなみにGoogle Fonts + 日本語 早期アクセスにて「自家製フォント工房」さんのWebフォントをSydney(シドニー)に設定してみたのが下記の画面ショット
本文以外のスライダーのタイトルやメニュー、行動喚起ボタンのフォントの変更は追加CSSで指定する必要がある。
変更方法についてはこちらの記事を参照。
見出しフォント
フォント名/スタイル/セット | 見出しのフォント名を指定する デフォルトでは”Raleway:400,500,600”が指定されていた |
フォントファミリー | フォントファミリーを指定する デフォルトは’Raleway’, sans-serifが指定されていた |
文字サイズ
各項目ごとのフォントサイズが指定できる
かなり細かく分類されている印象
サイトタイトル | サイトタイトルのフォントサイズ |
キャッチフレーズ | キャッチフレーズのフォントサイズ |
メニュー項目 | メニュー項目のフォントサイズ |
H1~H6文字サイズ | 見出し1~6までのフォントサイズ |
全体の文字サイズ | 本文等のフォントサイズ |
個別投稿タイトルの大きさ | 個別投稿タイトルのフォントサイズ |
フッター
フッターに表示するウィジェット数を指定する
フッターウィジェットエリア | 1~4の中から選択する(デフォルトは3) 選択した数のウィジェットを外観ー>ウィジェットで設定する フッターウィジェットの設定例 |
色
色についての設定を行う
色は他のテーマと比較してもかなり細かく設定できる印象
一般
全体的な色について設定する
背景色 | 背景色の選択 |
メインカラー | カテゴリー、メニューの選択色、下スクロール時のトップに戻るボタン等のカラーの選択 トップに戻るボタンの色 |
全体のテキスト | テキスト部分の色を選択 見出しやサイドバーの文字は対象外 |
行のオーバーレイ(非推奨) | 行に重ねる色?だと思われるが何処に反映されるのか分からなかった コメントに非推奨とある |
ヘッダー
ヘッダー周りの色に関する設定
メニュー背景 | メニューの背景色を色パレットより選択する メニューの表示例 |
サイトタイトル | サイトタイトルの色の選択 ※上記画面ショット参照 |
キャッチフレーズ | キャッチフレーズの色の選択 ※上記画面ショット参照 |
最上位のメニュー項目 | 最上位のメニュー色の選択 ※上記画面ショット参照 |
メニューアイテムのホバー | メニューにマウスオーバーした時の色の選択 |
サブメニュー項目 | サブメニューを表示した時の項目の色の選択 ※上記画面ショット参照 |
サブメニュー背景 | サブメニューを表示した時の背景色の選択 ※上記画面ショット参照 |
モバイルメニューボタン | モバイルメニューの色の選択 2020年3月27日 追記 ハンバーガーメニューの表示位置はデフォルトでは中央だが右に変更した時の記事はこちら |
ヘッダースライダーのテキスト | ヘッダースライダーを表示した時のタイトル、サブタイトルのテキスト色の選択 |
サイドバー
サイドバーの色の設定
サイドバーの背景 | サイドバーの背景色の選択 |
サイドバーの文字色 | サイドバーの文字色の選択 |
フッター
フッターの色の設定
フッターウィジェットエリアの背景 | フッターウィジェットエリアの背景色の選択 フッターウィジェットエリアの表示例 |
フッターウィジェットエリアの文字色 | フッターウィジェットエリアの文字色の選択 ※上記画面ショット参照 |
フッターの背景 | フッターエリアの背景色の選択 ※上記画面ショット参照 |
フッター色 | フッターエリアの文字色の選択 ※上記画面ショット参照 |
背景画像
背景画像を設定する
背景画像 | 背景画像を選択する 設定をするとプリセット以降の項目が表示されて設定可能になる |
プリセット | 画像の表示方法について以下から選択する
|
画像の位置 | 画像の位置を指定する |
画像サイズ | 画像のサイズを以下から選択する
|
背景画像の繰り返し | チェックをすると背景画像が繰り返される |
ページと一緒にスクロール | チェックをすると背景画像がページと一緒に背景もスクロールする チェックをしないと背景画像が固定される |
メニュー以降
メニュー以降についてはSydney(シドニー)のテーマというよりもWordPressの一般的な設定なので割愛する。
尚、シドニーの動作を確認するにあたりメインメニューを以下の手順で追加した
1.WordPressのメニューから固定ページー>新規追加で「ホームページ」と「ブログ」の2つの固定ページを作成。ブログの方の本文は空でOK
2.WordPressのメニューから設定ー>表示設定のホームページの表示で固定ページを選択してホームページに先程のホームページ、投稿ページに先程のブログを選択する
3.WordPressのメニューから外観ー>メニューでメニューを作成して、固定ページから先程のホームページとブログを追加する
以上でSydney(シドニー)をインストールして設定した時の記事を終了する。
こんにちは。
シドニーのテンプレートを使っているのですが、スライダー機能があるのに気が付かずにmetaSliderプラグインをインストールしてスライダーを設置していたのですが、シドニーのほうがテキストが入るので切り替えたところ、設置した覚えのないページの最下部にmetaSliderのタグが入ってしまい消せなくなりました。
footer.phpなどはチェックしたのですが、wp-footerのあとにタグだけが文字として存在しているような状態です。
プラグインを再度インストールすると画像は表示されるのですが、やはり削除できずにおります。
シドニーではなくプラグインの問題かもしれないのですが、なにかご存知でしたら教えていただけると助かります。
長 邦年さん
こんにちは。
考えられる事としてはキャッシュに残っているのでは無いでしょうか。
F5でブラウザをリフレッシュするかブラウザのキャッシュのクリア(ChromeだとCtrl+Shift+Deleteでメニューが表示されます)を実行してみたらどうでしょうか。