おすすめテーマ

ONEでCTA設置

【ONEの使い方講座】カテゴリーメガメニューとトップページCTAを設定

TCDの「ONE」で、ブログを作る手順を説明しています。

前回の記事では、トップページの基本部分を作成しました。

今回は、「カテゴリーメガメニュー」と「CTA」を設定していきたいと思います。

カテゴリーメガメニューは、カテゴリー一覧を画像付きで表示させることができます。

画像付きの方が綺麗に見えるし、一目見てどんなカテゴリーか分かるという利点があります。

CTAは、申し込みページや販売ページなどに誘導するボタンを設置することができます。

美しいCTAを設置することができるので、誘導したいページがある場合は設定しておく方がいいと思います。

では、さらに完成度を上げるために、順に設定していきましょう。

ONE使い方講座1回目の記事↓

★ブログにおすすめのテーマ↓
ブログにおすすめのWordPressテーマ。初心者から本格的に始めたい人まで>>

カテゴリーメガメニュー

カテゴリーメガメニューを作るには、まずはカテゴリーが設定してある必要があります。

カテゴリーには画像を設定し、それをカテゴリーメガメニューに表示させます。

カテゴリーの設定

まずはカテゴリーを作成します。

WordPressメニューの「投稿」→「カテゴリー」とクリック。

カテゴリー作成

自分の記事の内容に合わせてカテゴリーを作成します。

「名前」欄にカテゴリー名を入力して、「新規カテゴリー追加」ボタンで5つカテゴリーを作ってください。

今回は、「カテゴリー1」から「カテゴリー5」までの、5つカテゴリーを作成することにしました。

カテゴリーに画像設定

カテゴリーを作ったら、作成したカテゴリー名をクリックしてください。

カテゴリーの編集画面になるので、下の方にある「追加情報」という項目を設定していきます。

まずは画像を用意します。推奨サイズどおりに切り抜きをしておきましょう。

画像の推奨サイズは、横400px、縦144pxです。

次にカテゴリーの色の設定です。ONEでは、デフォルトは黒になっています。

いろいろ試してみましたが、黒のままが良いと感じました。

★画像はこちらをどうぞ↓
アイキャッチ画像のおすすめサイトを探してみました>>

★画像の切り抜きはこちら↓
オンラインで画像編集できる無料サイト。指定サイズで切り抜き最適化する方法>>

記事にカテゴリー設定

ここまでできたら、記事にカテゴリーを設定しましょう。

WordPressメニューの「投稿」→「投稿一覧」とクリックします。

すると、上の画像の画面になるので、記事名にカーソルを合わせてクイック編集画面を表示します。
(前の記事の「ウィジェットの設定」と同じです。)

記事すべてにカテゴリーを設定してきます。

メニューを作成

続いて、カテゴリーメガメニューに表示するためのメニューを新規作成しましょう。

メニューを新規作成

「外観」→「メニュー」とクリックします。

上の画像のように「メニュー名」欄に入力して、新しいメニューを作ります。

メニューの名前は、自分が分かればいいだけなので、どういう名前にしても大丈夫です。

入力したら、「メニューを作成」ボタンをクリックしてください。

グローバルメニュー

メニューを作成すると、上の画面になります。

メニュー設定の中にある、「グローバルメニュー」にチェックを入れてください。

グローバルメニューというのは、ブログの一番上の方にある、横一列のメニューのことです。

このグローバルメニューの中に、カテゴリーメガメニューを作る予定です。

では、グローバルメニューの項目を選択していきましょう。

グローバルメニューには、「当サイトについて」とか、「お問い合わせ」などを表示させるんですが…

今回はまだコンテンツを作成していないので、代わりにダミーで作った記事を表示させておきます。

左側にある記事を5つ選択し、「メニューに表示」ボタンをクリックします。

すると、メニューの中に5つの記事が入ります。

メニュー項目の作成

記事が表示されたら、メニュー用に名前を付け替えておきます。

今回は、上の画像のように、「サンプル1」、「サンプル2」・・・

というように、5つとも記事の名前を変更しました。

カテゴリーメガメニューの設定

ようやく本題のカテゴリーメガメニューです。

カテゴリーメガメニュー作成

左側に「カテゴリーメガメニュー」という項目があります。

その中に、「ナビゲーションのラベル」という入力欄があるので、カテゴリーメガメニューの名前を付けましょう。

この名前がトップページに表示されるので、短くて分かりやすい名前を付けます。

ここでは「メガメニュー」としておきました。

「メニューに追加」ボタンをクリックすると、メニューに追加されます。

カテゴリーを入れる

続いて、カテゴリーメガメニューの中にカテゴリーを入れていきましょう。

