当ブログでは、Blog、SWELL、日常生活、お出掛けについて発信しています。

【SWELL】導入後にトップページを簡単にカスタマイズする方法&カスタマイズ機能解説(初心者向け)

どうも!さるるです。

今回は

こんな質問や悩みにお応えします
  • SWELLを導入したばっかりでトップページのカスタマイズ方法が分からない。
  • どこでカスタマイズすればいいの?
  • 簡単にオシャレなデザインにしたい。

そこで

本記事では

『SWELL』で簡単に出来るトップページのカスタマイズ方法カスタマイズ機能解説を紹介

目次

トップページのカスタマイズ方法

簡単にできるトップページのカスタマイズ方法は以下の通り

  1. 外観
  2. カスタマイズ
  3. トップページ
  4. 各種設定
STEP
外観
STEP
カスタマイズ
画像に alt 属性が指定されていません。ファイル名: 外観2.png
STEP
トップページ
画像に alt 属性が指定されていません。ファイル名: 外観トップ-1024x499.jpg
STEP
各種設定

メインビジュアル、記事スライダー、ピックアップバナーの有無の設定は個人の好みで設定してください。

カスタマイズ機能

簡単に出来るトップページのカスタマイズの機能は以下の4つ

トップページのカスタマイズ機能
  • メインビジュアル
  • 記事スライダー
  • ピックアップバナー
  • グローバルメニュー

もちろん、全て組み合わせなくても単体で使ったり、上手く2つ組み合わせたりすれば十分オシャレなブログを作れます。

各機能を順に追ってどのようなことができるか解説していきます。

SWELLのHPでも各機能について詳しく載っています。

メインビジュアル

メインビジュアルとは

サイトのトップページに表示されるメイン画面

画像や動画を載せるだけでも雰囲気がガラッと変わります。

サンプルとして当ブログのメインビジュアルを載せておきます。

当ブログでのメインビジュアルでは以下のように表示されています。

当ブログのメインビジュアル

メインビジュアル設定でのカスタマイズでは次のようなことができます。

  • 画像、動画を設定できる
  • 画像にフィルターをかけられる
  • スライドショーが作れる
  • キャッチフレーズなど好きな文字を入れられる
  • 画面にリンクを貼り付けたり、ボタンをセットしたりすることができる
  • ブログパーツを利用して画面にブロックを設定することができる

以下のように、設定項目がいくつもあって細かい設定ができ自分好みに仕上げることができます。

トップページは

サイトの顔

と呼ばれるぐらいですから、インパクトがあるトップにしたいですよね。

記事スライダー

記事スライダーとは

記事をスライドショー形式で表示させてくれる機能

設置するだけでオシャレに見えるところが良いですね。

下の写真が記事スライダーの部分です。

当ブログ記事スライダー

記事スライダー設定でのカスタマイズでは以下のようなことができます。

  • ピックアップしたい記事を選択できる
  • 速度を変更できる
  • 記事スライダー背景画像を設定できる

以下の写真のように設定項目があります。

このように記事スライダーでも細かい設定ができるので自分好みに仕上げることができます。

ワンクリックで設定ができてオシャレなブログになるのはいいですね。

ピックアップバナー

ピックアップバナーとは

記事やカテゴリーをピックアップしてバナー表示できる機能

読者に見てもらいたい記事やカテゴリーを目立たせることができます。

下の写真がピックアップバナーです。

ピックアップバナー設定でのカスタマイズでは以下のことができます。

  • バナーのレイアウト表示設定
  • バナーの画像表示設定

ただ、ピックアップバナーを設置するのには設定しなくてはいけないことがあります。

ピックアップバナー設置方法は以下の通り

  1. 外観
  2. メニュー
  3. 新規メニューの追加
  4. ピックアップしたい記事orカテゴリーを選択
  5. メニュー設定のピックアップにチェック
STEP
外観
STEP
メニュー
STEP
新規メニューの追加

メニュー名は自分が分かりやすい名前で問題ありません。

完了したらメニュー作成を押してください。

STEP
ピックアップしたい記事orカテゴリーを選択

ピックアップしたい記事やカテゴリーなどのアイキャッチ画像がピックアップバナーに表示されます。

STEP
メニュー設定のピックアップにチェック

完了したらメニュー保存を押してください。

グローバルナビ(ヘッダーメニュー)

グローバルメニュー

グローバルナビとは

ヘッダー部分に表示されるメニューのことです。

別名ヘッダーメニューとも言われてますね。

下画像の赤丸で囲った部分です。

グローバルナビでは以下のことができます。

  • カテゴリーや飛ばしたいリンクなどを設定が可能。

設定方法は以下の通りです。

  1. 外観
  2. メニュー
  3. 新規メニューの追加
  4. ナビに追加したい項目を選択、グローバルナビにチェック
STEP
外観
STEP
メニュー
STEP
新規メニューの追加

メニュー名は自分が分かりやすい名前で問題ありません。

完了したらメニュー作成を押してください。

STEP
ナビに追加したい項目を選択、グローバルナビにチェック

メニュー項目のカテゴリー等とメニュー設定グローバルナビにチェック。

完了したらメニュー保存を押してください。

スマホ開閉メニューにも表示させたい場合はスマホ開閉メニュー用もチェック。

最後に

以上が

『SWELL』で簡単に出来るトップページのカスタマイズ方法カスタマイズ機能解説でした。

これからもSWELLライフを楽しんでください。

まだ利用1カ月して程しか経っていませんが、これから少しずつSWELLの魅力を記事にしていこうと思います。

ではでは

ブログランキング

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる