WordPress Sydney(シドニー) テーマのカスタマイズ・ブログ設定から背景画像の設定まで(その2) | そう備忘録

WordPress Sydney(シドニー) テーマのカスタマイズ・ブログ設定から背景画像の設定まで(その2)

Sydney(シドニー)テーマについて

WordPressの海外製のテーマSydneyをインストールしてカスタマイズの設定を行った時の備忘録その2。

この記事ではブログ設定から背景画像までの記事とする。

Sydney(シドニー)ブログ設定から背景画像まで

尚、インストールからヘッダーエリアの設定までの前回の記事はこちらを参照

カスタマイズについて

ブログ設定

プログの投稿一覧、個別ページの表示項目、レイアウトなどを設定する

ブログ設定

ブログレイアウト

ブログの投稿一覧ページの表示形式を以下の4パターンから設定する

クラシック

アイキャッチ画像の下にタイトル、投稿日、コメント、カテゴリ、本文(抜粋)と続く形式

※アイキャッチ画像は仮の画像を当てている

クラシック

クラッシック (代替)

基本はクラシックのレイアウトでアイキャッチ画像の上にカテゴリ、タイトル、投稿日が配置されているレイアウト

クラシック(代替)

全幅 (サイドバーなし)

クラシックレイアウトでサイドバーを非表示にして全幅で表示したレイアウト

全幅(サイドバーなし)

レンガ積み (グリッドスタイル)

項目の並び順はクラシックと同じだがアイキャッチ画像を小さくして横に過去記事を並べたレイアウト

レンガ積み

個別投稿ページを全幅にする

チェックをすると個別投稿ページ(記事詳細ページ)にてサイドバーが非表示となり、記事が全幅で表示される

未チェック

全幅未チェック

チェック

全幅 チェック

トップページに投稿を全文表示する

ブログの投稿一覧ページにて本文を抜粋では無く全文表示する

投稿を全文表示

すべてのアーカイブで投稿を全文表示する

カテゴリ-、過去アーカイブ等、ブログの投稿一覧ページ全てで本文を抜粋ではなく全文表示する

抜粋の長さ

本文の抜粋の長さを指定する

デフォルトは55文字

トップページやアーカイブページで、日付/著者を非表示にする

トップページで「日付/著者を非表示にする」とあるがこの項目をチェックするとカテゴリーが非表示になる

チェックをしても日付は表示されているので不具合または日本語の表示ラベルが違うのだと思われる

尚、トップページやアーカイブページでは著者は元々非表示

日付を非表示?

個別ページで、日付/著者を非表示にする

チェックをすると投稿の個別ベージで投稿日、著者が非表示になる

個別ベージで投稿日、著者を非表示

トップページやアーカイブページで、アイキャッチ画像を非表示にする

チェックをするとブログの投稿一覧、アーカイブページでアイキャッチ画像が非表示になる

個別ページで、アイキャッチ画像を非表示にする

チェックをすると個別ページでアイキャッチ画像が非表示になる

フォント

全体のフォント

フォント名/スタイル/セット

全体のフォント名を指定する

デフォルトは”Source+Sans+Pro:400,400italic,600”が指定されていた

フォントファミリー

フォントファミリーを指定する

デフォルトは’Source Sans Pro’, sans-serifが指定されていた

海外製のテーマの場合、フォントを指定しても日本語に反映されないので、今このブログで使っているHeumanもそうだがテーマのカスタマイズ設定でフォントを変更してもあまり意味が無い。

それよりも日本語のフリーフォントをダウンロードして設定するかWebフォントを設定するのがオススメ。

  1. フリーのフォントをダウンロードして設定した時の記事はこちら
  2. Webフォントを設定した時の記事はこちら

ちなみにGoogle Fonts + 日本語 早期アクセスにて「自家製フォント工房」さんのWebフォントをSydney(シドニー)に設定してみたのが下記の画面ショット

Webフォントを設定

2020年3月30日 追記

本文以外のスライダーのタイトルやメニュー、行動喚起ボタンのフォントの変更は追加CSSで指定する必要がある。

変更方法についてはこちらの記事を参照

見出しフォント

フォント名/スタイル/セット

見出しのフォント名を指定する

デフォルトでは”Raleway:400,500,600”が指定されていた

フォントファミリー

フォントファミリーを指定する

デフォルトは’Raleway’, sans-serifが指定されていた

文字サイズ

各項目ごとのフォントサイズが指定できる

かなり細かく分類されている印象

フォントサイズ

フォント 設定

サイトタイトル

サイトタイトルのフォントサイズ

キャッチフレーズ

キャッチフレーズのフォントサイズ

メニュー項目

メニュー項目のフォントサイズ

H1~H6文字サイズ

見出し1~6までのフォントサイズ

全体の文字サイズ

本文等のフォントサイズ

個別投稿タイトルの大きさ

個別投稿タイトルのフォントサイズ

フッター

フッターに表示するウィジェット数を指定する

フッターウィジェットエリア 設定

フッターウィジェットエリア

1~4の中から選択する(デフォルトは3)

選択した数のウィジェットを外観ー>ウィジェットで設定する

フッターウィジェットの指定

フッターウィジェットの設定例

フッターウィジェット設定例

色についての設定を行う

色は他のテーマと比較してもかなり細かく設定できる印象

一般

全体的な色について設定する

カラー 一般の設定

背景色

背景色の選択

背景色の設定

メインカラー

カテゴリー、メニューの選択色、下スクロール時のトップに戻るボタン等のカラーの選択

メインカラー

トップに戻るボタンの色

トップに戻るボタンの色

