Hestia（テーマ）の続き

WordPressのテーマのHestiaのカスタマイズについての記事。

インストールから外観設定までについては前回の記事を参照。

今回はフロントページセクションについての記事とする。

Hestiaではフロントページに複数のセクションの配置が出来て予め用途に応じた様々なセクションが用意されている。

大見出しセクション	フロントページ（ホームページ）の一番先頭の大見出しについて設定をするセクション
Featuresセクション	ホームページの特徴をアピールするセクション
「私たちについて」セクション	「私たちについて」記述するセクション
Teamセクション	自分たちのチーム、メンバーについて紹介するセクション
Ribbonセクション	リボン（横帯）のセクション ボタンも配置可能
Testimonialsセクション	お客様の声を紹介するセクション
Clients Barセクション	取引先を紹介するセクション
購読セクション	ニュースレターの購読を促す為のセクション
ブログセクション	ブログページへのリンクセクション
連絡先セクション	お問い合わせ用、連絡先のセクション
ショップセクション	ECサイトへのセクション プラグインのインストールが必要

フロントページセクション

大見出しセクション

フロントページ（ホームページ）の一番先頭の大見出しについて設定をするセクション。

トップ画像やタイトル、ボタン、ウィジェットなどを表示・設定する事ができる。

大見出しの背景	フロントページの最上部の背景画像を設定する 画像 Parallax の２パターンが選択できる Parallaxを選択した場合、レイヤー１（後方）とレイヤー２（前方）の２つの画像が設定できる様になり、マウスオーバーの動きに合わせて前後の画像がズレて動くパララックス背景画像となる レイヤー１：白ブロック壁 レイヤー２：水玉（透過）
タイトル	大見出しのタイトル
テキスト	大見出しのテキスト
ボタンの文字列	大見出しにボタン（リンク）を表示することができる その時のボタンの文字列。未入力の時はボタンは表示されない
ボタンのリンク	上記ボタンをクリックした時のリンク先

大見出しセクション、＋追加

タイトルやテキストの配置を３パターンから選択できる。

	タイトルやテキストを左寄せで表示する 右側にはウィジェットを表示させる事ができる 下記はカレンダーウィジェットを表示させた例 レイアウトを選んだ後、大見出しセクションサイドバーでウィジェットを追加する
	タイトルやテキストを中央に表示する（デフォルト） ウィジェットは表示できない
	タイトルやテキストを右寄せで表示する 左側には左寄せの時と同様にウィジェットを表示させる事ができる

Featuresセクション

ホームページの特徴をアピールするセクション。

タイトルと説明文の他に他のページへリンクするアイコンが表示ができる。

Disable section	チェックをするとこのセクションが非表示となる
Section Title	セクションのタイトル
Section Subtitle	サブタイトル タイトルの下に表示される説明文
Features Content	コンテンツ 下記の例では３つだが追加、削除する事ができる コンテンツの設定については下記参照

Features Contentの追加・設定

１．「Add New Feature」ボタンでFeatureを追加

２．追加されたFeatureをクリック

３．Featureの設定

アイコン	プルダウンの中からアイコンを選択する
色	色を設定する
タイトル	アイコンに対するタイトルを記述する
テキスト	テキストを記述する
リンク	アイコンをクリックした時のリンク先

「私たちについて」セクション

「私たちについて」記述するセクション。

背景画像と文章でセクションが構成される。

セクションを無効にする	チェックをするとこのセクションが非表示となる
「私たちについて」の内容	「編集」ボタンを押すと内容の編集が可能 WordPressのメニューから固定ページー＞ホームページで編集しても良い
「私たちについて」セクションの背景	このセクションの背景画像

Teamセクション

自分たちのチーム、メンバーについて紹介するセクション。

メンバーの写真、紹介文、SNSなどを表示する事ができる。

Disable section	チェックをするとこのセクションが非表示となる
Section Title	セクションのタイトル
Section Subtitle	セクションの説明文
Team Content	チームのメンバー 「Add New Team Member」ボタンでメンバーの追加が可能 メンバーの追加については下記参照

