「BusinessPress」は国産の無料WordPressテーマです。
GPLライセンス・無料・商用利用可・カスタマイズ自由。
ブロックエディター（Gutenberg）に完全対応。
レスポンシブデザイン。
コーポレート型（ビジネスサイト）テーマ。
架空のWEBサイトを制作するという脳内設定シリーズ。
前回に引き続き、BusinessPressでのサイト制作「その１０」。
前回は、ブログページの作成に入り、ブログトップページは完成しました。
今回はブログの個別記事ページを作っていきます。
以下の状態にまで作り上げます。
投稿０５ – TAKADAパソコン教室
（架空のサンプルサイトです）
～ 目次 ～
- 記事下に「CTA」を設置する
- CTAの作成
- CTAの表示
- 記事投稿者欄の作成
- 記事投稿者の名前・プロフを設定
- 記事投稿者の画像を設定
- 今回はここまで
記事下に「CTA」を設置する
まず、ブログ個別記事ページの記事下に「CTA」を表示させます。
「CTA」とは何ぞや？
正式名称は「コールトゥアクション（Call To Action）」です。
WEBサイトやブログなどで、訪問者に「とってもらいたい行動に誘導」する仕掛けのことです。
よくあるのが、
◇特定ページやサイトへの誘導リンク
◇メルマガの登録
◇セミナーの申込
◇お試しセットの申込み
◇商品の購入
ここらへんです。
ブログの記事下に設置されていることが多いです。
詳しくは下記を参照されてください。
＊CTAとは～ホームページから成果を生み出すには必須の基本用語を覚えよう
このサイトのCTAの場合は、
「PC・WEBのことならTAKADAパソコン教室で習得！
お気軽にお問合せください」
という文章と共に、電話番号とお問い合わせページへのリンクボタンを設置します。
検索などから各投稿ページに流入した閲覧者をお問い合わせに誘導して、ビジネスにつなげようとの発想です。
ここはそれぞれのサイトの特性に合わせて、内容やリンク先を決めてください。
自社商品の販売ということでアマゾンや楽天の商品販売ページにつなげたり、メルマガの登録サイトにつなげたりと、工夫は自由自在です。
では、具体的にCTAを設定していきます。
CTAの作成
WP管理画面より
「CTA」⇒「新規追加」
もし、WP管理画面に「CTA」という項目が表示されてない人は、本シリーズ「その４」を確認してみてください。
プラグイン「VK All in One Expansion Unit」の設定でミスってると思います。
新規追加画面は以下のような感じで、
トップページなどのコンテンツ作成と同じようにブロックを入れていきます。
タイトルに「CTA」と入れ、「＋」ボタンをクリック。
使用するブロックは「カバー」。
ここは背景に画像も入れられますが、背景色のみを入れます。
背景色は、この時点では適当な色をクリックして入れてください。
（この色は後で変更します）
すると、文字の入力欄を開くので
「PC・WEBのことならTAKADAパソコン教室で習得！」
と文章を入れてエンターキーを押し、そこから下に以下のブロックを入れていきます。
◇「段落」ブロック
お気軽にお問合せください
TEL : 000-0000-0000
◇「ボタン」ブロック
メールでのお問い合わせはこちら
さらに、それぞれのブロックを中央寄せに変更し、右側「設定欄」を開いて文字の大きさ・色・ボタンのリンク先などを設定します。
このサイトでは
◇文章の文字色⇒「黒」
◇文章の文字サイズ⇒「中」
◇ボタンの背景色⇒アクションカラー（#ff6f61）
◇ボタンの角丸半径⇒「8」px
◇ボタンのリンク先⇒お問い合わせページ
としています。
「カバー」ブロック全体を選択して、右側の「設定欄」から
カバーの背景色を、カスタムカラーで薄いグレー「#ededed」に変更しておきます。
「公開」ボタンを押して作成完了。
CTAの表示
作成したCTAを表示します。
WP管理画面より
「ExUnit」⇒「メイン設定」
「Call To Action」の項目から、
◇投稿⇒CTA
そして「変更を保存」をクリック。
すると、ブログの個別記事ページの下に「CTA」が表示されます。
記事投稿者欄の作成
記事投稿者欄（自己紹介）を作成します。
そのブログはどういう人が書いているのか？
略歴・PR・趣味・信条・小ネタなど。
その人となりを書いておくと、読む側に親近感を与えます。
この時点では、ブログ個別記事下部の「記事投稿者」欄は、以下のような表示になってると思います。
実に貧相ですね(^_^;)
記事投稿者の名前がユーザー用のアカウントでそのまま表示され、投稿者の画像も入ってません。
文章も全く無い状態です。
これを変えていきます。
記事投稿者の名前・プロフを設定
WP管理画面より
「ユーザー」⇒「ユーザー一覧」
一覧から投稿するユーザーを選びます。
通常は１つのユーザーのみかと思います。
ユーザーのプロフィール欄が開くので、
◇ニックネーム
⇒任意の名前をいれてください（このサイトでは講師「豊後陽子」）
◇ブログ上の表示名
⇒上記のニックネームを選択
◇プロフィール情報
⇒投稿者の略歴・PR・趣味・信条・小ネタなどを入れてください。
「プロフィールを更新」ボタンをクリックすると、以下のように表示されます。
記事投稿者の画像を設定
記事投稿者（ユーザー）の顔画像の設定は、古いバージョンのWordPressでは簡単に設定が可能でした。
ところが最新のバージョンの場合は、主に２パターンのどちらかで設定する必要があります。
１，WordPress公式の「Gravatar」による設定
２，プラグイン「WP User Avatar」による設定
「Gravatar」とは、WordPress公式のアバター画像作成サービスですが、設定手順が面倒くさいです。
本サイトでは、簡単な「２」のプラグインを使って設定しています。
このプラグインによる設定方法は、過去記事に書いたのでそちらを参照されてください。
＊WordPressプラグイン：ユーザーの顔画像を簡単に設定「WP User Avatar」
また、ど～しても公式の「Gravatar」で設定したい人、プラグインなんか入れたくないよ！という人は下記ブログを参照されてください。
＊Gravatarを利用してコメントに独自アバターを表示する
顔画像の設定が完了すると、記事投稿者欄は以下のように表示されます。
今回はここまで
今回でブログの個別記事ページは以下のように変化しました。
記事下に「CTA」と「記事投稿者欄」が設置されました。
これでブログ（投稿系）ページは全て完了です。
次回は、トップページ以外の各固定ページの作成について、簡潔にサラリと記述します。
