【SWELLブログの始め方】大人気有料テーマSWELLの導入と設定方法

SWELLを開き、「購入する」ボタンをクリック。

ダウンロードページが表示されます。
内容を確認して、利用規約に同意し「SWELLを購入する」をクリックします。

クレジットカードの情報を入力します。※支払いはクレジットカードのみです。

情報の入力が完了したら「支払う」ボタンをクリックします。

SWELLの会員サイトを開きます。

開いたら「会員登録はこちら」をクリックします。

登録のために必要な情報を入力します。

入力したら同意をし、「登録する」をクリックします。

SWELLのダウンロードはマイページからできます。

まずはマイページを開きます。

マイページを開いたら、製品ダウンロードまでスクロールします。

製品ダウンロードの「SWELL本体最新版」（親テーマ）と「子テーマ」をダウンロードします。

ダウンロードをすると、下記のzipファイルがあります。こちらがSWELL導入に必要なファイルです。

尚、「SWELL本体最新版」（親テーマ）のファイル名「swell-＊-＊-＊-＊.zip」の＊の部分はダウンロードする時期によって変わります。

WordPressを開き、「外観」→「テーマ」を開きます。
テーマを開き「新規追加」をクリックします。

「新規追加」を開くと、テーマの追加画面が表示されます。
「テーマのアップロード」をクリックし、「ファイルを選択」をクリックします。

先ほどダウンロードした「swell-＊-＊-＊-＊.zip」を選択します。
選択し「開く」をクリックすると、「今すぐインストール」がクリックできるようになります。

ここで、「今すぐインストール」をクリックします。

下記のような画面になればインストール完了です。

続いて、子テーマをインストールします。手順は先ほどと同様です。

まず、「新規追加」→「テーマのアップロード」→「ファイルを選択」→「今すぐインストール」でインストールします。

子テーマのファイル名は「swell_child」です。

先ほどと同じ方法で今度は「swell_child」をアップロードとインストールをします。

下記の画面が表示されるので「有効化」をクリックします。

「有効：SWELL CHILD」となっていれば子テーマもインストール完了です。

「外観」→「メニュー」を開き「新しいメニューを作成しましょう」をクリックします。
クリックすると下記の画面が表示されます。

メニュー名の入力とメニュー設定を選択します。それぞれ、下記のように設定しましょう。

• メニュー名：ヘッダー、などわかりやすい名前にしておきます
• メニュー設定：グローバルナビにチェック

入力完了したら「メニュー作成」をクリックします。

ヘッダーに入れたい項目を追加します。
（※事前に「投稿」→「カテゴリー」からブログのカテゴリを設定しておきましょう！）

ヘッダーに入れたい項目を選択したら「メニューを追加」をクリックします。

追加すると一覧が表示されます。

「副項目」とするとヘッダーのファーストビューには表示されず、ヘッダーにカーソルをもっていくと表示されるようになります。

項目が多すぎると視認性が悪くなるので、最低限で設定するようにしましょう！

Step2まででヘッダーの大まかの設定が完了です。

ヘッダーは追従されるように設定しましょう。
「外観」→「カスタマイズ」→「ヘッダー」→「ヘッダーの追従設定」の下記の2項目にはチェックを入れておきましょう！

• ヘッダーを追従させる（PC）
• ヘッダーを追従させる（SP）

こちらで追従の設定はOKです。

また、併せてロゴの設定も行いましょう。

「外観」→「カスタマイズ」→「ヘッダー」→「ヘッダーロゴの設定」から可能です。

ロゴ画像をアップロードしましょう。

こちらで最低限のヘッダーの設定は完了です。

ヘッダーのカラーや位置などの細かい設定は「外観」→「カスタマイズ」→「ヘッダー」の画面で設定できるので、お好みに併せて設定しましょう！

「外観」→「メニュー」を開き「新しいメニューを作成しましょう」をクリックします。

クリック後、下記を設定します。

• メニュー名：ピックアップバナー、などの分かりやすい名前にしましょう
• メニュー設定：ピックアップバナーにチェック

入力完了後、「メニュー作成」をクリックします。

カスタムリンクから「リンクの文字列」と「URL」の設定を行います。

• リンクの文字列：内容がわかりやすい名前※実際には表示されません
• URL：遷移させたいURL

