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

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

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

そらしど

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

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

目次

SWELLとデモサイトの概要

SWELLとデモサイトの概要

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

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

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

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

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

解決方法

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

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

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

STEP
SWELLERS’へ会員登録
ここをクリックすると手順を開閉できます

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

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

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

STEP
SWELLERS’ ページでデモサイトのデータをダウンロード
STEP
ダウンロードしたZIPファイルを解凍
STEP
Customizer Export/Importをインストール
STEP
カスタマイズ画面のExport/Import設定欄に画面遷移
STEP
インポートするdatファイルを選択
STEP
チェックボックスをチェックして「インポート」ボタンを押す

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

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

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

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

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

SNS設定

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

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

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

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

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

SWELLSNS情報設定欄

ヘッダーロゴ

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

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

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

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

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

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

コピーライト

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

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

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

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

SWELLコピーライト設定

グローバルナビ

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

変更したい場合はカスタマイズ画面で修正しましょう。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つ目のサイトを作成した時にデザインや設定を移行するのにも利用できるので覚えておくと使う場面があるかもしれません。

そらしど

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

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

よかったらシェアしてね!
目次
閉じる