SWELLカスタマイズ方法を36枚の画像で解説｜トップページをサイト型に！

こんにちは、おうすけです。

今回は当ブログの使用テーマSWELLのカスタマイズ方法を36枚の画像を使って解説します。

筆者情報

SWELLのカスタマイズ方法がよく分からない…。こんな方はこの記事を見れば解決しますよ。

なぜならこの記事を書いている僕はSWELLを使用して半年、当ブログでカスタマイズを6回ほど試してきたからです。

またつまずきやすい箇所も把握しているので、36枚の画像を使って丁寧に解説しています。

本記事を見ればつまずくことなく、SWELLをサイト型にカスタマイズする方法が分かりますよ。

ではさっそく本文にいきましょう！

SWELLカスタマイズ①｜ヘッダーロゴを作成

はじめにヘッダーロゴの作成していきます。

ヘッダーロゴは目立つ箇所なので、ブログを差別化したい方にオススメですよ。

デフォルト(初期状態)でも大丈夫の場合はスルーでOKですよ

作成手順は以下のとおり。

ひとつずつ見ていきましょう。

①Canva公式サイトへアクセス

Canva公式サイトを開きます。

>>Canva公式サイトへアクセス

有料版もありますが、基本的に無料でOKですよ。

②カスタムサイズを【1200×360】に設定

Canvaトップページを開くと、右上に「デザイン作成」という項目があります。

「デザイン作成」をクリックすると、タブが表示されます。

ここではヘッダーロゴ画像のサイズを設定していきます。

サイズは【1200×360】と設定しましょう。

• くうかんしんぷるライフさんを参考にしました

③ヘッダーロゴを作りpngでダウンロード｜軽量化もセット

あとはブログ名を入れたり、素材を使ってヘッダーロゴを完成させましょう。

ロゴなどを入れるといい感じになりますよ。

また画像のダウンロードはPNGですと高画質でキレイに映ります。

PNGでダウンロードする場合は軽量化もセットで行いましょう

注意として、PNG画像はJPGに比べて容量が重たい点です。

ダウンロードをした画像をそのまま貼り付けると、ページ表示速度に影響するため軽量化もセットで行いましょう。

(軽量化は下記で解説しています)

もしPNG画像が重くなってしまったらJPGでもOKですよ。

画像を軽量化するならTinyPNGがおすすめ｜無料

僕が使っている軽量化できるサイトを貼っておきます。ダウンロードした画像をドロップするだけで軽量化してくれる神ツールですよ。

無料で軽量化したい方は参考にどうぞ。

④作成したヘッダー画像を貼り付けて完成

手順③で作った画像をヘッダーに貼っていきます。

• 外観→カスタマイズ
• ヘッダー→ロゴ画像の設定

以上がヘッダーロゴの解説になりました。

続いてピックアップバナーの解説に移ります。

SWELLカスタマイズ②｜ピックアップバナ―編

ピックアップバナーの設定は難しそうで、意外と簡単です。

「ピックアップバナー」とは、トップページに表示できる画像バナー形式のナビゲーションメニューのこと

引用：SWELL公式サイト

当ブログは下記4つをピックアップバナーに掲載しています。

• アイキャッチ画像とピックアップバナーの画像は別に設定

ピックアップしている記事4つ！

ピックアップバナーの選び方は読者に見て欲しい記事を選ぶのがポイントになります。

さっそくピックアップバナーの作成にいきましょう。

作成手順は以下のとおり

1. ピックアップバナーに使う画像を作成
2. カスタムメニューを作成｜5ステップ
3. ピックアップバナーをカスタマイズ｜設定

ひとつずつ解説していきます。

①ピックアップバナーに使う画像を作成

ピックアップバナーに使用する画像を作成していきます。

画像を設定しない場合はアイキャッチ画像、またはNO IMAGE画像が表示されます

画像作成にはおなじみのCanvaを使います。

https://twitter.com/osuke_blog/status/1336887523411279876

ピックアップバナーの作成手順

ひとつずつ解説していきます。

以上がピックアップバナー画像の作成方法になりました。

