【迷わない】SWELL初期設定とカスタマイズのやり方!必要なことだけまとめました

悩むひと

SWELLをインストールしました。とりあえずサイトの形を作って記事投稿がしたいな!

このようなお悩みを解決します。

記事を書き出すまでに必要な初期設定とカスタマイズすべきところは次の4つ。

SWELL初期設定手順
  1. プラグインの設定
  2. デモサイトのインストール
  3. サイトトップページの各設定
  4. メニュー設定

SWELLのインストールがまだの方は、次の記事を参考にインストールしてください!

こんにちわ。ゆいて(@yuitelog)です。

本記事では、SWELLデモデータSWELL DEMO 02を例に、SWELLインストール後に最初にやっておくべき初期設定とカスタマイズポイントをまとめました。

この記事の手順でいけば、迷うことなくサイトをお好みの形まで持っていくことができます。

ゆいて

初心者でも分かりやすく、徹底的に丁寧に解説していきます!

それではいってみましょう!

目次

SWELLのプラグイン設定

SWELLに入れるべきプラグインは次の5つ。

SWELLおすすめのプラグイン
  1. SEO SIMPLE PACK
  2. XML Sitemap & Google News
  3. WP Revisions Control
  4. Contact Form 7
  5. Wordfence Security

プラグインはサイト全体に影響するので、最初に設定することをおすすめします。

ゆいて

設定方法などは、次の記事で細かくまとめてあります。

デモサイトSWELL DEMO 02の設定

はじめに、今回のカスタマイズ例のベースとなる「SWELL DEMO 02」をインストールします。

データはSWELLERS’のマイページからダウンロードできます。

SWELLERS’の登録がまだの方は、次の記事を参考に登録してください。

SWELL使いなら登録しないと損する、SWELLユーザー限定の会員サイトです。

SWELLデモデータのインポート

STEP
デモデータダウンロード

SWELLERS’のマイページにアクセス後、「swell_demo02.dat」をダウンロードします。

SWELL DEMOデータダウンロード

ダウンロードしたファイルは、右クリックで「すべて展開」しておきます。

STEP
デモデータインポート用のプラグインのインストール

WordPressのダッシュボードから[プラグイン]-[新規追加]-右上の[プラグインの検索]に「Customizer Export/Import」と入力。

表示された「Customizer Export/Import」で[今すぐインストール]-[有効化]の順でクリックします。

WordPressプラグインインストール
STEP
デモデータのインストール

[外観]-[カスタマイズ]の順でクリックします。

WordPressダッシュボード

[エクスポート/インポート]をクリック。

SWELLカスタマイザー

