WORDPRESS テーマ 【ハミングバード】カスタマイズ方法

1

はじめに

【推奨環境】

このレポート上に書かれている URL はクリックできます。できない場合は最新の

AdobeReader をダウンロードしてください。（無料）

http://www.adobe.co.jp/products/acrobat/readstep2.html

目次

はじめに ............................................................................................................................................................................................................................ 1

①サイト基本情報からブログタイトルの設定をします。 .................................................................................................................. 2

②記事レイアウトの変更 ................................................................................................................................................................................... 2

③トップページのカスタマイズ ..................................................................................................................................................................... 3

④ウィジェットの追加 ....................................................................................................................................................................................... 4

④－１：ウィジェット作成方法 ..................................................................................................................................................................... 5

⑥メニューの設置................................................................................................................................................................................................. 5

⑥－１：トップメニューの設置 ..................................................................................................................................................................... 6

⑦サイトカラーの変更 ....................................................................................................................................................................................... 6

ハミングバードにはオススメ出来ないプラグイン .................................................................................................................................... 7

ハミングバードでの投稿テクニック ................................................................................................................................................................ 7

①[ショートコード] AddQuicktag について ................................................................................................................................................ 7

①－１AddQuicktag のインストール ............................................................................................................................................................. 7

①－２ADDQUICKTAG の設定方法 ............................................................................................................................................................. 8

①－３ショートコードの基本的な使い方 .................................................................................................................................................. 8

②スライダー付き記事一覧 .............................................................................................................................................................................. 9

②－１スライドショー用のタグを作成 ....................................................................................................................................................... 9

②－２スライドショーに含めたい記事に①で作成したタグをつける ......................................................................................... 10

2

ダッシュボード⇒外観⇒カスタマイズ

左のカスタマイズメニューを使って変更します。

【基本情報】

①サイト基本情報からブログタイトルの設定をします。

「サイトのタイトル」にブログのタイトルを入れ、「キャッチフレーズ」、「サイトアイコン」の設定を

します。ファビコンは設定しなくても良いです。ファビコンは正方形画像です。

ファビコンは下記画像のようなサイトのタブに出てくる画像です。

②記事レイアウトの変更

「カスタマイズ」→「その他オプション」。まずは記事の表示をカード型かシンプルか設定します。アニ

メーションのオンオフもこの画面から行えます。

3

③トップページのカスタマイズ

「外観」→「カスタマイズ」→「トップページ設定」

→「英語表示テキスト」・「日本語表示テキスト」を編集します。空欄のままではヘッダー画像が表示されません。

ヘッダー背景画像を指定します。画像サイズは 1200×740px くらい

アイキャッチ画像を設定したいときは、アイキャッチ画像を指定してセットします。

（アイキャッチ画像は推奨画像サイズよりも少し大きめ 640 × 371px のもの）

その他オプションとしてリンクボタンを入力するとリンクをつけることができます。

アイキャッチを設定するとヘッダー画像の

左側に表示されます。

ロゴとかあれば可愛いです。

任意のページのリンクを設定すると赤

枠内にリンクが付きます。

4

著作権フリー写真

https://pixabay.com/ja/

https://www.photo-ac.com/

https://girlydrop.com/

④ウィジェットの追加

ウィジェットには、サイドバーやフッターなどに表示させたい項目を追加できます。

メインサイドバー

「ウィジェット」→「メインサイドバー」→「ウィジェットを追加」。「プロフィール」、「人気のある

投稿」、「最新記事」、「SNS」等々。GoogleAdsense などの広告も簡単に表示できます。

フッター

「ウィジェット」→「メインサイドバー」→「ウィジェットを追加」でフッターに表示させたい項目を追

加できます。

１．メルマガ（オファー）

２．プロフィール

３．検索窓

４．カテゴリー

５．人気記事

６．SNS

７．メルマガ（オファー）

例えばこのような順番でセットすると

良いかと思います。

※ここは好みですので色々試してみてください。

左⇒プロフィール

中央⇒Twitter/YouTube

右⇒メニュー

例えばこのような順番でセットすると

良いかと思います。

※ここは好みですので色々試してみてください。

5

④－１：ウィジェット作成方法

プロフィールなどの入力はテキストを使うのがオススメです。

テキストは、投稿するときの方法と同じで入力することが出来ます。

画像も【メディアを追加】から簡単に追加できます。

URL を入れてリンクにしたいときは、リンクにしたい文字を選択し

🔗のマークをクリックしてください。

画像も🔗マークをクリックすると URL 貼り付けることが出来ます。

HTML タグ入力はテキストのテキストモードで。

これは Twitter などの埋め込みの HTML タグ入力するときの方法です。

タグはコピペするだけでオッケーです。

⑥メニューの設置

メニューはトップとフッターの二ヶ所に設置出来ます。

トップメニュー…

トップページの上にあるメニューバー

フッターメニュー…

トップページの下にあるメニューバー

6

⑥－１：トップメニューの設置

「カスタマイズ」→「メニュー」→「メニューを新規作成」→メニュー名を入力、グローバルナビにチェ

ック→次へ→「＋項目を追加」（グローバルナビがヘッダーメニューということになります）

