宮崎暮らしの視点から、徒然なるままに。

Miyazaki Life

WordPress

WordPress公式テーマHestiaのカスタマイズ方法まとめ

更新日:

WordPress公式テーマで人気の「Hestia」は、とても使い勝手のよいテーマです。より好みのサイトを作るために便利な、Hestiaをカスタマイズする方法を紹介しているサイトをまとめました。




WordPressの公式テーマ「Hestia」について

Hestiaはカスタマイザーが豊富で、CSSを使わなくてもオシャレでかっこいいサイトが作れるテーマです。

HestiaのようにWordpressの公式から配布しているテーマは、ガイドラインの審査が入っているので安心!ライセンスはGPLまたはGPLに準じたものとなっているので、自由に利用することができます。

▼GPLライセンスについて詳しくはこちら

GPL ライセンスとは、General Public License の略で、GNU GPL と呼ばれることもあります。いかなる制約なしに、無保証で、4つの自由を認めるというのが基本思想の、オープンソースライセンスです。

4つの自由というのは、以下のような自由です :

  • どんな目的にも使用する自由
  • ソースコードを研究し、改変する自由
  • 他の人に再配布する自由
  • 改変したものを共有する自由

シンプルでカスタマイズしやすい設計のWordPressテーマLightningは、WordPress公式ディレクトリに登録されているテーマ。
-[保存版] WordPress テーマのライセンス、GPL のおはなし/ミルログ

Hestia子テーマの作り方とカスタマイズの知識

子テーマを作っておくと、”親テーマがアップデートした際に上書きされてしまう”といった惨事をまぬがれることができるので、最初に設定しておきたいところ。

Hestiaの子テーマを作ろうと、Hestiaの子テーマの作り方を紹介しているサイトや、そもそもの子テーマの作り方を参考に作業したところ失敗。

テーマ選択のデザインが表示されなかったり、

そもそものデザインが大幅に崩れたり...orz

Hestiaの子テーマを作るまでに、2時間費やしました。結論、検索で調べたサイトよりもHestia公式サイトで配布している子テーマを使えば簡単!w

公式サイトでの子テーマ配布ページ:How to create a Child theme for Hestia - ThemeIsle Docs

Hestia子テーマの反映の仕方

上記の公式サイトページに行くと、ダウンロードリンクが2つあります。Pro(有料版)なら上の「Hestia Pro Child Theme」のリンク、無料版なら下の「Hestia(Lite) Child Theme」のリンクをクリックします。

ダウンロードしたZipファイルをわかりやすい場所に保存しておき、外観→テーマのアップロードをクリック。

ファイルを選択で、ダウンロードしたZipファイルをアップロードすればOK。

テーマを有効化した後、現在のテーマに「Hestia Child」と表示され、表示崩れしていなければ成功です!

Hestiaテーマのカスタマイズあれこれ

Hestiaテーマのインストールから、Hestiaテーマの細かな設定方法の解説。

「ここを触ると、どうなるんだっけ?」とわからなくなった時にも、とても参考になるサイトです!

WordPress Hestia テーマのカスタマイズ・インストール~背景画像の設定(その1) | souichirou

フッターの表記を削除する

Hestiaのテーマのフッターには、以下のような表記が入っています。

コピーライトを自分のサイト表記に変更する方法です。

WordPressでテーマHestiaのフッターを削除する方法 | CroughtBlog

Hestiaの細かなデザイン調整

余白が気になる、色が気になる、フォントのサイズが気になる、個別記事の下の関連記事の表示を消したい・・・。

細かなデザイン調整をしたい時に、参考になるサイトです。

ワードプレステーマHestiaのカスタマイズ | 白いひまわり

Hestiaではないですが、デザインカスタマイズの基礎知識としてこちらのサイトも参考になります!

子テーマを作ってWordPressの既存テーマをカスタマイズする方法 | Webクリエイターボックス

ヘッダー画像のオーバーレイを削除

Hestiaのヘッダー画像には、文字を載せた時に見えやすいように、暗めのフィルター(オーバーレイ)が重なっています。

ただ、オーバーレイを重ねずに、そのままの画像を見せたいケースもあるんですよね。

そんな時に、オーバーレイを削除する方法です。

アイキャッチ画像が暗い【Hestia】 | 53rd.net

さかぽん
Hestiaお気に入りですが、ここがこうなったら・・・と気になる点を変更したい時に参考になるサイトを備忘録として。Heastiaのカスタマイズの参考になる記事を見つけたら、随時追加していきます。

-WordPress

Copyright© Miyazaki Life , 2018 All Rights Reserved.