MENU
カテゴリー
アーカイブ

【図解マニュアル】SWELLの初期設定手順【超具体的に解説】

URLをコピーする
URLをコピーしました!
悩む人

SWELLの初期設定って何をすれば良いの?


何か色々とありそう。


早く使いたいから、必要なものだけ知りたい。

そんな悩みを解決します。

この記事で分かること
  • 会員登録手順
  • サイトと紐付け手順
  • プラグインの導入手順
  • Googleアドセンスの設定手順
  • Googleアナリティクスの設定手順
  • アフィリエイトプログラムの登録手順
  • 高速化設定の手順
  • サイト全体のレイアウト設定手順
  • サイドバーの表示設定手順
  • 投稿・固定ページのレイアウト設定手順
  • エディタの設定手順

この記事を書いている人

ため(@tame3_tame3

SWELLの公式サイトを見ると、「やることが多そう」って思いませんか?

これだけの設定をやると、3時間以上掛かります。流石に面倒ですよね。

ため

しかし、本当に必要なのは11項目だけ。1時間程度で終わります。

この記事では

【図解マニュアル】SWELLの初期設定手順【超具体的に解説】

をお伝えします。

ため

本記事に沿えば初期設定ができるので、後で検索しなくて済みますよ。

もし、SWELLを導入していなければ、先に導入してくださいね!

目次

SWELLでやるべき初期設定一覧

まず、SWELLでやるべき初期設定一覧をご紹介します。

※SWELL初期設定一覧(ジャンプ先)

クリックすると見たいところに移動します

ため

全て画像を使って説明していきますね。

SWELL初期設定①:会員登録をする

会員登録をしないとサポートが受けられません。理由は単純で、利用規約に書いてあるからです。

利用者本人が運営するサイトで本テーマを使用する場合に限り、利用者は専用のフォーラムサイト(以下、「当フォーラム」)などによる無料サポート(以下、「当サポート」)を受けることができます。

引用:SWELL
ため

サポートを受けるためにも、会員登録をしましょう。

5分~10分程度で終わりますよ。

リンクをクリックすると見たいところにスキップします

一つずつ説明しますね。

公式サイト → フォーラム

次に、会員サイト「SWELLERS’」に登録します。

以下のボタンから、「SWELLの公式サイト」へ移動してください。

『フォーラム』をクリック

画面が切り替わったら、『フォーラム』をクリックします。

公式サイト → 『フォーラム』

この章のトップに戻る

『マイページ』をクリック

『マイページ』をクリック。

『マイページ』をクリック

この章のトップに戻る

『会員登録はこちらから ▶』をクリック

『会員登録はこちらから ▶』をクリックしてください。

『会員登録はこちらから ▶』をクリック

購入者限定パスワードを入力 →『送信』をクリック

購入時に届いたメール本文のパスワードを入力。その後に『送信』をクリックします。

ユーザー名・メールアドレスを入力 →『登録』をクリック

画面が切り替わったら、下記を入力してください。

  1. ユーザー名:会員サイトで使う名前
  2. メール:会員サイトで使うメールアドレス

新しいパスワードの設定

すると購入時に登録したメールアドレスに、下記のメールが届きます。

確認したら、本文中のリンクをクリックしてください。

新しいパスワードを設定

そうすると、下記の画面が表示されます。

ため

表示されたら

新しいパスワードを入力 → 新しいパスワードを再入力 →「パスワードをリセット」をクリック

と進んでください。

これで会員登録の完了です。

この章のトップに戻る

SWELL初期設定②:サイトと紐付ける

会員登録が終わったら、SWELLのIDとサイトを紐付けます。紐付け手順は以下のとおり。

リンクをクリックすると見たいところにスキップします

一つずつ説明しますね。

会員ページで『SWELLERS’ ID』をコピー

『SWELLの公式サイト』→『フォーラム』→『マイページ』と進みます。

会員ページにログインをしたら、画面右上の『マイページ』をクリック。

SWELL公式サイト → マイページ

SWELLERS’ IDをコピーする

そして、画面をスクロールし、SWELLERS’ IDをコピーします。

SWELLERS’ IDをコピー

この章のトップに戻る

ダッシュボード → SWELL設定 → SWELLERS’ ID

お使いのワードプレスにログインします。

下記の画面が表示されたら、『SWELL設定』→『SWELLERS’ ID』と進んでください。

ダッシュボード → SWELL設定 → SWELLERS’ ID

この章のトップに戻る

SWELLERS’ IDを登録

赤背景の部分に『SWELLERS’ ID』を貼り付け、『保存する』をクリック。

『SWELLERS’ ID』を貼り付け → 『保存する』をクリック
ため

これで完了です。

SWELL初期設定一覧に戻る

SWELL初期設定③:プラグインを導入する

サイトとの紐付けが終わったら、プラグインを導入します。

ため

SWELLで入れるべきプラグインは以下7つです。

  • SEO SIMPLE PACK
  • WebSub/PubSubHubbub
  • WordPress Ping Optimizer
  • Contact Form 7
  • Google XML Sitemaps
  • Wordfence Security
  • WP-Optimize
  • EWWW Image Optimizer

※その他のおすすめプラグインは、SWELLおすすめのプラグインは7つだけです|不必要なものは…をご覧ください

プラグイン検索を使って、導入します。

リンクをクリックすると見たいところにスキップします

一つずつ説明しますね。

ダッシュボード → プラグイン → 新規追加

お使いのワードプレスにログインしてください。

ログインしたら、『プラグイン』→『新規追加』と進みます。

ダッシュボード → プラグイン → 新規追加

この章のトップに戻る

検索窓にプラグイン名を入力

検索窓に、プラグイン名を入力します。

検索窓にプラグイン名を入力
検索するプラグイン
  • SEO SIMPLE PACK
  • WebSub/PubSubHubbub
  • WordPress Ping Optimizer
  • Contact Form 7
  • Google XML Sitemaps
  • Wordfence Security
  • WP-Optimize
  • EWWW Image Optimizer

この章のトップに戻る

『今すぐインストール』をクリック

プラグインを選択したら、『今すぐインストール』をクリック。

『今すぐインストール』をクリック

この章のトップに戻る

『有効化』をクリック

『有効化』をクリックします。

『有効化』をクリック
ため

これで完了です。

この他のプラグインについては、以下をご覧ください。削除できるものも書いています。

SWELL初期設定一覧に戻る

SWELL初期設定手順④:Googleアドセンスの設定をする

プラグインを導入したら、Googleアドセンスの設定をします。

ため

やることは以下3つです。

リンクをクリックすると見たいところにスキップします

一つずつ説明しますね。

アドセンスとの紐づけ

まずは、アドセンスとの紐づけです。手順は以下のとおり。

紐づけ手順

  1. アドセンスにログイン
  2. 広告 → コードを取得
  3. 『コードをコピー』をクリック
  4. ダッシュボード → 外観 → カスタマイズ
  5. 『高度な設定』をクリック
  6. 『</head>直前』にアドセンスコードを貼り付け

アドセンスにログイン

アドセンスにログインします。

アドセンスにログイン

広告 → コードを取得

『広告』→『コードを取得』と進んでください。

広告 → コードを取得

『コードをコピー』をクリック

『コードをコピー』をクリック。

『コードをコピー』をクリック

ダッシュボード → 外観 → カスタマイズ

お使いのワードプレスにログインします。

下記の画面が表示されたら、『外観』→『カスタマイズ』と進んでください。

ダッシュボード → 外観 → カスタマイズ

『高度な設定』をクリック

『高度な設定』をクリック。

『高度な設定』をクリック

『</head>直前』にアドセンスコードを貼り付け

コピーしたアドセンスコードを、『</head>直前』に貼り付けます。

『</head>直前』にアドセンスコードを貼り付け
ため

メニュー上部の『公開』を押して完了です。

この章のトップに戻る

ads.textの登録する

次は、ads.textを登録します。手順は以下のとおり。

登録手順

  1. アドセンスにログイン
  2. 『今すぐ修正』をクリック
  3. 『ダウンロード』をクリック
  4. 『ads.txt』をクリック → テキスト本文をコピー
  5. ダッシュボード → SWELL設定 → ads.txtを編集
  6. ads.txtを貼り付け → ads.txtを変更する

アドセンスにログイン

アドセンスにログインします。

Googleアドセンスにログイン

『今すぐ修正』をクリック

画面右上の『今すぐ修正』をクリック。

『今すぐ修正』をクリック

『ダウンロード』をクリック

『ダウンロード』をクリックします。

『ダウンロード』をクリック

『ads.txt』をクリック → テキスト本文をコピー

画面左下の『ads.txt』をクリックし、テキスト本文をコピー。

『ads.txt』をクリック → テキスト本文をコピー

ダッシュボード → SWELL設定 → ads.txtを編集

ワードプレスにログインします。

下記の画面が表示されたら、『SWELL設定』→『ads.txtを編集』と進んでください。

ダッシュボード → SWELL設定 → ads.txtを編集

ads.txtを貼り付け → ads.txtを変更する

ads.txtを貼り付けた後、『ads.txtを変更する』をクリックします。

ads.txtを貼り付け → ads.txtを変更する
ため

これで完了です。

この章のトップに戻る

広告を貼る準備

最後は、広告を貼る準備をします。手順は以下のとおり。

広告を貼る準備手順

  1. アドセンスにログイン
  2. 『広告』をクリック
  3. 『広告ユニットごと』をクリック
  4. 『コードを取得』をクリック
  5. 『コードをコピー』をクリック
  6. ダッシュボード → SWELL設定 → SWELL設定
  7. 『広告コード』→『記事内広告』に貼り付け
  8. 『変更を保存』をクリック

アドセンスにログイン

アドセンスにログインしてください。

Googleアドセンスにログイン

『広告』をクリック

『広告』をクリック。

『広告』をクリック

『広告ユニットごと』をクリック

『広告ユニットごと』をクリックします。

『広告ユニットごと』をクリック

『コードを取得』をクリック

『コードを取得』をクリック。

『コードを取得』をクリック

『コードをコピー』をクリック

『コードをコピー』をクリックします。

『コードをコピー』をクリック

ダッシュボード → SWELL設定 → SWELL設定

お使いのワードプレスにログインしてください。

下記の画面が表示されたら、『SWELL設定』→『SWELL設定』と進みます。

ダッシュボード → SWELL設定 → SWELL設定

広告コード → 記事内広告に貼り付け

アドセンス広告のコードを、『記事内広告』に貼り付けてください。

広告コード → 『記事内広告』に貼り付け

『変更を保存』をクリック

スクロールして、下部にある『変更を保存』をクリック。

『変更を保存』をクリック
ため

これで完了です。

SWELL初期設定一覧に戻る

SWELL初期設定⑤:Googleアナリティクスの設定をする

Googleアドセンスの設定が終わったら、Googleアナリティクスの設定をします。

ため

手順は以下のとおり。

リンクをクリックすると見たいところにスキップします

一つずつ説明しますね。

Googleアナリティクスにログイン → 管理

Googleアナリティクスにログインしてください。

下記の画面が表示されたら、左下の『管理』をクリックします。

Googleアナリティクスホーム → 管理

この章のトップに戻る

『プロパティ設定』をクリック

『プロパティ設定』をクリック。

『プロパティ設定』をクリック

この章のトップに戻る

トラッキングIDをコピー

トラッキングIDをコピーします。

『トラッキングID』をコピー

例)
・UA-1234
・UA-abcd