「カスタムリンク」に HOME に戻るリンクを入れましたが、他にプロフィール、カテゴリー、サイトマッ

プ、お問い合わせなどお好みで必要な項目を追加します。

例えばこんな感じで設置します。

カスタムリンクは URL を入力するとその URL に飛びます。

投稿記事や固定ページを設置することも可能です。

⑦サイトカラーの変更

『ハミングバード』では、各項目のカラーを簡単に変更することが可能です。自分のブログのイメージに

合ったカラーを選びましょう。

１）「外観」→「テーマ」→「カスタマイズ」→「サイトカラーの設定」

カラーの変更はリアルタイムビューで見ることが出来ます。

・背景…全体の色

※背景画像が設定されていたら色は変更されません

・メインテキスト…投稿の文字色

・リンク…投稿のリンクの色

・リンク（マウスオン時）…投稿のリンクに

マウスを持っていったときの色

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

タイトルが入っているところの色

・ラベル背景…カテゴリーの枠

・ラベルテキスト…カテゴリー枠内の文字色

・入力フォーム…お問合せや検索フォームの色

・記事ページの見出し背景(H2)…投稿するときの見出し２の色

・サイドバーリンク…サイドバー内のリンクの色

・サイドバーリンク（マウスオン時）…サイドバー内のリンクにマウスを持っていったときの色

・フッター背景…フッター(一番下の帯のようなところ)の色

・フッターテキスト…フッターの文字色

・フッターリンク…リンクの場合の文字色

7

ハミングバードにはオススメ出来ないプラグイン

・Jetpack の 「photon」

・Jetpack の 「共有」

・jQuery Image Lazy Load WPLazy Load

・Head Cleaner

・WordPress Visual Icon Font

・WP-Copyright-Protection

・WP Super Cache

・lightbox 系プラグイン

ハミングバードでの投稿テクニック

① [ショートコード ] ADDQUICKTAG について

ハミングバードでは、投稿の時に簡単に使える便利なショートコードというのがあります。

ショートコードは AddQuicktag というプラグインを導入することで、下記図のような吹き出しやボック

スを簡単に投稿内で使えるようになります。

①－１ADDQUICKTAG のインストール

WordPress のダッシュボード画面から左メニューバーの【プラグイン】→【新規追加】

下記図のプラグインを【インストール】→【有効化】

8

①－２ADDQUICKTAG の設定方法

１．サンプルファイル（zip ファイル）を下記 URL の公式サイトよりダウンロードしてください。

https://open-cage.com/purchase-flow/addquicktag-samplefile/

※ダウンロードした zip ファイルは解凍しておいてください。

←解凍ファイルは JSON ファイルになります。

ファイルをダウンロードできたら、WordPress への設定になります。

２．ダッシュボードより【設定】→【AddQuicktag】をクリックします。

３．設定画面が開いたら、一番下までスクロールして【インポート】に１．で解凍したファイルを選んで

アップロードします。

４．【変更を保存】をクリックし設定完了です。

①－３ショートコードの基本的な使い方

ボタンショートコードの使い方

【投稿】から【新規追加】をクリックします。

投稿画面が開いたら、使いたいショートコードボタンを【QuickTags】というセレクトボックスから選ん

でください。

下記のようなショートコードが挿入されたら［btn］［/btn］に挟まれたテキストをテキストリンクにす

るとボタンになります。

9

吹き出しの使い方

【投稿】から【新規追加】をクリックします。

投稿画面が開いたら、使いたい吹き出しボタンを【QuickTags】というセレクトボックスから選んでくだ

さい。

②スライダー付き記事一覧

記事一覧の上にピックアップ記事のスライドショーを追加することができます。スライドショーに記事を

入れる方法は、2 ステップです。

②－１スライドショー用のタグを作成

ダッシュボードより【投稿】→【タグ】より「pickup」というスラッグの「タグ」を新規作成します。

タグの設定ページに入ったら「新規タグを追加」より、タグを新規作成します。

10

名前：任意の名前をつけてください。（サイト上に表示されます）例：オススメ、Pickup など

スラッグ：半角で「pickup」と入力してください。

説明：こちらは入力しなくても問題ありませんが、タグ一覧ページにて表示されるタグの説明です。

②－２スライドショーに含めたい記事に①で作成したタグをつける

１で作成したタグをスライドにいれたい記事に設定します。

これだけで、タグをつけた記事が新着順にスライドショー内に取り込まれ、オススメ記事をアピールする

ことが出来るようになります。

以上がハミングバードのカスタマイズ方法になります。

マニュアル通りにやってもうまくいかないとか、表示画面が違うという場合は、お気軽にお問い合わせく

ださいね。

このマニュアルでも紹介したハミングバードはこちらからテーマを購入出来ます。

⇒ WordPress テーマ『hummingbird』

それでは、最後までお読みいただきありがとうございました。

あなたのブログ作りに活用していただければ幸いです(#^^#)

作者：ゆか（yu_ka）

運営ブログ：https://yuka001.com/

お問い合わせフォーム：https://yuka001.com/contact/

メルマガ登録：https://my120p.com/p/r/NEPJVhUI

Twitter： https://twitter.com/yu_ka2018

Facebook： https://www.facebook.com/profile.php?id=100026590870828