Team Memberの追加・設定

１．「Add New Team Member」ボタンでTeam Memberを追加

２．追加されたTeam Memberをクリック

３．Team Memberの設定

画像	メンバーの画像を指定する
タイトル	メンバーの名前を指定する（のがおすすめ）
サブタイトル	メンバーの役職を指定する（のがおすすめ）
テキスト	メンバー紹介文
リンク	メンバー（画像）をクリックした時のリンク先
ソーシャルアイコン	SNSのアイコンとリンク先を複数指定する事ができる

Ribbonセクション

リボン（横帯）のセクション。

リボンの様に横長の領域で背景画像、テキスト、ボタンを配置することができる。

Disable section	チェックをするとこのセクションが非表示となる
Background Image	このセクションの背景画像
Text	テキスト
Button Text	ボタンの文字列
Link	上記ボタンをクリックした時のリンク先

Testimonialsセクション

Testimonials（お客様の声）を紹介するセクション。

Disable section	チェックをするとこのセクションが非表示となる
Section Title	セクションのタイトル
Section Subtitle	サブタイトル
Testimonials Content	お客様の声 「Add New Testimonial」ボタンでお客様の声の追加が可能 お客様の声の追加については下記参照

Testimonial（お客様の声）の追加・設定

１．「Add New Testimonial」ボタンでTestimonialを追加

２．追加されたTestimonialをクリック

３．Testimonialの設定

画像	お客様の画像
タイトル	セクションのタイトル
サブタイトル	サブタイトル
テキスト	テキスト
リンク	お客様の画像をクリックした時のリンク先

Clients Barセクション

Client（取引先）を紹介するセクション。

ロゴ（とリンク）で紹介をするので関連会社などの紹介にも使える。

Disable section	チェックをするとこのセクションが非表示となる
Clients Bar Content	取引先 「Add New Client」ボタンで取引先の追加が可能 取引先の追加については下記参照

Client（取引先）の追加・設定

１．「Add New Client」ボタンでClientsを追加

２．追加されたClientsをクリック

３．Clientsの設定

画像	Clientのロゴ
リンク	ロゴ（画像）をクリックした時のリンク先

購読セクション

ニュースレターの購読を促す為のセクション。

メールアドレスの収集、SMTPを使ったメールの送信を行うにはSendingBlueプラグインをインストール＆有効化した後、アカウント（無料）を取得して設定を行う必要がある。

SendingBlueプラグインの設定については別記事とする。

セクションを無効にする	チェックをするとこのセクションが非表示となる。
背景画像	このセクションの背景画像
セクションタイトル	セクションのタイトル
セクションサブタイトル	サブタイトル
ウィジェットを追加	購読セクションにウィジェットを追加する。 試しにカレンダーウィジェットを追加してみた。

ブログセクション

ブログページのセクション。

フロントページからブログへ行く導線はメニューからと、このセクションからの２通り作成可能。

セクションを無効にする	チェックをするとこのセクションが非表示となる。
セクションタイトル	セクションのタイトル
セクションサブタイトル	サブタイトル
項目数	最新記事の抜粋を表示する数

連絡先セクション

お問い合わせ用、連絡先のセクション。

お問い合わせフォームで入力されたメッセージが設定されたメールアドレスに飛んでくる。

メールアドレスやSMTPなどの設定はPiarte Formsプラグインにて行う。

プラグインの設定については別記事とする。

セクションを無効にする	チェックをするとこのセクションが非表示となる。
背景画像	このセクションの背景画像
セクションタイトル	セクションのタイトル
セクションサブタイトル	サブタイトル
フォームのタイトル	問い合わせフォームのタイト

ショップセクション

ショップセクション（ECサイト）を利用するにはWooCommerceプラグインを有効にする必要がある。

そのうち試してみるつもり。

つづく

フロントページセクションについては以上で終了。

「ブログ設定」以降については次の記事に続く。