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

SWELLトップページをカスタマイズ!

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

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

本記事の内容
  • ヘッダーロゴの作成方法
  • ピックアップバナーの設定
  • トップページをサイト型にする方法|画像付き
  • 画像の軽量化・カラムの使い方

筆者情報

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

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

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

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

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

もくじ

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

SWELLヘッダー部分
ヘッダー

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

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

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

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

  1. Canvaを開く
  2. カスタムサイズ【1200×360】に設定
  3. タイトルロゴを入れ、pngでダウンロード|軽量化をセット
  4. 作成したヘッダー画像を貼って完成

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

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

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

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

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

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

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

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

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

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

カスタムサイズ【1200×360】
  • くうかんしんぷるライフさんを参考にしました
Osuke

くうかさんありがとうございます!

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

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

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

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

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

ヘッダーロゴ画像

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

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

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

PNGの特徴
画質
高画質
容量
重い

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

悩んでいる人

何KB(キロバイト)までなら大丈夫ですか?

Osuke

目安としては200KB以下になります。PNG画像を軽量化しても重い場合は、JPGでダウンロードしましょう

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

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

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

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

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

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

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

外観⇒カスタマイズ

カスタマイズが開けたら、【ヘッダー】⇒【ロゴ画像の設定】をクリックします。

下記のように作成した画像をアップデートできればOKです。

【ヘッダー】⇒【ロゴ画像の設定】

上記の手順で行えばうまく反映されるはずです。

Osuke

反映されない場合は再度読み込みをしてみましょう

また画像サイズ(PC・SP)で迷ったら当ブログと同じ設定でOKですよ。

  • PC…パソコン
  • SP…スマートフォン
サイズ
PC100
PC追従ヘッダー30
SP80
SP…スマートフォン
Osuke

上記は当ブログの目安なのでブログに合わせて調整をおねがいします

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

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

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

上記がピックアップバナー

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

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

引用:SWELL公式サイト

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

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

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

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

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

作成手順は以下のとおり

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

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

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

ピックアップバナー

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

Osuke

ピックアップバナーはイラストか写真どちらかで統一するのがオススメ!

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

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

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

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

  • Canvaを開く
  • カスタマイズを【290×120】に設定
  • 画像を作成

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

>>Canva公式サイトで編集する

カスタマイズを【290×120】に設定

【290×120に設定】

新しいデザイン作成をクリックしましょう。

ピックアップバナー用画像

お好きな写真・イラストを貼り付けてPNGでダウンロードすれば完成です。

Osuke

ダウンロードした画像は軽量化もセットで行いましょう

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

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

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

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

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

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

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

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

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

①:【外観】⇒【メニュー】を選択

【外観】⇒【メニュー】

②:【新しいメニュー】を作成

【新しいメニュー】を作成

③:メニュー名をピックアップバナーにして保存

メニュー名は管理を楽にするため【ピックアップバナー】にします。

メニュー名が保存できたら、下記のように【ピックアップバナーに✔チェック】⇒【メニューを保存】をしましょう。

メニュー名をピックアップバナーにして保存

上記で作成したピックアップバナー内に記事を選択していきます。

④:表示したい記事・カテゴリーを入れる

③で作ったピックアップバナ-内に記事を選んでいきます。

【メニュー項目を追加】⇒【ピックアップしたい記事を選ぶ】⇒【メニューに追加】

メニュー項目からピックアップしたい記事を追加

選択方法は下記4つ。

  • 固定ページ
  • 投稿  ⇐ おすすめ
  • カスタムリンク ⇐ おすすめ
  • カテゴリー
  • 固定ページは「お問い合わせ・プライバシーポリシーが該当」

【投稿】または【カスタムリンク】からピックアップする記事を選ぶのが一番カンタンですよ。

またピックアップする記事は4つですとPC・SPから見たバランスが美しいです。

⑤:作成したピックアップバナー画像を貼り付ける

【説明】⇒【画像URL】を貼り付ける
【説明】⇒【画像URL】を貼り付ける

最後に④で作成したピックアップバナ-内の記事に画像を貼りつけます。

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

画像URLの調べ方

むかしの僕が画像URLの調べ方が分からなかったので補足として説明しておきます。

【メディア】⇒【ライブラリ】をクリック

  • 画像を追加する場合は【新規追加】で画像をアップデート
【メディア】⇒【ライブラリ】をクリック。

【画像を選択】⇒右下に表示されるURLが、【画像URL】になります。

【画像選択】⇒URLをクリック

画像URLがコピーできましたら、先ほどの手順⑤に戻り、【説明】⇒URLを貼りつければOKですよ。

以上が画像URLの調べ方でした。

Osuke

続いてトップページ部分を作っていきます

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

トップページ

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

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

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

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

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

新着記事ページを作成

手順は3つ。

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

①固定ページを新規作成

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

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

固定ぺージ

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

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

【新着記事】

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

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

スラッグ⇒【new-post】

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

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

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

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

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

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

タイトルを【HOME】

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

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

スラッグ⇒【home】

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

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

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

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

外観⇒カスタマイズ

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

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

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

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

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

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

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

トップページ

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

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

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

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

トップページ上部

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

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

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

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

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

トップページ下タブ

①【ブロック検索】⇒【タブ】を選択

エディター画面に表示される【+】をクリックすると、下記のような画像が表示されます。

①【ブロック検索】⇒【タブ】を選択

タブを選択すると下のような画像が表示されます。

この中で記事リストを入れたり、タブ名を変更していきます。

【タブ】を選択

タブが表示されたら次2つを設定をしてみましょう。

  • 【タブ】をカテゴリー名・新着記事にする
  • タブ内の【+】をクリックして【投稿リスト】を追加
【タブ名&投稿リスト】

すると上記のように表示されます。

当ブログは下記のような設定にしているので、参考にお願いします。

設定項目
投稿数
レイアウトリスト型
表示順序新着順
人気順
各種表示設定更新日

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

カテゴリーを投稿リストに追加する方法

補足としてカテゴリーを投稿リストに追加する方法を解説します。

投稿リストにマウスと動かすと、右側に設定画面が表示されます。

【Pickup】をクリックして、下にスクロールします。

【Pickup】をクリック

スクロールすると【カテゴリー】があります。

【カテゴリー】

ここをクリックすれば【カテゴリー】が投稿リストに反映されます。

以上がカテゴリーを投稿リストに追加する方法でした。

トップページ|下部

トップページ

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

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

【カラム50:50】

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

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

カラム

当ブログの設定の設定は以下の3つを使用しています。

  • 見出し:H2
  • 投稿リスト|カード・リスト型
  • 画像
Osuke

ブログに合わせてカスタマイズしてみましょう

【カスタマイズ】

まとめ

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

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

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

Osuke

質問・不明な点があればDMまたはメンション付きでお願い致します!

スポンサーリンク

SWELLトップページをカスタマイズ!

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

SNSでシェアお願いします
URLをコピーする
URLをコピーしました!

質問はこちらへお願いします。

コメントする

もくじ
閉じる