Flatsome Themeを使用して独自のウェブサイトを構築するチュートリアル

FlatsomeはThemeforestウェブサイト上で売上No.1のWooCommerce Theme、本記事ではNaibaがFlatsomeを使ってどのように自分のウェブサイトを構築する。

Flatsomeを使用したサイト構築の前提条件

Flatsomeを自分のWordPress Themeとして使用したい場合、まず前提として自分自身のWordPressサイトを持っている必要があります。Naiba サイト構築ノートでは多くの関連チュートリアルを共有していますので、ここでは繰り返し紹介しません。

1. ウェブサイト構築の手順
2. 外国貿易ユーザーがおすすめするSiteGroundホスティングでのWordPressインストールチュートリアル

WordPressサイトをインストールした後、Flatsomeを使用して自分の外国貿易向け独立サイトを構築できます。

Flatsome使用チュートリアル

一、Flatsome Themeのインストール

1. ThemeForestで購入後、テーマファイルをダウンロードします購入先2. ダウンロードしたzipファイルを解凍し、テーマインストールパッケージをWordPress管理画面にアップロードしてインストールします。3. テーマを有効化し、ウィザード画面に入ります。下図の通りです：4. ウィザードに従って操作します。途中でキーの入力、子テーマ（Child Theme）の有効化、プラグインのインストール、コンテンツのインポートなどが求められます。キーをどこで取り戻すかわからない場合はここをクリック。 コンテンツのインポートが完了すると、ロゴのアップロードとプリセットテンプレートの選択が求められます。お好みのデモスタイルを選択してください。LOGO 画像は後で変更することもできます。 5、インポート完了インポートが完了したら、Setup WooCommerce を選択してショッピングプラグインの設定を行うか、View your new website をクリックしてサイトを閲覧できます。

二、Flatsome Themeのカスタマイズ

ウェブサイトのホームページでカスタマイズ（customize）ボタンをクリックすると、Themeに対して一連のカスタマイズ変更を行うことができます。ここでは、Themeの多くの部分を変更および設定でき、実際の状況に応じてパラメータを調整します。例えば、HeaderのPresetsではウェブサイトナビゲーションバーのスタイルを選択でき、Header Builder画面ではヘッダーに表示するコンテンツをドラッグして選択できます。サイトに国内ユーザーがいる場合は、StyleのTypographyでGoogleフォントを無効にすることをお勧めします。外国貿易向けサイトの場合は操作不要です。Googleフォントは比較的豊富で、スタイルも美しいためです。 カスタムコンテンツの設定が完了したら、公開ボタンをクリックします。

三、Flatsomeページレイアウトの変更

例えば、ウェブサイトのホームページのレイアウトを再修正したい場合、ウェブサイトのホームページで上部の編集ボタンをクリックするか、WP管理画面のページセクションでホームページのページを見つけて編集します。 Edit with UX Builderを選択し、ページビルダーの編集画面に入ります。以下の図の通り：上図では、左側のナビゲーションは現在のページのレイアウトです。最上部に2つのバナーがあることがわかります。最初のバナーの内容をクリックすると、直接テキストを編集できます。 Bannerの設定optionsをクリックすると、バナーの詳細設定に入り、背景画像やレイアウトなどの内容を変更できます。 セクションとセクションの間で、➕プラス記号をクリックして新しいセクションを追加できます。追加可能な内容は以下の図の通りです：これらの機能モジュールを使用して、ページのレイアウトと内容を自分でカスタマイズできます。すべての内容をデバッグした後、更新をクリックして新しいページを公開します。すべての設定が完了したら、製品をアップロードしてウェブサイトを公開・運営できます。以上が、Naibaが皆さんに紹介するFlatsomeテーマを使用して自分のウェブサイトを構築する方法チュートリアルを選択する必要があります。