作り方はヘッダーロゴと同じ手順ですよ。

続いてカスタムメニューを作成していきます。

②カスタムメニューを作成｜5ステップ

カスタムメニューは以下の手順で作成していきます。

カスタムメニューはピックアップバナ－を作るのに必要な箱のようなモノです

大変そうですが5分ほどで終わりますよ。

1. 【外観】⇒【メニュー】を選択
2. 【新しいメニュー】を作成
3. メニュー名をピックアップバナーにして保存
4. 表示したい記事・カテゴリーを入れる
5. Canvaで作成した画像URLを貼り付ける

文章だけですと分かりにくいので、5枚の画像を使って説明していきますね。

【カスタムリンク】⇒【説明】の欄にCanvaで作成した画像URLを貼ればOKですよ

SWELLカスタマイズ③｜トップページ編【固定ページ】

それではブログの顔となるトップページ部分を作っていきます。

そのためには下記2つのページが必要になります。

• 新着記事ページ
• 固定ページ(トップページ)

少し分かりにくいですが、下記のとおり行えば大丈夫ですよ。

では作成していきましょう。

新着記事ページを作成

手順は3つ。

1. 固定ページを新規作成
2. トップページを作成
3. 新着ページ部分を割り当て

①固定ページを新規作成

はじめに固定ページを作成します。

ブログ上部から【＋新規】⇒【固定ページ】をクリックしましょう。

固定ページがクリックできたら、真っ白なページが表示されます。

ページタイトルを【新着記事】と設定します。

新着記事が入力できたら、次はパーマリンクの設定になります。

【URLスラッグ】⇒【new-post】としましょう。

これで新着ページは終わりです。

次に固定ページ(トップページ)を作っていきます。

②固定ページ(トップページ)を作成

ブログで表示されるトップページをつくります。

先ほど同様に、【＋新規】⇒【固定ページ】をクリックしましょう。

作成したページタイトル名は【HOME】にします。

タイトルを【HOME】にできたら、パーマリンク(スラッグ)を変更します。

【URLスラッグ】⇒【home】または【top】とすればOKです。

以上が新着ページ作成でした。

③新着ページ部分を割り当て

①・②で作った【新着記事ページ】【固定ページ】の割り当てを行います。

外観⇒カスタマイズをクリックしましょう。

カスタマイズがクリックできたら、【Wordpress設定】⇒【ホームページ設定】をクリックしましょう。

すると下記のようなページが表示されます。

下記3つが設定できれば、トップページのカスタマイズができるようになります。

• ホームページの表示⇒固定ページ
• 【ホームページ】⇒【HOME】
• 【投稿ページ】⇒【新着記事】

以上で固定ページの設定が終了しました。

これからトップページのカスタマイズ方法を解説していきます。

SWELLカスタマイズ④｜トップページ

当ブログはこのようなカスタマイズにしています。

主に【タブ・カラム・見出し・投稿リスト】で構成しており、簡単だけどそれっぽいデザインができますよ。

ではひとつずつ解説していきます。

トップページ下｜タブで構成

トップページ上部はこのようになっています。

SWELLカスタマイズ③で作ったトップページにタブを設定しています。

カスタマイズ方法は以下の手順になります。

• 【ブロック検索】⇒【タブ】を選択
• タブをカテゴリー名に変える
• 【ブロック検索】⇒【投稿リスト】を追加

ひとつずつ解説してきます。

以上がトップページ【タブ】の設定になります。

トップページ｜下部

ラストはこちらの設定になります。

ここでは【カラム】を使って、2列を作っていきます。

【50：50】をクリックすると、2列のカラムが表示されます。

ここで【＋】をクリックし、先ほど同様に【投稿リスト・見出し】などを追加していきましょう。

まとめ

今回はSWELLのカスタマイズ方法を解説してきました。

画像が多く大変だったと思いますが「SWELLってこんなとこまで設定できるんだよ！」と伝えれました。

まだ情報が少なくカスタマイズが難しいかと思いますが、参考になれれば嬉しいです。