WordPress Sydney（シドニー） テーマのカスタマイズ・インストールからヘッダーエリアの設定まで（その１） | そう備忘録

WordPress Sydney（シドニー） テーマのカスタマイズ・インストールからヘッダーエリアの設定まで（その１）

by · 公開済み · 更新済み

タグ:

souichirou

やった事を忘れない為の備忘録 同じような事をやりたい人の参考になればと思ってブログにしてます。 主にレゴ、AWS（Amazon Web Services）、WordPress、RaspberryPiに関するブログを書いています。 仕事では工場に協働ロボットの導入やIoT化などをやっています。 ２０１９年７月にJDLA（一般社団法人 日本デイープラーニング協会）Deep Learning for GENERALに合格しました。 質問は記事一番下にあるコメントか質問フォーラムにお願いします。

おすすめ

19件のフィードバック

  1. りんか より:
    2019年3月29日 11:07 PM

    こんにちは！
    いつもありがとうございます：）
    わたしもシドニーを使っているのですが、
    投稿一覧のタイトルのフォント大きさの変更ってどうやってやるかわかりますか？
    調べても全く出てこなくて困ってます😿
    宜しくお願いします！

    返信
    • souichirou より:
      2019年3月30日 7:31 AM

      りんかさん
      おはようございます。
      確かにシドニーは投稿一覧のタイトルの文字が少し大きめですね。

      WordPressのメニューから外観ー＞カスタマイズー＞追加CSSで開いたCSS欄に、
      h2.title-post.entry-title {
      font-size: 24px;
      }
      を入れたら（自分の環境では）出来ました。
      ブラウザでGoogle Chromeを使っているようでしたら該当のページを開いてF12を押すとデバックモードに切り替わるのでそこでクラスの情報とかを見れますよ。
      https://www.souichi.club/wordpress/contactform7/
      にちょっとだけChromeのデバックモードの記事を書いていますので参考にしてください。

      返信
  2. ニシマオ より:
    2019年4月20日 3:05 PM

    質問失礼します！
    今Sydneyを使って、会社のホームぺージを作成しています。
    そこで、トップページは固定ページで作っておりヘッダーの種類は全画面スライダーにしています。
    その他のページもすべて固定ページで作成しているのですが、ヘッダーはスライダーは無しでメニューのみにしたいのですが、サイトヘッダーの種類をヘッダーなし（メニューのみ）にすると、メニューまで消えてしまいました。これはどうやって表示するかわかりますか？
    また、現在はサイトを非公開にして作業しているのですが、フロントページ以外のページでプレビューを押すたびにスライダーが表示されたりされなかったり不安定で、実際に公開した後どのようになるかわからず不安でいます。
    お忙しいところ恐縮ですが、教えていただけますと幸いです。

    返信
    • souichirou より:
      2019年4月20日 9:27 PM

      ニシマオさん　こんにちは

      フロントページは「全画面スライダー」でフロントページ以外では「ヘッダーなし（メニューのみ）」にした時にフロントページのメニューが消えるという事でしょうか？
      全画面スライダーの時のメニューは最初は消えていますがスクロールをすると表示されます。
      また一番上にスクロールして暫く経つとメニューが消えますが、それの事でしょうか。

      ちなみに自分の環境で上記の設定をしたのですが期待通りの動きになりました。
      質問の意味を取り違えていたらすいません。
      また、ホームページ設定のホームページと投稿ページではどの様な設定をしていますか。

      あと、プレビューの時に不安定な動作をする時はSydneyのテーマに限らずですが時々経験しています。
      「ん！」と感じた時は再読込をするかキャッシュ、Cokkieを削除して様子を見ていますね。

      P.S.
      プレビューでの検証よりもWordPress上は公開してしまってBasic認証をかけて検証をした方が
      本番に近い状態になるかと思います。

      返信
      • ニシマオ より:
        2019年4月23日 2:24 PM

        ご返信ありがとうございます！
        メニューが消えたのはフロントページではなくその他の固定ページです。
        希望としてはフロントページは全画面スライダーを表示させて、その他の全てのページではメニューのみの表示にしたいと考えております。
        ヘッダーの種類の設定は以下の通りです。
        　フロントページのヘッダー種類→全画面スライダー
        　サイトヘッダーの種類→ヘッダーなし（メニューのみ）
        ホームページ設定は以下の通りです。
        　ホームページの表示→固定ページ
        　ホームページ→フロントページ（自作したフロントページ用固定ページです）
        　投稿ページ→選択なし

        会社のホームページなので、newsの部分のみ投稿ページを利用することにして、その他のページは全て固定ページで作成したいと考えておりました。
        アドバイス頂けますと幸いです。何卒宜しくお願い致します。

        返信
        • souichirou より:
          2019年4月23日 8:45 PM

          ニシマオさん　こんにちは
          メニューが消えたのは、その他の全てのページの方でしたか。
          質問を取り違えていたようで失礼しました。

          ただ、こちらの環境では指定した通りに表示されますね。
          その他のページでもメニューがきちんと表示されます。
          色々と設定を変えて試してみたのですが現象が再現できません。
          なお、Sydneyのバージョンは1.54（最新）です

          ちなみに外観ー＞メニューでメニューに固定ページを追加する際に対象の固定ページが非公開だとメニューに追加が出来なかったので公開してメニューに追加しています。

          もし可能だったらですが別のクリーンな環境にWordPressとSydneyをインストールしてホーム用ともうひとつ固定ページを作成してシンプルな環境で同じ現象が再現するかどうか試してみたらいかがでしょうか。
          何か別の要因（どこか思わぬ設定を変えてしまった等）でメニューが表示されていないのかも知れません。

          返信
          • ニシマオ より:
            2019年4月26日 9:37 AM

            ご丁寧にご回答下さり感謝します。
            おっしゃる通り、何か別の要因かもしれませんね。試行錯誤してみます。
            ありがとうございました！

  3. ゆかこ より:
    2020年3月27日 12:57 AM

    シドニーでカスタマイズはじめました、こちらド素人です。スマホプレビューにすると、ハンバーガーメニューが、真ん中ですが、右端にする方法がわからず困っています、よろしくお願いいたします(。>дд<)

    返信
    • souichirou より:
      2020年3月27日 8:39 AM

      ゆかこさん

      コメントありがとうございます。
      シドニーのスマホ時のメニューの右寄せですが簡単には出来ないようですね。
      ただheader.phpとcssを編集すれば出来る様です。
      こちらにやりかたが載っていました。
      https://bit.ly/3btl76T

      リンク先の記事の内容を要約すると、
      １．header.phpを編集
      　　※もし子テーマを使っているようならば親テーマからheader.phpをコピーしてそちらを修正してください
      　　変更箇所は

      <div class="col-md-4 col-sm-8 col-xs-12">
