悩む人SWELLの初期設定って何をすれば良いの？
何か色々とありそう。
早く使いたいから、必要なものだけ知りたい。
そんな悩みを解決します。
- 会員登録手順
- サイトと紐付け手順
- プラグインの導入手順
- Googleアドセンスの設定手順
- Googleアナリティクスの設定手順
- アフィリエイトプログラムの登録手順
- 高速化設定の手順
- サイト全体のレイアウト設定手順
- サイドバーの表示設定手順
- 投稿・固定ページのレイアウト設定手順
- エディタの設定手順
この記事を書いている人
SWELLの公式サイトを見ると、「やることが多そう」って思いませんか？
これだけの設定をやると、3時間以上掛かります。流石に面倒ですよね。
ためしかし、本当に必要なのは11項目だけ。1時間程度で終わります。
この記事では
【図解マニュアル】SWELLの初期設定手順【超具体的に解説】
をお伝えします。
ため本記事に沿えば初期設定ができるので、後で検索しなくて済みますよ。
もし、SWELLを導入していなければ、先に導入してくださいね！
SWELLでやるべき初期設定一覧
まず、SWELLでやるべき初期設定一覧をご紹介します。
クリックすると見たいところに移動します
ため全て画像を使って説明していきますね。
SWELL初期設定①：会員登録をする
会員登録をしないとサポートが受けられません。理由は単純で、利用規約に書いてあるからです。
利用者本人が運営するサイトで本テーマを使用する場合に限り、利用者は専用のフォーラムサイト（以下、「当フォーラム」）などによる無料サポート（以下、「当サポート」）を受けることができます。
引用：SWELL
ためサポートを受けるためにも、会員登録をしましょう。
5分～10分程度で終わりますよ。
リンクをクリックすると見たいところにスキップします
一つずつ説明しますね。
公式サイト → フォーラム
次に、会員サイト「SWELLERS’」に登録します。
以下のボタンから、「SWELLの公式サイト」へ移動してください。
『フォーラム』をクリック
画面が切り替わったら、『フォーラム』をクリックします。
『マイページ』をクリック
『マイページ』をクリック。
『会員登録はこちらから ▶』をクリック
『会員登録はこちらから ▶』をクリックしてください。
購入者限定パスワードを入力 →『送信』をクリック
購入時に届いたメール本文のパスワードを入力。その後に『送信』をクリックします。
ユーザー名・メールアドレスを入力 →『登録』をクリック
画面が切り替わったら、下記を入力してください。
- ユーザー名：会員サイトで使う名前
- メール：会員サイトで使うメールアドレス
新しいパスワードの設定
すると購入時に登録したメールアドレスに、下記のメールが届きます。
確認したら、本文中のリンクをクリックしてください。
新しいパスワードを設定
そうすると、下記の画面が表示されます。
ため表示されたら
新しいパスワードを入力 → 新しいパスワードを再入力 →「パスワードをリセット」をクリック
と進んでください。
これで会員登録の完了です。
SWELL初期設定②：サイトと紐付ける
会員登録が終わったら、SWELLのIDとサイトを紐付けます。紐付け手順は以下のとおり。
リンクをクリックすると見たいところにスキップします
一つずつ説明しますね。
会員ページで『SWELLERS’ ID』をコピー
『SWELLの公式サイト』→『フォーラム』→『マイページ』と進みます。
会員ページにログインをしたら、画面右上の『マイページ』をクリック。
SWELLERS’ IDをコピーする
そして、画面をスクロールし、SWELLERS’ IDをコピーします。
ダッシュボード → SWELL設定 → SWELLERS’ ID
お使いのワードプレスにログインします。
下記の画面が表示されたら、『SWELL設定』→『SWELLERS’ ID』と進んでください。
SWELLERS’ IDを登録
赤背景の部分に『SWELLERS’ ID』を貼り付け、『保存する』をクリック。
ためこれで完了です。
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初期設定手順④：Googleアドセンスの設定をする
プラグインを導入したら、Googleアドセンスの設定をします。
ためやることは以下3つです。
リンクをクリックすると見たいところにスキップします
一つずつ説明しますね。
アドセンスとの紐づけ
まずは、アドセンスとの紐づけです。手順は以下のとおり。
紐づけ手順
- アドセンスにログイン
- 広告 → コードを取得
- 『コードをコピー』をクリック
- ダッシュボード → 外観 → カスタマイズ
- 『高度な設定』をクリック
- 『</head>直前』にアドセンスコードを貼り付け
アドセンスにログイン
アドセンスにログインします。
広告 → コードを取得
『広告』→『コードを取得』と進んでください。
『コードをコピー』をクリック
『コードをコピー』をクリック。
ダッシュボード → 外観 → カスタマイズ
お使いのワードプレスにログインします。
下記の画面が表示されたら、『外観』→『カスタマイズ』と進んでください。
『高度な設定』をクリック
『高度な設定』をクリック。
『</head>直前』にアドセンスコードを貼り付け
コピーしたアドセンスコードを、『</head>直前』に貼り付けます。
ためメニュー上部の『公開』を押して完了です。
ads.textの登録する
次は、ads.textを登録します。手順は以下のとおり。
登録手順
- アドセンスにログイン
- 『今すぐ修正』をクリック
- 『ダウンロード』をクリック
- 『ads.txt』をクリック → テキスト本文をコピー
- ダッシュボード → SWELL設定 → ads.txtを編集
- ads.txtを貼り付け → ads.txtを変更する
アドセンスにログイン
アドセンスにログインします。
『今すぐ修正』をクリック
画面右上の『今すぐ修正』をクリック。
『ダウンロード』をクリック
『ダウンロード』をクリックします。
『ads.txt』をクリック → テキスト本文をコピー
画面左下の『ads.txt』をクリックし、テキスト本文をコピー。
ダッシュボード → SWELL設定 → ads.txtを編集
ワードプレスにログインします。
下記の画面が表示されたら、『SWELL設定』→『ads.txtを編集』と進んでください。
ads.txtを貼り付け → ads.txtを変更する
ads.txtを貼り付けた後、『ads.txtを変更する』をクリックします。
ためこれで完了です。
広告を貼る準備
最後は、広告を貼る準備をします。手順は以下のとおり。
広告を貼る準備手順
- アドセンスにログイン
- 『広告』をクリック
- 『広告ユニットごと』をクリック
- 『コードを取得』をクリック
- 『コードをコピー』をクリック
- ダッシュボード → SWELL設定 → SWELL設定
- 『広告コード』→『記事内広告』に貼り付け
- 『変更を保存』をクリック
アドセンスにログイン
アドセンスにログインしてください。
『広告』をクリック
『広告』をクリック。
『広告ユニットごと』をクリック
『広告ユニットごと』をクリックします。
『コードを取得』をクリック
『コードを取得』をクリック。
『コードをコピー』をクリック
『コードをコピー』をクリックします。
ダッシュボード → SWELL設定 → SWELL設定
お使いのワードプレスにログインしてください。
下記の画面が表示されたら、『SWELL設定』→『SWELL設定』と進みます。
広告コード → 記事内広告に貼り付け
アドセンス広告のコードを、『記事内広告』に貼り付けてください。
『変更を保存』をクリック
スクロールして、下部にある『変更を保存』をクリック。
ためこれで完了です。
SWELL初期設定⑤：Googleアナリティクスの設定をする
Googleアドセンスの設定が終わったら、Googleアナリティクスの設定をします。
ため手順は以下のとおり。
リンクをクリックすると見たいところにスキップします
一つずつ説明しますね。
Googleアナリティクスにログイン → 管理
Googleアナリティクスにログインしてください。
下記の画面が表示されたら、左下の『管理』をクリックします。
『プロパティ設定』をクリック
『プロパティ設定』をクリック。
トラッキングIDをコピー
トラッキングIDをコピーします。
ダッシュボード → SEO PACK → 一般設定
お使いのワードプレスにログインします。
下記の画面が表示されたら、『SEO PACK』→『一般設定』と進んでください。
『Googleアナリティクス』をクリック
『Googleアナリティクス』をクリック。
トラッキングIDの貼り付け → 設定を保存する
赤背景の部分にトラッキングIDを貼り付け、『設定を保存する』をクリックします。
ためこれで完了です。
SWELL初期設定⑥：アフィリエイトプログラムに登録する
次は、SWELLのアフィリエイトプログラムに登録します。手順は以下のとおり。
リンクをクリックすると見たいところにスキップします
一つずつ説明しますね。
SWELLのユーザーページにログイン
以下のボタンから、SWELLのユーザーページに進んでください。
ログイン
上記の画面が表示されたら、以下を入力します。
- ユーザー名またはメールアドレス
- 会員登録時に登録したユーザー名
- パスワード
- 会員登録時に登録したパスワード
- CAPTCHA コード
- CAPTCHA コード上に表示されている『ひらがな』
個人情報の入力
画面に沿って、個人情報を入力してください。
ドメインと銀行口座の入力
『アフィリエイトで使うサイトURL』→『銀行口座』を入力。その後、『プロフィールを変更』をクリックします。
ためこれで完了です。
アフィリエイト広告の貼り方に関しては、以下をご覧ください。
SWELL初期設定⑦：高速化設定をする
サイト表示速度を上げるため、高速化設定をします。手順は以下のとおり。
リンクをクリックすると見たいところにスキップします
一つずつ説明しますね。
ダッシュボード → SWELL設定 → SWELL設定
『ダッシュボード』→『SWELL設定』→『SWELL』と進みます。
高速化 → キャッシュ削除
全ての項目にチェックを入れてください。
遅延読み込みを設定
下記画像のとおりに設定をします。
- 記事下コンテンツを遅延読み込みされる
- フッターを遅延読み込みさせる
- 画像のLazyload
- スクリプト（lazysizes.js）を使って遅延読み込みさせる
ファイルの読み込みを設定
『SWELLのCSSをインラインで読み込む』にチェックを入れてください。
ページ遷移高速化を設定
『Prefetch』を選択し、『変更を保存』をクリック。
ためこれで完了です。
より速くしたい方は、以下をご覧ください。超高速化する設定方法をまとめています。
SWELL初期設定⑧：サイト全体のレイアウトを決める
高速化設定が終わったら、サイト全体のレイアウトを決めます。
ため手順は以下のとおり。
リンクをクリックすると見たいところにスキップします
一つずつ説明しますね。
SNS情報の設定
SNS情報の設定をすると、ヘッダー上部にSNSアイコンが表示。拡散されやすくなるので、アクセス増が期待できます。
- プロフィール
- ヘッダー右上
- フッター
ため手順は以下のとおり。
設定手順
- ダッシュボード → 外観 → カスタマイズ
- 『SNS情報』をクリック
- SNSリンクを入力 → 公開をクリック
ダッシュボード → 外観 → カスタマイズ
ダッシュボード → 外観 → カスタマイズと進んでください。
『SNS情報』をクリック
『SNS情報』をクリック。
SNSリンクを入力 → 公開をクリック
赤背景の部分にSNSリンクを入力します。
- LINE@
- Github
- Youtube
- Amazon欲しいものリスト
- Feedly
- RSS
- お問い合わせフォーム
ためメニュー上部の『公開』を押して完了です。
ヘッダーの設定
ブログの顔とも言える、ヘッダーの設定をします。手順は以下のとおり。
設定手順
- ダッシュボード → 外観 → カスタマイズ
- 『ヘッダー』をクリック
- ヘッダーカラーの設定
- ヘッダーレイアウトの設定
- 固定ヘッダーの設定
- ヘッダーバーの設定
- 検索ボタンの設定
ダッシュボード → 外観 → カスタマイズ
ダッシュボード → 外観 → カスタマイズと進んでください。
『ヘッダー』をクリック
『ヘッダー』をクリック。
ヘッダーカラー
まずはヘッダーカラーの設定です。
ヘッダーレイアウト
次にヘッダーのレイアウトを設定します。
- ヘッダーナビのレイアウト（PC）
- ヘッダーナビをロゴの横に（右寄せ）
- ヘッダーナビをロゴの横に（左寄せ）
- ヘッダーナビを下に
- ヘッダーナビを上に
- ヘッダーナビのレイアウト（SP）
- ロゴ:左 / メニュー：右
- ロゴ:中央 / メニュー：左
- ロゴ:中央 / メニュー：右
- ヘッダー境界線
- なし
- 線
- 影
ヘッダーの追従
その次はヘッダーの追従設定。固定ヘッダーの追加ですね。
ヘッダーバー
ヘッダー追加の設定が終わったら、ヘッダーバーの設定をします。
検索ボタン
最後は検索ボタンの設定。
ためメニュー上部の『公開』を押して完了です。
フッターの設定
次はフッターの設定をします。手順は以下のとおり。
設定手順
- ダッシュボード → 外観 → カスタマイズ
- 『フッター』をクリック
- 各種設定
ダッシュボード → 外観 → カスタマイズ
ダッシュボード → 外観 → カスタマイズと進んでください。
『フッター』をクリック
『フッター』をクリック。
各種設定
赤背景の部分を設定します。
- フッター背景色
- お好きな色
- フッター文字色
- お好きな色
- ウィジェットエリアの背景色
- お好きな色
- ウィジェットエリアの文字色
- お好きな色
- コピーライトのテキスト
- 年とブログ名
- 「フッター」と「フッター直前ウィジェット」の間の余白をなくす
- チェックを入れる
- フッターにSNSアイコンを表示する
- チェックを入れる
ためメニュー上部の『公開』を押して完了です。
サイドバーの設定
次はサイドバーの設定をします。手順は以下のとおり。
設定手順
- ダッシュボード → 外観 → カスタマイズ
- 『サイドバー』をクリック
- サイドバー表示の設定
ダッシュボード → 外観 → カスタマイズ
ダッシュボード → 外観 → カスタマイズと進みます。
『サイドバー』をクリック
『サイドバー』をクリック。
サイドバー表示の設定
赤背景色の部分を設定します。
- ONならチェックを入れ、OFFならチェックを外してください
- トップページにサイドバーを表示する
- 投稿ページにサイドバーを表示する
- 固定ページにサイドバーを表示する
- アーカイブページにサイドバーを表示する
- サイドバーの位置
- 左
- 右
ためメニュー上部の『公開』を押して完了です。
基本カラーの設定
次は基本カラーの設定をします。手順は以下のとおり。
設定手順
- ダッシュボード → 外観 → カスタマイズ
- 『サイト全体設定』をクリック
- 『基本カラー』をクリック
- カラーの設定
ダッシュボード → 外観 → カスタマイズ
ダッシュボード → 外観 → カスタマイズと進みます。
『サイト全体設定』をクリック
『サイト全体設定』をクリック。
『基本カラー』をクリック
『基本カラー』をクリックします。
カラーの設定
赤背景色の部分を変更してください。
- メインカラー
- テキストカラー
- リンクカラー
- 背景色
ためメニュー上部の『公開』を押して完了です。
基本デザインの設定
次は基本デザインを設定します。
ため設定手順は以下のとおり。
設定手順
- ダッシュボード → 外観 → カスタマイズ
- 『サイト全体設定』をクリック
- 『基本デザイン』をクリック
- 詳細設定
- 全体の質感
- コンテンツ背景を白にする
ダッシュボード → 外観 → カスタマイズ
ダッシュボード → 外観 → カスタマイズと進みます。
『サイト全体設定』をクリック
『サイト全体設定』をクリック。
『基本デザイン』をクリック
『基本デザイン』をクリックします。
詳細設定
赤背景の部分の設定を行います。
- 全体の質感
- 全体をフラットにする
- 全体に丸みをもたせる
- コンテンツ背景を白にする
- オフ
- オン
- オン（メインエリアのみ）さらに、コンテンツエリアを線で囲む
- 固定ページ・投稿ページでのみ有効にする
※チェックを入れてください
ためメニュー上部の『公開』を押して完了です。
下部固定ボタンの設定
次は下部固定ボタンの設定をします。行うことは以下3つ。
行うこと
- トップに戻るボタンの設置
- 固定目次の設置
- スマホ用固定フッターメニューの設定
ため設定がしやすくなるので、
ダッシュボード → 外観 → カスタマイズ → サイト全体設定 → 下部固定ボタン・メニュー
と進んでください。
トップへ戻るボタンの設置
まずはトップに戻るボタン。以下が選べます。
- 非表示
- 表示する（四角形）
- 表示する（円形）
四角形のデザイン
円形のデザイン
固定目次の設置
次は固定目次。以下の3種類があります。
- 非表示
- 表示する（四角形）
- 表示する（円形）
四角形のデザイン
円形のデザイン
スマホ用固定フッターメニューの設定
最後はスマホ用固定フッターメニュー。以下があります。
- メニュー開閉ボタンを表示する
- 検索ボタンを表示する
- ページトップボタンを表示する
- 目次メニューを表示する
ためメニュー上部の『公開』を押して完了です。
記事一覧リストの設定
次は記事一覧リスト。投稿画面やアーカイブページに表示される、投稿表示設定をします。
ため手順は以下のとおり。
設定手順
- ダッシュボード → 外観 → カスタマイズ
- 『記事一覧リスト』をクリック
- リストレイアウトの変更
- タブ切り替え設定（トップページ）
ダッシュボード → 外観 → カスタマイズ
ダッシュボード → 外観 →カスタマイズと進みます。
『記事一覧リスト』をクリック
『記事一覧リスト』をクリック。
リストレイアウトの変更
リストレイアウトを変更します。
ためリストレイアウトは以下とおり。
リストレイアウト
タブ切り替え設定（トップページ）
スクロールをすると、下記の画面が表示されます。
表示されたら、赤背景色の部分を変更してください。
- 表示するタブの設定
- 「新着記事タブ」を追加する
- 「人気記事タブ」を追加する
- 「タームタブ」の設定（カテゴリーやおすすめタブ）
- カテゴリーID・タブIDを入力
- 「新規記事タブ」の表示名
- 「人気記事タブ」の表示名
- タームアーカイブに「人気記事タブ」を追加
- 新着アーカイブに「人気記事タブ」を追加
ためメニュー上部の『公開』を押して完了です。
記事スライダーの設定
次は記事スライダーの設定をします。手順は以下のとおり。
設定手順
- ダッシュボード → 外観 → カスタマイズ
- 『トップページ』をクリック
- 『記事スライダー』をクリック
- 記事スライダーの設置
ダッシュボード → 外観 → カスタマイズ
ダッシュボード → 外観 → カスタマイズと進みます。
『トップページ』をクリック
『トップページ』をクリック。
『記事スライダー』をクリック
『記事スライダー』をクリックします。
記事スライダーの設置
『設置する』にチェックを入れてください。
メニュー上部の『公開』を押して完了です。
詳細設定については、下記をご覧ください。カスタマイズ方法と一緒にまとめました。
関連記事
＞＞SWELLサイト型のトップページカスタマイズ②：記事スライダー
メインビジュアルの設定
次はメインビジュアルの設定をします。手順は以下のとおり。
設定手順
- ダッシュボード → 外観 → カスタマイズ
- 『トップページ』をクリック
- 『メインビジュアル』をクリック
- メインビジュアルの表示内容を変更
ダッシュボード → 外観 → カスタマイズ
ダッシュボード → 外観 → カスタマイズと進みます。
トップページをクリック
『トップページ』をクリック。
『メインビジュアル』をクリック
『メインビジュアル』をクリックします。
メインビジュアルの表示内容を変更
画像を選択し、公開をクリック。
ためこれで完了です。
以下にメインビジュアルのカスタマイズを書いています。よろしければ、ご覧ください。
関連記事
＞＞SWELLサイト型のトップページカスタマイズ①：メインビジュアル
ピックアップバナー
ピックアップバナーは、SWELLの公式サイトをご覧ください。図解で分かりやすく説明していますよ。
SWELL初期設定⑨：サイドバーの表示設定をする
サイト全体のレイアウトが終わったら、サイドバーの表示設定をします。
ためやることは以下の2つ。
リンクをクリックすると見たいところにスキップします
一つずつ説明しますね。
サイドバーのレイアウトを変更する
まずは、サイドバーのレイアウトの変更。トップページでの表示のされ方を変更します。
ため手順は以下のとおり。
変更手順
- ダッシュボード → 外観 → カスタマイズ
- 『サイト全体』をクリック
- 『タイトルデザイン』をクリック
- サイドバータイトルのデザインを変更
ダッシュボード → 外観 → カスタマイズ
ダッシュボード → 外観 → カスタマイズと進みます。
『サイト全体』をクリック
『サイト全体』をクリック。
『タイトルデザイン』をクリック
『タイトルデザイン』をクリックします。
ウィジェットタイトルのデザインを変更
赤背景色の部分を変更してください。
サイドバーレイアウト
ためメニュー画面上の「公開」を押して完了です。
サイドバーにウィジェットを追加する
次はサイドバーにウィジェットを追加。人気記事や追尾目次を表示させます。
ためダッシュボード → 外観 → ウィジェット
と進んでください。
ドラッグ＆ドロップ
使いたいウィジェットをサイドバーに、ドラッグ&ドロップします。
ためこれで完了です。
SWELL初期設定⑩：投稿・固定ページのレイアウトを決める
サイドバーの表示設定が終わったら、投稿・固定ページのレイアウトを決めます。
ためやることは以下4つです。
リンクをクリックすると見たいところにスキップします
一つずつ説明しますね。
目次の設定
まずは、目次の設定です。手順は以下のとおり。
設定手順
- ダッシュボード → 外観 → カスタマイズ
- 『投稿・固定ページ』をクリック
- 『目次』をクリック
- 目次の表示設定
- 目次デザインの設定
- 目次の表示範囲の設定
ダッシュボード → 外観 → カスタマイズ
ダッシュボード → 外観 → カスタマイズと進みます。
『投稿・固定ページ』をクリック
『投稿・固定ページ』をクリック。
『目次』をクリック
『目次』をクリックします。
目次の表示設定
赤背景色の部分を変更してください。
- 投稿ページに目次を表示にチェック
- 投稿ページに目次が表示される
- 固定ページに目次を表示にチェック
- 固定ページに目次が表示される
目次デザインの設定
その次は、目次デザインの設定をします。
ためデザインは4種類。olタグとulタグから選べます。
olタグ
ulタグ
目次の表示範囲の設定
最後は、目次の表示設定。赤背景色の部分を変更してください。
- どの階層の見出しまで抽出するか
- h2見出しまで
- h3見出しまで
- 見出しが何個以上あれば表示するか
- 1
ためメニュー上部の『公開』を押して完了です。
見出しの設定
次は見出しの設定をします。手順は以下のとおり。
設定手順
- ダッシュボード → 外観 → カスタマイズ
- 『投稿・固定ページ』をクリック
- 『コンテンツのデザイン』をクリック
- 見出しカラーの設定
- 見出しデザインの設定
ダッシュボード → 外観 → カスタマイズ
ダッシュボード → 外観 → カスタマイズと進んでください。
『投稿・固定ページ』をクリック
『投稿・固定ページ』をクリック。
『コンテンツのデザイン』をクリック
『コンテンツのデザイン』をクリックします。
見出しカラーの設定
見出しのキーカラーを変更してください。
ためヘッダーカラーと合わせると良いですよ。
見出しデザインの設定
見出しカラーが終わったら、見出しデザインを設定します。h2・h3・h4ごとにパターンを決めてください。
h2見出し
h3見出し
h4見出し
ため決めたら、メニュー上部の『公開』を押して完了です。
記事下エリアの設定
次は記事下エリアの設定をします。手順は以下のとおり。
設定手順
- ダッシュボード → 外観 → カスタマイズ
- 『投稿・固定ページ』をクリック
- 『記事下エリア』をクリック
- SNSアクションエリアの設定
- 前後ページの設定
- 著者情報エリアの設定
- 関連記事エリアの設定
ダッシュボード → 外観 → カスタマイズ
ダッシュボード → 外観 →カスタマイズと進みます。
『投稿・固定ページ』をクリック
『投稿・固定ページ』をクリック。
『記事下エリア』をクリック
『記事下エリア』をクリックします。
SNSアクションエリアの設定
SNSアクションエリア部分の設定をします。
- Twitterフォローボタン
- チェックを入れる
- Facebookいいねボタン
- チェックを入れる
- Twitterフォローボタンの対象ユーザー名
- Twitterアカウントを入力
- Facebookいいねボタンの対象URL
- FacebookのURLを入力（僕はブログURLを入力していますが汗）
前後ページの設定
続いて前後ページの設定です。下記のとおりにしてください。
- 前後記事へのページリンクを表示
- チェックを入れる
- ページリンクにサムネイル画像を表示する
- チェックを入れる
- 同じカテゴリーの記事を習得する
- チェックを入れる
- 前後記事へのページリンクのデザイン
- 標準
著者情報エリアの設定
前後ページが終わったら、著者情報エリアの設定をします。赤背景の部分を変更してください。
- 著者情報を表示
- チェックを入れるとプロフィールが表示される
- 著者ページへのリンクを表示する
- チェックを入れると自分が書いた記事一覧が表示される
- 著者情報エリアのタイトル
- 記入した文章が、著者情報のタイトルに表示される（例：この記事を書いた人）
関連記事エリアの設定
著者情報エリアが終わったら、関連記事エリアの設定をします。
関連記事のレイアウト
ためメニュー上部の『公開』を押して完了です。
SNSシェアボタンの設定
最後はSNSシェアボタンの設定をします。手順は以下のとおり。
設定手順
- ダッシュボード → 外観 → カスタマイズ
- 『投稿・固定ページ』をクリック
- 『SNSシェアボタン』をクリック
- 表示設定をする
ダッシュボード → 外観 → カスタマイズ
ダッシュボード → 外観 → カスタマイズと進みます。
『投稿・固定ページ』をクリック
『投稿・固定ページ』をクリック。
『SNSシェアボタン』をクリック
『SNSシェアボタン』をクリックします。
表示設定をする
赤背景色の部分、全てにチェックを入れてください。
ためメニュー上部の『公開』を押して完了です。
SWELL初期設定⑪：エディタの設定をする
最後はエディタの設定をします。ボックスカラーやボタンカラーなどの変更ですね。
ため手順は以下のとおり。
リンクをクリックすると見たいところにスキップします
ため操作がしやすいように、
ダッシュボード → SWELL設定 → エディター設定
と進んでください。
カラーセットの設定
カラーセットの設定で行うことは、以下のとおり。
- カラーパレット設定
- リスト設定
- キャプションブロック設定
- Q&A設定
カラーパレット設定
まずは、カラーパレットの設定。文字色を決めます。
リスト設定
次はリストの設定。箇条書きのカラーを決めます。
キャプションブロック設定
次はキャプションブロックの設定。タイトル付きボックスのカラーを決めます。
Q&A設定
最後はQ&A設定。FAQのカラーを決めます。
ため『変更を保存』を押して完了です。
ボーダーセットの設定
カラーセットの設定が終わったら、ボーダーカラーなどを決めます。
ため『変更を保存』を押して完了です。
マーカーの設定
ボーダーの設定が終わったら、マーカーの設定をします。マーカースタイルやカラー決めですね。
マーカースタイルのデザイン
ため『変更を保存』を押して完了です。
ボタンの設定
ボタンカラーやデザインを決めます。
ボタンデザイン
ため『変更を保存』を押して完了です。
アイコンボックスの設定
ボタンの設定が終わったら、アイコンボックスの設定です。小アイコン・大アイコンのスタイルやカラー決めですね。
小アイコンの設定
まずは、小アイコンのスタイル・カラーを選びます。
小スタイル（3種類）
大アイコンの設定
次は、大アイコンのスタイルやカラーを選んでください。
大アイコンスタイル
ため『変更を保存』を押して完了です。
吹き出しの設定
吹き出しの背景色とボーダー色を選びます。
ため『変更を保存』を押して完了です。
その他（ブログカート・引用）の設定
最後は、ブログカートと引用のタイプを設定します。
ブログカート
まずは、ブログカートのタイプを選んでください。
ブログカート（内部）のタイプ
ブログカート（外部）のタイプ
引用
次は、引用のタイプを選びます。
引用のスタイル
ため『変更を保存』を押して完了です。
これで初期設定が終わりました。お疲れ様です！
【図解マニュアル】SWELLの初期設定手順【超具体的に解説】：まとめ
今回は、【図解マニュアル】SWELLの初期設定手順【超具体的に解説】についてお伝えしました。
クリックすると見たいところに移動します
ブログを運営できるところまで来ましたね。お疲れさまでした。
ためあとは、自分だけのブログを作るだけです！
もし、デザインが決まっていなかったら、以下を参考にしてください。
コメント