【SWELLカスタム】おしゃれなトップページをデザインする方法徹底解説 | ブログ型からサイト型へ

ブログ記事がある程度溜まってくると、記事だけでなく、ブログデザインをカスタムしたくなります。

でも「どうやってやればいいかわからない」「なんかプログラミングの知識が必要そう」など。

少しハードルが高いように思う方も少なくないと思います。

しかし、実際は簡単です。

プログラミングの知識はほぼ必要なく、ワードやパワーポイントを作るかの如く、簡単にカスタムすることができます。

この記事ではSWELLというテーマを用いて、ブログデザインをブログ型からサイト型へカスタムする方法を徹底解説していきます。

大きく2つのSTEPに分けて…

• サイト型へのベース作り
• トップページのカスタム

といったように画像を用いながら解説していきます。

また、応用編と題しまして、こんなこともできるということをお伝えしていきます。

【STEP1】ブログ型からサイト型へするベースづくり

まず、ブログ型からサイト型へするためのベースづくりをしていきます。

することは2つ

• サイドバーの非表示
• 新着記事・人気記事ページの割り当て

サイドバーの非表示は任意です。私のブログではサイドバーを非表示にして、ブログのような雰囲気を消しています。

また、多くの方はスマホでブログを閲覧するため、結局のところサイドバーの重要性は低く感じます。そのため、この記事ではサイドバーをなくしたデザインとしています。

サイドバーの非表示

ダッシュボードから「外観」⇨「カスタム」へ移動します。

すると、こんな編集画面になります。

上から5つ目に「サイドバー」があるのでこちらをクリック。

すると…

このような画面になります。

赤枠で囲った最初の「トップページにサイドバーを表示する」のチェックを外します。

これでトップページのサイドバーを非表示にすることができます。

その他にも…

• 投稿ページ
• 固定ページ
• アーカイブページ

これらのページでサイドバーの表示・非表示を選択できます。この辺は任意でお選びください。

私はトップページのみを非表示にしています。

新着記事・人気記事ページの割り当て

ブログ型からサイト型へ変更するとトップページに数記事だけ新着記事と人気記事を載せます。

数記事以外は記事一覧のページに飛ばします。

その記事一覧ページを「固定ページ」で作成します。

新着記事一覧の作り方

人気記事一覧の作り方

基本的には新着記事一覧と同じ手順で人気記事一覧を作ります。

【STEP2】トップページ（固定ページ）を編集

次にトップページをカスタムしていきます。

ここでは大きく4つに分けて解説していきます。

• メインビジュアル
• 新着記事・人気記事
• プロフィール
• カテゴリーごとの記事一覧

これを解説する前に固定ページでトップページを作成します。

固定ページでトップページを作成

「固定ページ」⇨「新規追加」からトップページを作成します。

1. タイトルを「トップページ」とする
2. URLスラッグを「home」にする

これで準備OK。

このページを編集してトップページを作成していきます。

全ての作成が終わったら公開し、トップページを反映させます。

反映方法は「外観」⇨「カスタマイズ」⇨「WordPress設定」⇨「ホームページ設定」から行います。

1. 「固定ページ」を選択
2. 「トップページ」を選択

これでトップページが反映されます。

メインビジュアルの作成

メインビジュアルはトップページの最初に出てくるこの写真です。

これは好みにもよるので、設定するかは任意です。しかし、ファッションブログのようにおしゃれなブログを作りたい方にはおすすめです。

こちらは先程の固定ページではなく、「カスタマイズ」から設定していきます。

「外観」⇨「カスタマイズ」⇨「トップページ」⇨「メインビジュアル」の順にクリックします。

このブログでは①〜⑤は上記の通りに設定しています。このあたりは好みで設定可能です。

ここでは画像の設定です。

PCとスマホで違う画像を設定できます。同じで良い場合は、PCだけ画像を設定すればOKです。

メインテキストとサブテキストに文字を入れます。このブログではファッションデザイナーの名言を入れています。

自分のブログにあった文言をご自由に入れてください。

また、下部のリンク先URLを設定することで、画像をクリックするとそのページに飛ばすことができます。

スライドは全部で4つ設定できます。カテゴリー別に画像を設定するのをおすすめします。

新着記事・人気記事の配置

メインビジュアル下に新着記事と人気記事を配置します。

プロフィールを設定する

ここではプロフィールを設定します。

サイドバーにプロフィールを表示させることが多いですが、サイドバーを非表示にしているため、ここでプロフィールのブロックを作成していきます。

カテゴリーごとの記事一覧を作成

カテゴリーごとに記事一覧のブロックを作成します。

ここでもフルワイドセクションを使います。

【応用編】PCとスマホで表示を変更する

SWELLではPCとスマホで表示を変更することが簡単に行えます。

「デバイス制限」からSPサイズとPCサイズを選択し表示・非表示を行います。

まとめ

ブログ型からサイト型へのデザイン変更はいかがだったでしょうか。

今回は私のブログデザインを例にしてカスタマイズ例を示しました。良いと思った箇所はご自身のブログに取り入れてください。

カスタマイズをしていくことで、色々とアイディアが出ることもあります。こうした方が良いかもしれないなどがありましたら、どんどん組み込んでいくと良いでしょう。

ブログデザインが参考になれば幸いです。

ということで今回はこの辺で。