この「UA-〇〇」を全てコピーしてください。

この章のトップに戻る

ダッシュボード → SEO PACK → 一般設定

お使いのワードプレスにログインします。

下記の画面が表示されたら、『SEO PACK』→『一般設定』と進んでください。

ダッシュボード → SEO PACK → 一般設定

この章のトップに戻る

『Googleアナリティクス』をクリック

『Googleアナリティクス』をクリック。

『Googleアナリティクス』をクリック

この章のトップに戻る

トラッキングIDの貼り付け → 設定を保存する

赤背景の部分にトラッキングIDを貼り付け、『設定を保存する』をクリックします。

トラッキングIDの貼り付け → 設定を保存する
ため

これで完了です。

SWELL初期設定一覧に戻る

SWELL初期設定⑥:アフィリエイトプログラムに登録する

次は、SWELLのアフィリエイトプログラムに登録します。手順は以下のとおり。

リンクをクリックすると見たいところにスキップします

一つずつ説明しますね。

SWELLのユーザーページにログイン

以下のボタンから、SWELLのユーザーページに進んでください。

ログイン

SWELLユーザーページにログイン

上記の画面が表示されたら、以下を入力します。

  • ユーザー名またはメールアドレス
    • 会員登録時に登録したユーザー名
  • パスワード
    • 会員登録時に登録したパスワード
  • CAPTCHA コード
    • CAPTCHA コード上に表示されている『ひらがな』

