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

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

by · 公開済み · 更新済み

タグ:

souichirou

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

おすすめ

39件のフィードバック

  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の時だけ左右の余白を広げるにはどうしたらよいのでしょうか？

    返信
  6. ゆう より:
    2021年5月13日 2:33 PM

    はじめまして。
    ＷＰ初心者で参考にさせていただいています。
    Sydneyでポートフォリオサイトを作成しているのですがフロントページの表示について質問させてください。

    基本的にブログとしてではなく、投稿で画像を更新するのみの予定なんですが
    フロントページに固定の説明文と投稿画像を一緒に表示するにはどのような設定にすればいいのでしょうか。

    表示設定→固定ページにチェック、ホームページで固定説明文を選択　だと説明文しか表示されず。。

    上手く説明できずすみません。よろしくお願いいたします。

    返信
    • souichirou より:
      2021年5月13日 9:24 PM

      ゆうさん　こんにちは

      どの様な形にしたいのかをイマイチ理解できていないのですが、以下の様な手順ではいかがですか。
      最初に新規に固定ページを作成して、仮に「写真の一覧」とタイトルを付けます。
      固定ページには上から写真１、写真２、写真３と画像ブロックを貼り付けます。
      画像ブロックの貼り付け方は左上の＋ボタンを押してブロック一覧から画像を選択してアップロードで画像を選択します。
      次にWordPressのメニューから外観ー＞カスタマイズー＞ホームページ設定ー＞ホームページの表示で”固定ページ”を選択します。
      その下のホームページで先程作成した「写真の一覧」（固定ページ）を選択して「公開」ボタンを押します。
      するとトップページのヘッダーの下に先程作成した画像の固定ページが表示されます。

      返信
  7. 匿名 より:
    2021年5月13日 11:06 PM

    返信ありがとうございます！
    教えていただいた方法で試してみます。

    ありがとうございました

    返信
  8. ゆん より:
    2021年5月20日 6:45 AM

    初めまして、コメント失礼いたします。
    コーディング自体の経験は長いのですが、昨今の状況を見てWPの技術を取り入れるべく、先日からWPに挑戦を始めた実質初心者です。
    こちらにはシドニーテーマのカステムについて調べていた所辿り着きました、わかりやすい解説でまとめられており大変助かっています。
    その中で調べても詳細な部分が出てこない疑問点がありよろしければご教授頂きたくコメントをさせて頂きました。

    1.ヘッダーの動画挿入について
    挿入したい動画について容量の問題があったため、画質を優先しyoutube動画リンクを行いました。
    動画表示はされるのですが、自動再生ができない・ループしない・大きさが縦の幅に固定(基準)される（恐らく別で指定している高さになっていると思います…）と理想通りになりません…
    色々調べて模索したのですが、コードの書き換え場所がわからず設定するファイルもわからない状態です。
    音は無音でよいので、「横幅をウィンドウに合わせる・自動再生される(iOSでも)・ループする」これらの条件が満たせる記述方法はありますでしょうか？

    2.子ページヘッダーについて
    トップページは上記のように動画、子ページについては静止画画像を表示させたいのですがこちらは可能でしょうか？(個別でヘッダーを指定するようなイメージです)

    3.メニューについて
    説明が少し難しいのですが、
    ・メニューに画像を設定し、マウスオーバーで変化を入れたい
    ・画像はウィンドウのトップピッタリから載せたい
    上記のようなイメージで作成したいのですがうまく行きません。
    divで囲って適用範囲を見たのですが上部にどうしても余白が入っているようで、ピッタリと反映されませんでした…
    最悪画像挿入は諦めて、cssで似たものを作ってもよいのですが上にくっついてくれない状態です。

    上記3点が解決出来れば完成という状態なのですが、当方の知識がまだまだ浅くさまざまなサイトを見て情報を集めても記載されているファイルやコードが見つからなかったり苦戦しております…
    長々と申し訳ございません。また、既出情報でしたらURLなどでご誘導いただけると幸いです。
    お手隙の際にでもご教授頂ければ嬉しく思います、宜しくお願い申し上げます。

    返信
    • ゆん より:
      2021年5月20日 6:58 AM

      追記ですみません…！自動再生はされているようで、ループされてないだけでした、すみません！これについてはiOSでの自動再生になります…！

      返信
      • souichirou より:
        2021年5月20日 10:02 PM

        ゆんさん　こんにちは
        １ですがヘッダーメディアにYoutubeのURLを指定するとループ再生しない様ですね。
        動画ファイルを指定するとループ再生をするようです。
        アップロードサイズですがWordPressはデフォルトで2Mの制限があります。
        php.ini の upload_max_filesize と post_max_size が2Mになっているので50M 等に変更すれば大きなサイズの画像、動画をアップロード出来るようになります。
        お使いのサーバーのOSが分かりませんがLinux（Debian系）であれば、/etc/php/phpのバージョン番号/apache2/ 辺りにあります。
        「wordpress アップロードサイズ」辺りで検索をすれば記事が出てきます。

        ２の子ページのヘッダーについてですが、子ページとは投稿記事や固定ページの事でしょうか。
        その場合はそもそもヘッダーエリアはトップページにしか無いように思うのですが。
        投稿記事のページ（子ページ）にもヘッダーエリアが表示されてしまうのですか？

        ３のメニューの画像ですがプラグインを使用したらどうでしょうか。
        下記の動画は Menu Image, Icons made easy というプラグインを使っています。
        メニューを画像にするプラグイン

        返信
        • ゆん より:
          2021年5月22日 4:11 AM

          ご丁寧な返信、ありがとうございました！
          1につきまして、サイズ制限が解除出来ることを初めて知りまして、目から鱗です…！早速こちら試してみたいと思います！

          2につきましては当方の伝え方が悪く申し訳ございません。固定ページの事です。ただこちらは自己解決至りまして、無事予定通りの設定ができました。ご回答ありがとうございました。

          3のメニュー画像について動画でのご説明ありがとうございます、確認させて頂きました！一先ずオススメ頂いたプラグインを元に、理想系にカスタマイズ可能かどうか試してみようと思っております。

          どうしてもWPではない通常のコーディング方法が先に浮かびそれをWPに反映していくのが中々難しく悩んでいたのですが、色々と糸口を見つけれそうです、本当に有難うございます！

          返信
  9. ほっしー より:
    2021年6月8日 7:23 PM

    初めまして。
    コメント失礼いたします。
    初めて自分でホームページを作るにあたり、かなり参考にさせていただいています。
    現在、スマートフォン用にページの編集をしているのですが、ヘッダースライダー の文字サイズが変えることができず、見栄えがあんまりよくない感じになってしまいます。
    そこで、もしよろしければ、ヘッダースライダー の文字サイズを変える方法を教えていただけると嬉しです。

    返信
    • souichirou より:
      2021年6月8日 10:08 PM

      ほっしーさん　こんにちは。
      テーマの標準的な機能ではタイトルやサブタイトルのフォントサイズは変更できないみたいですね。
      CSSで対応するしか無いと思います。
      外観ー＞カスタマイズー＞追加CSSで以下のコードを入れてみてください。

      /* ヘッダースライダーのタイトル */
