ワードプレスブログのキャッチフレーズをデザインする！。ブロックエディターで「キャッチフレーズ」のカバーをデザインします。今回は、ワードプレスブログのキャッチフレーズをデザインする！について書いていきます。
「キャッチフレーズ」を添える場合、デザイン的にもインパクトを演出したいものです。ブロックエディターのカバーを使用すれば「キャッチフレーズ」を「単色」や「グラデーション」で印象的に協調することができます。
| 結論を先に話ししておきます |
| ワードプレスを用いてブログを立ち上げたら「キャッチコピー」もしくは「キャッチフレーズ」の設定をしましょう。当記事では「キャッチフレーズ」とします。自身が立ち上げるブログに対し、どんな「キャッチフレーズ」を書けば良いのか迷うと思います。
迷った場合、メモ帳などに「キャッチフレーズ」となる言葉をいくつか書き出して見ると良いです。私はそうしています。まずは頭に思い浮かんだ「キャッチフレーズ」となる言葉を書いてみると良いでしょう。
「キャッチフレーズ」は、ブログのタイトル名同様、良く考えて書くようにして下さい。適当はダメです。なぜなら「キャッチフレーズ」を見たユーザーが来てくれたとして、売り上げに繋がるかも知れないからです。
以前投稿した下記の記事にも目を通して貰えると嬉しいです。 |
目次はコチラ
【キャッチコピーとキャッチフレーズの違い】
あなたに質問します。「キャッチコピー」と「キャッチフレーズ」の違いについて答えられますか？とは言え、私も一昔前はその違いを知りませんでした。ではその違いを書いてみましょう。参考にしてみて下さい。
キャッチコピーの多くは「一言」で終わるものが多いです。キャッチコピーは、商品の売上に大きく影響するので、キャッチコピーを決める際は、企業内の有力者に考案して貰ったり、有名なコピーライターに依頼する企業も多いと聞きます。
「キャッチフレーズ」のフレーズとは「決まり文句」のことを言います。「キャッチフレーズ」と言う言葉は「宣伝文句」と言う意味ではなく、キャッチコピーと同義語でもありません。 |
【ブロックエディターとは(動画付き)】
「ブロックエディター」は「ブロックシステム」を採用し、コンテンツ同士を組み合わせ、整形しながら組んでいきます。「ブロックエディター」は、別の名を「Gutenberg/グーテンベルグ」と言います。
また「ブロックエディター」は、Webサイトやブログなどにリッチでフレキシブルなレイアウトを作成できるようデザインされているのが特徴と言えるでしょう。コンテンツは、ブロックユニットとして作成します。
| 「ブロックエディター」のブロックは「段落」「見出し」「メディア」「埋め込みオブジェクト」など、全てをコンポーネントとして扱い、双方に於いて、コンテンツを作成し、ワードプレスのデータベース内に保存します。 |
ではここで動画を視聴してみて下さい。題して「WordPressブロックエディターの使い方 基本編」です。
ブロックエディターの設定
ではここから本題へ移りましょう。この章では、図解を用いながら解説していきます。カバーを用いて「キャッチフレーズ」を作成する際「ブロックエディター」を使用するので、しっかり設定していきましょう。
では初めに、現在に於いて「クラシックエディター」で記事を書いている場合「ブロックエディター」に切り替える必要があります。まずは「ブロックエディター」に設定する為のやり方を解説していきます。
- 「黄色枠」で囲まれている「設定」にマウスを移動すると、プルダウンが表示されます。次に「桃色枠」で囲まれている「投稿設定」を開きましょう。
- 次の画面で「オレンジ色枠」で囲まれている「ブロックエディター」を選択し、最後に左下にある変更を保存を押します。
- ブロックエディターを選択後「投稿」もしくは「固定ページ」の新規追加を開くと、下記のような画面が表示されます。
| 「ブロックエディター」の新規画面を見ると、クラシックエディターの新規画面とは違って見えると思います。 |
【カバーブロックでデザインする】
ブロックエディターを使えるように変更したのであれば、この章から、上記と同様に図解を用いながら解説していきたいと思います。ブロックエディターを使ったことがない方でも難しくないので心配はいりません。
ここでは「カバーに色をつける/単色」「カバーのサイズを変更する」「カバー内のテキストに文字を入力する」「カバーに色をつける/グラデーション」などをおこなっていきます。それでは見ていきましょう。
カバーの色(単色)、サイズ、テキスト
まず初めに「カバーに色をつける/単色」「カバーのサイズを変更する」「カバー内のテキストに文字を入力する」を図解を用いて解説していきます。細かく解説しているので分かりやすいかと思います。
- まず初めに、投稿もしくは固定ページを開き、新規追加を押しましょう。すると「赤色枠」で囲まれている「+」を押してみましょう。
- +を押すと、メニューが開きます。「緑色枠」で囲まれている「カバー」を押してみましょう。
- すると「黄色枠」で囲まれている「カバー」が開き「紫色枠」で囲まれている「カラー」の中から、背景にしたい色を選んで下さい。ここでは「桃色枠」で囲まれている「ピンク」を選択しました。
- 「緑色枠」で囲まれている「カバー」が表示されました。それと同時に「水色枠」で囲まれているテキストサイズが「36」と表示されています。次に「紫色枠」の「縦棒」辺りにカーソルを表示させて下さい。
- 他のサイズも見てみましょう。「水色枠」で囲まれているテキストサイズで「13」を選択してみました。すると「黄色枠」で囲まれているテキストサイズが小さく見にくくなったことが分かります。
- 今度も同じように「緑色枠」で囲まれているテキストサイズの「42」を選択してみました。すると先程のサイズと違い「赤色枠」で囲まれているように文字サイズが大きく見やすくなりました。
- 次は、カバーサイズの変更方法について解説します。まずは「紫色枠」で囲まれている「カバー」を選択します。
- カバーを選択したら「水色枠」で囲まれているボックス内に、カバーサイズを入力してみましょう。ここでは「200」としています。
- 次に「水色枠」で囲まれているように「キャッチフレーズ」となる文言を入力してみましょう。ここでは「アフィリエイトの魅力とは」としています。
- 次は「黄色枠」で囲まれている「カバー」を選択し「赤色枠」で囲まれている「アイコン」を押します。すると「水色枠」で囲まれているようにプルダウンが表示され「緑色枠」で囲まれている「幅広」と「全幅」があります。
- 試しに全幅を押してみましょう。「紫色枠」で囲まれているように「細長く」なりました。
- 次に、幅広を押すと「黄色枠」で囲まれているように「短く」なりました。ではトップページからどのように写っているのか確認してみましょう。「オレンジ色枠」で囲まれている「プレビュー」を押してみましょう。
すると「桃色枠」で囲まれているようにプルダウンが表示され「緑色枠」で囲まれている「新しいタブでプレビュー」を押してみます。
- するとどうでしょう。「水色枠」で囲まれているカバーは「幅広」での表示となります。
| 「カバーに色をつける/単色」「カバーのサイズを変更する」「カバー内のテキストに文字を入力する」については、上手くできたでしょうか。何でも自分でやってみないと分からないと思うので、まずは手を動かしてみましょう。 |
カバーの色(グラデーション)
この章では「カバーの色/グラデーション」について図解を用いて解説していきます。前回は「カバーの色/単色」でしたね。その違いを見て貰えればと思います。それでは早速見ていきましょう。
- まず初めに「緑色枠」で囲まれているカバーを選択した後「赤色枠」で囲まれている箇所を開きます。次に「黄色枠」で囲まれているプルダウンが開くと「水色枠」で囲まれている「単色」が選択されています。
次に「桃色枠」で囲まれているように「カラーパレット」が表示されています。
- では単色から「桃色枠」で囲まれている「グラデーション」を押してみましょう。すると「紫色枠」で囲まれている画面に切り替わります。
- グラデーションでは「緑色枠」で囲まれている「色」を選択してみました。すると「紫色枠」で囲まれているようにカバーの背景色が単色のものと違って見えるはずです。
- 次に「桃色枠」で囲まれている丸いものをクルクル回してみましょう。すると「緑色枠」で囲まれている上部の背景色とは違って見えるかと思います。
- 次は「水色枠」で囲まれているボックスを開くとプルダウンが表示され「紫色枠」で囲まれている「放射状」を選択してみましょう。
- 放射状を選択すると「紫色枠」で囲まれているようにカバーの背景色が上部の画面とは違って見えるかと思います。
- では「緑色枠」で囲まれている「カバー」を選択している状態で「オレンジ色枠」で囲まれているスライダーを左右に動かしてみると、上部の画面より、薄くなっていることが分かるかと思います。
- ではここで、トップページから確認してみたいと思います。まずは「桃色枠」で囲まれているように「グラデーション」を変更してみました。次に「紫色枠」で囲まれている「プレビュー」を押してみましょう。
すると「オレンジ色枠」で囲まれているようにプルダウンが表示されます。その中の「水色枠」で囲まれている「新しいタブでプレビュー」を開いてみましょう。
- するとどうでしょう。「オレンジ色枠」で囲まれているように色鮮やかで綺麗なカバー画像ができました。
| 注意点 |
| カバーの中に文字を入力してますが、これは「タイトル名」ではありません。「キャッチフレーズ」なのでくれぐれもお間違いのないように注意して下さい。 |
今回は以上となります。ワードプレスブログのキャッチフレーズをデザインする！については、それほど難しく感じなかったかも知れません。いろいろ使ってくるうちに嫌でも覚えてきます。頑張りましょう。
以前投稿した下記の記事にも目を通して貰えると嬉しいです。
