SWELLでサイト型トップページを作る方法【個性を出して差をつけろ!】

こんにちは、ひびのです。

  • SWELLで簡単にサイト型のトップページが作れるらしいけど、やり方が分からない
  • 初心者でも本当に簡単にできるの?



こういう疑問に答えます。WordPressテーマSWELLには、サイト型のトップページを簡単に作れるという特徴があります。

サイト型にすることで、どこにでもあるブログからあなただけの個性的なブログに変えることができます。

1度やってしまえば簡単に思えるんですが、僕が初めてやった時は3日かかりました。笑

その経験を踏まえて、初心者でも簡単にサイト型のトップページが作れるように、手順を1つ1つ細かく説明していきます。

僕はとにかく無駄を省いてシンプルに作っているので、入門編としてはちょうどいいと思います。


ひびの

それではいきましょう!


目次

SWELLでサイト型トップページを作る手順

まずは、サイト型トップページにカスタマイズする手順をざっくり説明します。手順は大きく分けて次の3つです。

  1. ヘッダー部分をカスタマイズする
  2. メインコンテンツ部分を固定ページで作る
  3. フッター部分をカスタマイズする




画像で見ると分かりやすいと思うんですけど、僕のブログはこの3つのパートで構成されています。

SWELLのカスタマイズ機能でヘッダーとフッターをカスタマイズして、メインコンテンツとなる部分は固定ページを作って表示させます。

一見難しそうなんですけど、手順通りにやれば初心者でも問題なくできます。

SWELLでヘッダー部分をカスタマイズ

最初にヘッダー部分のカスタマイズです。こんな感じを目指していきます。



手順としては次の通りです。順番に解説していきます。

  1. サイドバーを非表示にする
  2. ロゴの設定
  3. グローバルメニューの設定
  4. メインビジュアルの設定

サイドバーを非表示にする

まずは、サイト型に不要なサイドバーを非表示にします。

『外観』⇨『カスタマイズ』⇨『サイドバー』





投稿ページ以外のサイドバーを非表示にします。投稿ページのサイドバーはお好みですが、僕は目次やプロフィールを載せています。

ロゴのカスタマイズ

あらかじめロゴに設定する画像を用意しておきましょう。画像のサイズは【1600×360】です。

ちなみに僕は無料の画像編集ソフト「PhotoScape X」で作りました。

『外観』⇨『カスタマイズ』⇨『ヘッダー』⇨『ロゴ画像の設定』


設定項目はこんな感じに設定しています。

設定
  • 画像サイズ(PC):48
  • 画像サイズ(PC追従ヘッダー):32
  • 画像サイズ(SP):60
  • ヘッダーのレイアウト(PC):ヘッダーナビを下に
  • ヘッダーのレイアウト(SP):ロゴ:中央/メニュー:左

グローバルメニューの設定

メニュー下の説明を表示させる方法

デフォルト設定ではメニュー下の説明が非表示になるので、これを表示できるように設定します。


『外観』⇨『メニュー』⇨『右上の表示オプション』



するとこういう画面が出てきますので、「説明」にチェックを入れます。これでOKです。



次にグローバルメニューを作成していきます。作り方が分かっている方は飛ばしてください。

『メニュー名を入力』⇨『メニューを作成』



ホームページへのリンクを作る場合は、カスタムリンクにURLを入力してメニューに追加します。


メニュー横にアイコンを表示させたい場合は、ナビゲーションラベルに画像のように入力します。詳しいやり方はこちらのサイトを見てください。


カテゴリーも同じように追加していきます。


お問い合わせを設置する場合は、あらかじめ固定ページで作っておいて追加します。


メインビジュアルの設定

最後にメインビジュアルを設定すれば、ヘッダー部分のカスタマイズは終わりです。あらかじめ画像を2枚用意しておきましょう。PC用とスマホ用です。

PC用の画像サイズは【1600×900】スマホ用の画像サイズは【700×600】です。

『外観』⇨『カスタマイズ』⇨『トップページ』⇨『メインビジュアル』



Scrollボタンをつけたい場合は、チェックを入れておきましょう。



あとはこのように画像を設定するだけです。



これでヘッダー部分のカスタマイズは完成です。

メインコンテンツ部分を固定ページで作成

次にメインコンテンツ部分の作り方を説明していきます。目指すのはこんな感じです。

スクロールできます



このメインコンテンツ部分は、3つのエリアでできています。

  1. おすすめ記事エリア
  2. 新着記事エリア
  3. カテゴリーエリア

おすすめ記事エリアの作り方

STEP
「固定ページ」⇨「新規追加」