.text-slider .maintitle {
	font-size : 20px;
}

/* ヘッダースライダーのサブタイトル */
.text-slider .subtitle{
	font-size : 10px;
}

      font-sizeは適当に変えてみてください。

      返信
      • ほっしー より:
        2021年6月9日 11:18 AM

        ご回答いただきありがとうございます。
        コード埋め込んでみたら、だいぶみみやすくなりました。
        ありがとうございます。
        引き続き、ご参考にさせていただきます。

        返信
  10. やまぐち より:
    2021年6月29日 8:11 PM

    こんばんは！初めてコメントさせて頂きます。
    Sydneyで、ハンバーガーメニュー（三本線）の下に「MENU」という文字を入れたいのですが、どのようにすればいいか分からず、こちらのサイトに行きつきました。
    あまり詳しい知識はありません。
    ご教授頂けましたら幸いです。よろしくお願いいたします。

    返信
    • souichirou より:
      2021年6月29日 10:04 PM

      やまぐち　さん

      こんばんは。
      １．まず３本線の下にMENUの文字が入った画像（300×300程度）を作成します。
      ３本線とMENU
      ２．そしてその画像をメディア・ライブラリーに新規追加（アップロード）します。
      ３．追加した画像をクリックした後、「URLをクリップボードにコピー」ボタンを押して画像へのURLを取得します。
      ４．WordPressのメニューから外観、カスタマイズ、追加CSSをクリックします。
      ５．表示される追加CSS欄に以下のコードを貼り付けます。

      /* ハンバーガーメニューを画像にする */