を設定し、「メニューに追加」をクリックします。

私の場合はURLは「カテゴリ」を設定しているので、カテゴリのURLに遷移させるようにしています。

先ほどアップロードした画像の「ファイルURL」をコピーします。

「ファイルURL」までは、「メディア」→「メディアライブラリ」でアップロードした画像をクリックすると下記のように表示されます。

コピーしたら「説明」に貼り付けます。

これで一つのピックアップバナーの設定は完了です。

必要な数ピックアップバナーを設定し、完了したら「メニューを保存」をクリックしましょう。

ピックアップバナーは4つ設定が視認性が良いのでおすすめです。

最後に、「外観」→「カスタマイズ」→「トップページ」→「ピックアップバナー」からPCとSP画面での見え方をそれぞれ設定します。

※PCの場合は1列に4つの表示、ＳＰの場合は1列に2つずつ表示されるように設定しています。

「外観」→「ウィジェット」を開きます。

共通サイドバーに入れている項目がサイドバーに表示されるようになっています。利用できるウィジェットから「共通サイドバー」に入れたい項目を選択します。

例えば、「人気記事」を入れたいとなった場合下記の画像のように「共通サイドバー」を選択します。

選択したら「ウィジェット」を追加をクリックします。

追加をすると共通サイドバーに表示されます。表示数や表示形式を設定して「保存」をクリックします。

上記のStep2までの手順で、他の項目も追加します。

他の追加も実施し、下記のような状態になれば完了です。

（※広告コードはアドセンスのコードです。違和感の無い位置に設定できるので、合格したら設置するようにしましょう！）

「ブログパーツ」→「新規追加」で設定のページを開きます。この画面から設定を進めていきます。

「＋」ボタンをクリック→「カラム」を開きます。

開くと下記のページが表示されるので「50/50」を選択します。

下記のような表示になるので「＋」ボタンをクリックし「投稿リスト」を開きます。

すると投稿が表示されます。下記のような表示するには、「Settings」を下記のように設定します。

• 表示する投稿数：1
• レイアウト：カード型
• 最大カラム数 ：1列

また、指定の投稿を選ぶには「Pickup」から選択できます。

「投稿IDを直接指定」に指定の投稿のIDを入力することで指定が出来ます。

次に、右側の設定です。

先ほどと同じように「＋」ボタンをクリックし「投稿リスト」を開きます。

「Settings」で下記の設定をします。

• 表示する投稿数：3
• レイアウトを選択：リスト型

指定の投稿を選ぶには「Pickup」の「投稿IDを直接指定」から投稿のIDを入力します。

上記のようになれば土台は完成となります。「公開」をクリックします。

「ブログパーツ」の画面に戻り、「呼び出しコード」をコピーします。

「外観」→「ウィジェット」→「テキスト」→「トップページ上部」→「ウィジェットを追加」をクリックします。

テキストのビジュアル内に先ほどコピーした「呼び出しコード」を貼り付け「保存」をクリックします。

下記の画像では記載していないですが、タイトルは表示させたいタイトルを入力してください！

すると、トップページに表示されるようになります。

「外観」→「カスタマイズ」→「記事一覧リスト」をクリックします。

「タブ切り替え設定」の「「タームタブ」の設定」で表示させたい「カテゴリのID」を入力します。

入力し問題なければ「公開済み」をクリックし完了です。

「外観」→「ウィジェット」を開きます。

「フッター（PC）」から設定します。1～3と分かれていますが、下記のようになっています。

「フッター（PC）」の①～③にそれぞれ入れたい項目を入れます。

項目は「利用できるウィジェット」から選択しましょう。

私の場合は、下記のように設定しております。

上記のように設定できたら完了です！

「外観」→「メニュー」をクリックし、「新しいメニューを作成しましょう」をクリックします。

下記を設定します。

• メニュー名：フッター、などの分かりやすい名前に
• メニュー設定：フッターにチェック

入力完了したら「メニューを作成」をクリックします。

フッターに入れたい項目を選択します。

私の場合は

• サイトマップ
• プライバシーポリシー
• 問い合わせ

を設定しています。

フッターに入れたい項目を追加したら「メニューを追加」をクリックします。

これで完了です。