- ワードプレスのブロックの機能の詳細を知りたい
- ワードプレスでより記事のクオリティーをあげたい
このような方に向けて記事を書きます。
この記事を読めばWordPressにおけるブロックの全体像を把握でき、より記事のクオリティーを上げられます。
WEBマーケターであれば、WEBマーケティングにおいて記事をわかりやすくし、アクションをとってもらいやすくする離脱を防ぐことが重要ですよね。
この記事では、入力の画面操作も説明も含めた、かなり実用的な話になります。
WordPressのブロックとは?
ブロックとは、ワードプレスのページ、構成する要素のことです。
ちょっと言葉としてわかりにくいのですが、コンテンツを形成する要素の1つと言う事ですね。
記事はブロックとブロックが集まって構成されています。
この構成要素であるブロックに関しては、多数の種類があります。
・段落と呼ばれる文章要素
・見出し
・画像
などを選ぶことができます。
ブロックの入力項目
ブロックの要素には、たくさん種類があるので、ふわっと頭に入れておきましょう。
こういうやつですね。スマホでもPCでも、＋ボタンを押したら出てくるこれです。
この中で上の3つ、見出し段落画像さえわかればとりあえず記事は書けます。
基本のコンテンツブロック
上記にも書きましたが、記事を書く際、基本としては見出し・テキスト・画像が中心になります。
この入力の仕方について説明します。
ブロックの基本要素
ブロックにおいて、文章を入れ込む段落や、見出しを選定して、テキストを入れ込みましょう。
画像の登録の仕方
画像を選択すれば、画像をアップロードする画面が出るので画像も登録できます。
記事に直接画像アップするアップロード、自動画像フォルダに保存アップして選択する方法、既に存在する画像URLを参照して、画像を表示させる方法があります。
メディアアップロードは、いちど登録した画像を使い回しができます。なのでボクはメディアアップロードを使うケースが多いです。
ちなみに、画像素材サイトで、画像を撮ってきてぺたりと貼るのも楽ちんで便利ですよ。
ボクはpixaと言うサイトを使っているので検索して使ってみてください。
画像を選んで長押ししたらスマホに保存ができます。そのままスマホから画像登録して、使っちゃってます。
画像と見出し、段落で一通り記事は完成できる
見出し・テキスト画像を組み立てれば、記事は成立します。まずはここの操作ができるようになりましょう。
いちど記事を書いて、文章と文章の間にまた文章を追加したい場合などが発生します。
その時は、ブロックを追加する+ボタンなどをして追加して更新するようにしましょう。
おすすめの、クオリティ上げるブロック
以上で基礎編は終わりです。
記事、書けそうですか？スマホでもかけるのが良いですよね。空き時間を活用して、かなり手軽にブログを書けますからね。
PC開いて集中しなくても更新できるのって相当デカいです。移動しながら、目が覚めてから、ちょっと隙間時間にボクも更新してます。
さて、ここからはちょっと応用編です。
人気ブログや記事などは、要素に変化をつけて、ビジュアル的に見やすくなるよう、工夫をしています。
それのコツについて記載をします。
背景を変える
文字にボールドやラインを入れる
あたりですかね。
背景に色をつけましょう
ブロックに、たまに背景を入れるようにしましょう。すると動きがつくので、見やすくなります。
例えばこのような感じです。
大事な部分は、背景を水色にすると、浮かんで見えます。
どうですかね、メリハリがあって、パッと頭に入って来やすくなりませんか？
単純に文章を組み合わせ続けると、ダラダラとなってしまって読みにくいと感じる人もいます。
やり方としては、こんな感じです。1番右の…を選んでブロック設定を表示を選択し背景を選びましょう。
ブロック設定を表示をしたらこんな画面が出ます。
背景色を選びましょう。選んだら右上の×ボタンを押せば通常のブロックエディタに戻ります。
今回はスマホで説明してますが、PCも同様に背景色は設定できるのでPCでもチャレンジしましょう。
文字にボールドを入れる
強調したい部分については、太字を入れて変化をつけましょう。加えてアンダーラインなどを入れることで、より強調したい部分をイメージできるなります。
文字のボールドに関しては、エディタの「A」を選択をして、太字にしましょう。
こんな感じです。
ちなみに、iOSであればテキストを選択して太字設定もできます。こっちも早いですよね。
BIUってやつを押せば、ワードプレス 関係なく太字にできます。操作早いすよね、最初はこっち使うでも良いかもです。
また文字の色も変更が可能なので、適宜色の変更も実施してみましょう。
こんな感じです。
ただし、あまり色をあれこれ使いすぎると、逆に見にくくなります。色を変えるなら、1種類が2種類位が良いと思います。
よくブログで太字にアンダーラインを使ってる人がいます。
こんな感じですね。
結構読みやすくなるので、活用すると良いでしょう。
このように、タグもいいですね
ブロックとブロックの間、文にある程度動きがあることで読みやすくなります。
文章が続くと、良い内容でも離脱につながる可能性があります。
うまく装飾やグループ分けをして、記事をわかりやすくする部分に関しては工夫していきましょう。
h2の見出しに加え、h3やh4で内容を区切るのもわかりやすくなりますよ。
h2だとこんな感じ
h3だとこんな感じ
h4だとこんな感じ
h4まで使うと、記事の構成がだいぶ深くなるので、ちょっと理解しにくい記事になる気はしますが、場合によっては良いと思います。
なんか動かないって困った！って時は
たまに、文字の大きさを変えらなかったり文字の色を変えようとして変わらなかったり、アンダーラインが効かなかったりします。特にスマホのブロックエディターで起こる傾向にあります。
JavaScriptがブラウザに寄って操作の組み合わせによっては動かなくなるとかありそうです。
対策として、新しいブロックでテキストを貼り直し、やり作り直すと割とできます。
WordPressは無料で使わせてもらっているので、ある程度は致し方ないかなっていう感じです。
WordPress側の改善を適宜期待しましょう。改めてこんな便利なツールを作ってくれてワードプレス ありがとう！
まとめ
いかがでしたでしょうか。
ワードプレスにおいてブロック本ともっとわかりやすくするための応用について記載しました。
ぜひ試行錯誤を繰り返しながら、自分が分かりやすい、読む人に分かりやすいと思ってもらえると思えるような記事を作っていきましょう。
0と書いてますが、エディターによっては環境によってはちょっと動かない時があります。あれアンダーライン引こうとしているのに弾けないとか、文字の色を変えようとしてるのに変わらないとか。
それは現状としては正直致し方ない部分があるので、再度テキストをコピーして、新しいブロックを追加して実施しましょう。
