お世話になっております。
いつも初歩的な質問にも丁寧にお答えいただき、ありがとうございます。
以前、固定ページをトップページに設定した場合の余白削除について質問させていただいた者です。
その際はご回答いただき、ありがとうございました。
今回、サイトをリニューアルするにあたり、固定ページをトップページに設定する方法ではなく、通常のカスタマイズからトップページを作成しようとしています。
その際、タイトル・プロフィール・プライバシーポリシー・お問い合わせ部分と、トップ画像の間に余白ができてしまいました。
この余白は、どの部分から編集することができますでしょうか?
以前教えていただいたマニュアルでは固定ページ側での編集方法だったため、今回の方法ではどこを調整すればよいのか分からず、質問させていただきました。
また、タイトル表示についても以前「非表示にすると影響が出る場合がある」と教えていただきましたが、デモサイトを拝見するとタイトルが表示されていないように見えるものもあります。
こちらは画像などを使用して調整されているのでしょうか?
現在、マウスでスクロールすると、左上にタイトル、右側にプロフィール・プライバシーポリシー・お問い合わせが流れてくるような表示になっています。
この表示を、右側のメニューのみ固定するような形に変更することは可能でしょうか?
最後になりますが、サイトをリニューアルするにあたり、たくさんのデモサイトを拝見しました。
どのサイトもとても素敵で、まだまだ勉強中ではありますが、いつかこのようなサイトを作れるようになりたいと思っています。
分かりやすいマニュアルや素敵なデモサイトを作成してくださり、ありがとうございます。
お忙しいところ恐縮ですが、ご教示いただけますと幸いです。
よろしくお願いいたします。
@fuwxz さま
返信が遅くなり申し訳ございません。
いつもお世話になっております。
日頃よりXwriteをご活用いただき、ありがとうございます。
また、マニュアルやデモサイトについて温かいお言葉をいただき、うれしく思っております。
サイトリニューアルがスムーズに進むよう、引き続きサポートさせていただきます。
ご質問いただいた3点について、順番に回答いたします。
■ トップ画像と各メニューの間の「余白」をなくす方法
サイトを確認したところ、現在「追加CSS」に記述いただいている内容や、
テーマ標準の余白が組み合わさって発生しているようです。
恐れ入りますが、現在の記述を調整いただき
余白が解消されるかご確認いただけますでしょうか。
設定手順:
1.外観 > カスタマイズ > 追加CSS に移動
2.以下のCSSで調整
header {
text-align: center;
margin-bottom: 0; /* こちらの値を40pxから0に変更 */
}
.wrap {
max-width: 900px;
margin: auto;
padding: 0 20px 60px; /* こちらの値を「20px 20px 60px」から「0 20px 60px」に変更 */
}
3.「公開」をクリックして保存
※上記をお試しいただいても余白が気になる場合は、
実際の状態を確認して追加でご案内しますので、お気軽にご返信ください。
■ デモサイトのような「タイトルの非表示」について
「タイトルが表示されていないように見えるデモサイトがある」とのことですが、
正確な設定状況を確認のうえご案内したく存じます。
お手数ですが、参考にされたデモサイトのURLやページ名をお教えいただけますでしょうか?
お知らせいただき次第、実際の表示や設定の仕組みを確認して詳しくご案内いたします。
■ 右側のメニューをスクロール時に固定(追従)させる方法
こちらはウィジェットの「追従サイドバー」機能を使うことで設定可能です。
PCでの閲覧時にスクロールしても右側のメニューが追従して表示されるようになります。
設定手順:
1.外観 > カスタマイズ > サイドバー に移動
2.「トップページ」にチェックを追加
3.外観 > カスタマイズ > ウィジェット > 追従型サイドバー に移動
4.表示したいコンテンツを追加
5.「公開」をクリックして保存
ウィジェットについては以下のマニュアルでもご紹介しております。
マニュアル ウィジェット設定
各種設定においてご不明な点がございましたら、いつでもお気軽にご連絡ください。
引き続き、よろしくお願いいたします。
お返事ありがとうございます。
通知に気づかず、見落としてしまいました。
追加CSSに、上記貼り付けようと思ったのですが、すでにCSSのところに
別のCSSがたくさんあり、いじるのが怖くて、貼り付けできませんでした。
これは変更しても大丈夫なのでしょうか?
右側のメニューをスクロール時に固定(追従)させる方法について教えていただき
ありがとうございます。
デモサイトは、デモ酒造
などのように、私のサイトは上に堂々とタイトルが表示されている感じですが、
こちらのようなサイトは、文字でタイトルは表示されていないように思い、画像(?)なのでしょうか?
でも、タイトルをクリックすることもできますし、おしゃれだなと思っておりました。
このような編集はタイトルのところをどうするとなるのでしょうか?
@fuwxz さま
ご返信いただき、ありがとうございます。
■ 余白の調整(追加CSS)について
改めてサイトを確認いたしましたところ、
すでに追加CSSの記述が変更されており、
前回ご案内した時よりも余白が解消されていることを確認いたしました。
そのため、前回ご案内いたしました
「コードの貼り付け」の作業は
不要になりますのでご安心ください。
なお、現在の表示状態から
「さらに余白を減らしたい」
といったご希望がございましたら、
改めて調整手順をご案内いたしますのでお知らせください。
■ デモサイト(デモ酒造)のタイトル表示について
テキスト(文字)の代わりに「ロゴ画像」を設定しております。
画像をご準備いただく必要はございますが、設定は以下の手順で行えます。
【ロゴ画像の設定手順】
1.外観 > カスタマイズ > サイト基本情報(※または「ヘッダー設定」などの項目)に移動
2.「ロゴ」の項目で、あらかじめ作成しておいたロゴ画像をアップロードして選択
3.「公開」をクリックして保存
その他ご不明な点がございましたらお気軽にご相談ください。
引き続きよろしくお願いいたします。