本記事の要点・結論

本記事を読めば、簡単にできるXWRITEのトップページをお洒落にする方法がわかるようになります。

さて、今回はちょっと耳寄りな話でして、XWRITEのトップページをちょっとだけお洒落にしていきます。とは言っても、難しいことはしません。XWRITEのトップページ、メインビジュアル部分に少し手を加えるだけです。ただし、ちょっと手を加えるだけと言っても、その効果は結構大きいです。

口頭で説明してもなかなか伝わらないので、早速見てもらいましょう!

この、XWRITEブログのトップページをおしゃれにする方法を実践すれば、他のサイトよりちょっとだけお洒落なサイトになれるかもです。よかったら参考にしてくださいね!

トップページがお洒落って気になる~

お洒落っていうか、カッコ良くしたな!

見た目が結構変わりますよ!
トライしてみてくださいね!!

まず、ブログのトップページの作り方をイメージしよう!

まずは、見た目をご覧いただきましょう!

ハ~イ!こんな感じです!

XWRITEのお洒落なトップページ
XWRITEのお洒落なトップページ下部

ちなみに、どこがお洒落なんだ?

お洒落っていうか、ちょっと変わっていると言ったほうがいいかもしれませんね!

今回、提案しているのは、この赤枠の部分。

変更する部分

これが、お洒落であるかどうかは、おいといて・・・・
XWRITEでは、この下部の湾曲部分を、簡単に演出することができます。

あまりこのような表現をしているサイトは多くはありませんから、結構目立つと思いますよ!

ちょっとXWRIT公式サイトを見てみましょう!

XWRIT公式サイト ペットブログデモ

ペットブログデモサイトでも使われていますよね!
ただこれが、画像自体を加工してあるのか?今回説明するやり方と一緒なのかは、わかりませんが、オススメ記事一覧が設置してあるので、おそらく一緒のような気がします!

XWRIETのトップページ|メインビジュアルの湾曲の作り方

まず、設定する部分を説明しておきます。

  • 「カスタマイズ」 「ヘッダー」
  • 「ウィジェット」 「トップページメインビジュアル下部」
メインビジュアルの湾曲の作り方

①は、「カスタマイズ」 「ヘッダー」で後からお好みで設定してください。

  • メインビジュアルを非表示にします。
  • 「カスタマイズ」 「トップページ」 「メインビジュアル」
メインビジュアルを非表示にします

②をウィジェットで作成します。

STEP1
画像を用意します。
  • 今回は、1600×370pxにしました。表示したい画像やイラストによって、また縦横比が関係しているようで、最適解はそのサイトによってかわります。
  • この画像はcanva(無料)で作りました。すぐにできます。
画像を用意
STEP2
ウィジェットを選択
  • 「ダッシュボード」 「外観」 「ウィジェット」を選択
ウィジェットを選択
STEP3
トップページ メインビジュアル下部
  • トップページ メインビジュアル下部を開き、下部の「ブロックを追加」クリック!
下部の「ブロックを追加」クリック
STEP4
更にブロック追加ボタンをクリック
  • ブロック追加ボタンをクリックします
ブロック追加ボタンをクリック
STEP5
セクションを選択
  • 「ブロックを追加」から「セクション」をクリックします
セクションを選択
STEP6
セクションが挿入されました
  • トップページメインビジュアル下部にセクションが挿入されました。
  • この後、右部の設定をしていきます。
セクションを挿入
STEP7
設定します。
  • 全幅にします。
  • メディア(画像・イラスト)を選択します。
  • 画像の高さを合わせておきます。
  • 色やフィルターの設定します。l
  • 必要があれば設定します
  • 下部の「ナミナミ」はここで設定します。
詳細設定
STEP8
更新して終了です。
  • 見出し等が不要であれば削除します。
  • よければ、更新します。

見栄えをよくするには、何度か画像の大きさを変えて試してみる必要があります。

もちろん、塗りつぶしではなく、画像やイラストでもokです。

イラストのトップページ

XWRITE公式と同じように、スライダーを設置してみました・・・・

スライダー設置
トップページ下部

簡単で多彩な表現が可能ですね!

まとめ:簡単にできるXWRITEのトップページをお洒落にする方法

今回は、簡単にできるXWRITEのトップページをお洒落にする方法について解説してみました。

ブログは、もちろん中身一番大事なのは言うまでもありません。でもデザインや見栄えだって、メッチャ大事です。

実際に出来あがったものを表示してみますと、意外とインパクトが強いなと思いました。現時点ではまだこういう装飾をしているサイトがほとんどないので、オススメですよ!

では、また・・・・・