この章のトップに戻る

個人情報の入力

画面に沿って、個人情報を入力してください。

個人情報の入力

この章のトップに戻る

ドメインと銀行口座の入力

『アフィリエイトで使うサイトURL』→『銀行口座』を入力。その後、『プロフィールを変更』をクリックします。

アフィリエイトで使うサイトURL → 銀行口座 → プロフィールを変更
ため

これで完了です。

アフィリエイト広告の貼り方に関しては、以下をご覧ください。

SWELL初期設定一覧に戻る

SWELL初期設定⑦:高速化設定をする

サイト表示速度を上げるため、高速化設定をします。手順は以下のとおり。

リンクをクリックすると見たいところにスキップします

一つずつ説明しますね。

ダッシュボード → SWELL設定 → SWELL設定

『ダッシュボード』→『SWELL設定』→『SWELL』と進みます。

ダッシュボード → SWELL設定 → SWELL

この章のトップに戻る

高速化 → キャッシュ削除

全ての項目にチェックを入れてください。

全ての項目にチェックを入れる

この章のトップに戻る

遅延読み込みを設定

下記画像のとおりに設定をします。

チェックを入れる → スクリプト(lazysizes.js)を使って遅延読み込みさせる
  • 記事下コンテンツを遅延読み込みされる
  • フッターを遅延読み込みさせる
  • 画像のLazyload
    • スクリプト(lazysizes.js)を使って遅延読み込みさせる

この章のトップに戻る