　　　　・
　　　　・
<div class="col-md-8 col-sm-4 col-xs-12">

      となっている所を

      <div class="col-md-4 col-sm-8 col-xs-10">
　　　　・
　　　　・
<div class="col-md-8 col-sm-4 col-xs-2">

      に変更します

      ２．追加cssでcssを追加
      上記１．の修正を行うとハンバーガーメニュータップ時に表示されるメニューが右にズレるので
      外観ー＞カスタマイズー＞追加cssに

      @media only screen and (max-width: 767px) {
	#mainnav-mobi {
		left: -200%;
		width: auto;
	}
}

      を追加します。

      一応、右端に表示されました
      シドニー画面ショット

      返信
  4. トミー より:
    2021年1月11日 3:25 PM

    こんにちは！sydneyでホームページ作成時に拝見させて頂いて、とてもお世話になっております。
    sydneyのヘッダースライダーで4枚設定しているのですが、画像下部分が見切れてしまいます・・・。
    直す方法等ご存知ではないでしょうか？よろしくお願い致します。

    返信
    • souichirou より:
      2021年1月11日 10:29 PM

      トミーさん

      コメントありがとうございます。
      すいません、ヘッダースライダーの画像下部が見切れるとの事ですがちょっと状況が
      分かりませんでした。
      自分の環境では下記の様にヘッダースライダーが表示されます。
      ヘッダースライダーの画面ショット

      縦長の画像を指定すると下の方が表示されないという意味でしょうか？
      スライダーの表示領域と縦横比を合わせた画像を指定した場合はどの様に表示されますか。

      返信
      • トミー より:
        2021年1月12日 7:27 PM

        ご丁寧なお返事ありがとうございます！

        横長の画像を使っているのですが、
        プレビューではちゃんと画像全部見えているのに実際ページを見てみると、下がきれてしまいます。
        モバイルはレスポンシブにしているのですが、こちらはプレビューの時点から見切れてしまう状況です…

        返信
        • souichirou より:
          2021年1月12日 9:57 PM

          トミーさん　こんにちは。
          確かに下が見切れますね。
          1920×920前後の画像であれば、まぁまぁマシに表示されますので試してみて下さい。
          ただウィンドウサイズを変更すると正しく表示されない事があるようです。

          プレビューで正しく表示されて実際のページで見切れるのはブックマークやWindowsの
          タスクバーの領域を考慮していない為の様です。
          CSSで調整できるかを試してみたのですが自分のスキルでは手強そうです。

          返信
          • トミー より:
            2021年1月13日 9:08 PM

            ご返信&アドバイスありがとうございます！！試してみます！

  5. フジー より:
    2021年2月19日 5:59 PM

    sydney初心者です
    全幅のページについてですが、PCで表示したときに横幅が大きすぎる気がしまして…。
    PCの時だけ左右の余白を広げるにはどうしたらよいのでしょうか？

    返信
    • souichirou より:
      2021年2月19日 10:15 PM

      標準の機能だと上下の余白しか変更できないようですね。
      CSSで出来るのかも知れませんが難易度が高そうです。

      返信

ニシマオ へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。