XWRITEデモ再現【1】旅行ブログを作成する

XWRITEデモ再現企画目次

• 第1回：XWRITEデモ再現【1】旅行ブログを作成する（現在のページ）
• 第2回:XWRITEデモ再現【2】勉強ブログを作成する
• 第3回:XWRITEデモ再現【3】ペットブログを作成する
• 第4回:XWRITEデモ再現【4】美容ブログを作成する
• 第5回:XWRITEデモ再現【5】コーポレートサイトを作成する
• 第6回:XWRITEデモ再現【6】カフェサイトを作成する

旅行ブログデモの確認

エナリ

今回は旅行ブログを作成するよ

XWRITEは公式ページでデザイン例として、いくつかのデモブログを紹介しているよ。でもすごすぎて再現できないって声が多いんだ。

そこで今回は、デモブログの一つの旅行ブログデモを再現するよ。

旅行ブログは、次のようなイメージなんだ。

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

少し長いデザインだけど、やってみると簡単だよ。頑張ろーーー！

スキンの選択

エナリ

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

XWRITEの旅行ブログはソリッドスキンで作成されているよ。次の手順でスキンを変更してね。

STEP1

WordPressメニュー：『XWRITE設定』⇒『スキン設定』でスキン選択画面を開く

STEP2

ソリッドの有効化ボタンを押す

STEP3

スキンを有効化するを押す

基本カラーの変更

エナリ

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

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

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

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

背景画像の設定

エナリ

背景画像を設定しよう

旅行ブログは、スクロールすると背景の画像が固定して見えるエリアがあるんだけど、これを実現するにはサイトに背景画像を設定する必要があるよ。カスタマイザーで次の項目を設定してね。

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

エナリ

まずはヘッダーとフッターを作るよ

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

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

これに近づけていくよ。

ヘッダーの『TRAVEL DEMO BLOG』は次のようなPNG画像だよ。

文字が白いから見えないね。背景を黒くしてみたよ。

この画像のサイズは、幅248px高さ18pxだよ。縦サイズはカスタマイザーの設定で使うから覚えておいてね。

まずは、この画像をヘッダーに配置するよ。配置方法は別ページで紹介しているから、そちらを見てね。

関連記事

XWRITEでヘッダーにロゴ画像を設定する方法

ロゴ画像を用意しよう エナリ ロゴ画像は自分で用意する必要があるよ トモエ 作ったことないよ？ ロゴ画像を用意できないときは…

2025年2月11日 2025年2月28日

次にメニューを設定するよ。メニューは二行で表示されているのが特徴だね。メニューの設置方法も別ページで紹介しているから、そちらを見てね。

関連記事

XWRITEでメニュー（ヘッダー・フッター）を設置する方法

XWRITEのメニュー エナリ まずはXWRITEで設置できるメニューパターンを紹介するね ヘッダーメニュー例 XWRITEのヘッダーメニュ…

2025年2月11日 2025年2月28日

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

メインビジュアルの設置

エナリ

次はメインビジュアルだよ！

メインビジュアルはページの上部に設置した大きな画像だよ。

そのはずだったんだけど…

これはメインビジュアルじゃなくて、固定ページで作ってるよ！

だから、メインビジュアルについてのカスタマイザー設定は、次のようになるよ。

固定ページの作成とトップページとの関連付け

エナリ

固定ページをトップページに表示するよ！

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

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

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

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

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

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

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

ここまでの設定で、次のようなページになるよ。

ヘッダーメニューのロゴと文字が白いから何もないように見えるね。

メインビジュアルの設置２

エナリ

メインビジュアルの設定をするよ

固定ページを使ったメインビジュアル設定を始めるよ。前項でメインビジュアルではないと説明したんだけど、便宜上メインビジュアルと呼ぶね。

メインビジュアルは次のような構造になっているよ。

この構造を再現していくよ。

固定ページにセクションブロックを挿入してね。

次のようにセクションブロックを設定してね。

次にセクション内の見出しを選択してね。

文字を二行入れるよ。二行目はシフトキーを押しながらエンターを押してね。

上の文字を38px、下の文字を18pxに変更するよ。変更する文字を選択してツールバーのサイズ変更ボタンで変更してね。

文字を入力したら、次のように見出しブロックを設定してね。

次に、セクション内にセクションを挿入してね。

見出しは必要ないから削除するよ。見出しを選択してツールバーの『︙』から削除を選択してね。

次のようにセクションを設定してね。

次に、セクション内に記事一覧ブロックを挿入するよ。

次のように設定してね。

ここまでの設定で、次のようなページになるよ。

記事が無いから一覧内が再現できていないのは許してね！

旅行先ランキングの設置

エナリ

旅行先ランキングを設置するよ！

メインビジュアルの下は、旅行先ランキングが設置されているね。次のような構造になっているよ。

グループ内の構造は、後で解説するね。

旅行先ランキングも、新規セクションを挿入して、その中に設置しているよ。

メインビジュアルの下にセクションを追加して、次のように設定してね。

『行ってよかった旅行先ランキング』の文字は、デモではグループブロックを使っているんだけど、ここでは見出しを使うよ。

見出し部分に「行ってよかった」を14pxで、「旅行先ランキング」をサイズ指定なしで入力してね。

