サイトをSWELL公式デモサイトのデザインに着せ替える方法

SWELLは公式サイトでSWELLを適用したデモサイトを紹介しています。

デモサイトが気に入ったから自分のサイトでも真似したいな

そらしど

公式が配布している着せ替えデータを利用すれば、簡単に再現できます

今回はSWELL公式サイトに載っているデモサイトの設定を自分のサイトに反映する方法を紹介します。

SWELLとデモサイトの概要

デモサイトはSWELLの公式サイトで紹介されているSWELLを利用したサイトデザインの例です。

デモサイトはSWELL利用者向けに設定ファイルが公開されています。この設定ファイルを使用して自分のサイトに設定を反映することができます。

SWELL

SWELLのデモサイト一覧 | WordPressテーマ SWELL このページでは、ブログWordPressテーマ「SWELL」を使用したデモサイトの一覧や、実際にご利用いただいているサイトなどをご紹介していきます。 ブログだけでなく、コーポ…

実際にSWELLを利用しているサイトも紹介されています。

着せ替えるためのデータは配布されていませんが、サイトデザインの参考にすることができます。

自分のサイトにデモサイトのデザインを反映する

公式サイトからデモサイトのデザインに着せ替えるためのデータをダウンロードして自分のサイトに反映する手順を解説します。

サイト全体に影響する操作です。実施する前にWordPressのバックアップを取得してください。

本手順では「SWELL DEMO 02」を反映していますが、他のデモサイトも手順は同じです。

STEP

SWELLERS’へ会員登録

ここをクリックすると手順を開閉できます

登録済みの方はスキップしてOKです。

SWELL公式フォーラムサイトから会員登録します。

会員登録方法は公式サイトのガイドラインで詳しく説明されています。

STEP

SWELLERS’ ページでデモサイトのデータをダウンロード

ここをクリックすると手順を開閉できます

SWELLERS’ のデモサイトデータ配布ページで反映したいデモサイトのデータをダウンロードします。

STEP

ダウンロードしたZIPファイルを解凍

ここをクリックすると手順を開閉できます

ダウンロードしたデータファイルはZIP形式で圧縮されています。

中に入っているファイルを使用するためZIPファイルを解凍します。

画像の例はWindows標準の解凍方法です。インストールしている解凍ソフトでも構いません。

STEP

Customizer Export/Importをインストール

ここをクリックすると手順を開閉できます

WordPressにdatファイルをインポートするには「Customizer Export/Import」というプラグインを使用します。

画面遷移

1. WordPress管理画面
2. プラグイン
3. 新規追加

STEP

カスタマイズ画面のExport/Import設定欄に画面遷移

ここをクリックすると手順を開閉できます

Customizer Export/Importをインストールすると、WordPressカスタマイズ画面に「Export/Import」が追加されます。

datファイルのインポートはこの設定欄から行います。

画面遷移

1. WordPress管理画面
2. 外観
3. カスタマイズ
4. Export/Import

STEP

インポートするdatファイルを選択

ここをクリックすると手順を開閉できます

インポートの下にあるファイルを選択からswell_demoXX.datを選択します。

STEP

チェックボックスをチェックして「インポート」ボタンを押す

ここをクリックすると手順を開閉できます

チェックボックス「画像ファイルをダウンロードしてインポートしますか？」をチェックします。

チェックしたら選択したdatファイルが間違いないことを確認して「インポート」ボタンを押してください。

成功するとサイトに反映されます。

デモサイト反映によって設定された各種設定の修正例

デモサイトを反映するとヘッダーロゴが「SWELL DEMO」になるなど、すぐに変えた方が良い設定があります。

自分で設定していないため、設定場所がわからないこともあるので一部を記載しておきます。

主に「SWELL DEMO 02」で設定された箇所を記載しています。見つからない場合は下記も探してみてください。
・SWELLのブロック

SNS設定

デモサイトを反映するとTwitterとFacebook、Instagramが自動で設定されます。

すでに自分のアカウントを設定していても上書きされます。（他のアカウントも空欄に上書きされる可能性あり）

