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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ロゴのカスタマイズ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

メインビジュアルの設定

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

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

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

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

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

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

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

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

※スクロールできます

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

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

新着記事エリアの作り方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

というわけで以上です！