WordPressテーマ「ハミングバード」のインストールと設定方法

2017

07/01

Updated

2018.11.11

2017

07/01

Published

2017.07.01

/ 坂野 健太

　 　　

\ この記事を共有 /

B!

リンクをコピーする

Wordpressテーマ「ハミングバード」のインストールと設定方法

坂野 健太

B!

リンクをコピーする

この記事では、ぼくが利用しているWordpressテーマ「ハミングバード」の設定方法を紹介しています。
開発元が同じ「アルバトロス」や「ストーク」の設定方法については、別の記事で紹介します（予定）。

スポンサーリンク

まずはハミングバードを購入しよう

ハミングバードは優良な有料テーマです。なので、購入しないと使えないんですね。
そこで、先ずは以下のサイト移動してハミングバードを購入します！！

１．「商品に関する利用規約に同意して購入する」にチェックを入れる
２．「ダウンロード版カートに入れる」ボタンをクリックする

３．「購入手続きへ」をクリックする

４．「初めてご利用のお客様」に必要な情報を入力して、「次へ」をクリックする

※「利用規約に同意します」「成人で申し込みます。または、未成年で保護者が利用規約に同意の上、申し込みます。」にチェックを入れます！

５．支払い方法を選ぶ
６．次へをクリックする

後は、決済を行い、決済後に表示されるダウンロード画面から「ハミングバード」をダウンロードするだけです。

ハミングバードのインストールをしよう

ハミングバードの購入ができたら、次はWordpressにインストールします。
その為には、まず「子テーマ」を開発元のopencageに行ってダウンロードしておく必要があります。

１．「hummingbird_custom.zip」をクリックしてダウンロードする

２．「Wordpressの設定画面」→「外観」→「テーマ」をクリックする

３．「新規追加」をクリックする

４．「テーマのアップロード」をクリックする

５．ハミングバードのダウンロードファイル（hummingbird.zip）を選ぶ
６．「今すぐインストール」をクリックする

７．「テーマのページに戻る」をクリックする

ハミングバードの設定をしよう

テーマはインストールしただけでは、まだまだ見た目も機能も十分ではありません。
ということで、早速、設定を行っていきます。

１．「外観」→「カスタマイズ」をクリックする

２．「サイト基本情報」を設定する

３．「サイトカラー設定」でブログ全体の色を設定する

背景色

メインテキスト

本文を表示する文字の色です。ぼくは初期値のままにしています。

リンク／リンク（マウスオン時）

リンクの色です。インターネットの世界では古くから「青色」がリンクの色として使われています。なので、青系の色がお勧めです。
また、リンクにマウスを乗せた時の色は、リンクの色と区別ができれば問題なしです！！

ヘッダー背景（メインカラー）

ハミングバード全体の印象を変える色です。後で設定する「記事ページの見出し背景（H2）」と同じ色にしておくと、全体の統一感が出ます。

ヘッダーテキスト

ヘッダーの「キャッチコピー」や「ブログタイトル」の色です。ヘッダー背景に溶け込んでしまわないよう、コントラストのある色を設定します。

ヘッダーリンク／ヘッダーリンク（マウスオン時）

ヘッダーリンクは、メニューの色になります。ここの色もヘッダー背景に溶け込まないような色にします。
そして、ヘッダーリンク（マウスオン時）は、メニューにマウスを乗せた時にメニューにマウスが乗せたことが分かるような色にしてください。

ラベル背景／ラベルテキスト


「カテゴリー」が記事タイトルの横や記事のサムネイルの上に表示される時の色です。背景を濃く、文字は薄くがぼくのお気に入りの配色パターンです。

入力フォーム背景

問合せフォームなどのテキスト入力欄の背景の色です。

記事ページの見出し背景（H2）

見出し2（H2）の背景色です。前述したヘッダー背景と同じ色にしておくと、色の統一感が出ます。
ちなみに、見出し２にある「ステッチ（点々）」を変更したい場合は、「投稿・固定ページ設定」で変更できます。

サイドバーリンク／サイドバーリンク（マウスオン時）

サイドバーに表示されるリンクの色と、リンクにマウスを乗せた時の色の設定です。

フッター背景／フッターテキスト／フッターリンク