次はランキングを設置するよ。

テーマによってはランキングが作成できるブロックが使用できるものがあるけど、XWRITEはまだないよ。今後の追加の期待を込めてまだと言っておくよ。

仕方がないから、自分でコツコツ設置していくよ。

セクションの見出しの下に、カラムブロックを追加してね。

ランキングを三つ掲載するから、三分割するよ。『33 / 33 / 33』を選択してね。

左側のカラムにグループを挿入するよ。

縦横並びなどを選択する画面が表示されるよ。『グループ』を選択してね。

グループを設定するよ。少し分かりにくいけどブロック設定内に『設定』と『スタイル』の二つのタブがあるから『スタイル』に切り替えてね。

次のように設定してね。

次にランキングの中身を作成するよ。ランキングは次のような構造になっているよ。

見出しはh2で作成しているよ。

画像は特に設定していないよ。設置するだけだね。

国名を表示しているエリアはグループ内に文字を入力しているだけだよ。設定は左右のパディングだけだね。

は、ツールバーのアイコンで入力できるよ。

費用等の情報欄はテーブルだよ。テーブルを設置して次のように設定してね。

★での評価はツールバーの評価で入力できるよ。

最後のボタンは、XWRITEのボタンブロックを使用しているよ。WordPressが用意したボタンブロックと間違わないようにね。青い方がXWRITEのボタンブロックだよ。

ボタン上の文字『テキストを入力…』を『詳細を見る』に書き換えた後、次の設定に変更してね。

これでランキングが一つ完成だよ。

作成したブロックを他のカラムにコピペして、残りの二つを作成してね。

背景透過エリアの作成

エナリ

背景が透けて見えるエリアを作成するよ！

背景が透けて見えるエリアもセクションで作成するよ。

背景の飛行機画像は、背景画像の設定で設定したWebサイトの背景画像だよ。セクションの背景画像を透過に設定することで、Webサイトの背景画像が透けて見えているんだ。

セクションを設置して、次のように設定してね。

次に見出し部分に文字を入れるよ。2段にして上段が14px、下段は指定なしだよ。文字色は白（#ffffff）に変更してね。

これで完成だよ。

もう一つの透過エリアも同じように設置してね。

スポット紹介エリアの設定

エナリ

観光名所を紹介しているエリアを設置するよ。

このエリアもセクションを設置しているよ。

セクションは次のように設定してね。これは旅行先ランキングのセクション設定と同じだよ。

段落の設定

段落は文字を入力したら中央配置してね。改行はシフトを押しながらエンターだよ。

次に上下の余白を設定するよ。パディングの上下を中に変更してね。

パディングが表示されていない時は、サイズ横の『︙』をクリックして表示されるメニューから『パディング』を選択すると表示されるよ。

記事一覧の設定

次に記事一覧を設置するよ。次のように設定してね。

ボタンの設定

最後にボタンを設置するよ。次のように設定してね。

おすすめスポットエリアの設定

エナリ

おすすめの観光名所を紹介するエリアを設置するよ。

このエリアは、セクション内に様々なコンテンツが詰め込まれているよ。

セクションは次のように設定してね。上下の余白が他と異なるよ。

カラム設置

カラムブロックは『50 / 50』で設置してね。設置したら次のように設定するよ。

パッディングの上下はカラムブロック設定内のスタイルタブで設定してね。

次に左側のカラムに画像を設置してね。設定は特に必要ないよ。

グループ設置

右側のカラムは、グループブロックを設置するよ。設置時の選択肢は『グループ』を選択してね。

次のように設定してね。

グループ内の段落の文字は、『日本 – 東京』が太文字で文字サイズ20pxだよ。

段落の設置

『▼　ぜひ行ってみてくださいね！　▼』は、普通に入力して、普通に中央配置してね。

記事一覧の設置

記事一覧は前項と同じ設定だよ。

h2見出しの設定

『エリアやテーマから探す』はグループブロック設置後に見出しを設置しているよ。

グループはいらない気がするけど、デモで設置されているから今回は設置しておくよ。

グループを設置したら、その中にh2の見出しを設置して中央寄せにしてね。そうしたら次のように設定してね。

ボックスメニューの設定

エナリ

最後はボックスメニューだよ

旅行ブログの最後に四角いアイコンリンクが並んでいるね。これがボックスメニューだよ。

ボックスメニューブロックを追加してね。

追加したら次のように設定してね。

最後に各ボックスのアイコンやテキスト、リンク先を設定してね。

以上で設定完了だよ。

SNSボタンエリアの設定

エナリ

フッター上部のSNSボタンが設置されているエリアを作成するよ

ここはセクションを設置しないで、アイコンブロックを直接設置しているよ。でも背景透過しているね。実はセクションを使わなくても、背景透過できたんだよ。盲点だったよ！

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

まずはアイコンブロックを追加してね。

次のように設定してね。

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

これで旅行ブログが完成だよ。

お疲れさまでしたー！

まとめ

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

メインビジュアルのように見えるトップ画像は固定ページで作成して、トップページと関連付けられています。

また背景画像を設置して、セクションで透過することで、スクロール時に背景を固定した演出効果を得ることができます。

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