WordPressテーマ「BusinessPress」でWEBサイトを制作(その10)続・ブログページの作成

WordPressテーマ「BusinessPress」でWEBサイトを制作(その10)続・ブログページの作成

BusinessPress」は国産の無料WordPressテーマです。

BusinessPress

架空のWEBサイト制作シリーズ。
前回に引き続き、BusinessPressでのサイト制作「その10」。

前回は、ブログページの作成に入り、ブログトップページは完成しました。
今回はブログの個別記事ページを作っていきます。

以下の状態にまで作り上げます。
投稿05 – TAKADAパソコン教室
(架空のダミーサイトです)

記事下に「CTA」を設置する

まず、ブログ個別記事ページの記事下に「CTA」を表示させます。

「CTA」とは何ぞや?
正式名称は「コールトゥアクション(Call To Action)」です。

WEBサイトやブログなどで、訪問者に「とってもらいたい行動に誘導」する仕掛けのことです。

よくあるのが、

  • 特定ページやサイトへの誘導リンク
  • メルマガの登録
  • セミナーの申込
  • お試しセットの申込み
  • 商品の購入

ここらへんです。

ブログの記事下に設置されていることが多いです。

詳しくは下記を参照されてください。

CTAとは~ホームページから成果を生み出すには必須の基本用語を覚えよう

このサイトのCTAの場合は、
「PC・WEBのことならTAKADAパソコン教室で習得!
お気軽にお問合せください」
という文章と共に、電話番号とお問い合わせページへのリンクボタンを設置します。

検索などから各投稿ページに流入した閲覧者をお問い合わせに誘導して、ビジネスにつなげようとの発想です。

ここはそれぞれのサイトの特性に合わせて、内容やリンク先を決めてください。

自社商品の販売ということでアマゾンや楽天の商品販売ページにつなげたり、メルマガの登録サイトにつなげたりと、工夫は自由自在です。

では、具体的にCTAを設定していきます。

CTAの作成

WP管理画面より
CTA」⇒「新規追加

もし、WP管理画面に「CTA」という項目が表示されてない人は、本シリーズ「その4」を確認してみてください。
プラグイン「VK All in One Expansion Unit」の設定でミスってると思います。

新規追加画面は以下のような感じで、

トップページなどのコンテンツ作成と同じようにブロックを入れていきます。

ちなみに、最初は画面下に「CTA Content」という入力欄が表示されると思います↓

これを使うと簡単にCTAが作成可能なのですが、色やレイアウトを調整できないので、当サイトでは使いません。

なので、「CTA Content」の表示は閉じておいてください。

では、CTAを作成していきます。
タイトルに「CTA」と入れ、「」ボタンをクリック。

使用するブロックは「カバー」。

ここは背景に画像も入れられますが、背景色のみを入れます。

背景色は、この時点では適当な色をクリックして入れてください。
(この色は後で変更します)

すると、文字の入力欄を開くので

  • PC・WEBのことならTAKADAパソコン教室で習得!

と文章を入れてから、

後ろに挿入」を使って以下のブロックを入れていきます。

  • 「段落」ブロック
    お気軽にお問合せください
    TEL : 000-0000-0000
  • 「ボタン」ブロック
    メールでのお問い合わせはこちら

以下のような状態になります。

さらに、それぞれのブロックを中央寄せに変更、