フッターの色によってブログ全体のイメージがガラッと変わります。ヘッダーと同じ色だとメリハリがないので、同系の色で濃い色が良いです（ぼくの好みですけどwww）。
ピンクの枠がフッターテキスト、黄色の枠がフッターリンクです。

４．「サイトロゴ・アイコン」の設定をおこなう

ロゴ画像、ファビコン、アップルタッチアイコンを用意しておき、設定をします。
サイズはそれぞれ次の通りです。

IE用のファビコンはファビコン（.png）を作成後、画像変換サービスを使って変換すればOKです。
https://ao-system.net/favicon/

５．「トップページ設定」でブログの第一印象をめっちゃ良くする

トップページ設定は、「ブログの顔」です。多くの人が見るので、超大事です！！

（１）英語表示テキスト（大テキスト）
メルマガ登録LPへの誘導などあなたのウェブ集客導線の入口になる重要なテキスト部分です。このテキストによりLPへの誘導が大きく変わっていきます。
反応を見ながら改善してください。

（２）日本語表示テキスト（小テキスト）
大テキストの補足テキストです。

（３）ヘッダーアイキャッチ画像
トップページが表示されたとき、上からビヨーーーンとアイコンが降ってきます。どんなアイキャッチを設定するかはあなた次第です（＾＾）

（４）ヘッダーボタンテキスト／ヘッダーボタンURL
LPへのボタンとURLを設定します。トップページは、このリンクを如何に押してもらえるかがポイントです！！

６．「投稿・固定ページ」の設定をおこなう

見出し（H2）デザイン
見出し２（H2）のデザインは以外と目に付くので、シンプルよりステッチの方がぼくは好きです

記事下のシェアタイトルを入力

投稿日・更新日表示設定

始めて記事を投稿した日付を更新した日付の両方を出しておくことをオススメしています。
古い記事の場合、更新日が新しいとちゃんと更新していることを読者に伝える事ができます。

記事下のFacebookいいねボックスを表示

絶対に設定しておいて下さい。

７．「その他オプション」の設定をおこなう

ヘッダーのサイト内検索を表示する

これは表示しなくてもOKです

サイトディスクリプションを表示しない

表示しないにチェックを入れると、上の図のようにキャッチコピーが表示されなくなります。

［PC］トップページ記事レイアウト／［SP］その他一覧ページ記事レイアウト
シンプル

カード型

ビッグ

８．アクセス解析コードを設定する

Google Analyticsタグには、「UA」から始まるコードを入力します。
headタグには、＜head＞タグ内に設置する様々なコードを入力することができます。例えば、上記のようにFacebook Pixcelのコードとか。
全てのページの＜head＞タグ内に差し込まれます。

９．背景画像を設定する

背景画像の変更はちょっとした冒険です。慎重に設定してください。

１０．メニューの設定をおこなう

ハミングバードに設定できるメニュー位置2か所。メインメニューとフットメニューです。
そのほかの場所にメニューを設置する場合は、「ウィジェット」を使って設置します。

メインメニュー

フットメニュー

１１．ウィジェットの設定をおこなう

ここではすべてのウィジェットの設定はできません。すべてのウィジェットの設定をおこなうには、管理画面から「外観」→「ウィジェット」で行ってください。

１２．固定フロントページの設定をおこなう

「最新の投稿」に設定すると、常に新しい記事の一覧がトップページに表示されるようになります。
しかし、ぼくとしては「固定ページ」でオリジナルトップページを作成し、「フロントページ」に設定するのがお勧めです！！

１３．追加CSSの設定をおこなう

スタイルシートを使ってカスタマイズをする時に使用します。

ハミングバードを使い倒そう！！

設定が完了したら、全体を見直しながら細かく調整をしていって下さい。
調整と言っても、文字が見にくくないか、誤字がないか位です。
せっかく、書くことに集中する事ができるテーマを使い始めたので、デザイン面に時間はかけては意味がありません。
今後の改善ポイントとしては、次の２点です。

• トップページ設定のテキスト
• ウィジェット（CTA）

ハミングバードの最大のウリは、アニメーション機能。
特にトップページとCTAのアニメーションは目を惹きます。
だから、そこに魅力的なテキストや画像を配置することで、ウェブ集客が上手く行ったり、行かなかったりします。

ということで、もうデザインに悩まず記事を書く事のに集中していきましょう！！