【SWELLカスタマイズ】サイト型トップページでライフスタイルブログを作ろう【画像31枚で手順を解説】

お悩み

SWELLでおしゃれなブログが作りたいです。具体的なデザインアイディアや作り方が見たいです

今最も勢いのあるWordPressの有料テーマ「SWELL」。

シンプルでおしゃれなブログが作れるSWELLは、多くのブロガーやアフィリエイター、企業のコーポレートサイトにも活用されている優れたWordPressテーマです。

SWELLはノーコードで全てのカスタマイズができるので、初心者の方でも簡単におしゃれなブログを作れます

この記事ではSWELLをカスタマイズしてシンプルでおしゃれなブログを作る手順を画像31枚を使ってご紹介します。

今回はおしゃれなライフスタイルブログを作ってみましょう!

完成デモサイトはこちら

swell,カスタマイズ,サイト型,デモサイト
DEMO5

今回のデモサイトはこちらのピンのデザインを参考にさせて頂いております。カスタマイズではメインビジュアルとフッター部分で簡単なコードを入れます。コードはコピペできるようにしてあるのでそのまま使えます。

もっと簡単なノーコードで作れるサイト型トップページの作り方は以下の記事でご紹介しています。

こやん

一つずつ順を追って解説します

この記事でわかること
  • SWELLのサイト型トップページの作り方
  • 実際にサイト型トップページを作る手順(サンプルはおしゃれなライフスタイルブログ!)

筆者はこんな人

  • 本業は企業のマーケティング担当(ブログは月100万PV超)
  • 副業ブログ6ヶ月目
  • 4ヶ月目で5桁達成
  • 5ヶ月目で月3万円達成
  • 最高収益5.6万円(5.5~6.5ヶ月の期間)
こやん

よろしくお願いします!

swell公式サイト
商品名WordPressテーマ SWELL
販売価格¥17,600(税込)
(※ お支払いは一度限りです。月額や年額ではありません。)

SWELLの製品レビューやその他のデモサイトは以下の記事でご紹介しています。

目次

【SWELLカスタマイズ】サイト型のライフスタイルブログを作ろう

早速作っていきましょう!

今回はサイト型のライフスタイルブログを作ります。

サイト型にするための下準備は以下の記事にご用意しています。

SWELLのインストールがまだの方は、以下記事の手順でご用意をお願いします。

おしゃれなサイト型トップページの作り方【画像31枚で解説】

なるほど!

おしゃれなブログ作り、ワクワクしてきました!

SWELLはとても楽しいブログテーマなので、楽しみながらカスタマイズをしていきましょう。

今回ご紹介する手順は一例です。いろんなカスタマイズの方法があるので、あなた流にアレンジしながら楽しんでください。

それではスタート!

メインビジュアルを作ろう

STEP
「カスタマイズ」から編集
SWELL,カスタマイズ,サイト型,トップページ

カスタマイザーから編集していきます。

デフォルトの状態から既におしゃれですが、カスタマイズしていきます。

STEP
WordPress設定
SWELL,カスタマイズ,サイト型,トップページ
  1. 「WordPress設定」をクリック
  2. 「サイト基本情報」をクリック
  3. 「キャッチフレーズ」にテキストを入れる
  4. 「<」で戻る
STEP
ブログのカラー設定
SWELL,カスタマイズ,サイト型,トップページ
  1. 「サイト全体設定」をクリック
  2. 「基本カラー」をクリック
SWELL,カスタマイズ,サイト型,トップページ

各種カラーを「色を選択」で入力します。

