目次 [ close ]
  1. XWRITEデモ再現企画目次
  2. 美容ブログデモの確認
  3. スキンの選択
  4. 基本カラーの変更
  5. Google Fontsの設定
  6. ヘッダー・フッターの作成
  7. メインビジュアルの設置
  8. 固定ページを作成
  9. サイト内検索の設置
    1. セクションの設置
    2. サイト内検索の設置
  10. アイコンメニューエリアの設置
  11. 特集・新商品エリアの設定
    1. セクションの設置
    2. 記事一覧の設置
    3. ボタンの設置
  12. KEYWORDエリアの設置
    1. セクション設定
    2. グループブロックの追加
    3. タグ一覧の設置
  13. SNSリンクの挿入
  14. まとめ

XWRITEデモ再現企画目次

美容ブログデモの確認

エナリ

今回は美容ブログを再現するよ！

XWRITE公式ページのデザイン例を再現する企画も４つめまで進んだね。今回は、美容ブログを再現するよ。

美容ブログは、次のようなイメージだよ。

XWRITE デザイン例 美容ブログ

実際のイメージは、公式ページで確認してね。

＼デザイン例を見てね！／公式ページで美容ブログを確認する

美容ブログは、全部で六つのデザイン例の中で一番簡単だよ。

特徴はポップなテキストと、黄色いアイコンメニューエリアだね。これらもバッチリ再現するよ！

スキンの選択

エナリ

まずはスキンを選択しよう

XWRITEの美容ブログはシンプルスキンで作成しているよ。他のスキンが選択されている時は次の手順でスキンを変更してね。

STEP1
WordPressメニュー：『XWRITE設定』⇒『スキン設定』でスキン選択画面を開く
WPメニュー：スキン設定
STEP2
シンプルの有効化ボタンを押す
シンプルスキンの有効化
STEP3
スキンを有効化するを押す
シンプルスキンの有効化

基本カラーの変更

エナリ

次に基本カラーを変更するよ

基本カラーを変更はWordPressのカスタマイザーでおこなうよ。WordPressメニュー：『外観』⇒『カスタマイズ』で開いてね。

カスタマイザーを開いたら、『サイト基本設定』⇒『基本カラー』の順番で移動してね。次の画面が表示されるよ。

基本カラー設定

美容ブログは、次のように色設定されているよ。

階層1階層2項目値備考
1サイト基本設定基本カラー背景色#ffffff初期値
2基本色#222222初期値
3アクセント色#d4d4d4
4テキスト色#333333初期値
5リンク色#3adbb7初期値
美容ブログの色設定

変更しているのはアクセント色だけだね。

Google Fontsの設定

エナリ

サイトのフォントを変更しているよ

美容ブログはGoogle Fontsの『Zen Maru Gothic』フォントを使用を使用しているよ。フォントを変更することで、かわいい印象のWebページになっているね。

XWRITEでGoogle Fontsを使用する方法については、次のページを読んでみてね。

関連記事
XWRITEでGoogle Fontsを使用する方法
Google Fontsとは エナリ 今回はXWRITEでGoogle Fontsを使用する方法だよ トモエ Google Fontsってなに？ Google Fonts（グーグ…
2025年2月15日 2025年2月28日

今回は、次のように設定してね。

階層1階層2項目値
1ヘッダーheadセクション<head>内に挿入するコード<link rel=”preconnect” href=”https://fonts.googleapis.com”>
<link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin>
<link href=”https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap” rel=”stylesheet“>
2追加 CSS—-——html, body {
font-family: “Zen Maru Gothic”, serif;
font-weight: 400;
font-style: normal;
}
Google Fontsの設定

これで美容ブログのテキストが、丸い見た目の文字になるよ！

ヘッダー・フッターの作成

エナリ

次にヘッダーとフッターを作るよ

美容ブログのヘッダーは、次のようになっているね。

美容ブログヘッダー

とてもシンプルだね。

フッターは、こんな感じだよ。

美容ブログフッター

他のデザイン例と同じようにシンプルだね。

ヘッダーの『COSME DEMO BLOG』ロゴはテキストだよ。他のデザイン例は画像だけど、ここでは『Zen Maru Gothic』フォントのポップなイメージを活かしているね。

今回はロゴ画像の設定は必要ないから、メニュー設定だけだね。メニューの設置方法は別ページで紹介しているから、そちらを見てね。

関連記事
XWRITEでメニュー（ヘッダー・フッター）を設置する方法
XWRITEのメニュー エナリ まずはXWRITEで設置できるメニューパターンを紹介するね ヘッダーメニュー例 XWRITEのヘッダーメニュ…
2025年2月11日 2025年2月28日

ロゴ画像とメニューは、カスタマイザーで次のように設定してね。

階層1階層2項目値備考
1サイト基本設定サイト基本情報ロゴなし
2サイトのタイトルCOSME DEMO BLOG
3キャッチフレーズの表示チェックを外す
4ヘッダーサイト名／ロゴの配置サイト名／ロゴの配置（PC）中央
5サイト名／ロゴの配置（モバイル）中央
6追従型ナビゲーションPCで表示するチェックを外す
7モバイルで表示するチェックを外す
8トップページ透過ヘッダー透過を有効にするチェックを外す
ロゴ・メニューのカスタマイザー設定

よく見ると、幅がモバイルのとき、美容ブログのヘッダーテキストのサイズが小さくなる。この設定はカスタマイザーに無いよ。

だったらどうしているのかというと、追加CSSにスタイル定義を追加しているんだ。次のコードだよ。

階層1階層2項目値
1追加 CSS—-——@media (min-width: 992px) {
.header.is-pc-center .siteInfo__logo {
margin: 20px 0;
}
.siteInfo__logo a {
font-size: 3rem;
}
}
@media (min-width: 992px) {
.header.is-pc-center .gNavList > .menu-item > a {
padding: .5em 0 2em;
}
}
追加CSSの設定

メインビジュアルの設置

エナリ

次は一枚画像のスライダーを設置するよ

美容ブログ　メインビジュアル

大きな一枚画像のスライダーは、XWRITEのメインビジュアル機能で設置しているよ。画像は、幅1024高さ474のJPEG画像を使っているね。

ここでは四枚だけど、メインビジュアルは五枚まで設置できるよ。自分のサイトでいろいろ試してね。

今回は、次のように設定してね。

階層1階層2項目値
1トップページメインビジュアル表示形式スライダー画像
2全幅で表示するチェックを入れる
3余白をつけるチェックを外す
4メインビジュアルの高さ数値を指定する
5PC時の高さ65vh
6モバイル時の高さ50vh
7フィルターの種類表示しない
8フィルターの不透明度5
9オーバーレイカラー指定なし
10オーバーレイの不透明度5
11スライドの表示時間7000
12アニメーションの速度600
メインビジュアルの設定

同じ画面でスライダー画像を設定するよ。全てのスライダー画像を次のように設定してね。

階層1階層2項目値
1トップページメインビジュアル画像スライダー画像を指定
2タイトルスライダー画像上の上段文字
3本文スライダー画像上の説明文。改行可能。
4ボタンボタン上の文字
5URLボタンのリンク先
6テキストの配置左
スライダー画像の設定

固定ページを作成

エナリ

スライダーの下は固定ページだよ

スライダー画像の下は、固定ページを作成してトップページに関連付けているよ。

まずは固定ページを新規作成してね。

新規の固定ページ

記事名は表示されないから何でもいいけど、分かりやすいのがいいね。

右側のページ設定で、固定ページの表示形式を変更するよ。次のように設定してね。

項目値
1テンプレート記事タイトル出力なし
2ディスカッション受け付けません
3サイドバーの表示非表示
4アイキャッチ画像の表示非表示
5パンくずリスト表示しない
6目次非表示
7広告ラベルの表示非表示
固定ページの設定

設定出来たら、固定ページを公開してね。

次にカスタマイザーで、次のように設定してね。

階層1項目値備考
1ホームページ設定ホームページの表示固定ページ
2ホームページ作成した固定ページを選択
3投稿ページ— 選択 —
トップページに固定ページを関連付ける設定

この設定はWordPressメニュー：『設定』⇒『表示設定』でのホームページの表示設定と同じだよ。

これで、固定ページがトップページに表示されるよ。

次のステップから、作成した固定ページにコンテンツを作成していくよ。

