【SWELLカスタマイズ】ブログ型トップページでキャンプブログを作ろう【画像25枚で手順を解説】

お悩み

SWELLのブログ型でおしゃれなデザインにしたい!

今最も勢いのあるWordPressの有料テーマ「SWELL」。

シンプルでおしゃれなブログが作れるSWELLは、多くのブロガーやアフィリエイター、企業のコーポレートサイトにも活用されている優れたWordPressテーマです。

SWELLはノーコードで全てのカスタマイズができるので、初心者の方でも簡単におしゃれなブログを作れます

この記事ではSWELLをカスタマイズしてシンプルでおしゃれなブログを作る手順を画像25枚を使ってご紹介します。

今回はおしゃれなキャンプブログを作ってみましょう!

完成でもサイトはこちら

swell,デモサイト
DEMO7
この記事でわかること
  • おしゃれなブログ型トップページの制作手順

筆者はこんな人

  • 本業は企業のマーケティング担当(ブログは月100万PV超)
  • 副業ブログ6ヶ月目
  • 4ヶ月目で5桁達成
  • 5ヶ月目で月3万円達成
  • 最高収益5.6万円(5.5~6.5ヶ月の期間)
こやん

よろしくお願いします!

目次

SWELLカスタマイズで作るおしゃれなブログ

今回作るおしゃれなキャンプブログはWordPressテーマSWELLを使用します。

swell公式サイト
商品名WordPressテーマ SWELL
販売価格¥17,600(税込)
(※ お支払いは一度限りです。月額や年額ではありません。)

SWELLの機能レビューやインストール方法は以下の記事でご紹介しています。

トップページは「ブログ型」

ブログ型

今回のデモサイトは「ブログ型」で作成します。

ブログの最も一般的なレイアウトなので、SWELL以外のテーマを使用している方にもご参考にしていただけるかなと思います

すべてSWELLの基本機能のみで作成

本記事ではSWELLの基本機能のみでブログをカスタマイズします。

難しいコード入力や設定はありませんので、初心者の方でも手順通りに設定すればデモサイトと同じデザインが作れるようにしました。

カラー設定などあなた好みに変えて、ぜひアレンジしながらカスタマイズをお楽しみください!

SWELLでおしゃれなキャンプブログを作ろう

それでは早速作っていきましょう。

カスタマイズする部分ごとに順を追って解説していきます。

カスタマイザーを開く

STEP
画面上部の「カスタマイズ」からカスタマイザーを開く
カスタマイズ,方法

WordPressの管理者画面にログインすると、画面上部に「カスタマイズ」ボタンが表示されます。

そこをクリックするとカスタマイザーが開きます。

STEP
画面左側にカスタマイザーが開く
カスタマイザー

カスタマイザが開くとこんな感じです。

メインビジュアル

STEP
「トップページ」→「メインビジュアル」へ進む
SWELL,カスタマイズ,トップページ,ブログ型
STEP
メインビジュアルを設定する
SWELL,カスタマイズ,トップページ,ブログ型

今回設定した部分は以下。

  1. メインビジュアルの表示内容:「画像」にチェック
  2. 表示設定:「Scrollボタンを表示する」にチェック
  3. メインビジュアルの高さ設定:「数値で指定する」→(PC)50vw、(SP)50vh
  4. スライド画像[1]:任意の画像設定(今回の画像サイズ:1920×1080px)
  5. メインテキスト[1]:以下コードの入力で画像表示

⑤では画像ロゴを表示させたいので以下のコードを入力します。

<img src="画像のURL" width="30%" height="auto" alt="画像の説明">

widthは画像の幅です。表示サイズを見ながら調節します。数値が100%に近いほど大きく、1%に近いほど小さくなります。

⑤で表示させたい画像は以下の黄色い枠の部分です。

SWELL,カスタマイズ,トップページ,ブログ型

コードの「画像のURL」部分は、④の「画像の変更」をクリックすると画像を選択できるウインドウが開きます。

その中で任意の画像を選ぶと「ファイルのURL」が表示されています。

「URLをクリップボードにコピー」をクリックするとコピーできます。

コード内に貼り付けましょう。

