とっても初心者の介です 美容ブログでも...
 
通知
すべてクリア

とっても初心者の介です 美容ブログでもみたいに。

13 投稿
4 ユーザー
2 Reactions
93 表示
(@show-ma99icloud-com)
投稿: 8
Active Member
Topic starter
 

こんにちは!ブログを1が初めると意気込んだ初心者の介です!

 

テーマを購入したきっかけも美容ブログデモみたいなの作れたら最高ー!って思い購入しましたが

まさかのあくまで例として出会ってテンプレートではなかった。。甘かった。。

 

そこで質問です!美容ブログデモ見たいにテーマを設定するにはどうすれば良いでしょうか! 手解きを。。

XWRITEバージョン
2.8.2
WordPressバージョン
6.6.2
PHPバージョン
7.4
ガイドラインへの同意
フォーラムガイドライン」に同意します。
個人情報の記載に関する確認
個人情報の記載がないことを確認しました。
 
投稿済 : 2024年10月27日 9:34 AM
(@show-ma99icloud-com)
投稿: 8
Active Member
Topic starter
 

誤字ばかりで失礼致しました。

 

こんにちは!ブログを1から初めると意気込んだ初心者の介です!

 

テーマを購入したきっかけも美容ブログデモみたいなの作れたら最高ー!って思い購入しましたが

まさかのあくまで例としてであってテンプレートではなかった。。甘かった。。

 

そこで質問です!美容ブログデモ見たいにテーマを設定するにはどうすれば良いでしょうか! 手解きを。。

 
 
投稿済 : 2024年10月27日 1:58 PM
ito_h
(@ito_h)
投稿: 428
Honorable Member Moderator
 

@show-ma99icloud-com さま

ご質問いただきありがとうございます 😊 

 

美容ブログのデモサイトですが、テンプレートとして提供できず、申し訳ございません。

デモサイトのようなページを簡単に作成する方法をご案内できないか、一度検討させていただきます。

 

それまでは大変お手数ではございますが、

以下のマニュアルを参考にしていただくことで、近い形に仕上げられるかと思いますので、

一度お試しいただけますでしょうか?

 

① 以下マニュアルの「WordPress管理画面から設定する」のSTEP1~4の手順に従い、固定ページを作成する

ホームページの表示設定 – XWRITE(エックスライト)

② 作成した固定ページに「セクション」「記事一覧」「ボタン」ブロックを挿入する

セクションを作成する – XWRITE(エックスライト)

記事一覧を作成する – XWRITE(エックスライト)

ボタンを作成する – XWRITE(エックスライト)

 

もしご不明な点がございましたら、お気軽にご返信いただけると嬉しいです 😀 

 
投稿済 : 2024年10月28日 6:53 PM
(@show-ma99icloud-com)
投稿: 8
Active Member
Topic starter
 

ご丁寧にありがとうございます!

 

早速参考にしてやってみます!

 

こんなに丁寧に回答してくださるならもっと早く頼ればよかった。。。

 

また不明点あったらよろしくお願いします!

 
投稿済 : 2024年10月29日 7:29 PM
ゴトウ reacted
(@show-ma99icloud-com)
投稿: 8
Active Member
Topic starter
 

ちなみになのですが返答前に一人でいじいじしてこのようになったのですがこれは美容デモとはまた違う感じですか?

 

また回答1やってみたのですがこちらは1つの固定ページをトップページに表記であってデモみたいにスライドはできないですか?

 
投稿済 : 2024年10月29日 8:16 PM
ゴトウ
(@hgoto)
投稿: 163
Estimable Member Moderator
 

横から失礼いたします・・・!

美容ブログのデモサイトもメインビジュアルの機能を利用しておりますので、
トップのスライダー部分はその設定で問題ございません!!

スライダー画像の追加方法について詳しくご説明させていただきます。

 

▼スライダー画像の設定手順

  1. 「メインビジュアルの表示形式」から「スライダー画像」を選択します。
  2. 画面下部に「スライダー1~5」までの設定が表示されますので、それぞれ以下の項目を入力します。
    ・画像(必須)※画像の設定がないとスライダーには表示されません
    ・タイトル
    ・本文
    ・ボタン
    ・URL
    ・テキストの配置
  3. 設定完了後、画面右上の「公開」ボタンを押します。

 

▼アドバイス

お節介ですみません。。。
現状の設定で「メインビジュアルの高さ」という項目があります。
こちらを「数値指定する」にしていただき、PC時の高さを「65vh」、モバイルを「50vh」としていただくと
より美容デモのサイトに近づくと思います!

 