ファイルの読み込みを設定

『SWELLのCSSをインラインで読み込む』にチェックを入れてください。

チェックを入れる

この章のトップに戻る

ページ遷移高速化を設定

『Prefetch』を選択し、『変更を保存』をクリック。

『Prefetch』→『変更を保存』
ため

これで完了です。

より速くしたい方は、以下をご覧ください。超高速化する設定方法をまとめています。

SWELL初期設定一覧に戻る

SWELL初期設定⑧:サイト全体のレイアウトを決める

高速化設定が終わったら、サイト全体のレイアウトを決めます。

ため

手順は以下のとおり。

リンクをクリックすると見たいところにスキップします

一つずつ説明しますね。

SNS情報の設定

SNS情報の設定をすると、ヘッダー上部にSNSアイコンが表示。拡散されやすくなるので、アクセス増が期待できます。

  • プロフィール
  • ヘッダー右上
  • フッター
ため

手順は以下のとおり。

設定手順

  • ダッシュボード → 外観 → カスタマイズ
  • 『SNS情報』をクリック
  • SNSリンクを入力 → 公開をクリック

ダッシュボード → 外観 → カスタマイズ

ダッシュボード → 外観 → カスタマイズと進んでください。

ダッシュボード → 外観 → カスタマイズ

『SNS情報』をクリック

『SNS情報』をクリック。

『SNS情報』をクリック

SNSリンクを入力 → 公開をクリック

赤背景の部分にSNSリンクを入力します。

SNSリンクを入力 → 『公開』をクリック
入力するSNSリンク
  • Facebook
  • Twitter
  • Instagram
  • LINE@
  • Pinterest
  • Github
  • Youtube
  • Amazon欲しいものリスト
  • Feedly
  • RSS
  • お問い合わせフォーム
ため

メニュー上部の『公開』を押して完了です。

この章のトップに戻る

ヘッダーの設定

ブログの顔とも言える、ヘッダーの設定をします。手順は以下のとおり。

設定手順

  1. ダッシュボード → 外観 → カスタマイズ
  2. 『ヘッダー』をクリック
  3. ヘッダーカラーの設定
  4. ヘッダーレイアウトの設定
  5. 固定ヘッダーの設定
  6. ヘッダーバーの設定
  7. 検索ボタンの設定

ダッシュボード → 外観 → カスタマイズ

ダッシュボード → 外観 → カスタマイズと進んでください。

ダッシュボード → 外観 → カスタマイズ

『ヘッダー』をクリック

『ヘッダー』をクリック。

『ヘッダー』をクリック

ヘッダーカラー

まずはヘッダーカラーの設定です。

ヘッダー背景色・ヘッダー文字色を変更

ヘッダーレイアウト

次にヘッダーのレイアウトを設定します。

レイアウトを選ぶ
  • ヘッダーナビのレイアウト(PC)
    • ヘッダーナビをロゴの横に(右寄せ)
    • ヘッダーナビをロゴの横に(左寄せ)
    • ヘッダーナビを下に
    • ヘッダーナビを上に
  • ヘッダーナビのレイアウト(SP)
    • ロゴ:左 / メニュー:右
    • ロゴ:中央 / メニュー:左
    • ロゴ:中央 / メニュー:右
  • ヘッダー境界線
    • なし

ヘッダーの追従

その次はヘッダーの追従設定。固定ヘッダーの追加ですね。

追加するならチェックを入れる

ヘッダーバー

ヘッダー追加の設定が終わったら、ヘッダーバーの設定をします。

背景色・文字色を決め、表示するものにチェックを入れる

検索ボタン

最後は検索ボタンの設定。

表示する・しないを選ぶ
ため

メニュー上部の『公開』を押して完了です。

この章のトップに戻る

フッターの設定

次はフッターの設定をします。手順は以下のとおり。

設定手順

  • ダッシュボード → 外観 → カスタマイズ
  • 『フッター』をクリック
  • 各種設定

ダッシュボード → 外観 → カスタマイズ

ダッシュボード → 外観 → カスタマイズと進んでください。

ダッシュボード → 外観 → カスタマイズ

『フッター』をクリック

『フッター』をクリック。

『フッター』をクリック

各種設定

赤背景の部分を設定します。

  • フッター背景色
    • お好きな色
  • フッター文字色
    • お好きな色
  • ウィジェットエリアの背景色
    • お好きな色
  • ウィジェットエリアの文字色
    • お好きな色
  • コピーライトのテキスト
    • 年とブログ名
  • 「フッター」と「フッター直前ウィジェット」の間の余白をなくす
    • チェックを入れる
  • フッターにSNSアイコンを表示する
    • チェックを入れる
ため

メニュー上部の『公開』を押して完了です。

この章のトップに戻る

サイドバーの設定

次はサイドバーの設定をします。手順は以下のとおり。

設定手順

  • ダッシュボード → 外観 → カスタマイズ
  • 『サイドバー』をクリック
  • サイドバー表示の設定

ダッシュボード → 外観 → カスタマイズ

ダッシュボード → 外観 → カスタマイズと進みます。

ダッシュボード → 外観 → カスタマイズ

『サイドバー』をクリック

『サイドバー』をクリック。

『サイドバー』をクリック

サイドバー表示の設定

赤背景色の部分を設定します。

ONならチェックを入れ、OFFならチェックを外してください
  • トップページにサイドバーを表示する
  • 投稿ページにサイドバーを表示する
  • 固定ページにサイドバーを表示する
  • アーカイブページにサイドバーを表示する
サイドバーの位置
ため

メニュー上部の『公開』を押して完了です。

この章のトップに戻る

基本カラーの設定

次は基本カラーの設定をします。手順は以下のとおり。

設定手順

  • ダッシュボード → 外観 → カスタマイズ
  • 『サイト全体設定』をクリック
  • 『基本カラー』をクリック
  • カラーの設定

ダッシュボード → 外観 → カスタマイズ

ダッシュボード → 外観 → カスタマイズと進みます。

ダッシュボード → 外観 → カスタマイズ

『サイト全体設定』をクリック

『サイト全体設定』をクリック。

『サイト全体設定』をクリック

『基本カラー』をクリック

『基本カラー』をクリックします。

『基本カラー』をクリック

カラーの設定

赤背景色の部分を変更してください。

  • メインカラー
  • テキストカラー
  • リンクカラー
  • 背景色
ため

メニュー上部の『公開』を押して完了です。

この章のトップに戻る

基本デザインの設定

次は基本デザインを設定します。

基本デザイン・・・サイト全体の見た目。アイキャッチの角を丸めたりします。

ため

設定手順は以下のとおり。

設定手順

  • ダッシュボード → 外観 → カスタマイズ
  • 『サイト全体設定』をクリック
  • 『基本デザイン』をクリック
  • 詳細設定
    • 全体の質感
    • コンテンツ背景を白にする

ダッシュボード → 外観 → カスタマイズ

ダッシュボード → 外観 → カスタマイズと進みます。

『サイト全体設定』をクリック

『サイト全体設定』をクリック。

『サイト全体設定』をクリック

『基本デザイン』をクリック

『基本デザイン』をクリックします。

『基本デザイン』をクリック

詳細設定

赤背景の部分の設定を行います。

  • 全体の質感
    • 全体をフラットにする
    • 全体に丸みをもたせる
  • コンテンツ背景を白にする
    • オフ
    • オン
    • オン(メインエリアのみ)さらに、コンテンツエリアを線で囲む
    • 固定ページ・投稿ページでのみ有効にする

※チェックを入れてください

ため

メニュー上部の『公開』を押して完了です。

この章のトップに戻る

下部固定ボタンの設定

次は下部固定ボタンの設定をします。行うことは以下3つ。

行うこと

  • トップに戻るボタンの設置
  • 固定目次の設置
  • スマホ用固定フッターメニューの設定
ため

設定がしやすくなるので、


ダッシュボード → 外観 → カスタマイズ → サイト全体設定 → 下部固定ボタン・メニュー


と進んでください。

トップへ戻るボタンの設置

まずはトップに戻るボタン。以下が選べます。

  • 非表示
  • 表示する(四角形)
  • 表示する(円形)

四角形のデザイン

四角形

円形のデザイン

円形

固定目次の設置

次は固定目次。以下の3種類があります。

  • 非表示
  • 表示する(四角形)
  • 表示する(円形)

四角形のデザイン

四角形

円形のデザイン

円形

スマホ用固定フッターメニューの設定

最後はスマホ用固定フッターメニュー。以下があります。

  1. メニュー開閉ボタンを表示する
  2. 検索ボタンを表示する
  3. ページトップボタンを表示する
  4. 目次メニューを表示する
全部設定すると、こんな感じで表示されます。
ため

メニュー上部の『公開』を押して完了です。

この章のトップに戻る

記事一覧リストの設定

次は記事一覧リスト。投稿画面やアーカイブページに表示される、投稿表示設定をします。

ため

手順は以下のとおり。

設定手順

  • ダッシュボード → 外観 → カスタマイズ
  • 『記事一覧リスト』をクリック
  • リストレイアウトの変更
  • タブ切り替え設定(トップページ)

ダッシュボード → 外観 → カスタマイズ

ダッシュボード → 外観 →カスタマイズと進みます。

ダッシュボード → 外観 →カスタマイズ

『記事一覧リスト』をクリック

『記事一覧リスト』をクリック。

『記事一覧リスト』をクリック

リストレイアウトの変更

リストレイアウトを変更します。

リストレイアウトの変更
ため

リストレイアウトは以下とおり。

リストレイアウト

カード型(3カラム)
リスト型
リスト型(左右交互)
ブログ型
サムネイル型(1カラム)
サムネイル型(2カラム / 文字なし)

タブ切り替え設定(トップページ)

スクロールをすると、下記の画面が表示されます。

表示されたら、赤背景色の部分を変更してください。

  • 表示するタブの設定
    • 「新着記事タブ」を追加する
    • 「人気記事タブ」を追加する
  • 「タームタブ」の設定(カテゴリーやおすすめタブ)
    • カテゴリーID・タブIDを入力
  • 「新規記事タブ」の表示名
  • 「人気記事タブ」の表示名
  • タームアーカイブに「人気記事タブ」を追加
  • 新着アーカイブに「人気記事タブ」を追加
ため

メニュー上部の『公開』を押して完了です。

この章のトップに戻る

記事スライダーの設定

次は記事スライダーの設定をします。手順は以下のとおり。

設定手順

  • ダッシュボード → 外観 → カスタマイズ
  • 『トップページ』をクリック
  • 『記事スライダー』をクリック
  • 記事スライダーの設置

ダッシュボード → 外観 → カスタマイズ

ダッシュボード → 外観 → カスタマイズと進みます。

ダッシュボード → 外観 → カスタマイズ

『トップページ』をクリック

『トップページ』をクリック。

『トップページ』をクリック

『記事スライダー』をクリック

『記事スライダー』をクリックします。

『記事スライダー』をクリック

記事スライダーの設置

『設置する』にチェックを入れてください。

『設置する』にチェック

メニュー上部の『公開』を押して完了です。

この章のトップに戻る

詳細設定については、下記をご覧ください。カスタマイズ方法と一緒にまとめました。

関連記事

>>SWELLサイト型のトップページカスタマイズ②:記事スライダー

メインビジュアルの設定

次はメインビジュアルの設定をします。手順は以下のとおり。

設定手順

  • ダッシュボード → 外観 → カスタマイズ
  • 『トップページ』をクリック
  • 『メインビジュアル』をクリック
  • メインビジュアルの表示内容を変更

ダッシュボード → 外観 → カスタマイズ

ダッシュボード → 外観 → カスタマイズと進みます。

ダッシュボード → 外観 → カスタマイズ

トップページをクリック

『トップページ』をクリック。

『トップページ』をクリック

『メインビジュアル』をクリック

『メインビジュアル』をクリックします。

『メインビジュアル』をクリック

メインビジュアルの表示内容を変更

画像を選択し、公開をクリック。

画像 → 公開
ため

これで完了です。

以下にメインビジュアルのカスタマイズを書いています。よろしければ、ご覧ください。

関連記事

>>SWELLサイト型のトップページカスタマイズ①:メインビジュアル

ピックアップバナー

ピックアップバナーは、SWELLの公式サイトをご覧ください。図解で分かりやすく説明していますよ。

SWELL初期設定一覧に戻る

SWELL初期設定⑨:サイドバーの表示設定をする

サイト全体のレイアウトが終わったら、サイドバーの表示設定をします。

ため

やることは以下の2つ。

リンクをクリックすると見たいところにスキップします

一つずつ説明しますね。

サイドバーのレイアウトを変更する

まずは、サイドバーのレイアウトの変更。トップページでの表示のされ方を変更します。

ため

手順は以下のとおり。

変更手順

  • ダッシュボード → 外観 → カスタマイズ
  • 『サイト全体』をクリック
  • 『タイトルデザイン』をクリック
  • サイドバータイトルのデザインを変更

ダッシュボード → 外観 → カスタマイズ

ダッシュボード → 外観 → カスタマイズと進みます。

ダッシュボード → 外観 → カスタマイズ

『サイト全体』をクリック

『サイト全体』をクリック。

『サイト全体』をクリック

『タイトルデザイン』をクリック

『タイトルデザイン』をクリックします。

『タイトルデザイン』をクリック

ウィジェットタイトルのデザインを変更

赤背景色の部分を変更してください。

サイドバーレイアウト

下線
左に縦線
左右に縦線
塗り
ため

メニュー画面上の「公開」を押して完了です。

この章のトップに戻る

サイドバーにウィジェットを追加する

次はサイドバーにウィジェットを追加。人気記事や追尾目次を表示させます。

ため

ダッシュボード → 外観 → ウィジェット

と進んでください。

ドラッグ&ドロップ

使いたいウィジェットをサイドバーに、ドラッグ&ドロップします。

使いたいウィジェットをサイドバーにドラッグ&ドロップ
ため

これで完了です。

SWELL初期設定一覧に戻る

SWELL初期設定⑩:投稿・固定ページのレイアウトを決める

サイドバーの表示設定が終わったら、投稿・固定ページのレイアウトを決めます。

ため

やることは以下4つです。

投稿・固定ページのレイアウトを決める手順