カスタマイズ画面から自分のアカウントに修正しましょう。持っていないアカウントは空欄にしましょう。

画面遷移

1. WordPress管理画面
2. 外観
3. カスタマイズ
4. SNS情報

SNSリンク設定で自分のアカウント情報に変更します。

ヘッダーロゴ

デモサイトを反映するとヘッダーロゴ（ヘッダータイトル）が「SWELL DEMO」になります。

自分のサイト用ロゴやタイトルに修正する必要があります。

画面遷移

1. WordPress管理画面
2. 外観
3. カスタマイズ
4. ヘッダー

ヘッダーロゴの設定にある「ロゴ画像の設定」で自分のサイト用ロゴに変更します。

ヘッダーロゴを画像ではなく文字フォントで設定したい場合

「ロゴ画像の設定」で適当な画像を設定した後に「削除」ボタンで画像を削除するとWordPressに設定したブログタイトルが表示されます。

コピーライト

フッターにあるコピーライトはデモサイトを反映すると「© 2019 SWELL DEMO 02.」のように上書きされます。

カスタマイズ画面から修正しましょう。

画面遷移

1. WordPress管理画面
2. 外観
3. カスタマイズ
4. フッター

コピーライト設定で変更できます。

グローバルナビ

デモサイトを反映するとグローバルナビは既存の固定ページが表示されます。

変更したい場合はカスタマイズ画面で修正しましょう。WordPressの外観にあるメニューで作成済みのメニューを使うこともできます。

例として「ヘッダーメニュー」という作成済みのメニューを適用します。

画面遷移

1. WordPress管理画面
2. 外観
3. カスタマイズ
4. メニュー
5. 適用したいメニューを選択

メニューの位置にあるチェックボックスから「グローバルナビ」を選択します。

お知らせバー

デモサイトを反映するとヘッダーの下に「お知らせをここに入力できます」というバーが表示されます。

カスタマイズ画面でお知らせを変更・削除できます。

画面遷移

1. WordPress管理画面
2. 外観
3. カスタマイズ
4. サイト全体設定
5. お知らせバー

各種設定項目から好みの設定に変更しましょう。

• お知らせバーの内容を変更する
• お知らせバーを削除する

お知らせバーの文言を変更する場合は「お知らせ内容」の入力欄を変更します。

「お知らせバーの表示位置」を「表示しない」に変更します。

サイドバー

SWELL DEMO 02にはサイドバーとしていくつかのコンテンツが表示されています。

1. [SWELL]プロフィール
2. [SWELL]人気記事
3. カテゴリー
4. タグクラウド
5. [SWELL]プロモーションバナー

しかしデモサイトのデータを自分のサイトに反映してもこれらのコンテンツは表示されません。もし表示したい場合は手動で設定する必要があります。

各種コンテンツはカスタマイズ画面のウィジェットから設定できます。

今回は[SWELL]プロフィールを設定する例を紹介します。

そらしど

[SWELL]プロモーションバナーはこちらの記事で紹介しています。

画面遷移

1. WordPress管理画面
2. 外観
3. カスタマイズ
4. ウィジェット
5. 任意の項目を選択

SWELLはサイドバーが3種類あります。

• 共通サイドバー：各ページ共通で表示する内容を設定
• トップページ専用サイドバー：トップページだけ表示したい内容を設定
• 追尾サイドバー:スクロールした時に追尾してほしい内容を設定

SWELL DEMO 02では「[SWELL]プロモーションバナー」のみ追尾サイドバーに設定されています。

まとめ

SWELLのデモサイトデータを反映する方法を紹介しました。

デモサイトのデザインが気に入った方はもちろん、サイト全体のデザインに悩んでいる方も利用してみてはどうでしょうか。

インポートするために利用したプラグインはエクスポートもできます。2つ目のサイトを作成した時にデザインや設定を移行するのにも利用できるので覚えておくと使う場面があるかもしれません。

そらしど

最後まで読んでいただきありがとうございました。