ご不明な点がございましたら、お気軽にご連絡ください!

 
投稿済 : 2024年10月30日 1:49 PM
(@show-ma99icloud-com)
投稿: 8
Active Member
Topic starter
 

なんとお優しい😭

ゴトウさんありがとうございます😭

 

質問がさらに二つありまして美容デモみたいに

スライダー画像の上のカテゴリーの所は(スキンケア ベースメイク etc。。。)

の所はヴィジェットから作るのでしょうか?またメインヴィジュアル下部しか見当たらなく上部には作れないのでしょうか。

あとスライダー下の薄黄色の所はどう作るのでしょう?

 

もう初心者すぎて初歩的な質問ばかり重ねてすみません😭

 

 
投稿済 : 2024年10月30日 2:10 PM
ゴトウ
(@hgoto)
投稿: 163
Estimable Member Moderator
 

いただいたご質問についてやり方共有させていただきます!

 

1. スライダー画像上部のカテゴリーメニューについて

「メニュー」機能から作成できます!
具体的には「ヘッダーメニュー」の設定で、カテゴリーを追加していただけます。
また、メニュー配置はテーマカスタマイザー「ヘッダー > サイト名/ロゴの配置」から変更可能です。

▼マニュアル

ナビゲーションメニューの設定
カスタマイザー設定

 

2. スライダー下の薄黄色の部分について

以下の2つの方法がありますが、今回は「b」の方法を紹介します!

a).ウィジェットの「メインビジュアル下部」を使用
b).固定ページで「記事タイトル出力なし」テンプレートを使用

固定ページをトップページにする方法については、
XWRITE運営チームの@ito_hが回答しているページをご確認いただけたらと思います。

① 以下マニュアルの「WordPress管理画面から設定する」のSTEP1~4の手順に従い、固定ページを作成する

ホームページの表示設定 – XWRITE(エックスライト)

※デモサイトは透過処理された画像を作成して使用しています。
 アイコン画像はご自身でのご用意をお願いいたします🙇

▼薄黄色部分の再現手順

  1. トップページに設定している「固定ページ」を「編集」
  2. 右側の固定ページ設定でテンプレートを「記事タイトル出力なし」に変更
  3. 同固定ページ設定の個別設定の「パンくずリスト」を上下とも「表示しない」に変更
  4. コンテンツ部分に「カスタムHTML」ブロックを追加
  5. 添付HTMLを入力欄にソースコードを貼り付け
  6. ブロック右上の「縦三点リーダー」から「ブロックへ変換」を選択
  7. 各要素を編集して「保存」

▼「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 -->
 
投稿済 : 2024年10月30日 4:47 PM
(@show-ma99icloud-com)
投稿: 8
Active Member
Topic starter
 

ゴトウさんありがとうございます😭

 

早速挑戦してみます!!!!🔥

 
投稿済 : 2024年10月31日 1:15 PM
(@show-ma99icloud-com)
投稿: 8
Active Member
Topic starter
 

1 上手くできました!ありがとうございます😭

 

2のブロック右上の「縦三点リーダー」から「ブロックへ変換」を選択  で分からなくなってしまいました。。

 

どこのボタンから変換するのでしょうか?

 

そのほかも合ってるか不安ですが。。

 

 

 
投稿済 : 2024年10月31日 2:58 PM
ゴトウ
(@hgoto)
投稿: 163
Estimable Member Moderator
 

良かったです!

カスタムHTMLのブロック変換は以下手順でいけると思います。
ご参考までに画像も付けておきます~

▼カスタムHTMLのブロックへの変換
 1).添付画像の「オプション」と表示される縦三点リーダーをクリック
 2).メニューが新たに表示されるので「ブロックへ変換」をクリック

 
投稿済 : 2024年10月31日 4:24 PM
(@show-ma99icloud-com)
投稿: 8
Active Member
Topic starter
 

また質問です! 

 

美容デモみたいにスライダーの中のテキスト位置 ボタン位置を変更したいのですが教えてください😭

 

 

 
投稿済 : 2024年11月2日 10:12 PM
(@tuiteru365)
投稿: 5
Active Member
 

こんにちは!

「▼ボタン」や「▼URL」の下に「▼テキストの配置」という設定項目が出ていないでしょうか?
▼テキストの配置で、テキストやボタンの位置を左・中央・右に変更できるようです。

 
投稿済 : 2024年11月4日 10:25 AM
ito_h reacted
共有: