こんにちは、おひとりさまブロガー和泉です！
今回は、人気のWordPress無料テーマ「hestiaカスタマイズ方法」を徹底解説します。
動画解説もやっているので参考にしてください。
目次
WordPressテーマ「hestia」の基本的なスペック
まずは、WordPress無料テーマ「hestia」の基本的なスペックについて解説します。
「hestia」の基本的なスペックは、、、
- ホームページ風にすることが出来る
- SEO最適化済
- １カラム、２カラム変更可
- レスポンシブ対応
- フォント変更可
デモサイト紹介動画
動画準備中
「hestia」カスタマイズ設定方法 step１．テーマをダウンロード
ここからは「hestia」のカスタマイズ方法について解説していきます。
カスタマイズを始める前に、「hestiaテーマ」をダウンロードしましょう。
【手順１】 管理画面の「ダッシュボード 」→ 「外観」 → 「テーマ」を開く
【手順２】 テーマの「新規追加」をクリック
【手順３】 「hestia」で検索をし、「インストール」します
【手順４】 インストールが完了したら、「有効化」します
これでひとまず、「hestia」テーマのダウンロードが完了です。
以下のページがデフォルトの表示になります。
「hestia」カスタマイズ設定方法 step２．基本設定
ここからは「hestia」テーマの基本設定をしていきます。
▼ ダッシュボード → 外観 → カスタマイズを開く
１．テーマ推奨のプラグインを入れる
▼ テーマお勧めの「Orbit Fox Companion 」プラグインを入れましょう
このプラグインを入れることで、「hestia」テーマの良さが発揮されますので、入れるようにしてくださいね。
２．サイト基本情報(ロゴ、サイトタイトル、アイコン)
「サイト基本情報」のカスタマイズ方法を説明します。
▼「サイト基本情報」では、ロゴ、サイトタイトル、サイトフレーズ、アイコンを変更することが出来ます。
[spcolwrap][spcol2]
[/spcol2][/spcolwrap]
- 「ロゴ」：サイト上に表示されます。
- 「サイトタイトル」：ロゴ画像にマウスをあてると表示されます。
- 「キャッチフレーズ」：表示されませんが、入力しておきましょう。
- 「サイトアイコン」：ブックマークされた時にサイトの目印になるものです。
サイトタイトルは、SEO効果が高い箇所です。何のブログか明確にすると良いでしょう。記事が増えてからの変更はあまりしないほうが良い。２．外観設定(レイアウト、見出し、フォントサイズ、背景画像)
「外観設定」のカスタマイズ方法を説明します。
▼「外観設定」では、サイト全体のレイアウト、見出し、背景画像の設定をすることができます。
「一般設定」の変更
レイアウトの変更をすることが出来ます。
- 「ページサイドバーレイアウト」：トップページのレイアウトカラムを選択できます。デフォルトでは、１カラム。
- 「ブログサイドバーレイアウト」：ブログ記事を開いたときのレイアウト。デフォルトでは、２カラムになっていいます。
「タイポグラフィ」変更
ブログ全体のフォントの変更やフォントのサイズ変更が出来ます。
[spcolwrap][spcol2]
[/spcol2][spcol2]
[/spcol2][/spcolwrap]
- 「フォントファミリー」：見出しや本文のフォントを変えることが出来ます。
- 「フォントサイズ」：タイトル、見出し、セクションなどのフォントサイズを変えることができます。
フォントサイズは、ユーザー目線でたって、大き過ぎず、小さ過ぎずで設定しましょう。「背景画像」変更
背景画像は必ず設定しなければいけないものではありませんが、入れるとオシャレになります。
↓背景画像を入れてみました。
３．フロントページセクション(トップページの文字などの変更)
「フロントページセクション」のカスタマイズ方法を説明します。
▼「フロントページセクション」では、トップページに表示されている大きな文字などを変更できます。
「大見出しセクション」の変更
トップページに表示されている文字を変えることが出来ます。
[spcolwrap][spcol2]
[/spcol2][/spcolwrap]
- 「大見出し背景」：トップページの見出し背景画像の変更
- 「タイトル」：ブログタイトルとは別の文言を書いて問題ありません
- 「テキスト」：キャッチコピーとは別の文言を書いて問題ありません
- 「ボタンの文字列」：リンクの文言を入れましょう
- 「ボタンリンク」：リンクを入れましょう
- 「レイアウト」：タイトルやボタンなどの位置を設定
セクションのタイトルは、ブログで伝えたいことのキャッチコピーのようなものを入れると良いです「Features」の変更
トップページのコンテンツメニューの一覧のカスタマイズをすることが出来ます。
[spcolwrap][spcol2]
[/spcol2][spcol2]
[/spcol2][/spcolwrap]
- 「Section Title」：セクションの名前を入れます
- 「Section subTitle」：セクションの説明文を入れます
- 「Feature」：各項目のアイコン・タイトル・テキスト・リンクを変更できます
この項目が必要ない場合は、「Disable section」にチェックを入れましょう「私たちについてセクション」の変更
セクションの言葉や背景を変更することができます。
- 「私たちについての内容」：セクションの見出しや内容を変更できます
- 「私たちについて」：セクションの背景を変更できます
「Team」の変更
セクションのテキスト、画像の変更できます。
- 「Section Title」：セクションの見出しタイトルを変更できます
- 「Section Subtitle」：セクションのテキストを変更できます
- 「Team Content」：各コンテンツの画像やタイトル・テキストを変更、SNSの設定ができます
「ブログ」の変更
トップページに表示されるブログ記事の表示件数などを変えることができます。
- 「セクションタイトル」：ブログのセクションタイトルを変更できます。
- 「セクションサブタイトル」：ブログのセクションサブタイトルを変更できます。
- 「項目数」：ブログの表示件数を変更できます。
ブログの表示件数は、ホームページのようにする場合は5件くらいまでがちょうど良いです「連絡先セクション」の変更
フッターの連絡セクションを変更することができます。
[spcolwrap][spcol2]
[/spcol2][spcol2]
[/spcol2][/spcolwrap]
- 一般設定「背景画像」：フッターセクションの背景画像を変更
- 一般設定「セクションタイトル」：セクションタイトルを変更
- 一般設定「セクションサブタイトル」：セクションのサブタイトル変更
- 一般設定「フォームのタイトル」：問い合わせフォームのタイトル変更
- 連絡先の本文「連絡先の本文」：連絡テキストを変更できます
- 連絡先の本文「Pirate Formsプラグインインストール」：問い合わせフォームを設置するためにはプラグインをインストールしてください
４．ブログ設定
「ブログ設定」のカスタマイズ方法を説明します。
▼「ブログ設定」では、トップページに表示されているブログセクションの表示選択をすることが可能です。
カテゴリごとに表示することが出来ます。
- ブログ設定「おすすめ投稿」：ブログセクションの表示設定をすることが出来ます。
カテゴリーを追加することで項目を増やすことが出来ます。
５．ヘッダーオプション
「ヘッダーオプション」のカスタマイズ方法を説明します。
▼「ヘッダーオプション」は、主にウィジェットやメニューの設定になります。
①「トップバー」の変更
「トップバー」については、ウィジェットやメニューで変更することをお勧めします。
後ほどの項目で、ウィジェットの触り方やメニューの設定方法について解説するので、そちらも参考にしてください。
②「ナビゲーション」の変更
ヘッダーのレイアウトを変更することができます。
この項目は、「外観」中の「ウィジェット」や「メニュー」で変更するほうがやりやすいです。6．色
「色」のカスタマイズ方法を説明します。
▼「色」は、トップページの背景色やリンクボタンの色を変えることが出来ます。
①「背景色」の変更
背景画像を設定している場合は、変更しても見えませんが画像を設定していない場合はここから変えることができます。
②「アクセント色」の変更
トップページのリンクボタンの色を変更することができます。
6．ホームページ設定
「ホームページ設定」のカスタマイズ方法を説明します。
▼「ホームページ設定」では、トップページをホームページ風にするか、最新記事一覧のブログ表示にするか選択することが出来ます。
- 最新の投稿：ブログ記事一覧の表示になります。
- 固定ページ：ホームページ風になります。
この項目は、カスタマイズを始める時点で先に設定しておくことをおススメします。「hestia」カスタマイズ方法 step３．すべてのの設定を動画で解説
「hestia」のすべてのカスタマイズ方法を動画で解説しました！
- トップページのカスタマイズ
- セクションごとのカスタマイズ
- ウィジェット(サイドバー、トップバーフッター)の追加・変更
- メニュー(メイン、フッター、SNS)の追加・変更
などを解説していますので、参考にしてください。
動画準備中
|
|