このページタイトルは表示されないので何でもいいです。

STEP
「+ボタン」⇨「フルワイド」


フルワイドブロックの設定は右の画像のようにします。コンテンツの横幅をサイト幅にしてください。

STEP
フルワイドブロックの見出しを追加する





見出しはH1見出しを使っていて
見出しブロックの「ブロック下の余白量」を0にしています。

STEP
「+ボタン」⇨「投稿リスト」


投稿リストブロックの設定は下の画像を参考にしてください。



特定の記事だけをおすすめ記事として表示したいので、表示させたい記事の投稿IDを入力します。


投稿IDは、記事編集画面のURLに載ってます。


ひびの

これでおすすめ記事エリアは完成です!

新着記事エリアの作り方

新着記事エリアを作るためには、あらかじめ新着記事一覧ページを別の固定ページで作っておく必要があります。

新着記事一覧ページって何?



多分そう思ったと思うんですけど、新着記事一覧ページというのは、「もっと見る」のリンク先ページのことです。

これがないと、過去の記事を見ることができません。



今編集している固定ページを一旦保存して、固定ページを新規追加します。

新着記事一覧ページを作る方法

STEP
「固定ページ」⇨「新規追加」
STEP
新着記事一覧ページを作る


  1. タイトル入力する
  2. 表示状態を「公開」にする
  3. パーマリンクを「new-post」にする



入力したタイトルがリンク先のページに表示されます。下の画像のような感じです。本文は何も書かなくてOKです。

あとでURLを入力しなければならないので、覚えておいてください。

「ブログURL/new-post/」です。



前の固定ページに戻って、おすすめ記事エリアの続きから新着記事エリアを作っていきます。

STEP
「+ボタン」⇨「フルワイド」


背景の色を好きな色に変えてください。僕はシンプルにグレーにしています。


この時に注意があって、おすすめ記事エリアのフルワイドブロックを選択した状況で、+ボタンを押してください。投稿リストを選択した状態でフルワイドを追加すると、上のフルワイドの中に2重でフルワイドができてしまいます。


STEP
エリアの境界線を設定する



この波になっている部分です。フルワイドブロックの設定を下にスクロールするとあります。僕は下の画像のように設定しています。


STEP
フルワイドブロックの見出しを追加する


見出しはおすすめ記事エリアとまったく同じです。

STEP
「+ボタン」⇨「投稿リスト」


投稿リストの設定はおすすめ記事とほぼ同じです。ここをクリックすれば確認できます。違う箇所は、新着記事一覧ページへのリンクがある点です。


リンク先のURLは「ブログURL/new-post/」です。

ひびの

これで新着記事エリアは完成です!

カテゴリーエリアの作り方

『フルワイドブロック』⇨『見出し追加』⇨『投稿リスト』

ここまで同じです。投稿リストの設定が変わります。

MOREリンクのURLには、各カテゴリーのURLを入力します。次に、Pickupの設定で表示したいカテゴリーを選択してください。



これをカテゴリーの数だけ繰り返すだけです。好みによって色を変えたり、フルワイドブロックの境界線を変えたりしてみてください。

固定ページを表示させる方法

ひびの

苦労して作った固定ページを実際に表示させてみましょう!


STEP
「設定」⇨「表示設定」

STEP
表示設定を変更する

SWELLでフッター部分をカスタマイズ

最後にフッター部分のカスタマイズを解説していきます。フッターはこんな感じにシンプルにしてます。


STEP
「外観」⇨「ウィジェット」

STEP
「SWELLプロフィール」をフッター(PC)1に追加




SNSアイコンを表示させたい場合は、『外観』⇨『カスタマイズ』⇨『SNS情報』からURLを設定してください。

STEP
「検索・カテゴリー・アーカイブ」をフッター(PC)2に追加

STEP
バナーをフッター(PC)3に追加


ひびの

これでサイト型トップページの完成です!

まとめ:サイト型トップページにして個性的なブログにしよう

お疲れ様でした!無事にサイト型にできたでしょうか?

ややこしいコードを入力したりすることなく、ブログ型からサイト型に変更することができました。これがSWELLの大きな特徴です。

他のWordPressテーマではこのようにはいきません。

サイト型にすることで、あなただけの個性的なブログにすることができます。それと同時に、ブログに対する愛着が湧いて、モチベーションも高まります。



僕が今回紹介した方法は、1番シンプルなやり方です。もっとできることはたくさんあるので、色々試してみてください。

とは言え、デザイン沼にハマらないように気を付けてくださいね。

というわけで以上です!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次