サイト内検索の設置

エナリ

サイト内検索を設置しよう！

美容ブログ　サイト内検索

サイト内検索を設置するんだけど、背景が淡い黄色になってるね。まずはセクションブロックで背景を設定するよ。

セクションの設置

まずは固定ページにセクションブロックを追加してね。

セクションの挿入

追加したセクションを次のように設定するよ。

項目値
1セクションの幅全幅
2コンテンツの幅自動
3セクションの上下の余白上：3em 下：3em
4セクションの高さの最小値指定なし
5オーバーレイ#fffdd4
6テキスト色#333333
7オーバーレイの不透明度100
8上部の境界線の種類なし
9下部の境界線の種類なし
セクションブロック設定

セクション内の見出しはいらないから削除するよ。見出しを選択して、ツールバーから削除を選んでね。

セクションの見出しを削除

サイト内検索の設置

最後にサイト内検索を設置するよ。検索ブロックを追加してね。

xWRITE 検索ブロック

次のようなブロックが追加されるよ。

XWRITE 追加した検索ブロック

ツールバーの『検索ラベルを切り替え』を押して、検索の文字を消してね。

検索ラベルを切り替え

配置は『中央揃え』だね。

中央配置

『任意のプレースホルダー…』を『サイト内検索』に書き換えてね。

プレースホルダーを変更

最後にブロック設定で幅50%にしたら完成だよ。

幅50%

アイコンメニューエリアの設置

エナリ

アイコンと文字のエリアを設置するよ

検索の下は、アイコンと文字で構成されたメニューエリアだよ。

アイコンメニューエリア

これはボックスメニューで作成しているよ。

検索で作成したセクション内に、ボックスメニューを追加してね。

ボックスメニュー

追加したら、次のように設定するよ。

項目値
1スタイル塗りつぶし
2PC時のカラム数4
3モバイル時のカラム数2
4ボックスの余白指定なし
5アイコンの配置左
6テキストの配置中央
7アクセントカラー#fffdd4
8テキスト色#333333
ボックスメニュー設定

次に、各メニュー要素を選択して、次の設定をしてね。

項目値
1リンクの設定リンク先URL
2rel属性の設定任意
3アイコンタイプ画像
4画像を選択アイコン画像を選択
8アイコンの配置左
9テキストの配置中央
10アクセントカラー指定なし
11テキスト色指定なし
ボックスメニュー要素設定

アイコン画像は自分で作成するか、無料の素材サイトなどで探してね。

特集・新商品エリアの設定

エナリ

記事紹介エリアを三つ設置するよ

アイコンメニューエリアの下は、『夏に輝く！サマービューティーアイテム特集』『しっとり潤うスキンケア特集』『注目の新商品コレクション』の三つエリアが設置されているね。

この三つのエリアは背景色が異なるけど、構造は同じだよ。

特集エリアの構造

セクションの設置

まずは各エリアにセクションを設置して、次のように設定してね。

項目値
1セクションの幅全幅
2コンテンツの幅自動
3セクションの上下の余白上：5em 下：5em
4セクションの高さの最小値指定なし
5オーバーレイ『夏に輝く！サマービューティーアイテム特集』
#ffffff
『しっとり潤うスキンケア特集』
#f9f9f9
『注目の新商品コレクション』
#ffffff
6テキスト色#333333
7オーバーレイの不透明度100
8上部の境界線の種類なし
9下部の境界線の種類なし
セクションブロック設定

次にセクションの見出しにタイトルを入力して、ブロック設定のスタイルで『装飾なし』を選択。ツールバーで中央揃えを選択して、フォントサイズを26pxに変更してね。

セクションの見出し設定

記事一覧の設置

次に、見出しの下に記事一覧ブロックを追加するよ。

記事一覧の選択

次のようにブロック設定してね。

項目値
1表示形式カード（縦)
2PC時のカラム数4列
3モバイル時のカラム数2列
4表示する投稿の数4
5——-記事タイトルやカテゴリーなどで記事を選択
6アイキャッチ画像の比率正方形(1:1)
7抜粋の文字数0
8表示するラベル投稿日・カテゴリーのみオン
9カテゴリーの表示位置アイキャッチ画像
記事一覧設定

ボタンの設置