今回私が設定したのは、

  • メインカラー:#141414
  • テキストカラー:#141414
  • リンクカラー:#CBAA52
  • 背景色:デフォルト(#fff)

です。

設定できたら「<」をクリックして戻ります。

STEP
メインビジュアルの設定
SWELL,カスタマイズ,サイト型,トップページ
  1. 「トップページ」をクリック
  2. 「メインビジュアル」をクリック
SWELL,カスタマイズ,サイト型,トップページ

今回私はこんな感じで設定してみました。

  1. 「画像」にチェック
  2. メインビジュアルの高さ設定:「数値で指定する」「メインビジュアルの高さ(PC):50vw」「SP:60vh」
  3. ③番は初期値
  4. スライド画像:「画像を変更」をクリックし、メインビジュアルの画像を入れる
  5. メインテキスト:ロゴをコードを入れる

⑤番のコードは以下。

<img src="画像のURL" width="35%" height="auto">

画像のURLは、画像選択画面で確認&コピーできます。

SWELL,カスタマイズ,サイト型,トップページ

メインビジュアルはこんな感じになりました。

SWELL,カスタマイズ,サイト型,トップページ

もしもメインビジュアル画像がうまく反映されていない場合は、ブログのセキュリティが影響しているかもしれません。

以下の記事に詳細を書いたので、うまく表示されない方はご確認ください。

STEP
記事スライダーの設定

今回は記事スライダーを使用しないので以下の手順でオフにします。

SWELL,カスタマイズ,サイト型,トップページ
  1. 「トップページ」をクリック
  2. 「記事スライダー」をクリック
  3. 「設置しない」にチェック
  4. 「<」で戻る
STEP
ヘッダーとロゴの設定
SWELL,カスタマイズ,サイト型,トップページ
SWELL,カスタマイズ,サイト型,トップページ
SWELL,カスタマイズ,サイト型,トップページ
  1. 「ヘッダー」をクリック
  2. ヘッダーロゴの設定:「画像を変更」でロゴ画像を入れる、画像サイズ(PC):120、追従ヘッダー:120、(SP):80
  3. レイアウト・デザイン設定:ヘッダーのレイアウト(PC)「ヘッダーナビを下に」、その他初期値
  4. トップページでの特別設定:ヘッダーの背景を透明にするかどうか「する(文字色:白)」、透過時のロゴ画像「画像を変更」から追加
  5. キャッチフレーズ設定:「表示しない」
  6. ヘッダーの追従設定:チェックを外す、ヘッダーバー設定:表示設定のチェックを外す
SWELL,カスタマイズ,サイト型,トップページ

こんな感じです。

なるほど!

結構スッキリしてきました!

STEP
サイドバーの設定
SWELL,カスタマイズ,サイト型,トップページ
  1. 「サイドバー」をクリック
  2. 「トップページにサイドバーを表示する」のチェックを外す
STEP
メニュー設定
SWELL,カスタマイズ,サイト型,トップページ
  1. 「メニュー」をクリック
  2. 「メニューを新規作成」をクリック
  3. メニュー名:「グローバルナビ」と入力、メニューの位置:「グローバルナビ」にチェック、「次」をクリック
SWELL,カスタマイズ,サイト型,トップページ
  1. 「項目を追加」をクリック
  2. 好きなメニュー項目の「+」をクリック(今回は②の固定ページを入れます)
SWELL,カスタマイズ,サイト型,トップページ
  1. メニューのタイトルをクリックすると詳細設定が開く
  2. ナビゲーションラベル:メニューで表示したいテキストを入力
  3. 今回は③番のような感じで設定しました
STEP
メインビジュアル・ヘッダー・メニューの設定完了
SWELL,カスタマイズ,サイト型,トップページ

こんな感じで完成しました!

こやん

続いてメインコンテンツを作り込んでいきます

トップページのメインコンテンツを固定ページで作ろう

STEP
「固定ページを編集」をクリック
SWELL,カスタマイズ,サイト型,トップページ
STEP
フルワイドブロックでセクションを作り込む:その1
SWELL,カスタマイズ,サイト型,トップページ
  1. ブロックの追加「+」をクリック→検索バーに「フルワイド」と入力
  2. 「フルワイド」ブロックを選択

フルワイドブロックの設定

  • コンテンツサイズ:サイト幅
  • 背景色:#fff
  • デバイスサイズ:PCサイズ
  • その他初期値
こやん

デバイスサイズ「PCサイズ」を選ぶのでスマホでは表示されないブロックになります

SWELL,カスタマイズ,サイト型,トップページ
  1. フルワイドブロックの中の「+」をクリック→検索バーに「リッチ」と入力
  2. 「リッチカラム」ブロックを追加
SWELL,カスタマイズ,サイト型,トップページ
  1. 画像ブロック:あらかじめ用意しておいた画像を挿入
  2. スペーサーブロック:③の画像がちょうど良い位置に来るように調整
  3. 画像ブロック:あらかじめ用意しておいた画像を挿入
STEP
フルワイドブロックでセクションを作り込む:その2

STEP2と同じ手順でフルワイドブロックを追加

詳細設定も同じでOK。

SWELL,カスタマイズ,サイト型,トップページ
  1. 見出しH2:サイトのコンセプトetc
  2. 見出しH4:サブコピーetc
  3. リッチカラムブロック
  4. 段落:サイトの紹介文etc
  5. SWELLボタン:運営者情報のページへリンクetc
STEP
フルワイドブロックでセクションを作り込む:その3

フルワイドブロックを追加。

詳細設定は以下。

  1. コンテンツサイズ:サイト幅
  2. 上下のpadding量(PC・SP):80
  3. 背景の画像:「メディアから選択」で指定
  4. 背景効果:「パララックス効果をつける」をオンにする
SWELL,カスタマイズ,サイト型,トップページ

スペーサーでサイズ感を調整

STEP
フルワイドブロックでセクションを作り込む:その4

フルワイドブロック、ブロック内の設定はSTEP2と全く同じものを作る。

ブロック内のみSTEP2と反転させる。

SWELL,カスタマイズ,サイト型,トップページ
なるほど!

位置がSTEP2と逆になってるね

STEP
フルワイドブロックでセクションを作り込む:その5

フルワイドブロックを追加。

設定はSTEP2と同じでOK。

ここはブログのカテゴリを紹介できるエリアにします。

SWELL,カスタマイズ,サイト型,トップページ
  1. リッチカラムブロック
  2. カラムの「+」を押して3列にする(詳細設定の列数:PCアイコンのところを「3」にすれば横並びになります)
  3. 画像を挿入
  4. 見出しH4
  5. 段落
  6. SWELLボタン

他のカラムの同じ手順で設定

STEP
トップページのメインコンテンツ完成!

メインコンテンツの設定は以上です!

なるほど!

ぽちぽち選んでいくだけで設定できました!

こやん

仕上げにフッターを設定します

フッターエリアを作ろう

フッターでは再びカスタマイザーを使用します。

私は全体のバランスを見ながら調整するので最後にやりますが、ヘッダーと同じタイミングで設定してもOKです。

STEP
カスタマイザーから編集
SWELL,カスタマイズ,サイト型,トップページ
  1. 「ウィジェット」をクリック
  2. 「フッター(PC)1」をクリック
STEP
フッターの設定
SWELL,カスタマイズ,サイト型,トップページ
  1. 「フッター」をクリック
  2. カラー設定:任意のカラーを指定、コピーライト設定:ブログの名前と更新年を入力
STEP
フッターウェイジェットを追加
SWELL,カスタマイズ,サイト型,トップページ
  1. 「ウィジェットを追加」をクリック
  2. 検索バーで追加したいウェイジェットを探して追加
こやん

私はこんな感じにしてみました

SWELL,カスタマイズ,サイト型,トップページ
  1. フッター(PC)1:テキスト(文字なし)
  2. フッター(PC)2:③〜⑥追加
  3. 画像:任意の画像を挿入
  4. テキスト:SEO関連のコメントを挿入
  5. 検索
  6. SNSリンク:カスタマイザーのSNS設定でURLが指定されているものが表示されます
  7. フッター(PC)3:テキスト(文字なし)

本来であればフッター(PC)2に追加すれば中央寄せになるようですが、私のPCではうまく動かなかったので両端に空のテキストウィジェットを入れて調節しました。

フッター(PC)2の画像やテキストを中央寄せにしたいので、以下の設定を入れました。

SWELL,カスタマイズ,サイト型,トップページ
  1. 「追加CSS」をクリック
  2. 以下のコードを入力
.w-footer__box {
	text-align: center
}
STEP
フッターが完成しました!

おめでとうございます!これで全てのカスタマイズが完了しました!

DEMO5
なるほど!

まるでウェブサイトみたい!

今回はサイト型を存分に体感できるウェブサイトのようなデザインにしてみましたが、投稿リストブロックやタブブロックを使用すれば、新着記事やおすすめ記事をトップページで紹介することもできます。

ぜひいろんなブロックを試してみてください。

>SWELLの各種機能や関連記事一覧はこちら

サイト型トップページのメリット・デメリット・おすすめな人

今回ご紹介したサイト型のブログのメリットとデメリット、どんな人におすすめなのかは以下の記事で詳しくご紹介しています。

サイト型の他に、定番のブログ型やミックス型のデザインについても解説しています。

まとめ:SWELLカスタマイズでおしゃれなサイト型トップページを作ろう

いかがでしたでしょうか。

SWELLはブログ、ウェブサイト、コーポレートサイトなど様々な分野で広く使用されているWordPressテーマです。

今回ご紹介したようなデザイン機能は全てのWordPressテーマの中でもダントツでトップレベルです。

それだけではなく、記事作成の時間を短縮する便利なブロックエディタやSEOをサポートする高速化機能など、様々な機能であなたのブログを助けてくれます。

あなたもSWELLを使って、ブログをもっと楽しみましょう!

swell公式サイト
商品名WordPressテーマ SWELL
販売価格¥17,600(税込)
(※ お支払いは一度限りです。月額や年額ではありません。)

SWELLの使用感やメリット・デメリットは以下の記事でレビューしています。

SWELLを使った本当にノーコードのサイト型トップページのカスタマイズは以下の記事でご紹介しています。

GOOG LAB.×SWELLのその他のデモサイト集は以下の記事でご紹介しています。

2020年以降、社会人やOLに副業ブームが到来しています。始めるなら今がチャンスです。

この記事を読んで実際に行動する人は100人中3人程度だそうです。

その中でさらに継続できる人は3人だそうです。

知識を得るだけでは何も変わりません。副業でブログを始めるなら、早速今から動き出しましょう!

5〜10分程度で簡単にWordPressブログを作るならコレ!

それでは、最後までお読みいただきありがとうございました。

ランキング参加しました!応援よろしくお願いします

ブログランキング・にほんブログ村へ

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

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