SWELLで作るオシャレなトップページ【かっこいい系】

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

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

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

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

目次

SWELLについて

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

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

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

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

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

パターン2:かっこいい系

まずかここから。

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

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

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

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

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

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

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

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

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

フルワイドブロックの設定
  1. フルワイドブロック内をカラムで分割する。
  2. 分割したところに、投稿リストを追加する。

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

STEP
フルワイドを設定していきます。

以下のように設定していきます。

コンテンツサイズ
  • コンテンツの横幅・・・:記事
  • 上下のpadding量(PC):20
  • 上下のpadding量(PC):20
  • 上下の境界線形状:波
  • 上部の境界線の高さレベル:3
  • 下部の境界線の高さレベル:3
STEP
Headingを決める。

ここでは「\人気記事/」としています。お好きな表現でどうぞ。

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

今回は2つに分けているので50/50を選びましょう。

STEP
ページ左側をカスタマイズする。

左側のカラムでブロックを追加し、投稿リストを追加してください。

表示設定
  • 表示する投稿数:1
  • レイアウトを選択:カード型
  • 投稿の表示順序:人気順
  • カテゴリーの表示位置:表示しない
  • 最大カラム数(PC):1列
  • 最大カラム数(SP):1列
  • 抜粋文の文字数(PC):40
  • 抜粋文の文字数(SP):40
STEP
ページ右側をカスタマイズする。

右側のカラムでブロックを追加し、投稿リストを追加してください。

表示設定
  • 表示する投稿数:3
  • レイアウトを選択:リスト型
  • 投稿の表示順序:人気順
  • カテゴリーの表示位置:表示しない
  • 最大カラム数(PC):1列
  • 最大カラム数(SP):1列
  • 抜粋文の文字数(PC):0
  • 抜粋文の文字数(SP):0

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

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

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

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

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

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

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

  1. 記事スライダーを解除する。
  2. ピックアップバナーのメニューを登録する。
  3. ピックアップバナーに画像を登録する。
  4. ピックアップバナーを設置する。

あともう少しだ・・・

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

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

  • 外観→カスタマイズ→トップページ→記事スライダー
  • 記事スライダーを設置するかどうかで設置しないを選択する。
STEP
ピックアップバナーのメニューを登録する。
  • 外観→メニュー
  • 表示させたい固定ページや投稿ページをメニュー追加で追加します。

ピックアップバナーを4つ登録しましょう。

STEP
ピックアップバナーの画像を登録しよう。
  • 登録する画像のURLをコピーして貼り付けます。

下の画像の【説明】に表示させたい画像のURLを貼り付けます。

初期の設定では【説明】は表示されていないので、表示オプションの説明にチェックをいれましょう。

STEP
ピックアップバナーを設定しよう。
  • 外観→カスタマイズ→トップページ→ピックアップバナー
ピックアップバナーの設定
  • バナーレイアウト(PC):固定幅 4列
  • バナーレイアウト(SP):固定幅 2列

これでオシャレなかっこいい系のサイトは完成です!!

以上

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