こんにちは!ブログを1が初めると意気込んだ初心者の介です!
テーマを購入したきっかけも美容ブログデモみたいなの作れたら最高ー!って思い購入しましたが
まさかのあくまで例として出会ってテンプレートではなかった。。甘かった。。
そこで質問です!美容ブログデモ見たいにテーマを設定するにはどうすれば良いでしょうか! 手解きを。。
誤字ばかりで失礼致しました。
こんにちは!ブログを1から初めると意気込んだ初心者の介です!
テーマを購入したきっかけも美容ブログデモみたいなの作れたら最高ー!って思い購入しましたが
まさかのあくまで例としてであってテンプレートではなかった。。甘かった。。
そこで質問です!美容ブログデモ見たいにテーマを設定するにはどうすれば良いでしょうか! 手解きを。。
ご質問いただきありがとうございます 😊
美容ブログのデモサイトですが、テンプレートとして提供できず、申し訳ございません。
デモサイトのようなページを簡単に作成する方法をご案内できないか、一度検討させていただきます。
それまでは大変お手数ではございますが、
以下のマニュアルを参考にしていただくことで、近い形に仕上げられるかと思いますので、
一度お試しいただけますでしょうか?
① 以下マニュアルの「WordPress管理画面から設定する」のSTEP1~4の手順に従い、固定ページを作成する
② 作成した固定ページに「セクション」「記事一覧」「ボタン」ブロックを挿入する
もしご不明な点がございましたら、お気軽にご返信いただけると嬉しいです 😀
ご丁寧にありがとうございます!
早速参考にしてやってみます!
こんなに丁寧に回答してくださるならもっと早く頼ればよかった。。。
また不明点あったらよろしくお願いします!
横から失礼いたします・・・!
美容ブログのデモサイトもメインビジュアルの機能を利用しておりますので、
トップのスライダー部分はその設定で問題ございません!!
スライダー画像の追加方法について詳しくご説明させていただきます。
▼スライダー画像の設定手順
- 「メインビジュアルの表示形式」から「スライダー画像」を選択します。
- 画面下部に「スライダー1~5」までの設定が表示されますので、それぞれ以下の項目を入力します。
・画像(必須)※画像の設定がないとスライダーには表示されません
・タイトル
・本文
・ボタン
・URL
・テキストの配置 - 設定完了後、画面右上の「公開」ボタンを押します。
▼アドバイス
お節介ですみません。。。
現状の設定で「メインビジュアルの高さ」という項目があります。
こちらを「数値指定する」にしていただき、PC時の高さを「65vh」、モバイルを「50vh」としていただくと
より美容デモのサイトに近づくと思います!
ご不明な点がございましたら、お気軽にご連絡ください!
いただいたご質問についてやり方共有させていただきます!
1. スライダー画像上部のカテゴリーメニューについて
「メニュー」機能から作成できます!
具体的には「ヘッダーメニュー」の設定で、カテゴリーを追加していただけます。
また、メニュー配置はテーマカスタマイザー「ヘッダー > サイト名/ロゴの配置」から変更可能です。
▼マニュアル
2. スライダー下の薄黄色の部分について
以下の2つの方法がありますが、今回は「b」の方法を紹介します!
a).ウィジェットの「メインビジュアル下部」を使用
b).固定ページで「記事タイトル出力なし」テンプレートを使用
固定ページをトップページにする方法については、
XWRITE運営チームの@ito_hが回答しているページをご確認いただけたらと思います。
① 以下マニュアルの「WordPress管理画面から設定する」のSTEP1~4の手順に従い、固定ページを作成する
※デモサイトは透過処理された画像を作成して使用しています。
アイコン画像はご自身でのご用意をお願いいたします🙇
▼薄黄色部分の再現手順
- トップページに設定している「固定ページ」を「編集」
- 右側の固定ページ設定でテンプレートを「記事タイトル出力なし」に変更
- 同固定ページ設定の個別設定の「パンくずリスト」を上下とも「表示しない」に変更
- コンテンツ部分に「カスタムHTML」ブロックを追加
- 添付HTMLを入力欄にソースコードを貼り付け
- ブロック右上の「縦三点リーダー」から「ブロックへ変換」を選択
- 各要素を編集して「保存」
▼「5」で貼り付けるHTML
<!-- wp:xwrite/section {"blockPadding":{"top":"3em","bottom":"3em"},"overlayColor":"#fffdd4","gradientValue":"","topShapeType":"circle"} --> <div class="wp-block-xwrite-section wp-block-xwrite xw-block-section alignfull" style="--section-padding-top:3em;--section-padding-bottom:3em;--section-background-color:#fffdd4;--text-color:#333333;--border-top-shape-color:var(--background-color);--border-bottom-shape-color:var(--background-color);--color-opacity:1"><span class="xw-block-section__overlay"></span><svg class="top-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="m0,100 L100,100 Q50,100,0,100 z"></path></svg><div class="xw-block-section__inner"><!-- wp:search {"label":"","placeholder":"サイト内検索","width":50,"widthUnit":"%","buttonText":"検索","align":"center","style":{"border":{"radius":"0px"}}} /--> <!-- wp:xwrite/boxmenu {"blockStyle":"xw-block-boxmenu\u002d\u002dfill","columnPC":4,"flexDirection":"row","textPosition":"center","accentColor":"#fffdd4","textColor":""} --> <div class="wp-block-xwrite-boxmenu wp-block-xwrite xw-block-boxmenu xw-block-boxmenu--fill" style="--boxmenu-column-pc:4;--boxmenu-column-sp:2;--boxmenu-icon-size:2em;--accent-color:#fffdd4" data-gap="true" data-accent-gradient-color="false" data-flex-direction="row" data-text-position="center"><div class="xw-block-boxmenu__body"><!-- wp:xwrite/boxmenu-child {"iconType":"fa-solid fa-circle-info","accentColor":"","textColor":"#333333"} --> <div class="xw-block-boxmenu__item" style="--text-color:#333333" data-accent-gradient-color="false" data-url="true"><a class="xw-block-boxmenu__link" href="#"><div class="xw-block-boxmenu__figure"><i class="xw-block-boxmenu__icon fa-solid fa-circle-info"></i></div><span class="xw-block-boxmenu__text">新発売</span></a></div> <!-- /wp:xwrite/boxmenu-child --> <!-- wp:xwrite/boxmenu-child {"iconType":"fa-solid fa-bottle-droplet","accentColor":"","textColor":"#333333"} --> <div class="xw-block-boxmenu__item" style="--text-color:#333333" data-accent-gradient-color="false" data-url="true"><a class="xw-block-boxmenu__link" href="#"><div class="xw-block-boxmenu__figure"><i class="xw-block-boxmenu__icon fa-solid fa-bottle-droplet"></i></div><span class="xw-block-boxmenu__text">美容液</span></a></div> <!-- /wp:xwrite/boxmenu-child --> <!-- wp:xwrite/boxmenu-child {"iconType":"fa-solid fa-spray-can-sparkles","accentColor":"","textColor":"#333333"} --> <div class="xw-block-boxmenu__item" style="--text-color:#333333" data-accent-gradient-color="false" data-url="true"><a class="xw-block-boxmenu__link" href="#"><div class="xw-block-boxmenu__figure"><i class="xw-block-boxmenu__icon fa-solid fa-spray-can-sparkles"></i></div><span class="xw-block-boxmenu__text">クレンジング</span></a></div> <!-- /wp:xwrite/boxmenu-child --> <!-- wp:xwrite/boxmenu-child {"iconType":"fa-regular fa-face-kiss-wink-heart","accentColor":"","textColor":"#333333"} --> <div class="xw-block-boxmenu__item" style="--text-color:#333333" data-accent-gradient-color="false" data-url="true"><a class="xw-block-boxmenu__link" href="#"><div class="xw-block-boxmenu__figure"><i class="xw-block-boxmenu__icon fa-regular fa-face-kiss-wink-heart"></i></div><span class="xw-block-boxmenu__text">ベストコスメ</span></a></div> <!-- /wp:xwrite/boxmenu-child --> <!-- wp:xwrite/boxmenu-child {"iconType":"fas fa-glasses","accentColor":"","textColor":"#333333"} --> <div class="xw-block-boxmenu__item" style="--text-color:#333333" data-accent-gradient-color="false" data-url="true"><a class="xw-block-boxmenu__link" href="#"><div class="xw-block-boxmenu__figure"><i class="xw-block-boxmenu__icon fas fa-glasses"></i></div><span class="xw-block-boxmenu__text">UVカット</span></a></div> <!-- /wp:xwrite/boxmenu-child --> <!-- wp:xwrite/boxmenu-child {"iconType":"fa-solid fa-wand-sparkles","accentColor":"","textColor":"#333333"} --> <div class="xw-block-boxmenu__item" style="--text-color:#333333" data-accent-gradient-color="false" data-url="true"><a class="xw-block-boxmenu__link" href="#"><div class="xw-block-boxmenu__figure"><i class="xw-block-boxmenu__icon fa-solid fa-wand-sparkles"></i></div><span class="xw-block-boxmenu__text">エイジングケア</span></a></div> <!-- /wp:xwrite/boxmenu-child --> <!-- wp:xwrite/boxmenu-child {"iconType":"fa-regular fa-face-smile","accentColor":"","textColor":"#333333"} --> <div class="xw-block-boxmenu__item" style="--text-color:#333333" data-accent-gradient-color="false" data-url="true"><a class="xw-block-boxmenu__link" href="#"><div class="xw-block-boxmenu__figure"><i class="xw-block-boxmenu__icon fa-regular fa-face-smile"></i></div><span class="xw-block-boxmenu__text">美白</span></a></div> <!-- /wp:xwrite/boxmenu-child --> <!-- wp:xwrite/boxmenu-child {"iconType":"fa-regular fa-paper-plane","accentColor":"","textColor":"#333333"} --> <div class="xw-block-boxmenu__item" style="--text-color:#333333" data-accent-gradient-color="false" data-url="true"><a class="xw-block-boxmenu__link" href="#"><div class="xw-block-boxmenu__figure"><i class="xw-block-boxmenu__icon fa-regular fa-paper-plane"></i></div><span class="xw-block-boxmenu__text">その他</span></a></div> <!-- /wp:xwrite/boxmenu-child --></div></div> <!-- /wp:xwrite/boxmenu --></div></div> <!-- /wp:xwrite/section -->
ゴトウさんありがとうございます😭
早速挑戦してみます!!!!🔥