初心者SWELLを購入した！
初期設定をおしえて欲しい！
そんな人向けにSWELL購入直後の初期設定を解説します！
SWELL購入方法については別記事で解説しています。
テーマを購入したらこれをしよう！
SWELLテーマのアップロード
SWELLをWordPressにアップロードし有効化することでWordPressでSWELLが利用できるようになります。
WordPressにSWELLをアップロードし有効化する手順
ダッシュボードにログインします。
管理者権限でサイトにログインする
テーマのアップロードは管理者権限のユーザーでのみ実行できる作業です。複数のアカウントでサイトを運用している場合は、必ず管理者権限でWordPressにログインしてください。
WordPressダッシュボードにログインした後、
画面左手のメニューから「外観」→「テーマ」の順にクリックしてください。
アップロードするテーマのファイル形式
購入時にダウンロードしたzipファイルをそのままアップロードします。
zipファイルは事前にPC上で解凍する必要はありません。
テーマ名：swell-＊-＊-＊.zip
＊はバージョン版番号です。
画面上部の「新規追加」をクリック。
次の画面で、画面上部の「テーマのアップロード」をクリック。
ファイルの選択画面が表示されます。
「ファイルの選択」をクリックし、パソコン上からSWELLのテーマを選択し「今すぐインストール」をクリック。
今すぐテーマを有効化をクリック。
以上の作業でテーマが有効化されました。
テーマがダッシュボードからアップロードできない場合
サーバーの設定やWordPressの設定など、環境によっては今回の方法でテーマをアップロードできない場合があります。その時は次の方法でテーマをWordPressにアップロードしてください。
- FTPアップロード
- レンタルサーバーの提供しているファイルアップロードツール（ファイルマネージャー等）
【任意】子テーマのアップロード
子テーマは公式サイトから無料でダウンロードできます
SWELL子テーマのアップロード方法
次の手順でSWELL子テーマをWordPressにアップロードできます。
ダッシュボードにログインします。
管理者権限でサイトにログインする
テーマのアップロードは管理者権限のユーザーでのみ実行できる作業です。複数のアカウントでサイトを運用している場合は、必ず管理者権限でWordPressにログインしてください。
WordPressダッシュボードにログインした後、
画面左手のメニューから「外観」→「テーマ」の順にクリックしてください。
画面上部の「新規追加」をクリック。
次の画面で、画面上部の「テーマのアップロード」をクリック。
ファイルの選択画面が表示されます。
「ファイルの選択」をクリックし、パソコン上からSWELLの子テーマを選択し「今すぐインストール」をクリック。
今すぐテーマを有効化をクリック。
有効化するテーマは「子テーマ」
親・子両テーマアップロードしたら、「子テーマ」を有効化してください。
以上の作業でSWELL子テーマが有効化されます。
テーマのアップロード順に注意
子テーマと親テーマをアップロードする際、親テーマを先にアップロードする必要があります。親テーマがない状態だと子テーマをアップロードすることはできません。
パーマリンクの設定
パーマリンクはSEOでとても重要です。パーマリンクは後で変更しようとするとトラブルが発生しやすいので必ず設定しましょう。
初心者パーマリンクって何？
かんたパーマリンクは、「サイトのURL構造」のこと。
パーマリンクの設定手順
次の手順でパーマリンクの設定を行ってください。
管理者権限でWordPressダッシュボードにログインします。
WordPressダッシュボード左手のメニューで、
「設定」→「パーマリンク設定」の順で進んでください。
上部の共通設定の項目から「投稿名」を選択。
画面の下にある「変更を保存」をクリックしてください。
新規投稿・新規固定ページを作る際の注意点
SEO（検索エンジン対策）を強めたい場合、記事やページを作成するに、必ず英文字のパーマリンクを指定しましょう。設定しない場合、作成した記事のURLが文字化けしてしまうので注意しましょう。
推奨プラグインのインストール
SWELLテーマ開発者の推奨するプラグインをインストールしましょう。
WordPressプラグインの基礎知識
初心者『プラグイン』って何？
かんたプラグインは拡張プログラムのこと。
テーマに付属していない機能を補助してくれるのが役割！
推奨プラグインって何？
「推奨プラグイン」は開発者がおススメだよ！というプラグインです。
推奨プラグインを入れてもOKですが、テーマと相性が悪く正しく動作しないだけでなく障害の原因となる可能性もあるので推奨プラグイン以外を入れる際は本当に必要かを考えましょう。
初心者推奨プラグインが、いっぱいあって大変！
全部入れたほうがいいの？
かんた『推奨』であって『必須』ではありません。全部いれる必要なないです。個人的に次のプラグインはSEO上、入れたほうがいいと思います。
- SEO SIMPLE PACK
- Google XML Sitemaps
『SEO SIMPLE PACK』はSWELL開発者さんが作成したプラグインです。当然ながらSWELLとの相性抜群です。SWELLテーマで設定できない、記事のMETAまわりの設定をサポートする役割です。SWELLを使うなら必須と言っていいプラグインです。
『Google XML Sitemaps』は検索エンジンにサイトの更新情報を伝えるsitemao.xmlを自動で作成してくれるプラグインです。SEO上とっとも重要な存在なので、このプラグインも入れておきましょう。
推奨以外のプラグインを使う場合の注意点
- プラグインは最悪停止してもサイト運営に支障がでないもに限定する
- 最終更新が1年以上前のものは使わない
- 非推奨プラグインは使わない
特に「非推奨プラグイン」。SWELL開発者さんが「これをSWELLで使うと不具合が起きるよ」と判断しているプラグインです。
検索順位をあげるなら
「これを入れたら検索エンジン上位に表示される！」といった怪しいプラグインはありません。
ただし、グーグルはページ読み込み速度を検索アルゴリズムにしています。SWELLはページ読み込みスピードがかなり早いテーマです。設定が適切かつコンテンツ内に重い画像や動画、過剰なSNSの埋め込みが無い限り問題はありません。
どうしてもページ読み込みスピードが遅いときは高速化プラグインを追加しましょう。
高速化プラグインの中にはSWELLと相性が悪いものがあります。色々試したなかで一番効果のあったのはヒトデブログでも使っている有料のWPロケットプラグインでした。お金がかかかるので、どうしても高速化ができない人は導入を検討してみてください。
かんた当ブログでも導入しています。
【任意】SWELLデモサイトの着せ替えファイルを適用
SWELL公式サイトにはデモサイトが6個公開されています。SWELL購入者のみデモサイトの「着せ替えファイル」を利用できます。
初心者着せ替えファイルって何？
僕はこの作業をしたほうがいいの？
かんた着せ替えファイルは、デモサイトと同じデザインすることができるファイルだよ。必須じゃないけど、次の項目に当てはまるかチェックしてみて？
次に当てはまる人のみ、この作業を行ってください。
- デモサイトの中に好みのデザインがある
- 「仮」のデザインを決めておきたい
- デモサイトをベースにアレンジしたい
かんた当てはまらない人は、テーマの設定を１から行っていけばOK。
私は着せ替えデータを使っていませんが、無事SWELLの設定ができました。
SWELLデモサイトの着せ替えデータを使う方法
SWELLのデモサイトと同じデザインに着せ替えする方法を解説します。
かんた5分もあれば着せ替え完了です！
SWELL公式サイトから好みのデモサイトのデータをダウンロードします。
デモサイトのデータをダウンロードするにはSWELLのマイページにログインする権限が必要です。
テーマ購入時に受け取るメールを確認しましょう。
着せ替え作業には「Customizer Export/Import」プラグインが必須です。
Customizer Export/ImportはWordPress公式ディレクトリーに公開されている無料プラグインです。WordPressダッシュボード上から直接インストールするか、以下のリンクからファイルをダウンロードしてください。
WordPress公式ディレクトリー：Customizer Export/Import
デモサイトのデータをWordPressサイトの読み込みます。
「外観」→「カスタマイズ」をクリック。
一番下の「Export/Import」をクリック。
デモサイトの着せ替えデータファイル（.dat）を指定しインポートします。
以上でSWELLの着せ替え作業は終了です。
初心者簡単でした！
かんた着せ替えは何度でも行えます。
気に入ったデザインが見つかるまで何度でも着せ替えできるので、気軽に試してください。
デモサイトの着せ替えデザインの使いかたは、次の記事で詳しく解説しています。
ヘッダーエリア（ロゴ、メニュー等）
サイトの上部は「ヘッダー」、または「ヘッダーエリア」といいます。ロゴマークやメニューを表示するエリアです。
ヘッダーのフォント、背景色を指定する方法
ヘッダーの文字の色、ヘッダーの背景色を指定する手順です。
「外観」→「カスタマイズ」→「ヘッダー」をクリック。
表示されるメニューのカラー設定から好みの色を指定できます。
かんたフォント、背景色ともにカラーパレットから好きな色を選べます。
ロゴ画像を設置する方法
「外観」→「カスタマイズ」→「ヘッダー」をクリック。
ヘッダーロゴの設定から、ロゴ画像をアップロードし表示サイズを 指定することができます。
表示サイズのオプション
- PCでの表示サイズ（通常）
- PCで追従ヘッダー上での表示サイズ
- スマホサイトでの表示サイズ
メニューの設定方法
「外観」→「カスタマイズ」→
トップページの設定
トップページは何も設定しなくても、SWELL標準のデフォルトページが表示されます。
他のページのようにエディターで編集可能なページにする方法を解説します。
SWELL公式のトップページや当サイトはこの設定を使っています。
トップページを任意の固定ページに変更する手順
ダッシュボード左手のメニューから「固定ページ」→「新規追加」をクリック。
適当なタイトルを入力し、ページを保存ます。
今回の例では「ホーム」とします。
ページの本文は後ほど入力しましょう。本文として入力した内容がトップページに表示されることになります。
もしトップページをサイドバー無しのデザインにしたい場合、編集画面の右手のメニューの「SWELL設定」の中にあるサイドバーを「非表示」にしましょう。
先ほど作成した固定ページ「ホーム」をトップぺーに指定します。
ダッシュボード左手のメニュー「設定」→「表示設定」をクリック。
ホームページの表示で「固定ページ」を選択、
ホームページ:で先ほ作成した「ホーム」を指定し、変更を保存。
以上の手順で作成したホームがトップページに表示されます。
メインビジュアルの設定
トップページの顔として表示されるメインビジュアルの設定方法について解説します。
SWELLでは3種類のメインビジュアルから好みのタイプを選択できます。
- 静止画像
- スライドショー（最大5枚）
- 動画（当ブログはコレです！）
「外観」→「カスタマイズ」→「トップページ」→「メインビジュアル」をクリックすると、設定画面が表示されます。
Font Awesomeの設定
Font Awesome（フォントオウサム）を使いたい人向けの設定です。
初心者Font Awesomeって何？
かんたオシャレなアイコンをサイトに表示できるサービスのことだよ。
有料のアイコンもあるけど、ほとんど無料で使えるのでブログをオシャレに装飾したい人にはおススメ！
当サイトでも使ってます。
Font AwesomeをSWELL上で使う設定方法
WordPress左手の「SWELL設定」→「Font Awesome」タブをクリック。
Font Awesomeの読み込みオプションで、「読み込まない」以外を選択し変更を保存。
初心者「CSSで読み込む」と、「JSで読み込む」の違いは？
かんたCSSはCSS＋Webフォントでの出力。
JSはJS＋SVGでの出力。
CSSはその名の通りCSSなので、古いIEにも対応してるけどJSはIE10非対応。それ以外にも技術的に結構違うけど、アイコンを表示したいだけならどちらを選んでもOK。
SWELLER’S IDの設定
SWELLにはSWELLテーマ販売アフィリエイトプログラムがあります。
自分のブログでSWELLを紹介し、ブログの読者がクリックしその先のページでSWELLを購入すると報酬が貰えるシステムでしす。
かんたアフィリエイトに感心がない人・企業ブログを作っている人はこのステップはスルーでOKです。
アフィリエイトの報酬や、アフィリエイトプログラムの参考方法などを詳しく知りたい人は次の記事で詳しく解説しています。
SWELLER’S IDの設定方法
SWELLER’S IDをWordPressサイトに設定する方法を解説します。
WordPressダッシュボードの左手のメニュー「SWELL設定」→「SWELLER’S」をクリック。
SWELLER’S IDを貼り付けて保存します。
SWELLR’S IDが正しく入力されているかを確認します。
SWELLマイページの「登録ドメイン」に、自身のさ愛とが表示されているかを確認しましょう。
SWELLの高速化設定
SWELL固有の機能として「サイトの高速化」があります。
高速化の作業は『テーマの設定後』にする
これ本当に重要です。もう一度いいます。テーマのデザインなんかを終わらせた後にサイトの高速化設定をしましょう。
理由はサイトの高速化はキャッシュを利用するシステムだからです。
SWELL高速化の設定方法
WordPressダッシュボード左のメニューで「SWELL設定」→高速化タブを選択。
各種にチェックを入れて設定を保存。
- キャッシュ機能
- 遅延読み込みの機能
- ページ遷移高速化
レンタルサーバーですべき設定
WordPress以外でのおすすめ設定を紹介します。
PHPを最新バージョンにする
PHPのバージョンを適切なバージョンにすることでサイトの安全性とページに表示速度が向上します。
PHPのバージョンについてはレンタルサーバーのコントロールパネルから行えます。
PHPバージョン変更時の注意点
利用しているSWELLテーマのバージョンごとに、推奨するPHPのバージョンが異なります。
SSLの設定
SSL（エス・エス・エル）はサーバーとユーザー間の通信を安全にする技術です。
SSL対応のもう一つのメリットはSEOです。
グーグルがSSLはSEO対策の1つになると明言しています。
HTTPS をランキング シグナルに使用します
アルゴリズムでのシグナルとして、暗号化された安全な接続をサイトで使用しているかを考慮に入れたテストを実施してきました。この実験ではよい結果が得られているため、ユーザーがもっと安全にサイトを閲覧できるよう、すべてのサイト所有者の皆様に
HTTP から HTTPS への切り替えをおすすめしたいと考えています。
グーグル公式ウェブマスタ向けブログ
最近のレンタルサーバーはほとんど無料でSSLを利用可能です。
SSL化の手順
WordPressブログをSSL化するにては次の手順です。
レンタルサーバーのコントロールパネルにログインしてSSLの設定をしましょう。
SSLは共有SSL、独自SSLの2種類があります。今回の設定では独自SSLです。
無料のSSLと有料のSSLがありますが、無料版のSSLで問題ありません。
SSLの反映までしばらく待ちます。レンタルサーバーによってはSSLが利用できるまで1時間程度かかるものがあります。
WordPressにログインしサイトのアドレスをSSLに切り替えます。
ダッシュボード左手のメニューから「設定」→「一般」を選択。
WordPressアドレス（URL）と、サイトアドレス（URL）をhttp://からhttps://に変更しましょう。
この作業はレンタルサーバーのSSL設定が完了した後に行ってください。
サイトが表示されなくなります。
常時SSL化の方法は2種類あります。
.htaccessファイルにコードを追加する
常時SSL化プラグインを使う
どちらでもOKです。
個人的にプラグインを増やすのは好きではないので、.htaccessでの設定をお勧めします。
レンタルサーバーによってSSL化の手順が異なります。
かんた無料独自SSL化の方法について、各レンタルサーバーの情報をまとめました。
レンタルサーバー独自のWordPressセキュリティー設定
レンタルサーバーごとに独自のWordPressセキュリティー設定があります。
例えばエックスサーバーは次の独自設定でWordPressのセキュリティーを強化可能です。
エックスサーバー固有のセキュリティー機能
- ログイン画面への海外ネットからのアクセス遮断
- ログイン施行回数の制限
- WAF（Web Application Firewall）
レンタルサーバーごとに固有の機能があります。
利用しているレンタルサーバーで使用できるセキュルティー機能があれば有効化しましょう。
まとめ
SWELLの初期設定について解説しました。
新規テーマをの導入直後は、やることがたくさんあって大変です。
１つずつを見れば、それほど難しいことはありません。落ち着いて作業しましょう！