SWELL,カスタマイズ,トップページ,ブログ型
STEP
メインビジュアルの設定完了

以上でメインビジュアルの設定は完了です。

記事スライダー

STEP
「トップページ」→「記事スライダー」へ進む
SWELL,カスタマイズ,トップページ,ブログ型
STEP
記事スライダーの設定
SWELL,カスタマイズ,トップページ,ブログ型

今回設定した部分は以下。

  1. 記事スライダーを設置するかどうか:「設置する」にチェック
  2. ピックアップ対象:「カテゴリー」を選択
STEP
記事スライダーの設定完了

以上で記事スライダーの設定は完了です。

ヘッダー

STEP
「ヘッダー」へ進む
SWELL,カスタマイズ,トップページ,ブログ型
STEP
ヘッダーの設定
SWELL,カスタマイズ,トップページ,ブログ型

今回設定した部分は以下。

  1. ヘッダー背景色・文字色:背景色#0d0d0d、文字色#f2f2f2
  2. ロゴ画像の設定:任意の画像を選択、PCサイズ32、SPサイズ48
  3. ヘッダーのレイアウト(PC):ヘッダーナビをロゴの横に(右寄せ)
  4. ヘッダーのレイアウト(SP):ロゴ:中央/メニュー:左
STEP
ヘッダーの設定完了

以上でヘッダーの設定は完了です。

カラー設定

STEP
「サイト設定」→「基本カラー」へ進む
SWELL,カスタマイズ,トップページ,ブログ型
STEP
カラー設定
SWELL,カスタマイズ,トップページ,ブログ型
  1. メインカラー:#a65b1b
  2. テキストカラー:#f2f2f2
  3. リンクカラー:#d9851e
  4. 背景色:#0d0d0d

キャンプブログなので土っぽいイメージを出したくて上記のカラーリングにしてみました。

モスグリーン系も捨てがたかったので、次回は森感を出したデザインにチャレンジしようと思います。

ちなみにカラーリングはAdobe Colorのトレンドカラーから好きな配色を選んでいます。

センスの良いカラーリングばかりなのでとても重宝します。

STEP
カラー設定完了

以上でカラー設定は完了です。

パンくずリスト

STEP
「サイト全体設定」→「パンくずリスト」へ進む
SWELL,カスタマイズ,トップページ,ブログ型
STEP
パンくずリストの設定
SWELL,カスタマイズ,トップページ,ブログ型
  1. 「パンくずリストの背景効果を無くす」にチェック
STEP
パンくずリストの設定完了

以上でパンくずリストの設定は完了です。

記事一覧リスト

STEP
「記事一覧リスト」へ進む
SWELL,カスタマイズ,トップページ,ブログ型
STEP
記事一覧リストの設定
SWELL,カスタマイズ,トップページ,ブログ型
SWELL,カスタマイズ,トップページ,ブログ型
  1. 最大カラム数(PC/Tab):「1カラム」を選択
  2. グラデーション色1:#f2dbae
  3. グラデーション色2:#f2b33d
  4. 表示するタブの設定:「新着記事」「人気記事」の両方にチェック
  5. タブデザイン:「グレーボックス」を選択
STEP
記事一覧リストの設定完了

以上で記事一覧リストの設定は完了です。

投稿・固定ページ

STEP
「投稿・固定ページ」→「SNSシェアボタン」へ進む
SWELL,カスタマイズ,トップページ,ブログ型
STEP
SNSシェアボタンの設定
SWELL,カスタマイズ,トップページ,ブログ型
  1. 「画面端に固定表示する」のチェックを外す
  2. シェアボタンのデザイン:「アイコン」を選択
STEP
「投稿・固定ページ」→「記事下エリア」に進む
SWELL,カスタマイズ,トップページ,ブログ型
STEP
記事下エリアの設定
SWELL,カスタマイズ,トップページ,ブログ型
  1. 「著者情報を表示」のチェックを外す
  2. 関連記事のレイアウト:「リスト型」を選択
STEP
投稿・固定ページの設定完了

以上で投稿・固定ページの設定は完了です。

ウィジェット

