5分でできるSWELLデモサイトの着せ替え完全マニュアル

こんにちは。おもち(omochi.biz)です。

こちらのページでは、WordPressブログのサイトデザインをSWELLのデモサイトと同じデザインに着せ替える方法についてわかりやすく解説していきます。

おもち

ワードプレスにSWELLテーマをインストールしてから始めよう!

ワードプレスにSWELLテーマをインストールする方法はこちら

目次

STEP1.デモデータをダウンロードしよう

swellデモサイトの着せ替え方法 ステップ1:swellデモサイトの一覧をひらく

まずはSWELLのデモサイト一覧から、あなたのお好きなデモサイトを1つえらんでください。

おもち

デモで使われている色味はあとから自由にかえられるよ!

swellデモサイトの着せ替え方法 ステップ2:デモデータをダウンロードする

お気に入りのデモサイトが決まったら、SWELLデモデータのダウンロードページをひらきます。

ダウンロードしたいデモサイト番号の右側にある『ダウンロード』ボタンをクリック。

おもち

これでデモデータがダウンロードできたよ!

swellデモサイトの着せ替え方法 ステップ3:zipファイルがダウンロードできました

ダウンロードしたzipファイルは、そのままでは使えないので、ファイルを展開していきましょう。

パソコンのダウンロードをひらいて、ダウンロードしたファイルの上で右クリック。

swellデモサイトの着せ替え方法 ステップ4:『すべて展開』をクリックする

『すべて展開…』をクリック。

swellデモサイトの着せ替え方法 ステップ5:『展開』

展開先を確認して『展開』ボタンをクリック。

swellデモサイトの着せ替え方法 ステップ6:zipファイルが展開できました

展開されたファイル内にある『swell_demo〇〇.dat』をつかって、デモサイトの着せ替えをやっていきましょう。

STEP2.WordPressに『Customizer Export/Import』プラグインを追加しよう

swellデモサイトの着せ替え方法 ステップ7:ワードプレスをひらいて『プラグイン』にある『新規プラグインを追加』をクリックする

ワードプレスをひらいて、画面左側にあるメニューの『プラグイン』にカーソルをもっていき、表示された『新規プラグインを追加』をクリック。

swellデモサイトの着せ替え方法 ステップ8:プラグインの検索に『Customizer Export/Import』と入力する

プラグインの検索に『Customizer Export/Import』と入力。

swellデモサイトの着せ替え方法 ステップ9:『今すぐインストール』ボタンをクリックする

検索結果に表示されたCustomizer Export/Importにある『今すぐインストール』ボタンをクリック。

swellデモサイトの着せ替え方法 ステップ10:『有効化』ボタンをクリックする

そのまま『有効化』ボタンをクリック。

STEP3.SWELLのデモデータをWordPressにインポートしよう

swellデモサイトの着せ替え方法 ステップ11:『カスタマイズ』をクリックする

画面左上にある『カスタマイズ』をクリック。

swellデモサイトの着せ替え方法 ステップ12:『エクスポート/インポート』をクリックする

画面左側のメニューにある『エクスポート/インポート』をクリック。

swellデモサイトの着せ替え方法 ステップ13:『ファイルを選択』ボタンをクリックする

インポートの『ファイルを選択』ボタンをクリック。

swellデモサイトの着せ替え方法 ステップ14:デモデータを選択する

さきほど展開したファイル内にある『swell_demo〇〇.dat』を選択。

swellデモサイトの着せ替え方法 ステップ15:画像ファイルをダウンロードしてインポートしますか?にチェックする

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

swellデモサイトの着せ替え方法 ステップ16:『インポート』ボタンをクリックする

『インポート』ボタンをクリック。

おもち

これでデモサイトの着せ替えはOK!あなた好みにカスタマイズしていこう!

参考までに:サイトのメインビジュアルを変更する方法

swellデモサイトの着せ替え方法 ステップ17:『トップページ』をクリックする

画面左側のメニューにある『トップページ』をクリック。

swellデモサイトの着せ替え方法 ステップ18:『メインビジュアル』をクリックする

『メインビジュアル』をクリック。

swellデモサイトの着せ替え方法 ステップ19:メインビジュアルで動画を選択する

サイトのメインビジュアルは、こちらで変更できます。

swellデモサイトの着せ替え方法 ステップ20:動画は『動画を選択』よりアップロードする

メインビジュアルに動画を配置したい場合は『動画の設定』よりファイルをアップロードしてください。

swellデモサイトの着せ替え方法 ステップ21:メインビジュアルで『画像』を選択する

メインビジュアルに画像を配置したい場合は、メインビジュアルの表示内容で『画像』を選択。

swellデモサイトの着せ替え方法 ステップ22:画像は『画像を選択』よりアップロードする

『各スライドの設定』より画像をアップロードしてください。

swellデモサイトの着せ替え方法 ステップ23:フィルター処理を指定する

『フィルター処理』をつかえば、さらにあなた好みのメインビジュアルにカスタマイズできます。

swellデモサイトの着せ替え方法 ステップ24:メインテキストを入力する

メインビジュアルの上にテキストを配置したい場合は『メインテキスト』にお好きな文字列を入力してください。

おもち

改行したいときは『<br>』を入力すると改行できるよ!

swellデモサイトの着せ替え方法 ステップ25:『公開』ボタンをクリックする

設定が終わったら『公開』ボタンをクリック。

おもち

『公開』ボタンをクリックしないと、変更した設定が保存されないから気をつけてね!

swellデモサイトの着せ替え方法 ステップ26:『×』マークをクリックする

画面左上にある『×』マークをクリックすると、ワードプレスのダッシュボード画面にもどれます。

STEP4.WordPressからプラグインを削除しよう

ワードプレスにデモデータをインポートする必要がなくなってから作業してください。

swellデモサイトの着せ替え方法 ステップ27:不要になったプラグインは『無効化』をクリックする

不必要になったプラグインは削除しておきましょう。

ワードプレスをひらいて画面左側のメニューにある『プラグイン』をクリック、Customizer Export/Importの下にある『無効化』をクリック。

swellデモサイトの着せ替え方法 ステップ28:『削除』をクリックする

無効化できたら『削除』をクリック。

おもち

プラグインはいつでも追加できるので、安心して削除してOKだよ!

サイトデザインは、ある程度、ブログ記事がないと進まないので、必要なプラグインをインストールしてからブログ記事作成をしていきましょう。

主婦向けブログの始め方完全ガイドにもどる

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次