.btn-menu {
background-image: url("先程のURLをここに貼り付ける");
	background-size:contain;
	width:40px;
	height:40px;
}

/* 元のハンバーガーメニューを非表示にする */
.btn-menu i.sydney-svg-icon{
	display:none;
}

      公開ボタンを押すと以下の様に表示されます。
      ハンバーガーメニューの下にMENUの文字

      返信
      • やまぐち より:
        2021年6月30日 8:44 AM

        かしこまりました！
        お早いご回答と、とても分かりやすいご説明、ありがとうございます！
        早速やってみます！！

        返信
  11. マリー より:
    2021年7月31日 1:26 PM

    初めまして。シドニー初心者です。
    会社のホームページを作成していまして、固定ページでカバーを利用した際に画面を全幅に変更する方法を教えていただきたいです。
    他の固定ページはFULL widthで全幅に変更できております。ご教授いただけますと幸いです。よろしくお願い致します。

    返信
    • souichirou より:
      2021年8月1日 10:12 AM

      マリーさん　こんにちは。

      投稿ページだと「個別投稿ページを全幅にする。」オプションがありますが固定ページにはありませんね。

      div id="primary" class="content-area fullwidth"

      を指定できればいけそうではありますが、正直良くわかりませんでした。（泣）

      返信
  12. sky より:
    2021年10月24日 9:35 PM

    はじめまして、sydneyを使用してみました。
    とても参考になることが多く、助かっています。ありがとうございます！
    一点困っていることがありまして、知見をお借りしたく。。

    やりたいことは、portfolioの「すべて表示」を消したいです。
    widgets/fp-portfolio.phpの57行目
    ==
    $output .= ‘‘ . $options[‘show_all_text’] .’‘;
    ==
    をコメントアウトすればいいのでは・・・と思ったのですが期待する動作にならず。。
    いっそcssで「すべて表示」のdisplay切って、上のファイル60行目のforeachで最初のdata-filterにclass=’active’を付与しようとも思ったのですがこちらもだめでした。

    お忙しいと思いますが、お助け願えれば幸いです！

    返信
    • souichirou より:
      2021年10月25日 7:41 AM

      skyさん
      こんにちは。
      すいません、ポートフォリオはどの様に作成しているのでしょうか？
      固定ページにギャラリーブロックなどを貼り付けてポートフォリオを作成していますか。
      それともウィジェットか何かでしょうか。
      「すべて表示」が表示される状況が良く分かっていません。

      返信
  13. 喜屋武　隆 より:
    2022年8月23日 11:54 PM

    はじめまして、お世話になります。　
    sydneyでサイト作成していますが、ヘッダー動画のサイズカスタマイズしたいのですが、可能でしょうか、

    　具体的には、横幅はそのままで、高さを600ｐｘ　前後にしたいのですが、　You Tubeのリンクを利用します。
    　忙しいところ、すみませんが、アドバイスいただけると、嬉しいのですが、よろしくお願い致します。

    返信
    • souichirou より:
      2022年8月26日 8:52 PM

      喜屋武さん
      コメントありがとうございます。
      追加CSSでちょっと指定して見たのですがサイズは自動的に調整させてしまう様ですね。
      うまく設定することができませんでした。

      返信
      • 喜屋武　隆 より:
        2022年8月26日 9:13 PM

        忙しいところ、コメント下さり、ありがとうございます。
        変更は、無理でしたか、　大変お手数おかけしました。

        ありがとうございます。　感謝致します。　　感謝！

        返信

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

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