【ワードプレスブログのキャッチフレーズをデザインする!】

ワードプレスブログのキャッチフレーズをデザインする!。ブロックエディターでキャッチフレーズのカバーをデザインします。今回は、ワードプレスブログのキャッチフレーズをデザインする!について書いていきます。

 

「キャッチフレーズ」を添える場合、デザイン的にもインパクトを演出したいものです。ブロックエディターのカバーを使用すれば「キャッチフレーズ」を「単色」や「グラデーション」で印象的に協調することができます。

 

結論を先に話ししておきます
ワードプレスを用いてブログを立ち上げたらキャッチコピーもしくはキャッチフレーズの設定をしましょう。当記事では「キャッチフレーズ」とします。自身が立ち上げるブログに対し、どんな「キャッチフレーズ」を書けば良いのか迷うと思います。

 

迷った場合、メモ帳などに「キャッチフレーズ」となる言葉をいくつか書き出して見ると良いです。私はそうしています。まずは頭に思い浮かんだ「キャッチフレーズ」となる言葉を書いてみると良いでしょう。

 

キャッチフレーズは、ブログのタイトル名同様、良く考えて書くようにして下さい。適当はダメです。なぜなら「キャッチフレーズ」を見たユーザーが来てくれたとして、売り上げに繋がるかも知れないからです。

 

以前投稿した下記の記事にも目を通して貰えると嬉しいです。

 

【キャッチコピーとキャッチフレーズの違い】

キャッチコピーとキャッチフレーズの違い

 

あなたに質問します。「キャッチコピー」と「キャッチフレーズ」の違いについて答えられますか?とは言え、私も一昔前はその違いを知りませんでした。ではその違いを書いてみましょう。参考にしてみて下さい。

 

  • キャッチコピー」とは。 人の注意を引く広告文や宣伝文のことを指します。

キャッチコピーの多くは一言で終わるものが多いです。キャッチコピーは、商品の売上に大きく影響するので、キャッチコピーを決める際は、企業内の有力者に考案して貰ったり、有名なコピーライターに依頼する企業も多いと聞きます。

 

  • キャッチフレーズ」とは。 広告や宣伝に於いて、強い印象を与えるよう工夫された短めのうたい文句を指します。

「キャッチフレーズ」のフレーズとは決まり文句のことを言います。「キャッチフレーズ」と言う言葉は宣伝文句と言う意味ではなく、キャッチコピーと同義語でもありません。

 

【ブロックエディターとは(動画付き)】

ブロックエディターとは(動画付き)

 

「ブロックエディター」は「ブロックシステム」を採用し、コンテンツ同士を組み合わせ、整形しながら組んでいきます。「ブロックエディター」は、別の名を「Gutenberg/グーテンベルグ」と言います。

 

また「ブロックエディター」は、Webサイトやブログなどにリッチでフレキシブルなレイアウトを作成できるようデザインされているのが特徴と言えるでしょう。コンテンツは、ブロックユニットとして作成します。

 

ブロックエディターのブロックは段落」「見出し」「メディア」「埋め込みオブジェクトなど、全てをコンポーネントとして扱い、双方に於いて、コンテンツを作成し、ワードプレスのデータベース内に保存します。

 

ではここで動画を視聴してみて下さい。題して「WordPressブロックエディターの使い方 基本編」です。

 

ブロックエディターの設定

ブロックエディターの設定

 

ではここから本題へ移りましょう。この章では、図解を用いながら解説していきます。カバーを用いて「キャッチフレーズ」を作成する際「ブロックエディター」を使用するので、しっかり設定していきましょう。

 

では初めに、現在に於いてクラシックエディターで記事を書いている場合ブロックエディターに切り替える必要があります。まずは「ブロックエディター」に設定する為のやり方を解説していきます。

 

  • 「黄色枠」で囲まれている「設定」にマウスを移動すると、プルダウンが表示されます。次に「桃色枠」で囲まれている「投稿設定」を開きましょう。

 

  • 次の画面で「オレンジ色枠」で囲まれている「ブロックエディター」を選択し、最後に左下にある変更を保存を押します。

 

  • ブロックエディターを選択後投稿」もしくは「固定ページ」の新規追加を開くと、下記のような画面が表示されます。

 

「ブロックエディター」の新規画面を見ると、クラシックエディターの新規画面とは違って見えると思います。

 

【カバーブロックでデザインする】

カバーブロックでデザインする

 

ブロックエディターを使えるように変更したのであれば、この章から、上記と同様に図解を用いながら解説していきたいと思います。ブロックエディターを使ったことがない方でも難しくないので心配はいりません。

 

ここでは「カバーに色をつける/単色」「カバーのサイズを変更する」「カバー内のテキストに文字を入力する」「カバーに色をつける/グラデーション」などをおこなっていきます。それでは見ていきましょう。

 

カバーの色(単色)、サイズ、テキスト

