当サイトではアフィリエイト広告を利用しています

【SWELL】最短!ブログの始め方・作り方(初心者も簡単!おしゃれなサイトを完成)

SWELLブログスタート

WordPressを始めたばかりの初心者の方向けに、SWELLの初期デザインを生かして、最短でブログを作成するための手順をお伝えします。

SWELLは、シンプルなおしゃれなデザインで、記事を書きやすく、初心者がブログをはじめるのに最適なテーマです。

ご紹介する手順の通り進めると、初心者でも短時間でブログが完成すると思います。

まず、サイトを作り、スタートしましょう。

そしてサイトをちょこちょこいじりながら、覚えていき、慣れてきたらカスタマイズに挑戦しましょう。

この記事で分かること
  • SWELLでブログを最短で完成させる方法
  • トップページのスタイル(2種類)の違い
  • 初期状態を生かして最短でトップページを作る方法
  • サイト全体の設定
  • カテゴリーとメニューの作り方
  • 投稿ページ・固定ページの設定

SWELLの購入がまだの方

詳しくはこちらをご覧ください

目次

トップページのスタイル(2種類)について

ブログの作成をスタートする前に、トップページの2種類のスタイルについて理解しておきましょう。

トップページの形(ブログ型とサイト型)

サイトのトップページのスタイルは「ブログ型」と「サイト型」があります。

SWELLも含め、一般的にWordPressテーマは、初期状態はブログ型です。
トップページに新着記事の一覧が表示されるようになっています。

これに対してサイト型は、トップページに固定ページを割り当て、自分の好きな構成にカスタマイズします。

この記事では、①ブログ型(デモサイト)の作成方法をご紹介します。

①ブログ型

トップページに新着記事一覧が表示される。デフォルトのスタイル。
デモサイトはこちら

ブログ型レイアウト

②サイト型

トップページに固定ページを割り当て、
自分の好きな構成にする。
デモサイトはこちら

サイト型レイアウト

他にコーポレイトサイトのデモサイトもいくつか作成してみました。
これらもサイト型です。

それぞれデザインや雰囲気が違いますが、SWELLは基本がシンプルなデザインなので、様々なジャンル、雰囲気に対応できます。

SWELLのトップページカスタマイズ おすすめのステップ

STEP
SWELLの初期状態を元に、とりあえずブログを完成させる

SWELLは初期状態でも、おしゃれなサイトになっています。
他のテーマはここまで整っているものは少ないです。
初期状態を元に、基本的な設定を行いブログを完成させます。