右側「設定欄」を開いて文字の大きさ・色・ボタンのリンク先などを設定します。

  • 文章の文字色⇒「
  • 文章の文字サイズ⇒「
  • ボタンの色⇒アクションカラー(#ff6f61
  • ボタンの角丸半径⇒「8」px
  • ボタンのリンク先⇒お問い合わせページ

最後に「カバー」ブロック全体を選択して、右側の「設定欄」から

カバーの色を薄いグレー「#ededed」に変更しておきます。

公開」ボタンを押して作成完了。

CTAの表示

作成したCTAを表示します。

WP管理画面より
ExUnit」⇒「メイン設定

「Call To Action」の項目から、

  • 投稿⇒CTA

そして「変更を保存」をクリック。

すると、ブログの個別記事ページの下に「CTA」が表示されます。

補足:「CTA Content」でCTAを作成した場合

ちなみに「CTA Content」でCTAを作成する場合は以下のように設定します。

で、こちらが実際の表示。

これを使うと色やレイアウトを調整できませんし、プラグインに依拠しているレイアウトなので、ボタンの配置が中央寄せにならないという欠点があります。

ただ、CTAを手間かけて作成するのが面倒くさい人は、こちらを選んでも良いかもしれません。

記事投稿者欄の作成

記事投稿者欄(自己紹介)を作成します。

そのブログはどういう人が書いているのか?
略歴・PR・趣味・信条・小ネタなど。
その人となりを書いておくと、読む側に親近感を与えます。

この時点では、ブログ個別記事下部の「記事投稿者」欄は、以下のような表示になってると思います。

実に貧相ですね(^_^;)

記事投稿者の名前がユーザー用のアカウントでそのまま表示され、投稿者の画像も入ってません。
文章も全く無い状態です。

これを変えていきます。

記事投稿者の名前・プロフを設定

WP管理画面より
ユーザー」⇒「ユーザー一覧

一覧から投稿するユーザーを選びます。

通常は1つのユーザーのみかと思います。

ユーザーのプロフィール欄が開くので、

  • ニックネーム
    任意の名前をいれてください(このサイトでは講師「豊後陽子」)
  • ブログ上の表示名
    上記のニックネームを選択
  • プロフィール情報
    投稿者の略歴・PR・趣味・信条・小ネタなどを入れてください。

プロフィールを更新」ボタンをクリックすると、以下のように表示されます。

記事投稿者の画像を設定

記事投稿者(ユーザー)の顔画像の設定は、古いバージョンのWordPressでは簡単に設定が可能でした。

ところが最新のバージョンの場合は、主に2パターンのどちらかで設定する必要があります。

1,WordPress公式の「Gravatar」による設定
2,プラグイン「Simple Local Avatars」による設定

「Gravatar」とは、WordPress公式のアバター画像作成サービスですが、設定手順が面倒くさいです。

本サイトでは、簡単な「2」のプラグインを使って設定しています。

このプラグインによる設定方法は、下記記事を参照されてください。

WordPressプラグイン:ユーザーの顔画像を簡単に設定「Simple Local Avatars」

また、ど~しても公式の「Gravatar」で設定したい人、プラグインなんか入れたくないよ!という人は下記ブログを参照されてください。

Gravatarを利用してコメントに独自アバターを表示する

顔画像の設定が完了すると、記事投稿者欄は以下のように表示されます。

今回はここまで

今回でブログの個別記事ページは以下のように変化しました。

記事下に「CTA」と「記事投稿者欄」が設置されました。

これでブログ(投稿系)ページは全て完了です。

次回は、トップページ以外の各固定ページの作成について、簡潔にサラリと記述します。

ken
本シリーズ、残り「その11」「その12」の2回で完結予定です。
関連記事
WordPressテーマ「BusinessPress」でWEBサイトを制作(その12)追加応用編
WordPressテーマ「BusinessPress」でWEBサイトを制作(その11)各固定ページの作成
WordPressテーマ「BusinessPress」でWEBサイトを制作(その9)ブログページの作成
WordPressテーマ「BusinessPress」でWEBサイトを制作(その8)続々続・トップページのコンテンツ作成
WordPressテーマ「BusinessPress」でWEBサイトを制作(その7)続々・トップページのコンテンツ作成
WordPressテーマ「BusinessPress」でWEBサイトを制作(その6)続・トップページのコンテンツ作成
WordPressテーマ「BusinessPress」でWEBサイトを制作(その5)トップページのコンテンツ作成
WordPressテーマ「BusinessPress」でWEBサイトを制作(その4)プラグインの各設定
WordPressテーマ「BusinessPress」でWEBサイトを制作(その3)テーマの各設定
WordPressテーマ「BusinessPress」でWEBサイトを制作(その2)ページ構成・配色構想
WordPressテーマ「BusinessPress」でWEBサイトを制作(その1)準備編
テーマの知識が無いと困る!? 今後のWordPress制作

WEBサイトをWordPressにて低価格・高品質で作成します

ご希望内容をお伺いした上で、金額・納期をお見積もりいたします。

お見積もり・ご注文はクラウドソーシングの「ランサーズ」にて承っております。
*ランサーズのアカウント(無料登録)が必要となります。

  • 使用するWordPressテーマは、当方にてライセンス権を購入済の「Swell」「Lightning有料版」「Katawara」の3つの中から選択する形となります。
  • お見積もり後、金額・納期が折り合わなければ発注しなくても大丈夫です。