リンクをクリックすると見たいところにスキップします

一つずつ説明しますね。

目次の設定

まずは、目次の設定です。手順は以下のとおり。

設定手順

  • ダッシュボード → 外観 → カスタマイズ
  • 『投稿・固定ページ』をクリック
  • 『目次』をクリック
  • 目次の表示設定
  • 目次デザインの設定
  • 目次の表示範囲の設定

ダッシュボード → 外観 → カスタマイズ

ダッシュボード → 外観 → カスタマイズと進みます。

ダッシュボード → 外観 → カスタマイズ

『投稿・固定ページ』をクリック

『投稿・固定ページ』をクリック。

『投稿・固定ページ』をクリック

『目次』をクリック

『目次』をクリックします。

『目次』をクリック

目次の表示設定

赤背景色の部分を変更してください。

  • 投稿ページに目次を表示にチェック
    • 投稿ページに目次が表示される
  • 固定ページに目次を表示にチェック
    • 固定ページに目次が表示される

目次デザインの設定

その次は、目次デザインの設定をします。

ため

デザインは4種類。olタグとulタグから選べます。

olタグ

シンプル
ボックス
上下ボーダー
ストライプ

ulタグ

シンプル
ボックス
ボーダー
ストライプ

目次の表示範囲の設定

最後は、目次の表示設定。赤背景色の部分を変更してください。

  • どの階層の見出しまで抽出するか
    • h2見出しまで
    • h3見出しまで
  • 見出しが何個以上あれば表示するか
    • 1
ため

メニュー上部の『公開』を押して完了です。

この章のトップに戻る

見出しの設定

次は見出しの設定をします。手順は以下のとおり。

設定手順

  • ダッシュボード → 外観 → カスタマイズ
  • 『投稿・固定ページ』をクリック
  • 『コンテンツのデザイン』をクリック
  • 見出しカラーの設定
  • 見出しデザインの設定

ダッシュボード → 外観 → カスタマイズ

ダッシュボード → 外観 → カスタマイズと進んでください。

ダッシュボード → 外観 → カスタマイズ

『投稿・固定ページ』をクリック

『投稿・固定ページ』をクリック。

『投稿・固定ページ』をクリック

『コンテンツのデザイン』をクリック

『コンテンツのデザイン』をクリックします。

『コンテンツデザイン』をクリック

見出しカラーの設定

見出しのキーカラーを変更してください。

ため

ヘッダーカラーと合わせると良いですよ。

見出しデザインの設定

見出しカラーが終わったら、見出しデザインを設定します。h2・h3・h4ごとにパターンを決めてください。

h2見出し

h2見出し

h3見出し

h3見出し

h4見出し

h4見出し
ため

決めたら、メニュー上部の『公開』を押して完了です。

この章のトップに戻る

記事下エリアの設定

次は記事下エリアの設定をします。手順は以下のとおり。

設定手順

  • ダッシュボード → 外観 → カスタマイズ
  • 『投稿・固定ページ』をクリック
  • 『記事下エリア』をクリック
  • SNSアクションエリアの設定
  • 前後ページの設定
  • 著者情報エリアの設定
  • 関連記事エリアの設定

ダッシュボード → 外観 → カスタマイズ

ダッシュボード → 外観 →カスタマイズと進みます。

ダッシュボード → 外観 →カスタマイズ

『投稿・固定ページ』をクリック

『投稿・固定ページ』をクリック。

『投稿・固定ページ』をクリック

『記事下エリア』をクリック

『記事下エリア』をクリックします。

『記事下エリア』をクリック

SNSアクションエリアの設定

SNSアクションエリア部分の設定をします。

  • Twitterフォローボタン
    • チェックを入れる
  • Facebookいいねボタン
    • チェックを入れる
  • Twitterフォローボタンの対象ユーザー名
    • Twitterアカウントを入力
  • Facebookいいねボタンの対象URL
    • FacebookのURLを入力(僕はブログURLを入力していますが汗)

前後ページの設定

続いて前後ページの設定です。下記のとおりにしてください。

  • 前後記事へのページリンクを表示
    • チェックを入れる
  • ページリンクにサムネイル画像を表示する
    • チェックを入れる
  • 同じカテゴリーの記事を習得する
    • チェックを入れる
  • 前後記事へのページリンクのデザイン
    • 標準

著者情報エリアの設定

前後ページが終わったら、著者情報エリアの設定をします。赤背景の部分を変更してください。

  • 著者情報を表示
    • チェックを入れるとプロフィールが表示される
  • 著者ページへのリンクを表示する
    • チェックを入れると自分が書いた記事一覧が表示される
  • 著者情報エリアのタイトル
    • 記入した文章が、著者情報のタイトルに表示される(例:この記事を書いた人)

関連記事エリアの設定

著者情報エリアが終わったら、関連記事エリアの設定をします。