前述の①ブログ型(デモサイトがサンプルサイトです。

STEP
記事が増えてきて、カテゴリーが固まったら、サイト型にする

記事の数が多くなってきたら、サイト型にして、カテゴリーや分類、おすすめ記事などで記事を整理して見やすくし、よりデザイン性の高いトップページにします。
トップページのデザインにこだわりがある方は、サイト型にしましょう。

全体像を確認(この記事で作成するトップページ)

SWELLの初期状態を利用し、①ブログ型(デモサイト)をサンプルサイトとして、最短でブログを作成する手順を紹介します。

サンプルサイト(デモサイト①)は、アイキャッチ付き投稿記事を用意して作成しています。
投稿記事がほとんどない場合は、記事一覧が空になり、同じようにならないので注意してください

以下の画像(左)は、SWELLをインストールした直後の初期状態です。

この状態でもある程度の形が出来上がっていますが、まだ、グローバルメニューもありません。

各パーツそれぞれを設定していきます。

SWLLの初期状態

SWELL初期レイアウト

完成形

SWELLレイアウト

サイト全体(SWELL)の設定

まず、サイト全体の設定を行います。

最低限必要な項目に絞って説明していきます。

管理画面の「カスタマイズ」から各項目に入ります。

場所は、上部の「カスタマイズ」、または、外観→「カスタマイズ」どちらでも。

WordPress 設定(サイト基本情報)

管理画面「カスタマイズ」「WordPress設定」→「サイト基本情報」

サイトのタイトル、キャッチフレーズ、サイトアイコンを設定します。

サイトタイトル

サイト全体のタイトルです。
WordPressインストール時に入力したタイトルが入っていますが、必要があれば変更します。
この内容がヘッダーの左側に表示されます。
(サンプルサイトのように、ここにロゴ画像を入れる場合は、後で設定します)

キャッチフレーズ

サイトのキャッフレーズです。
この内容は、デフォルトで最上部の「ヘッダーバー」に表示されます。
これは、非表示やヘッダーロゴ近くに表示することも可能です。(この設定はヘッダーのところで解説します)

サイトアイコン

サイトアイコンは、以下の画像のようにブラウザ上のタブや、お気に入り等に表示されます。

swellの全体設定

サイトアイコンは、512px×512px 程度のサイズを用意します。

基本カラーの設定

管理画面「カスタマイズ」「サイト全体設定」→「基本カラー」

サイト全体の基本カラーを設定します。

特にメインカラーは、々な項目に反映され、雰囲気が大きく変わるので、イメージに合うかどうかよく考えて選びましょう。

メインカラー

見出しや各種ボタンなど、サイト内の様々な項目に反映されます。

テキストカラー

本文中の文字など、サイト全体に適用されるテキストの色

リンクカラー

テキストリンクの文字色

背景色

サイト全体に適用されるページ背景色です。

サンプルサイトでは、メインカラーを明るい茶色系(#dd9933)にして、それ以外はデフォルトのままです。

フォントの設定

管理画面「カスタマイズ」「サイト全体設定」→「基本デザイン」■フォント設定

サイト全体のフォントを設定します。

フォントは4種類から選択でき、サイズや字間を設定できます。

実際に変更してみて、好みのフォントを選びましょう。
面倒であれば、デフォルトのまま使っても問題ないと思います。

フォントのうち、Noto Sans JPはWEBフォント(Googleフォント)で、外部サイトからファイルを読み込むため、他のフォントと比べてサイトの表示速度が遅くなるので注意

カテゴリーとメニューを作る

WordPressの基本機能で、カテゴリーとメニューを作成します。

カテゴリーを作成

管理画面「投稿」「カテゴリー」

「新規カテゴリーを追加」で、名前とスラッグを入れ、「新規カテゴリーを追加」をクリックして、追加していきます。

スラッグは、すべて半角小文字で、英数字とハイフンのみで入力します。

カテゴリ設定

グローバルメニューを作成

ヘッダーの右上に表示される「グローバルメニュー」を作成します。

グローバルメニュー

管理画面「外観」「メニュー」

①まず、メニューを作成

  • 「メニュー名」→分かりやすい名前をを入力します。
  • 「メニュー設定」「グローバルナビ」にチェック
  • 「メニューを作成」をクリック
メニュー設定

②メニューの項目を追加します

左側で、カテゴリーを開き、メニューの項目にチェックを入れます。

そして、「メニューに追加」をクリック

メニュー設定

以下のように、項目が追加されたら、「メニューを保存」をクリックします。

項目の順序は、ドラッグして上や下に移動して変更できます。

メニュー設定

これでメニューが作成でき、ヘッダーの右側に表示されます。

サブメニューの作成方法

また、以下のようにドラックして他の項目より右側に移動するとサブメニューになります。

この例では、「エコライフ」は「ライフスタイル」の下層メニューになります。

メニュー設定

SWELLでトップページを作る

次にトップページ各パーツを作成していきます。

ヘッダーの設定

サイトのヘッダー部分の設定を行います。

既に作成したグローバルメニューは右側に表示されています。

ヘッダー

カラー設定

管理画面「カスタマイズ」「ヘッダー」カラー設定

サンプルサイトでは、背景色はデフォルトの白のままですが、ヘッダー背景色、ヘッダー文字色を変更できます。

ヘッダーロゴを設定

管理画面「カスタマイズ」「ヘッダー」ヘッダーロゴ

ヘッダーロゴを設定します。

初期状態では、サイトタイトル(テキスト)が表示されていますが、ロゴ画像を設定します。

ロゴ画像を設定すると、サイトタイトルと入れ替わります。

SWELLヘッダー

ヘッダーロゴの画像サイズ
SWELLの公式サイトで、1600×360pxとなっています。
600×135px程度でもOKです。

画像の表示サイズ

ロゴ画像の表示サイズは、「ヘッダーロゴの設定」の「画像サイズ」で設定できます。

PCとスマホ、PC追従ヘッダー(PCで下にスクロールした際に表示される上部固定型のヘッダー)それぞれでサイズを変更できます。

プレビューで実際の表示を確認しながら大きさを調整しましょう。

レイアウト・デザイン設定

管理画面「カスタマイズ」「ヘッダー」レイアウト・デザイン設定

ヘッダーのレイアウトを4つのパターンから選択できます。

サンプルサイトは、デフォルトの「ヘッダーナビをロゴの横(右寄せ)」にしています。

SWELLヘッダー

ヘッダーのレイアウトは、PCとスマホでそれぞれ設定できます。

スマホの場合は3パターンです。

スマホのレイアウト ※クリックで開く
SWELLヘッダーsp

ヘッダーバー設定 / キャッチフレーズ設定

管理画面「カスタマイズ」「ヘッダー」ヘッダーバー設定 ■キャッチフレーズ設定

デフォルトでは、ヘッダーバーにキャッチフレーズが入っており、サンプルサイトではこのまま使っています。(右側にはSNSのアイコンも入っています)

SWELLヘッダーバー

設定はデフォルトで、「ヘッダーバー設定」と「キャッチフレーズ設定」が以下のようになっています。

SWELLヘッダーバー

ヘッダーバーを表示しない場合

ヘッダーバーを表示したくない場合は、「ヘッダーバー設定」と「キャッチフレーズ設定」を以下のようにします。

ヘッダーバー設定

  •  SNSアイコンリストを表示する→チェックを外す
  • キャッチフレーズの表示位置→表示しない

以下のようにヘッダーバーが表示されなくなります。

SWELLヘッダー

ロゴの横にキャッチフレーズを表示する場合

ロゴの横にキャッチフレーズを表示するには、「ヘッダーバー設定」と「キャッチフレーズ設定」を以下のようにします。

ヘッダーバー設定

  •  SNSアイコンリストを表示する→チェックを外す
  • キャッチフレーズの表示位置→ヘッダーロゴの近くに表示

以下のようにロゴの横に表示されます。

SWELLヘッダー

メインビジュアルの設定

メインビジュアルは、ヘッダー下のエリアで、大きな画像や動画を使うことで、インパクトのあるトップページにすることができます。

サンプルサイトでは、以下のような画像を1枚使っています。

SWELLメインビジュアル設定

メインビジュアルを設定していきます。

管理画面「カスタマイズ」「トップページ」「メインビジュアル」■各スライドの設定

「スライド画像」に画像を設定します。

各スライドの設定 

  • スライド[1] スライド画像→ 画像を設定
  • メインテキスト[1] → デフォルトで入っている「さぁ、はじめよう」を削除

サンプルサイトでは、1枚だけ画像を使っていますが、2枚以上設定すると、画像が切り替わるスライドになります。

メインビジュアルの画像サイズ
SWELLの公式サイトで、1600×900pxとなっています。
サンプルサイトでは、1600×520pxの画像を使っています。
縦サイズは、お好みに合わせて調整しましょう。

表示設定 

  • メインビジュアルの高さ設定→ 画像・動画サイズのまま
  • フィルター処理→なし
  • オーバーレイカラー オーバーレイカラーの不透明度→0

 後はデフォルトのまま

SWELLメインビジュアル設定
SWELLメインビジュアル設定

サンプルサイトは、大きな画像を明るく見せるためにフィルター処理等がない設定にしています。「表示設定」は、お好みに合わせて変更しましょう。

記事スライダーの設定

SWELLの初期状態で、メインビジュアル直下に「記事スライダー」が配置されています。

記事スライダー

管理画面「カスタマイズ」「トップページ」「記事スライダー」

記事スライダーを設置するかどうか」→デフォルトで「設置する」になっています。

サンプルサイトでは、設定を変えていませんが、記事スライダーを設置しない場合は、ここで「設置しない」にチェックを入れます。

記事スライダー設定

表示する記事の範囲や動作等を設定

記事のピックアップ方法で、カテゴリーやタグなど、表示する記事を絞ることができます。

■記事の表示設定■スライド設定では、記事スライダーの速度や順番、切り替えタイミング等を変更することができます。

記事数が少ない場合は、記事を並べるのに十分な数になるまで「設置しない」にしておきましょう

メインエリア(最新記事一覧)

メインエリアは、デフォルトで最新記事一覧が表示されるようになっています。

この部分の設定を行います。

メインエリア

リストのレイアウト設定

管理画面「カスタマイズ」「記事一覧リスト」■リストのレイアウト設定

ここで、最新記事一覧のレイアウトを設定します。

サンプルサイトでは、「最大カラム数」→2カラムにしています。

記事一覧の設定

管理画面「カスタマイズ」「記事一覧リスト」■投稿情報の表示設定

ここで、記事一覧内の各記事の表示内容を設定します。

サンプルサイトでは、「抜粋文の文字数」を40文字に変更しています。
デフォルトでは120文字と長いためですが、お好みに合わせて設定してください。

記事一覧の設定

リストレイアウトについて

サンプルサイトはデフォルトの「カード型」ですが、リストレイアウトは6種類のスタイルを選択できます。

以下に一部を紹介します。

記事一覧の設定

表示する記事数の設定

デフォルトで表示される記事数は10記事ですが、変更する場合は、WordPress標準の設定で行います。

管理画面「設定」「表示設定」1ページに表示する最大投稿数

WordPress表示設定

サイドバー

サイドバーのウィジェットを初期化する

管理画面「外観」「ウィジェット」

初期状態では、デフォルトでサイドバーのウィジェットにいくつか項目(ブロック)が入っています。

ウィジェットに項目を追加する前に、入っている項目を全て削除します。

ウィジェットの設定

サイドバーにおすすめの項目

サイドバーウィジェットに必要な項目を追加していきますが、おすすめの項目は以下です。

  • プロフィール
  • 検索
  • カテゴリー
  • 人気記事

管理画面「外観」「ウィジェット」

ウィジェットに項目を追加する方法

ウィジェットは、配置する項目を1つ選択→以下のように配置先(「共通サイドバー」)を選択
「ウィジェットを追加」をクリック

ウィジェット

おすすめ項目を追加すると、以下のようになります。

ウィジェット

プロフィールの設定

以下のように、プロフィール文と、アイコンと背景画像を設定します。

プロフィール

人気記事の設定

人気記事は、PV数の多い順に記事をリスト表示することができます。

デフォルトでは、カード型ですが、サンプルサイトはリスト型にしています。

人気記事設定

検索、カテゴリーの設定

検索、カテゴリーはデフォルトのままで使っています。

以上の設定を完了すると、サイドバーは以下のようになります。

サイドバー

フッターメニューを作成

サイト下部の「フッター」に設置するメニューを作成します。

サンプルサイトでは、固定ページの「サイトマップ」「プライバシーポリシー」「お問合せフォーム」をフッターメニューに入れています。

管理画面「外観」「メニュー」

①まず、メニューを作成

既に他のメニューを作成している場合は、「新しいメニューを作成しましょう」をクリックします。

フッターメニュー
  • 「メニュー名」→分かりやすい名前を入力します。
  • 「メニュー設定」「フッター」にチェック
  • 「メニューを保存」をクリック
フッターメニュー

②メニューの項目を追加します

左側で、固定ページ(すべて表示)を開き、メニューの項目にチェックを入れます。

そして、「メニューに追加」をクリック

フッターメニュー

以下のように、項目が追加されたら、「メニューを保存」をクリックします。

項目の順序は、ドラッグして上や下に移動して変更できます。

フッターメニュー

その結果、以下のようになります。

フッター

以上でフッターメニュー作成は完了です。

コピーライトを変更

コピーライトを変更します。

管理画面「カスタマイズ」「フッター」■コピーライト設定

「コピーライトのテキスト」にサイトタイトルなど任意のテキストを入力します。

フッター設定

コピーライトは、フッターメニューの下に表示されます。

SWELLの投稿ページ・固定ページの設定

投稿ページ・固定ページの設定について、最低限、やっておくべき設定についてご紹介します。

アイキャッチ画像の設定

管理画面「カスタマイズ」「投稿・固定ページ」→「アイキャッチ画像」■投稿ページ

「本文の始めにアイキャッチ画像を表示」→チェック(デフォルトのままでOK)

アイキャッチ画像をページの上部に表示させたり、刺せなかったり、手動で設定する方はチェックを外しましょう。

SWELL-投稿設定

見出しデザインの設定

管理画面「カスタマイズ」「投稿・固定ページ」→「コンテンツのデザイン」■見出しのデザイン設定

H2~H4の見出しのデザインを変更できます。

実際に変更してみて、お好みのデザインを選択しましょう。

SWELL-投稿設定

デフォルトでは、以下のようなデザインになっています。

基本カラーを変更すると、見出しの色も基本カラーに変わります。

SWELL見出し

テキストリンクの設定

管理画面「カスタマイズ」「投稿・固定ページ」→「コンテンツのデザイン」■テキストリンク

「テキストリンクにアンダーラインを付ける」→チェック(デフォルトのままでOK)

リンクはアンダーラインを付けるのが一般的で、その方がリンクだと一目で分かるのでおすすめです。

SWELL-投稿設定

SNSシェアボタンの設定

管理画面「カスタマイズ」「投稿・固定ページ」→「SNSシェアボタン」

SNSシェアボタンの設置位置やボタンの種類などを設定できます。

SWELL-投稿設定

デフォルトで、以下のようなシェアボタンが記事の下部に表示されます。

主要なボタンが網羅されていますが、必要のないボタンはチェックをはずしましょう。

SNSシェアボタン

著者情報の設定

管理画面「カスタマイズ」「投稿・固定ページ」→「記事下エリア」■著者情報エリアの設定

デフォルトでは、「著者情報を表示」にチェックが入っており、記事の下部に著者情報が表示されます。

著者情報は、管理画面の「ユーザー」→「プロフィール」「プロフィール情報」に記載された内容が表示されます。

著者情報を表示しない場合は、「著者情報を表示」のチェックを外します。

SWELL-投稿設定
SWELL-投稿設定

ブログの作成は以上です。お疲れ様でした。

SWELLでブログをスタートする方法 まとめ

WordPress のテーマ「SWELL」を使うと、初心者でも洗練された、おしゃれなブログを作成できます。

このページでは、ブログを作成するための以下の各項目の設定を解説しました。

最低限必要な項目で、設定できる箇所は他にも多数ありますので、今後、必要に応じて活用していきましょう。

  • サイト全体(SWELL)の設定
  • WordPress 設定(サイト基本情報)
  • ヘッダーの設定
  • メインビジュアルの設定
  • 記事スライダーの設定
  • メインエリア(最新記事一覧)の設定
  • サイドバーの設定
  • フッターの設定
  • 投稿ページ・固定ページの設定

当サイトで使用中のWordPessテーマ

SWELL ロゴ

WordPressテーマの国内人気シェアNo.1テーマ(2023年1月・マニュオン調べ)

おすすめ度

SWELL のメリット
  • 効率的、時短
    ブロックエディタ完全対応。使いやすく、効率的に記事作成ができる。
  • おしゃれ、美しいサイト
    コードを書かずに本格的なデザイン、おしゃれなサイトができる
  • 高速表示
    サイトの表示速度が高速
  • アフィリエイトに最適!
    アフィリエイトに便利な機能が豊富。購入者限定アフィリエイトもあり!
SWELLのデメリット
  • 利用者が多く、デザインが被る可能性がある

ブログが楽しくなるテーマ

複数サイトで利用でき、コスパも最高

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次