こんにちは、おうすけです。
今回は当ブログの使用テーマSWELLのカスタマイズ方法を36枚の画像を使って解説します。
- ヘッダーロゴの作成方法
- ピックアップバナーの設定
- トップページをサイト型にする方法｜画像付き
- 画像の軽量化・カラムの使い方
筆者情報
SWELLのカスタマイズ方法がよく分からない…。こんな方はこの記事を見れば解決しますよ。
なぜならこの記事を書いている僕はSWELLを使用して半年、当ブログでカスタマイズを6回ほど試してきたからです。
またつまずきやすい箇所も把握しているので、36枚の画像を使って丁寧に解説しています。
本記事を見ればつまずくことなく、SWELLをサイト型にカスタマイズする方法が分かりますよ。
ではさっそく本文にいきましょう！
SWELLカスタマイズ①｜ヘッダーロゴを作成
はじめにヘッダーロゴの作成していきます。
ヘッダーロゴは目立つ箇所なので、ブログを差別化したい方にオススメですよ。
作成手順は以下のとおり。
- Canvaを開く
- カスタムサイズ【1200×360】に設定
- タイトルロゴを入れ、pngでダウンロード｜軽量化をセット
- 作成したヘッダー画像を貼って完成
ひとつずつ見ていきましょう。
①Canva公式サイトへアクセス
Canva公式サイトを開きます。
有料版もありますが、基本的に無料でOKですよ。
②カスタムサイズを【1200×360】に設定
Canvaトップページを開くと、右上に「デザイン作成」という項目があります。
「デザイン作成」をクリックすると、タブが表示されます。
ここではヘッダーロゴ画像のサイズを設定していきます。
サイズは【1200×360】と設定しましょう。
- くうかんしんぷるライフさんを参考にしました
オウスケくうかさんありがとうございます！
③ヘッダーロゴを作りpngでダウンロード｜軽量化もセット
あとはブログ名を入れたり、素材を使ってヘッダーロゴを完成させましょう。
ロゴなどを入れるといい感じになりますよ。
また画像のダウンロードはPNGですと高画質でキレイに映ります。
注意として、PNG画像はJPGに比べて容量が重たい点です。
ダウンロードをした画像をそのまま貼り付けると、ページ表示速度に影響するため軽量化もセットで行いましょう。
(軽量化は下記で解説しています)
もしPNG画像が重くなってしまったらJPGでもOKですよ。
悩んでいる人何KB(キロバイト)までなら大丈夫ですか？
オウスケ目安としては200KB以下になります。PNG画像を軽量化しても重い場合は、JPGでダウンロードしましょう
画像を軽量化するならTinyPNGがおすすめ｜無料
僕が使っている軽量化できるサイトを貼っておきます。ダウンロードした画像をドロップするだけで軽量化してくれる神ツールですよ。
無料で軽量化したい方は参考にどうぞ。
④作成したヘッダー画像を貼り付けて完成
手順③で作った画像をヘッダーに貼っていきます。
- 外観→カスタマイズ
- ヘッダー→ロゴ画像の設定
カスタマイズが開けたら、【ヘッダー】⇒【ロゴ画像の設定】をクリックします。
下記のように作成した画像をアップデートできればOKです。
上記の手順で行えばうまく反映されるはずです。
オウスケ反映されない場合は再度読み込みをしてみましょう
また画像サイズ(PC・SP)で迷ったら当ブログと同じ設定でOKですよ。
- PC…パソコン
- SP…スマートフォン
| サイズ | |
|---|---|
| PC | 100 |
| PC追従ヘッダー | 30 |
| SP | 80 |
オウスケ上記は当ブログの目安なのでブログに合わせて調整をおねがいします
以上がヘッダーロゴの解説になりました。
続いてピックアップバナーの解説に移ります。
SWELLカスタマイズ②｜ピックアップバナ―編
ピックアップバナーの設定は難しそうで、意外と簡単です。
「ピックアップバナー」とは、トップページに表示できる画像バナー形式のナビゲーションメニューのこと
引用：SWELL公式サイト
当ブログは下記4つをピックアップバナーに掲載しています。
- アイキャッチ画像とピックアップバナーの画像は別に設定
ピックアップしている記事4つ！
ピックアップバナーの選び方は読者に見て欲しい記事を選ぶのがポイントになります。
さっそくピックアップバナーの作成にいきましょう。
作成手順は以下のとおり
- ピックアップバナーに使う画像を作成
- カスタムメニューを作成｜5ステップ
- ピックアップバナーをカスタマイズ｜設定
ひとつずつ解説していきます。
①ピックアップバナーに使う画像を作成
ピックアップバナーに使用する画像を作成していきます。
オウスケピックアップバナーはイラストか写真どちらかで統一するのがオススメ！
画像作成にはおなじみのCanvaを使います。
ピックアップバナーの作成手順
- Canvaを開く
- カスタマイズを【290×120】に設定
- 画像を作成
ひとつずつ解説していきます。
カスタマイズを【290×120】に設定
新しいデザイン作成をクリックしましょう。
お好きな写真・イラストを貼り付けてPNGでダウンロードすれば完成です。
オウスケダウンロードした画像は軽量化もセットで行いましょう
以上がピックアップバナー画像の作成方法になりました。
作り方はヘッダーロゴと同じ手順ですよ。
続いてカスタムメニューを作成していきます。
②カスタムメニューを作成｜5ステップ
カスタムメニューは以下の手順で作成していきます。
大変そうですが5分ほどで終わりますよ。
- 【外観】⇒【メニュー】を選択
- 【新しいメニュー】を作成
- メニュー名をピックアップバナーにして保存
- 表示したい記事・カテゴリーを入れる
- Canvaで作成した画像URLを貼り付ける
文章だけですと分かりにくいので、5枚の画像を使って説明していきますね。
①：【外観】⇒【メニュー】を選択
②：【新しいメニュー】を作成
③：メニュー名をピックアップバナーにして保存
メニュー名は管理を楽にするため【ピックアップバナー】にします。
メニュー名が保存できたら、下記のように【ピックアップバナーに✔チェック】⇒【メニューを保存】をしましょう。
上記で作成したピックアップバナー内に記事を選択していきます。
④：表示したい記事・カテゴリーを入れる
③で作ったピックアップバナ－内に記事を選んでいきます。
【メニュー項目を追加】⇒【ピックアップしたい記事を選ぶ】⇒【メニューに追加】
選択方法は下記4つ。
- 固定ページ
- 投稿 ⇐ おすすめ
- カスタムリンク ⇐ おすすめ
- カテゴリー
- 固定ページは「お問い合わせ・プライバシーポリシーが該当」
【投稿】または【カスタムリンク】からピックアップする記事を選ぶのが一番カンタンですよ。
またピックアップする記事は4つですとPC・SPから見たバランスが美しいです。
⑤：作成したピックアップバナー画像を貼り付ける
最後に④で作成したピックアップバナ－内の記事に画像を貼りつけます。
【カスタムリンク】⇒【説明】の欄にCanvaで作成した画像URLを貼ればOKですよ
ピックアップバナーのカスタマイズはSWELL公式サイトをご確認お願いします。
画像URLの調べ方
むかしの僕が画像URLの調べ方が分からなかったので補足として説明しておきます。
【メディア】⇒【ライブラリ】をクリック
- 画像を追加する場合は【新規追加】で画像をアップデート
【画像を選択】⇒右下に表示されるURLが、【画像URL】になります。
画像URLがコピーできましたら、先ほどの手順⑤に戻り、【説明】⇒URLを貼りつければOKですよ。
以上が画像URLの調べ方でした。
オウスケ続いてトップページ部分を作っていきます
SWELLカスタマイズ③｜トップページ編【固定ページ】
それではブログの顔となるトップページ部分を作っていきます。
そのためには下記2つのページが必要になります。
- 新着記事ページ
- 固定ページ(トップページ)
少し分かりにくいですが、下記のとおり行えば大丈夫ですよ。
では作成していきましょう。
新着記事ページを作成
手順は3つ。
- 固定ページを新規作成
- トップページを作成
- 新着ページ部分を割り当て
①固定ページを新規作成
はじめに固定ページを作成します。
ブログ上部から【＋新規】⇒【固定ページ】をクリックしましょう。
固定ページがクリックできたら、真っ白なページが表示されます。
ページタイトルを【新着記事】と設定します。
新着記事が入力できたら、次はパーマリンクの設定になります。
【URLスラッグ】⇒【new-post】としましょう。
これで新着ページは終わりです。
次に固定ページ(トップページ)を作っていきます。
②固定ページ(トップページ)を作成
ブログで表示されるトップページをつくります。
先ほど同様に、【＋新規】⇒【固定ページ】をクリックしましょう。
作成したページタイトル名は【HOME】にします。
タイトルを【HOME】にできたら、パーマリンク(スラッグ)を変更します。
【URLスラッグ】⇒【home】または【top】とすればOKです。
以上が新着ページ作成でした。
③新着ページ部分を割り当て
①・②で作った【新着記事ページ】【固定ページ】の割り当てを行います。
外観⇒カスタマイズをクリックしましょう。
カスタマイズがクリックできたら、【Wordpress設定】⇒【ホームページ設定】をクリックしましょう。
すると下記のようなページが表示されます。
下記3つが設定できれば、トップページのカスタマイズができるようになります。
- ホームページの表示⇒固定ページ
- 【ホームページ】⇒【HOME】
- 【投稿ページ】⇒【新着記事】
以上で固定ページの設定が終了しました。
これからトップページのカスタマイズ方法を解説していきます。
SWELLカスタマイズ④｜トップページ
当ブログはこのようなカスタマイズにしています。
主に【タブ・カラム・見出し・投稿リスト】で構成しており、簡単だけどそれっぽいデザインができますよ。
ではひとつずつ解説していきます。
トップページ下｜タブで構成
トップページ上部はこのようになっています。
SWELLカスタマイズ③で作ったトップページにタブを設定しています。
カスタマイズ方法は以下の手順になります。
- 【ブロック検索】⇒【タブ】を選択
- タブをカテゴリー名に変える
- 【ブロック検索】⇒【投稿リスト】を追加
ひとつずつ解説してきます。
トップページ下タブ
①【ブロック検索】⇒【タブ】を選択
エディター画面に表示される【＋】をクリックすると、下記のような画像が表示されます。
タブを選択すると下のような画像が表示されます。
この中で記事リストを入れたり、タブ名を変更していきます。
タブが表示されたら次２つを設定をしてみましょう。
- 【タブ】をカテゴリー名・新着記事にする
- タブ内の【＋】をクリックして【投稿リスト】を追加
すると上記のように表示されます。
当ブログは下記のような設定にしているので、参考にお願いします。
| 設定項目 | ー |
|---|---|
| 投稿数 | ５ |
| レイアウト | リスト型 |
| 表示順序 | 新着順 人気順 |
| 各種表示設定 | 更新日 |
以上がトップページ【タブ】の設定になります。
カテゴリーを投稿リストに追加する方法
補足としてカテゴリーを投稿リストに追加する方法を解説します。
投稿リストにマウスと動かすと、右側に設定画面が表示されます。
【Pickup】をクリックして、下にスクロールします。
スクロールすると【カテゴリー】があります。
ここをクリックすれば【カテゴリー】が投稿リストに反映されます。
以上がカテゴリーを投稿リストに追加する方法でした。
トップページ｜下部
ラストはこちらの設定になります。
ここでは【カラム】を使って、2列を作っていきます。
【50：50】をクリックすると、2列のカラムが表示されます。
ここで【＋】をクリックし、先ほど同様に【投稿リスト・見出し】などを追加していきましょう。
当ブログの設定の設定は以下の3つを使用しています。
- 見出し：H2
- 投稿リスト｜カード・リスト型
- 画像
オウスケブログに合わせてカスタマイズしてみましょう
まとめ
今回はSWELLのカスタマイズ方法を解説してきました。
画像が多く大変だったと思いますが「SWELLってこんなとこまで設定できるんだよ！」と伝えれました。
まだ情報が少なくカスタマイズが難しいかと思いますが、参考になれれば嬉しいです。
オウスケ質問・不明な点があればDMまたはメンション付きでお願い致します
関連記事
質問はこちらへお願いします。