STEP
「ウィジェット」→「共通サイドバー」へ進む
SWELL,カスタマイズ,トップページ,ブログ型
STEP
共通サイドバーの設定
SWELL,カスタマイズ,トップページ,ブログ型
  1. 「ウィジェットを追加」をクリック
  2. 検索バーで追加したいウィジェットを検索(もしくは③から選ぶ)
  3. 追加できるウィジェットをクリック
  4. 追加するウィジェット

今回は、

  • 検索バー
  • SWELLプロモーションバナー
  • SWELL人気記事(リスト型表示)
  • カテゴリー
  • アーカイブ
  • タグクラウド
  • SWELLプロフィール

をサイトバーに追加しました。

STEP
ウィジェットの設定完了

以上でウィジェットの設定は完了です。

フッター

STEP
「フッター」へ進む
SWELL,カスタマイズ,トップページ,ブログ型
STEP
フッターの設定
SWELL,カスタマイズ,トップページ,ブログ型
  1. フッター背景色:#0d0d0d、フッター文字色:#f2f2f2、ウィジェットエリアの背景色:#0d0d0d、ウィジェットエリアの文字色:#f2f2f2
  2. コピーライトのテキスト:任意のテキスト(西暦とブログ名が一般的)
STEP
フッターの設定完了

以上でフッターの設定は完了です。

これでキャンプブログのデモサイトは完了です!

仕上がったデモサイトはこちら。

swell,デモサイト
DEMO

あとは記事を投稿してブログを育てていきましょう。

こやん

設定お疲れさまでした!

今回のブログ型デモサイトのポイント

今回作成したデモサイトには意識したポイントがあります。

ポイント

意識したポイントは以下です。

濃い背景でも目が痛くならない配色

今回のデザインで最も印象的なのが真っ暗な背景です。

キャンプで出てしまいがちな「ワイワイバーベキュー感」を背景イメージで抑え、静かな大人キャンプの印象にしました。

濃い背景は文字が読みづらくなりがちなので、黒×白の配色は避け、濃いグレーの背景×薄いグレーの文字色にしました。

写真を主役にする1カラム

このブログデザインでは写真を主役にしたいので、投稿表示は1カラムにしました。

大きな写真が印象的で、「このブログではキャンプについて発信するよ」というのが一目でわかります。

キャンプはロケーションやギアが魅力的なので、写真を主役にするデザインを選びました。

モバイルユーザビリティを意識したシンプル設計

スマホからブログに流入した読者が記事を押しやすく探しやすいように、スマホでも1カラム表示、ウィジェットはサイドバーのみに留めました。

タグクラウドを配置してジャンル分けしています(カテゴリでもOK)。

まとめ:SWELLカスタマイズでおしゃれなブログ型トップページを作ろう

いかがでしたでしょうか。

SWELLはブログ、ウェブサイト、コーポレートサイトなど様々な分野で広く使用されているWordPressテーマです。

今回ご紹介したようなデザイン機能は全てのWordPressテーマの中でもダントツでトップレベルです。

それだけではなく、記事作成の時間を短縮する便利なブロックエディタやSEOをサポートする高速化機能など、様々な機能であなたのブログを助けてくれます。

あなたもSWELLを使って、ブログをもっと楽しみましょう!

swell公式サイト
商品名WordPressテーマ SWELL
販売価格¥17,600(税込)
(※ お支払いは一度限りです。月額や年額ではありません。)

SWELLの使用感やメリット・デメリットは以下の記事でレビューしています。

GOOD LAB.×SWELLのその他のデモサイト集は以下の記事でご紹介しています。

2020年以降、社会人やOLに副業ブームが到来しています。始めるなら今がチャンスです。

この記事を読んで実際に行動する人は100人中3人程度だそうです。

その中でさらに継続できる人は3人だそうです。

知識を得るだけでは何も変わりません。副業でブログを始めるなら、早速今から動き出しましょう!

5〜10分程度で簡単にWordPressブログを作るならコレ!

それでは、最後までお読みいただきありがとうございました。

ランキング参加しました!応援よろしくお願いします

ブログランキング・にほんブログ村へ

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

よかったらシェアしてね!
目次
閉じる