SWELLで作るオシャレなトップページ【9ステップで作るシンプル系】

こんにちは、ととです。今回はSWELLでのオシャレなトップページの作り方を紹介します。

無料テーマからSWELLに移行したのですが、サイトがほんとにおしゃれになりました。

SWELLだとこんなサイト作りがCSSやHTMLなしに簡単に作れるので説明していきます。

今回はシンプル系のサイトづくりを解説していていきます。

それでは早速いきましょーー。

目次

SWELLについて

当ブログでは有料テーマのSWELLを使用しております。

シンプル美と機能性の両立。ほんとにこれです。

ブログ向けWordPressテーマSWELL
SWELL公式サイトより

画像はクリックできるよ。

作成するのはトップページはこれ。

パターン1:シンプル系

まずかここから。

サイトの作り方の大枠としては、固定ページを作成し、それをトップページに表示させることで完成します。

サイトづくり全体の流れ
  1. 固定ページ作成する。
  2. 作成した固定ページをトップページに表示させる。
  3. トップページをカスタマイズする。

全体の流れとしてはこれだけで完成します。

自分好みの固定ページを作成することで、オリジナリティが溢れたサイトになります。

固定ページを作成しよう。

STEP
固定ページ→新規追加
  • 新規作成ページを開きます。タイトルはお好みでどうぞ。
STEP
ブロックの追加で「フルワイド」を選択します。
  • この状態からお好みの固定ページを作成していきます。

あとはフルワイドブロックの中に画像を貼ったり、新規のブロックを追加していけば完成します。

フルワイドブロックを設定しよう。

フルワイドブロックの設定の大まかな流れとしてはこんな感じです。

フルワイドブロックの設定
  1. フルワイドブロック内に画像を貼る。
  2. カラムでフルワイドブロック内を分割する。
  3. 分割したところに、ボタンブロックを追加する。

フルワイドを作成しよう。

STEP
フルワイドを設定していきます。
  • デフォルトでOKです。設定が変わっているひとだけ見てください。
コンテンツサイズ
  • コンテンツの横幅・・・:記事
  • 上下のpadding量(PC):20
  • 上下のpadding量(SP):20
  • 上下の境界線形状:なんでもOK
  • 上部の境界線の高さレベル:0
  • 下部の境界線の高さレベル:0
STEP
画像を貼り付ける。
  • ブロックの追加→画像

トップページに表示させたい好きな画像を貼り付けてください。

STEP
カラムの設置。
  • ブロックの追加→カラム

今回はボタンを3つ表示させたいので、開始時のパターンは33/33/33を選んでいます。1つの場合は100、2つの場合は50/50を選択してください。

STEP
ボタンの設置。
  • 「+」でSWELLボタンを追加してください。各カラムにボタンのブロックを追加していきます。
  • 次にボタンの名前と内部リンクURLを指定してください。
  • 残りの2つのボタンも同じように設置します。

ボタンの形や色などもお好みで設定してください。

これでトップページに表示させる固定ページが出来上がりました。

作成した固定ページを表示させよう。

さきほど作った固定ページをトップページに表示させます。

STEP
作成した固定ページの表示
  • 外観→カスタマイズ→WordPress設定→ホームページの設定。
  • ホームページに先ほど作った固定ページを選択しましょう。

これで先ほど作った固定ページがトップページに表示されるようになりました。

トップページをカスタマイズしていこう。

ここまでくればもう少しで完成です。あとはトップページを少しカスタマイズするだけでOK。

ここではこの2つを設定します。

  1. 記事スライダーの解除する。
  2. ヘッダーとトップページの余白を消す。

もう少しだ・・・

STEP
記事スライダーの設置を解除しよう。

デフォルトでは記事スライダーが設定されているので、今回は設定を解除しましょう。

  • 外観→カスタマイズ→トップページ→記事スライダー
  • 記事スライダーを設置するかどうかで設置しないを選択する。
STEP
ヘッダーとトップページの間の余白を消そう。

今だとこの状態で、ヘッダーとトップページの間に白の余白があります。

これを消していきましょう。

  • 外観→カスタマイズ→サイト全体→基本カラー

ここで背景色の色を選択しましょう。#fdfdfdKから#f7f7f7へ変更します。

デフォルトの余白は#fdfdfd(白)となっています。最初に設定した固定ページの「フルワイド」はデフォルトで#f7f7f7(薄い灰色)が設定されています。

これで余白も消えて、シンプル系サイトの完成です!!

これでオシャレなシンプル系のサイトは完成です!!

以上

良かったら、ポチッと応援してください。
にほんブログ村 住まいブログへ
にほんブログ村 子育てブログへ
よかったらシェアしてね!
  • URL Copied!
目次
閉じる