全体のテキスト

テキスト部分の色を選択

見出しやサイドバーの文字は対象外

全体のテキスト

行のオーバーレイ(非推奨)

行に重ねる色?だと思われるが何処に反映されるのか分からなかった

コメントに非推奨とある

ヘッダー

ヘッダー周りの色に関する設定

ヘッダー 色設定

メニュー背景

メニューの背景色を色パレットより選択する

メニューの表示例

メニューの表示例

サイトタイトル

サイトタイトルの色の選択

※上記画面ショット参照

キャッチフレーズ

キャッチフレーズの色の選択

※上記画面ショット参照

最上位のメニュー項目

最上位のメニュー色の選択

※上記画面ショット参照

メニューアイテムのホバー

メニューにマウスオーバーした時の色の選択

ヘッダー 色(その2)

サブメニュー項目

サブメニューを表示した時の項目の色の選択

※上記画面ショット参照

サブメニュー背景

サブメニューを表示した時の背景色の選択

※上記画面ショット参照

モバイルメニューボタン

モバイルメニューの色の選択

2020年3月27日 追記

ハンバーガーメニューの表示位置はデフォルトでは中央だが右に変更した時の記事はこちら

モバイル時のメニュー

ヘッダースライダーのテキスト

ヘッダースライダーを表示した時のタイトル、サブタイトルのテキスト色の選択

スライダーのテキスト色

サイドバー

サイドバーの色の設定

サイドバーの色の設定

サイドバーの背景

サイドバーの背景色の選択

サイドバー 色

サイドバーの文字色

サイドバーの文字色の選択

フッター

フッターの色の設定

フッター 色の設定

フッターウィジェットエリアの背景

フッターウィジェットエリアの背景色の選択

フッターウィジェットエリアの表示例

フッターウィジェットエリアの表示例

フッターウィジェットエリアの文字色

フッターウィジェットエリアの文字色の選択

※上記画面ショット参照

フッターの背景

フッターエリアの背景色の選択

※上記画面ショット参照

フッター色

フッターエリアの文字色の選択

※上記画面ショット参照

背景画像

背景画像を設定する

背景画像

 背景画像を選択する

設定をするとプリセット以降の項目が表示されて設定可能になる

背景画像の設定

プリセット

画像の表示方法について以下から選択する

  • デフォルト
  • フルスクリーン(画像の位置が選択可能)
  • 画面に合わせる(画像の位置、背景画像の繰り返しが選択可能)
  • 繰り返し(画像の位置、ページと一緒にスクロールが選択可能)
  • カスタム(画像の位置、画像サイズ、背景画像の繰り返し、ページと一緒にスクロールが選択可能)

画像の位置

画像の位置を指定する

画像の位置

画像サイズ

画像のサイズを以下から選択する

  • 元のサイズ
  • 画面に合わせる
  • フルスクリーン

背景画像の繰り返し

チェックをすると背景画像が繰り返される

ページと一緒にスクロール

チェックをすると背景画像がページと一緒に背景もスクロールする

チェックをしないと背景画像が固定される

メニュー以降

メニュー以降についてはSydney(シドニー)のテーマというよりもWordPressの一般的な設定なので割愛する。

尚、シドニーの動作を確認するにあたりメインメニューを以下の手順で追加した

1.WordPressのメニューから固定ページー>新規追加で「ホームページ」と「ブログ」の2つの固定ページを作成。ブログの方の本文は空でOK

2.WordPressのメニューから設定ー>表示設定のホームページの表示で固定ページを選択してホームページに先程のホームページ、投稿ページに先程のブログを選択する

ホームページ、投稿ページの設定

3.WordPressのメニューから外観ー>メニューでメニューを作成して、固定ページから先程のホームページとブログを追加する

メニューに固定ページを追加

以上でSydney(シドニー)をインストールして設定した時の記事を終了する。

souichirou

やった事を忘れない為の備忘録 同じような事をやりたい人の参考になればと思ってブログにしてます。 主にレゴ、AWS(Amazon Web Services)、WordPress、Deep Learning、RaspberryPiに関するブログを書いています。 仕事では工場に協働ロボットの導入や中小企業へのAI/IoT導入のアドバイザーをやっています。 2019年7月にJDLA(一般社団法人 日本デイープラーニング協会)Deep Learning for GENERALに合格しました。 質問は記事一番下にあるコメントかメニュー上部の問い合わせからお願いします。

おすすめ

2件のフィードバック

  1. 長 邦年 より:

    こんにちは。
    シドニーのテンプレートを使っているのですが、スライダー機能があるのに気が付かずにmetaSliderプラグインをインストールしてスライダーを設置していたのですが、シドニーのほうがテキストが入るので切り替えたところ、設置した覚えのないページの最下部にmetaSliderのタグが入ってしまい消せなくなりました。
    footer.phpなどはチェックしたのですが、wp-footerのあとにタグだけが文字として存在しているような状態です。
    プラグインを再度インストールすると画像は表示されるのですが、やはり削除できずにおります。
    シドニーではなくプラグインの問題かもしれないのですが、なにかご存知でしたら教えていただけると助かります。

    • souichirou より:

      長 邦年さん
      こんにちは。
      考えられる事としてはキャッシュに残っているのでは無いでしょうか。
      F5でブラウザをリフレッシュするかブラウザのキャッシュのクリア(ChromeだとCtrl+Shift+Deleteでメニューが表示されます)を実行してみたらどうでしょうか。

質問やコメントや励ましの言葉などを残す

名前、メール、サイト欄は任意です。
またメールアドレスは公開されません。