Wordpressの無料テーマ“Hestia”おすすめカスタマイズ

WordPressの無料テーマ巡りその2「Hestia」。海外のテーマですが、カスタマイズ画面は日本語に翻訳されているので理解しやすく使い勝手が非常によいです。何がいいかって、そのシンプルなデザインとカスタマイズ性（機能性）です。

Hestiaはトップ画面でECサイト、メルマガ登録まで出来る！
- カスタマイズ画面で設定できる機能（そのまま使えるセクション）
- Hestiaの設定で困った事と解決方法
WordPressの無料テーマ巡り一覧

Hestiaはトップ画面でECサイト、メルマガ登録まで出来る！

まずは、無料でカスタマイズ出来ることを一覧でご紹介します。

カスタマイズ画面で設定できる機能（そのまま使えるセクション）

ざっとこれだけの機能が備わっています。

大見出しセクション（トップページ）
Features（トップカテゴリ）※何項目でも追加OK
私たちについてセクション（固定ページ）※作り込み自由
ショップセクション（ECショップ）※WooCommerceで設定
Team（メンバーやグッズ、外部リンクの紹介）※何項目でも追加OK
Ribbon（ニュースレターなどの外部リンクの紹介）
Testimonials（クライアントのメッセージ※お客様の声）※何項目でも追加OK
Clients Bar（スポンサーやクライアントのロゴ掲載部分）
登録（メルマガなどの登録画面）※SendinBlueで設定
ブログ（ブログページへのリンク）
お問い合わせ（WPFormsで設定）※contactform7でも設定可

もちろん、必要のないところはチェックボタン一つで消すことが出来ます。これでも十分ですが、無料版で出来ないこととして紹介されているのはこちら。

ヘッダースライダー（プラグインで可能）
PRO 自由にカスタマイズ可能な配色（これも追加CSSで対応可）
PRO Jetpack ポートフォリオ（他のプラグインで可能）
PRO 料金プランセクション（固定ページで作れる）
PRO セクションの並べ替え（これが、無料で欲しかった…！）

以下、上の詳細説明
* ヘッダーオーバーレイ、ヘッダー文字列、ナビゲーションバーの色を変更できます。
* 2種類のレイアウトが可能なポートフォリオセクション
* 自由にカスタマイズ可能な料金テーブルセクション
* パネルをドラッグ & ドロップして、セクションの並び順を変更します。
* 素早く簡単にフロントページセクションを並べ替えできます。

というように、無料版でも十分すぎるくらいの高性能。CSSが理解できれば大体のことは出来ちゃいます。

Hestiaの設定で困った事と解決方法

今月納品させていただいたお客様のWEBサイトもこちらのHestiaで作ったのですが、苦戦したところもありました。以下、解決できたところを紹介します。

ヘッダー画像がposition:coverで設定されているため、中央にデザイン要素を持ってこないとレスポンシブで左右が消えてしまう。

解決方法：
デザインが変更できない場合、background-sizeで小さくするか、positionで位置を指定する。（ただし、タブレット&スマホ版での見え方も考慮すること）

下層ページのヘッダーが全て同じ画像になってしまう。
固定ページはヘッダーにタイトルが被らない設定があるが、投稿ページにはない。（必ずタイトルがヘッダーにかぶってしまう）

解決方法：
文字被りに依存しない画像やデザインを作ること。どうしても消したい場合はdisplay:noneで消す。（ただし、投稿ページまで消えてしまわないようclass指定に注意）

追加CSSでコメントアウトが適応されない（保存できない）

解決方法：
今のバージョンでは出来るみたいです。以前はエラーが吐かれた。バージョン以外で何か理由があるのかも。いや、ないのかも。

フッターのコピーライトを変更したい

解決方法：
テーマエディターでphpを書き換えます。場所は「inc/views/main/class-hestia-footer.php」の133行目あたり。この部分です。

この中でフッターに入ってる文字を変更すればOKです。念のため、変更する前はバックアップをとっておきましょうね。

大見出しセクションのヘッダー画像の高さを変えたい

解決方法：
こちらは公式ガイドに載っています。

.home .page-header{ height: 600px !important; } 
.carousel .page-header { min-height: unset !important; }

このコードの600pxのところを任意の数字に変更すればOKです。
ヘッダーの高さをフルハイト（ヒーローヘッダー）にしたい場合は、

.page-header {  height：100vh！important }

で、トップページだけをフルハイトにしたい場合は、代わりに次のコードで出来るみたいですね。

.home .page-header {  height：100vh！important }

トップ画像のオーバーレイを取りたい

.header-filter::before { background-color: transparent; }

大体こんな感じでカスタマイズが可能です。

もっといろんなカスタマイズ方法を知りたい場合は、カスタマイズ画面の「Hestia ドキュメンテーション」からガイドラインが見れますので参考にしてみてください。ピンポイントで検索したければ、英語で入力して出てきた検索画面を翻訳すれば大体読めます。（コードも和訳されるので気をつけて）

今後、ECサイトを作ってみたいと思っているので、また進んだら報告します。