最後はボタンだね。XWRITEのボタンブロックを追加してね。

XWRITEのボタンブロック

ボタン上のテキストを『もっと見る』に変更したら、次のように設定してね。

項目値
1スタイル白抜き・四角
2リンクの設定リンク先URL
3rel属性の設定任意
4アイコンの配置右端
5アイコンの選択
6アイコンのクラス名fas fa-angle-right
(自動入力)
7ボタンの幅カスタム
8ボタンの幅 カスタム (PCのみ)200px
9ボタンの幅 カスタム (モバイルのみ)80%
10ボタン内の余白指定なし
11丸み5
12影の有無なし
13ホバーアクションの有無あり
14アクセントカラー変更なし
15テキスト色変更なし
ボタン設定

表中のスタイルなんだけど、白抜きで四角いスタイルは、うっすらと灰色の背景が描画されているよ。単なる四角いボタンじゃないよ。

KEYWORDエリアの設置

エナリ

タグ一覧を設置するよ

美容ブログのKEYWORDエリアは、WordPressのタグ一覧だよ。

美容ブログ キーワードエリア

セクション設定

次の設定で、灰色背景のセクションを追加してね。

項目値
1セクションの幅全幅
2コンテンツの幅自動
3セクションの上下の余白上：5em 下：5em
4セクションの高さの最小値指定なし
5オーバーレイ#f2f2f2
6テキスト色#333333
7オーバーレイの不透明度100
8上部の境界線の種類なし
9下部の境界線の種類なし
セクションブロック設定

見出しに『KEWWORD』と入力したら、スタイルから『装飾なし』を選択して、中央揃え、フォントサイズ26pxに変更してね。

グループブロックの追加

セクションの見出しの下にグループブロックを追加して、左右の余白を設定するよ。

グループブロックを選択

グループの種類は『グループ』を選択するよ。

グループを選択

グループブロックのスタイル設定タブを選択して、

XWRITEグループブロックのスタイルタブ

左右のパディングを最大（2X-Large)に変更してね。

2X-Large

タグ一覧の設置

グループ内に、タグクラウドブロックを追加するよ。

タグクラウド

次のように、タグクラウドを設定してね。

タブ項目値
1設定タクソノミータグ
2最小サイズ8pt
3最大サイズ22pt
4タグの数任意
5タグの数を表示オフ
6スタイルスタイル輪郭
タグクラウド設定

SNSリンクの挿入

エナリ

最後はSNSへのリンクだね

美容ブログ SNSへのリンク

このリンクはアイコンブロックで一つずつ設定しているよ。

まずはアイコンブロックを追加してね。ここではセクションは不要だよ。

XWRITEアイコンブロック

次のように設定してね。

項目値
1レイアウト中央
2方向右
3複数行に折り返すオフ
4サイズプリセット小
5アイコンサイズ16px
6余白8px
7丸み50%
8枠線の有無なし
アイコンブロック設定

アイコンブロックにアイコンを三つ設置するよ。次のように設定してね。

項目アイコン1アイコン2アイコン3
1アイコンの選択
2アイコンのクラス名fa-brands fa-instagramfa-brands fa-x-twitterfa-brands fa-youtube
3リンクの設定各SNSのＵＲＬ
4rel属性の設定任意
5アイコンサイズ16px
6余白8px
7丸み50%
8枠線の有無なし
9アクセントカラー指定なし
10背景色#ffffff
アイコン設定

これで美容ブログの再現完了だよ！

お疲れさまでしたー！

まとめ

このページではXWRITE公式ページで紹介されているデモサイトのうち、美容ブログの作成方法を紹介しました。

メインビジュアルにスライダー画像を設置することで、閲覧者にダイナミックな画像切り替えでの視覚インパクトを与え、思わず見入ってしまうような訴求力のあるトップページを作成できます。

Google Fontsを使用してWebサイトの文字フォントを変更することで、サイトの雰囲気を変えることができます。

また商品カテゴリに関連したアイコン画像とカテゴリ名を組み合わせることで、ユーザーに自分の好みや興味を視覚的に想起させ、クリックしたくなるページリンクを設置できます。

その他にも参考になる要素がデモサイトに詰まっているので、ぜひ参考にしてください。