こんにちは！ブログを1が初めると意気込んだ初心者の介です！
テーマを購入したきっかけも美容ブログデモみたいなの作れたら最高ー！って思い購入しましたが
まさかのあくまで例として出会ってテンプレートではなかった。。甘かった。。
そこで質問です！美容ブログデモ見たいにテーマを設定するにはどうすれば良いでしょうか！ 手解きを。。
誤字ばかりで失礼致しました。
こんにちは！ブログを1から初めると意気込んだ初心者の介です！
テーマを購入したきっかけも美容ブログデモみたいなの作れたら最高ー！って思い購入しましたが
まさかのあくまで例としてであってテンプレートではなかった。。甘かった。。
そこで質問です！美容ブログデモ見たいにテーマを設定するにはどうすれば良いでしょうか！ 手解きを。。
ご質問いただきありがとうございます 😊
美容ブログのデモサイトですが、テンプレートとして提供できず、申し訳ございません。
デモサイトのようなページを簡単に作成する方法をご案内できないか、一度検討させていただきます。
それまでは大変お手数ではございますが、
以下のマニュアルを参考にしていただくことで、近い形に仕上げられるかと思いますので、
一度お試しいただけますでしょうか？
① 以下マニュアルの「WordPress管理画面から設定する」のSTEP1~4の手順に従い、固定ページを作成する
② 作成した固定ページに「セクション」「記事一覧」「ボタン」ブロックを挿入する
もしご不明な点がございましたら、お気軽にご返信いただけると嬉しいです 😀
ご丁寧にありがとうございます！
早速参考にしてやってみます！
こんなに丁寧に回答してくださるならもっと早く頼ればよかった。。。
また不明点あったらよろしくお願いします！
ちなみになのですが返答前に一人でいじいじしてこのようになったのですがこれは美容デモとはまた違う感じですか？
また回答１やってみたのですがこちらは１つの固定ページをトップページに表記であってデモみたいにスライドはできないですか？
横から失礼いたします・・・！
美容ブログのデモサイトもメインビジュアルの機能を利用しておりますので、
トップのスライダー部分はその設定で問題ございません！！
スライダー画像の追加方法について詳しくご説明させていただきます。
▼スライダー画像の設定手順
- 「メインビジュアルの表示形式」から「スライダー画像」を選択します。
- 画面下部に「スライダー1～5」までの設定が表示されますので、それぞれ以下の項目を入力します。
・画像（必須）※画像の設定がないとスライダーには表示されません
・タイトル
・本文
・ボタン
・URL
・テキストの配置 - 設定完了後、画面右上の「公開」ボタンを押します。
▼アドバイス
お節介ですみません。。。
現状の設定で「メインビジュアルの高さ」という項目があります。
こちらを「数値指定する」にしていただき、PC時の高さを「65vh」、モバイルを「50vh」としていただくと
より美容デモのサイトに近づくと思います！
ご不明な点がございましたら、お気軽にご連絡ください！
なんとお優しい😭
ゴトウさんありがとうございます😭
質問がさらに二つありまして美容デモみたいに
スライダー画像の上のカテゴリーの所は（スキンケア ベースメイク etc。。。）
の所はヴィジェットから作るのでしょうか？またメインヴィジュアル下部しか見当たらなく上部には作れないのでしょうか。
あとスライダー下の薄黄色の所はどう作るのでしょう？
もう初心者すぎて初歩的な質問ばかり重ねてすみません😭
いただいたご質問についてやり方共有させていただきます！
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 -->
ゴトウさんありがとうございます😭
早速挑戦してみます！！！！🔥
1 上手くできました！ありがとうございます😭
２のブロック右上の「縦三点リーダー」から「ブロックへ変換」を選択 で分からなくなってしまいました。。
どこのボタンから変換するのでしょうか？
そのほかも合ってるか不安ですが。。
良かったです！
カスタムHTMLのブロック変換は以下手順でいけると思います。
ご参考までに画像も付けておきます～
▼カスタムHTMLのブロックへの変換
1).添付画像の「オプション」と表示される縦三点リーダーをクリック
2).メニューが新たに表示されるので「ブロックへ変換」をクリック
また質問です！
美容デモみたいにスライダーの中のテキスト位置 ボタン位置を変更したいのですが教えてください😭
こんにちは！
「▼ボタン」や「▼URL」の下に「▼テキストの配置」という設定項目が出ていないでしょうか？
▼テキストの配置で、テキストやボタンの位置を左・中央・右に変更できるようです。
またまた質問です😭
【連載その4】WordPressとCocoonでブログをはじめよう！「投稿記事の作成編」
を参考にさせてもらってますがわからない事がございます。
※私はコクーンではなくXサーバーテーマを使用してます。
・ブロックを挿入する にあるようにブロック追加するとテキスト内にコード？が入力され画像の様にいきません。
その他のブロックでも同じでした。画像を載せようと思ってもコードが入力され画像をアップロード出来ませんでした。
これは標準ですか？ みなさんはコードが入力され（見出しなど）その都度投稿を表示して確認しているのですか？
設定などでもっと直感的に『テキスト』を追加で見出しにするなど出来ないでしょうか？
・またコードでしたら画像の上げ方など教えていただきたいです。
・ブロックを上下に移動する の一つ目の画像みたいなメニューバー？みたいなのも出てこないのです。。。
よろしくお願いいたします😭
画像を見る限りでは、何かの拍子で「コードエディター」（スクリーンショット黄色）に切り替わっていると思われます。
なので、右上の縦3点（黄緑）で表示されるメニューから「ビジュアルエディター」（オレンジ）を選択する必要があります。そうすれば、記事の表示のとおりになると思います。
ちなみにこちらはCocoonもXWRITEも関係なく、WordPressの基本的仕様になっております。