まず初めに「カバーに色をつける/単色」「カバーのサイズを変更する」「カバー内のテキストに文字を入力する」を図解を用いて解説していきます。細かく解説しているので分かりやすいかと思います。

 

  • まず初めに、投稿もしくは固定ページを開き、新規追加を押しましょう。すると「赤色枠」で囲まれている「+」を押してみましょう。

 

  • +を押すと、メニューが開きます。「緑色枠」で囲まれている「カバー」を押してみましょう。

 

  • すると「黄色枠」で囲まれている「カバー」が開き「紫色枠」で囲まれている「カラー」の中から、背景にしたい色を選んで下さい。ここでは「桃色枠」で囲まれている「ピンク」を選択しました。

 

  • 「緑色枠」で囲まれている「カバー」が表示されました。それと同時に「水色枠」で囲まれているテキストサイズが「36」と表示されています。次に「紫色枠」の「縦棒」辺りにカーソルを表示させて下さい。

 

  • 他のサイズも見てみましょう。「水色枠」で囲まれているテキストサイズで「13」を選択してみました。すると「黄色枠」で囲まれているテキストサイズが小さく見にくくなったことが分かります。

 

  • 今度も同じように「緑色枠」で囲まれているテキストサイズの「42」を選択してみました。すると先程のサイズと違い「赤色枠」で囲まれているように文字サイズが大きく見やすくなりました。

 

  • 次は、カバーサイズの変更方法について解説します。まずは「紫色枠」で囲まれている「カバー」を選択します。

 

  • カバーを選択したら「水色枠」で囲まれているボックス内に、カバーサイズを入力してみましょう。ここでは200としています。

 

  • 次に「水色枠」で囲まれているように「キャッチフレーズ」となる文言を入力してみましょう。ここではアフィリエイトの魅力とはとしています。

 

  • 次は「黄色枠」で囲まれている「カバー」を選択し「赤色枠」で囲まれている「アイコン」を押します。すると「水色枠」で囲まれているようにプルダウンが表示され「緑色枠」で囲まれている「幅広」と「全幅」があります。

 

  • 試しに全幅を押してみましょう。「紫色枠」で囲まれているように「細長くなりました。

 

  • 次に、幅広を押すと「黄色枠」で囲まれているように「短くなりました。ではトップページからどのように写っているのか確認してみましょう。「オレンジ色枠」で囲まれている「プレビュー」を押してみましょう。

 

すると「桃色枠」で囲まれているようにプルダウンが表示され「緑色枠」で囲まれている「新しいタブでプレビュー」を押してみます。

 

  • するとどうでしょう。「水色枠」で囲まれているカバーは「幅広」での表示となります。

 

カバーに色をつける/単色」「カバーのサイズを変更する」「カバー内のテキストに文字を入力するについては、上手くできたでしょうか。何でも自分でやってみないと分からないと思うので、まずは手を動かしてみましょう。

 

カバーの色(グラデーション)

この章では「カバーの色/グラデーション」について図解を用いて解説していきます。前回はカバーの色/単色でしたね。その違いを見て貰えればと思います。それでは早速見ていきましょう。

 

  • まず初めに「緑色枠」で囲まれているカバーを選択した後「赤色枠」で囲まれている箇所を開きます。次に「黄色枠」で囲まれているプルダウンが開くと「水色枠」で囲まれている「単色」が選択されています。

 

次に「桃色枠」で囲まれているように「カラーパレット」が表示されています。

 

  • では単色から「桃色枠」で囲まれている「グラデーション」を押してみましょう。すると「紫色枠」で囲まれている画面に切り替わります。

 

  • グラデーションでは「緑色枠」で囲まれている「色」を選択してみました。すると「紫色枠」で囲まれているようにカバーの背景色が単色のものと違って見えるはずです。

 

  • 次に「桃色枠」で囲まれている丸いものをクルクル回してみましょう。すると「緑色枠」で囲まれている上部の背景色とは違って見えるかと思います。

 

  • 次は「水色枠」で囲まれているボックスを開くとプルダウンが表示され「紫色枠」で囲まれている「放射状」を選択してみましょう。

 

  • 放射状を選択すると「紫色枠」で囲まれているようにカバーの背景色が上部の画面とは違って見えるかと思います。

 

  • では「緑色枠」で囲まれている「カバー」を選択している状態で「オレンジ色枠」で囲まれているスライダーを左右に動かしてみると、上部の画面より、薄くなっていることが分かるかと思います。

 

  • ではここで、トップページから確認してみたいと思います。まずは「桃色枠」で囲まれているように「グラデーション」を変更してみました。次に「紫色枠」で囲まれている「プレビュー」を押してみましょう。

 

すると「オレンジ色枠」で囲まれているようにプルダウンが表示されます。その中の「水色枠」で囲まれている「新しいタブでプレビュー」を開いてみましょう。

 

  • するとどうでしょう。「オレンジ色枠」で囲まれているように色鮮やかで綺麗なカバー画像ができました。

 

注意点
カバーの中に文字を入力してますが、これはタイトル名ではありません。キャッチフレーズなのでくれぐれもお間違いのないように注意して下さい。

 

今回は以上となります。ワードプレスブログのキャッチフレーズをデザインする!については、それほど難しく感じなかったかも知れません。いろいろ使ってくるうちに嫌でも覚えてきます。頑張りましょう。

 

以前投稿した下記の記事にも目を通して貰えると嬉しいです。

 

 

トップページへ戻る

おススメの記事 - Recommended articles -