左側のカテゴリーから、「カテゴリー1」から「カテゴリー5」まで全てにチェックを入れてください。

「メニューに追加」ボタンをクリックしてメニューに入れます。

カテゴリーをドラッグ

追加したカテゴリーは、まだカテゴリーメガメニューの中に入っていません。

先ほど作成した「メガメニュー」に、カテゴリーをドラッグして入れていきます。

ドラッグして右に少し移動させてください。

すると、右にずれたカテゴリーが、メガメニューの副項目になったことになります。

カテゴリーメガメニュー完成

では、設定した内容が表示されているのか確認してみましょう。

ブログのトップページを見てみると、タイトルの下にグローバルメニューがあり、

「サンプル1」「サンプル2」・・・「メガメニュー」と並んでいますね。

この「メガメニュー」の部分にマウスカーソルを乗せると…

上の画像のようにカテゴリーが画像付きで5つ並んで表示されます。

これで、カテゴリーメガメニューの設定は完了です^^

トップページにCTAを設置

トップページにCTAを設置してみましょう。

ONEでCTA設置

上の画像の「さあ、山へ行こう!」の部分がCTAです。

簡単な設定で、美しいCTAを表示させることができますよ。

では、「外観」→「TCDテーマオプション」→「トップページ」→「CTA設定」

とクリックします。

ONEのCTA設定手順

上の画像のように設定してください。

①見出し
見出しタイトルを入力します。
人目で惹きつける言葉を考えましょう。

②説明文
説明文を入力します。興味がわくような説明文を考えましょう。

③画像
横1450px、縦480pxの画像を用意します。
下に記事のカルーセルスライダーがあり、デフォルトでは黒のオーバーレイがかかっています。
つまり、少し画像が暗くなっているんですね。
今回は、カルーセルスライダーと合わせて少し暗めの画像を用意してみました。

④ボタンのラベル
ボタンの文字です。
今回は「お問い合わせはこちら」にしました。

⑤ボタンのリンク先のURL
クリック先のURLを入力します。

⑥ボタンの色
デフォルトは黒みがかった茶色ですが、背景画像を暗めにしたので、目立つように明るい青にしてみました。
これは背景の空の色から青が良いかなと思って設定しています。

上記の6項目を設定すれば、CTAの設定は完了です。

ONEの全体像

ここまでで、トップページの見た目はほぼ完成です。

CTAを設置したら、前回よりも良い感じのトップページになったと思います。

全体像を見てみましょう。

ONEでブログ完成

いかがでしょうか。

あっという間に作れたのに、この完成度になるのですから、ONEのポテンシャルは高いと言えるでしょう。

ONEでブログを書くのに必要なのは、

・良い画像を選ぶこと
・画像を最適なサイズにすること
・記事をしっかり書くこと

の3点です。それ以外はONEに任せておけば美しいブログにしてくれます。

このテーマは、買った後の方が自分の中の評価が上がりました^^

ONE使い方講座3回目の記事↓

★ONEの使用サイト例です↓
WordPressテーマONEを使ったサイト事例。ワンカラムのテーマの参考に>>

ONEの詳細はこちら>>

関連記事

  1. MuumタイプA

    ブログのWordPressテーマなら「Muum」。美しいデザイン・低価…

  2. ONEのCTAを設置

    【ONEの使い方講座】ABテストやクリック率が計測できるCTAを設置し…

  3. TCDのZERO

    TCDの「ZERO」は、アイキャッチ不要のシンプルなブログ向けテーマで…

  4. スワローでブログ作成

    【スワロー使い方講座】トップページにスライダーを設置してみよう

  5. Minimal WPのWordPressテーマを5段階評価してみた【シ…

  6. DOLCE & VIVACEのWordPressテーマを5段…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


PAGE TOP

おすすめテーマ

アフィリエイトにおすすめのWordPressテーマ。すべて複数サイトで使い回しO…

おすすめテーマ

美容、エステ、ヘアサロン等におすすめのテーマ5選。特徴を比較してみました

おすすめテーマ

女性向けの美しい(かわいい)WordPressテーマ。ブログと商用サイトに

おすすめテーマ

企業サイトにおすすめの高品質なWordPressテーマ12選【日本語対応】

おすすめテーマ

WordPressでネットショップが作れるおすすめテーマ【Welcart・Woo…

おすすめテーマ

ブログにおすすめの有料WordPressテーマを厳選。デザインの美しさと機能を重…

ONEでCTA設置

おすすめテーマ

WordPress有料テーマの中から、目的別におすすめベスト3を選びました!(2…

目的別テーマのおすすめベスト3

おすすめテーマ

トップページに動画を再生できる、おすすめWordPressテーマを集めました