関連記事のレイアウト

カード型
リスト型
ため

メニュー上部の『公開』を押して完了です。

この章のトップに戻る

SNSシェアボタンの設定

最後はSNSシェアボタンの設定をします。手順は以下のとおり。

設定手順

  • ダッシュボード → 外観 → カスタマイズ
  • 『投稿・固定ページ』をクリック
  • 『SNSシェアボタン』をクリック
  • 表示設定をする

ダッシュボード → 外観 → カスタマイズ

ダッシュボード → 外観 → カスタマイズと進みます。

ダッシュボード → 外観 → カスタマイズ

『投稿・固定ページ』をクリック

『投稿・固定ページ』をクリック。

『投稿・固定ページ』をクリック

『SNSシェアボタン』をクリック

『SNSシェアボタン』をクリックします。

『SNSシェアボタン』をクリック

表示設定をする

赤背景色の部分、全てにチェックを入れてください。

全部にチェックを入れる
ため

メニュー上部の『公開』を押して完了です。

SWELL初期設定一覧に戻る

SWELL初期設定⑪:エディタの設定をする

最後はエディタの設定をします。ボックスカラーやボタンカラーなどの変更ですね。

ため

手順は以下のとおり。

リンクをクリックすると見たいところにスキップします

ため

操作がしやすいように、

ダッシュボード → SWELL設定 → エディター設定

と進んでください。

カラーセットの設定

カラーセットの設定で行うことは、以下のとおり。

  • カラーパレット設定
  • リスト設定
  • キャプションブロック設定
  • Q&A設定

カラーパレット設定

まずは、カラーパレットの設定。文字色を決めます。

好きな色を選ぶ → クリック

リスト設定

次はリストの設定。箇条書きのカラーを決めます。

好きな色をを選ぶ → クリック

キャプションブロック設定

次はキャプションブロックの設定。タイトル付きボックスのカラーを決めます。

好きな色をを選ぶ → クリック

Q&A設定

最後はQ&A設定。FAQのカラーを決めます。

好きな色を選ぶ → クリック
ため

『変更を保存』を押して完了です。

この章のトップに戻る

ボーダーセットの設定

カラーセットの設定が終わったら、ボーダーカラーなどを決めます。

ボーダーの種類・ボーダーの太さ・ボーダーカラーを選ぶ → クリック
ため

『変更を保存』を押して完了です。

この章のトップに戻る

マーカーの設定

ボーダーの設定が終わったら、マーカーの設定をします。マーカースタイルやカラー決めですね。

マーカースタイル・マーカーカラーを選ぶ → クリック

マーカースタイルのデザイン

細線
太線
細ストライプ
ストライプ
ため

『変更を保存』を押して完了です。

この章のトップに戻る

ボタンの設定

ボタンカラーやデザインを決めます。

ボダンカラー・ボダンデザインを選ぶ → クリック

ボタンデザイン

ため

『変更を保存』を押して完了です。

この章のトップに戻る

アイコンボックスの設定

ボタンの設定が終わったら、アイコンボックスの設定です。小アイコン・大アイコンのスタイルやカラー決めですね。

小アイコンの設定

まずは、小アイコンのスタイル・カラーを選びます。

スタイル・カラーを選ぶ → クリック

小スタイル(3種類)

塗り(フラット)
塗り(浮き出し)
ボーダー

大アイコンの設定

次は、大アイコンのスタイルやカラーを選んでください。

スタイル・カラーを選ぶ → クリック

大アイコンスタイル

フラット
立体
ため

『変更を保存』を押して完了です。

この章のトップに戻る

吹き出しの設定

吹き出しの背景色とボーダー色を選びます。

吹き出しの背景色・ボーダー色を選ぶ → クリック
ため

『変更を保存』を押して完了です。

この章のトップに戻る

その他(ブログカート・引用)の設定

最後は、ブログカートと引用のタイプを設定します。

ブログカート

まずは、ブログカートのタイプを選んでください。

タイプを選ぶ

ブログカート(内部)のタイプ

タイプ1
タイプ2
タイプ3

ブログカート(外部)のタイプ

タイプ1
タイプ2
タイプ3

引用

次は、引用のタイプを選びます。

スタイルを選ぶ

引用のスタイル

シンプル
クオーテーションマーク表示
ため

『変更を保存』を押して完了です。

これで初期設定が終わりました。お疲れ様です!

【図解マニュアル】SWELLの初期設定手順【超具体的に解説】:まとめ

今回は、【図解マニュアル】SWELLの初期設定手順【超具体的に解説】についてお伝えしました。

クリックすると見たいところに移動します

ブログを運営できるところまで来ましたね。お疲れさまでした。

ため

あとは、自分だけのブログを作るだけです!

もし、デザインが決まっていなかったら、以下を参考にしてください。

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

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

コメント

コメントする

目次
閉じる