[ファイルを選択]をクリックし、上記で展開したフォルダ内の「swell_demo02.dat」を選択し[インポート」をクリックします。

WrodPressカスタマイズ設定のインポート

すぐにデモデータがインストールされます。

SWELL DEMO 02インストール後
ゆいて

お疲れ様でした。デモデータのインストールは完了!続けて各設定を行っていきましょう。

SWELLカスタマイズ設定

ここからの設定は、WordPressのダッシュボードから[外観]-[カスタマイズ]にある各項目の設定になります。

上から順によく使う設定を中心に紹介していきますが、ご自身の好みで飛ばしてもらってOKです。

サイト基本情報

Webブラウザのタブに表示される設定です。

Webブラウザのタブ
Google Chromeのタブ

[外観]-[カスタマイズ]-[WordPress設定]-[サイト基本情報]

サイト基本情報

サイトのタイトルやキャッチフレーズ、アイコンの設定ができます。

キャッチフレーズが不要であれば空欄でOKです。

基本カラー

サイト全体の色合いの設定。

デモサイトの色合いから変えたい場合は、ここで変更していきましょう。

[外観]-[カスタマイズ]-[サイト全体設定]-[基本カラー]

基本カラー設定
  • メインカラー:ヘッダー以外の紺色部分
  • テキストカラー:各文字色
  • リンクカラー:リンク文字色
  • 背景色:ヘッダーとフッターの間の色
ゆいて

ヘッダーの色はここでは変えられません。このあと出てくる「ヘッダー」の設定から変えることができます。

[サイト全体設定]-[基本デザイン]

ここで変えられる設定は次の通り。

基本カラー設定
  • フォント
  • フォントサイズ(PC、タブレット、モバイル)
  • コンテンツの幅
  • ページ背景

[外観]-[カスタマイズ]-[サイト全体設定]-[基本デザイン]

詳細は次の通りです。

フォント設定

SWELLのフォントは、次の4つから選ぶことができます。

  • 游ゴシック
  • ヒラギノゴシック>メイリオ
  • Noto Sans JP
  • 明朝体

明朝体は読者にストレスを与えやすいので、それ以外がおすすめです。

フォントサイズ

SWELL標準のPCとタブレットのフォントサイズは16px。

Googleが推奨しているフォントサイズと同じなので、こだわりがなければそのままでOKです。

コンテンツの幅

ここもこだわりがなければ、そのままでOKです。

ページ背景

トップページや記事の背景に画像を表示したい場合はここで設定します。

お知らせバー

お知らせバーは、ヘッダーに表示される黄色い部分。

ここで表示内容やデザインの設定を行うことができます。

[外観]-[カスタマイズ]-[サイト全体設定]-[お知らせバー]

ゆいて

一番見てほしい記事や、サイトの更新情報を掲載するサイトが多いですね。

[サイト全体設定]のよく使う設定については以上になります。

続けてヘッダーなどの、本格的なカスタマイズ設定にいきましょう!

ヘッダー

下画像の赤枠部分(紺色部分)がヘッダーです。

SWELLヘッダー

ここで変えられる設定は次の通り。

ヘッダー設定
  • ヘッダー背景色、文字色
  • ロゴの設定
  • キャッチフレーズの表示

[外観]-[カスタマイズ]-[ヘッダー]

フッター

フッターはサイトの一番最後に表示される部分になります。

SWELLフッター

ここで変えられる設定は次の通り。

フッター設定
  • フッター背景色、文字色
  • コピーライト
  • SNSアイコンの表示設定

[外観]-[カスタマイズ]-[フッター]

記事スライダー

記事スライダーは、ヘッダー下のスライドショーのことです。

SWELL記事スライダー

ここで変更できる設定は次の通り。

記事スライダー設定
  • 表示、非表示設定
  • 並び順(投稿日順、更新日順、人気順)
  • 日付の表示設定
  • 表示数設定
  • スライド速度
  • 左右の矢印の表示、非表示
  • 記事スライダー上のタイトル設定、文字色
  • 記事スライダーエリアの背景画像

[外観]-[カスタマイズ]-[トップページ]-[記事スライダー]

投稿・固定ページ

ここでは、記事や固定ページの各表示設定や見出しなどのデザインを変更することができます。

[外観]-[カスタマイズ]-[投稿・固定ページ]

タイトル

記事、固定ページの日付やカテゴリ表示に関する設定。

SWELL投稿・固定ページ設定

[外観]-[カスタマイズ]-[投稿・固定ページ]-[タイトル]

コンテンツのデザイン(見出し設定)

タイトルからは少し分かりづらいですが、記事の見出しのデザイン設定はここから行うことができます。

コンテンツのデザイン設定
  • 見出しのカラー
  • 見出しのデザイン
  • テキストリンクアンダーバーの表示、非表示

[外観]-[カスタマイズ]-[投稿・固定ページ]-[コンテンツのデザイン]

ゆいて

テキストリンクにアンダーバーがないと、リンクと気づかずスルーされるため、アンダーバーを表示するのがおすすめです。

SNSシェアボタン

記事に表示される、SNSボタン(下画像の赤枠部分)の設定です。

SWELL SNSボタン設定
SNSシェアボタンの設定
  • 各ボタンの表示、非表示
  • ボタンのデザイン
  • Twitter用の追加設定

[外観]-[カスタマイズ]-[投稿・固定ページ]-[SNSシェアボタン]

記事下エリア

記事の一番下部分の設定です。

コメント欄やTwitterのフォローボタンなどの設定ができます。

[記事下エリア]でできる主な設定
  • Twitter、Instagramのフォローボタンの表示設定
  • 前後記事へのページリンク設定
  • 著者情報の表示設定
  • コメント欄設定

[外観]-[カスタマイズ]-[投稿・固定ページ]-[記事下エリア]

SNS情報

設定できるSNSなどの情報は次の通り。

設定できるSNSアカウント
  • Facebook
  • Twitter
  • Instagram
  • 楽天ROOM
  • LINE
  • Pinterest
  • Github
  • YouTube
  • Amazon欲しいものリスト
  • Feedly
  • RSS
  • お問い合わせページ

[外観]-[カスタマイズ]-[SNS情報]

[外観]-[カスタマイズ]から行う主な設定は以上です。

続けて、各種メニュー表示の設定を行っていきましょう!

SWELLメニュー表示設定

ここで作成するのは、次の3つのメニューです。

  • ヘッダー用メニュー
  • スマホフッター用メニュー
  • フッター用メニュー

ヘッダー用メニューの作成

ヘッダー用メニューは、右上のエリアに表示されます。

SWELL ヘッダーメニュー設定

WordPressダッシュボードから[外観]-[メニュー]

SWELL メニュー作成画面

メニュー名に、作成するメニューの名前を入れて[メニューを作成]をクリックします。

SWELL メニュー作成画面
ゆいて

メニュー名は何でもOKですが、後から見たときに分かりやすい名前にしておきましょう。

作成したメニューに、左側の「メニュー項目を追加」からヘッダーメニューに追加したい項目を選択し[メニューに追加]をクリックします。

下画像では、例として「カテゴリー」の項目を追加します。

SWELL メニュー作成画面

ヘッダーメニューに表示したい項目を追加後「グローバルナビ」にチェックを入れ[メニューを保存]をクリックします。

SWELL メニュー作成画面

トップページを確認すると、メニューが追加されています。

SWELLトップページ

さらに細かく設定したい方は、SWELL公式サイトの次の記事が参考になります。

スマホ用フッターメニューの作成

スマホのフッター(画面下部)に、次のようなメニューを表示させます。

SWELLスマホ用フッターメニュー

WordPressダッシュボードから[外観]-[メニュー]

SWELL メニュー作成画面

[新しいメニューを作成しましょう。]をクリック。

メニュー名に作成するメニューの名前を入れて[メニューを作成]をクリックします。

SWELL メニュー作成画面

ヘッダーメニュー同様に、左側の「メニュー項目を追加」からフッターメニューに追加したい項目を選択し[メニューに追加]をクリックします。

[固定フッター(SP)]にチェックを入れ[メニューを保存]をクリックします。

SWELL メニュー作成画面

メニューにアイコンを表示させる方法

スマホフッターメニューには、下画像のようなアイコンを表示させることもできます。

SWELLスマホフッターメニュー

方法は次の通り。

メニュー作成画面右上にある[表示オプション]をクリックします。

WordPress表示オプション

[説明]にチェックを入れます。

WordPress表示オプション

表示させているメニュー名をクリックし「説明」にアイコン名を入れ[メニューを保存]をクリックします。

WordPress表示オプション

SWELLで使えるアイコンは、公式サイトの次の記事でチェックできます。

フッター用メニューの作成

サイトのフッターにも、次のようにメニューを表示させることができます。

SWELLフッター

手順はヘッダーやスマホ用フッターメニューと同じ。

メニュー設定で「フッター」を選択すればOKです。

SWELL メニュー作成画面
ゆいて

これで必要な設定は整いました。お疲れ様でした!

まとめ:カスタマイズは徐々にでOK

今回は、SWELLで必要な初期設定とカスタマイズ方法についてまとめました。

何か分からないことがあれば、ぜひTwitter(@yuitelog)かお問い合わせフォームからお知らせください。

これでサイトとしての形は整ったので、今後はどんどん記事を書いていきましょう。

もしあなたが、検索上位を獲得できない・・・とお悩みなら、次の記事も参考になると思います。

まずは商品を売ってみたい!という場合は、ライティング力向上からはじめてみるのがおすすめです。

記事を書く気が起きない、ネタがない、なんてときに気分転換でカスタマイズを少しずつやっていくのが、ブログ継続のコツです。

デザインやカスタマイズは、こだわるとキリがないのでほどほどに(笑)

完璧に仕上げたい気持ちは分かりますが、絶対に後から変更したくなるので・・・

少しでも参考になれば幸いです。

ありがとうございました!

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