10月22日の内容『ブロックエディタで表を書く』他

2019年10月22日

ブログの書き方

先週に引き続き、こちらのチャートを使って説明してまいりました。

今回は『どんな記事を書くか』について簡単に触れました。

まずは日記から

慣れていない方はまずは『日記』からスタートしてみましょう。アメブロなどで芸能人の日記をチェックして見ても良いです。

アメブロ芸能人・有名人ブログ

写真と説明だけでもOK

写真まずありきで、写真を貼ってから一言二言説明を加えるだけでも良いです。パソコンに向かって書くことに慣れていきましょう。

ブログお題スロット

↓こちらの記事で、ブログお題スロットを掲載していますので、ブログのネタに困った時にご活用くださると幸いです。

ブログお題スロットと ブログの書き方
毎日のブログのネタにお困りではないですか?ブログのお題をランダムで表示するブログお題スロットを作りましたので、よかったらお使いください。ブログお題スロット↓ ↓ ↓ こちらです ↓ ↓ ↓ ...

WordPress新エディタ『ブロックエディタ』を試そう

今回は、ワードプレスで「表を書く」「画像を横に2つ並べる」という高度なことを簡単にするために、ワードプレスの新エディタ『ブロックエディタ』に切り替えて行いました。

下準備:ワードプレスの設定

ブロックエディタを使うために、以下のように設定します。
※クラシックエディタプラグインを使っている場合。

設定の『投稿設定』より
「すべてのユーザーのデフォルトエディター」を「ブロックエディター」に
「ユーザーにエディターの切り替えを許可」を「はい」
にします。

これで「新規投稿」をすると、新エディタ(ブロックエディター)に切り替わります。

新エディタ、ブロックエディターの画面

この画面になじめない場合は、先ほどの投稿設定画面で、
「すべてのユーザーのデフォルトエディター」を「クラシックエディター」に戻すと元に戻ります。

ワードプレスで表を書く

表を書く場合は、↓このような面倒なタグを入力しなければなりません。

表を書くタグは『テーブルタグ』といいますが、慣れている人でも、間違えやすいです。

ワードプレスの新エディタ、『ブロックエディタ』を使えば、表を簡単に書けるようになります。

ブロックエディタで表を書く

(+)の部分をクリックします

クリックすると出てくる四角の中を、マウスのホイールでくるくるスクロールし、
「フォーマット」という枠の中にある「テーブル」を選択してください。

そこで出てくるウインドウの中の「列数」と「行数」を好きな数指定すれば表ができます。

保存してブログ画面を見ると、綺麗に表が書けています。

サンプル記事はこちらです

404 File Not Found

表の修正も可能

表の行数・列数をあとから追加したり、削除したりも可能です。

上にでてくる「テーブル(表)」のアイコンをクリックして、ドロップダウン(下に並んで出てくる一覧)の中から選べばOKです。

行や列の修正を行うときには、基準となるセル(マス)をクリックしてカーソルを置いておいてください。そうしないと、ワードプレスはどこの行や列を基準に増やせばいいのかわかりません。

写真を2つ並べる

写真を二つ綺麗に並べることは、通常は非常に面倒なコーディング(記述)が必要です。

ですが、ワードプレスのブロックエディタを使うと簡単にきれいに写真を並べることができます。

※写真は縦横比が同じ場合のみ、高さがそろいます。

まず(+)をクリックします。

こんどは、「レイアウト要素」の中の「カラム」をクリックします。

※使った順に表示されるため「カラム」の位置は異なる場合があります。

すると、ふたつ並んだ見えない枠が作られます。

|カーソルのところに「/(スラッシュ)」を入力します。

エンター(Enter)すると、一覧が出てきますので

画像を選びます。画像はアップロードしても、メディアライブラリの中から選んでも良いです。お好みで。

右側も同じようにします。

このように、綺麗に横並びします。

Youtube説明動画

2カラム画像の設定方法をYoutubeにしました

WordPress ブロックエディタで画像を2つ並べる方法

サンプル記事はこちらです

404 File Not Found

付録:ブロックエディタで文字を入力したい。

今回は、「表を書く」と「画像を2つ並べる」がテーマでしたので、文字は次回ゆっくりやりますが、ご希望が多かったので文字の入れ方を補足いたします。

文字は、カーソルを文字入れしたい部分にもっていってクリックしてEnterを押すか、
または(+)を押して「¶段落」を選べば打てます。

画像の下に文字を入れる

画像をカラムで2つの並べた場合、画像を取りまく枠ができます。
その枠の中にカーソルを持って行って文字を書くと、文字は枠の中におさまります。

画像の下に文字を入れた例

画像の外側に文字を入れる場合

カラムの外側をクリックすると、枠が解除されて通常の文字が打てるようになります。

クリックすると拡大できます

ブロックエディタのアイキャッチ

アイキャッチは、右側の下のほうにあります。

もしも、右側にアイキャッチが表示されていない場合、右上のタブが「ブロック」になっていると思いますので、「文書」を選んでから、右下を探してみてください。

ブロックエディタは慣れればクラシックエディタよりも楽になります

今回の「表」「画像2列」は、できなくてもブログは書けますので、こんな機能があるんだ、と頭の片隅に置いておいていただければOKです。

急にたくさんの新しいことが出てきたので、かなり難しく感じられた方も多かったと思います。

ですが、ブロックエディタは、慣れると今までのクラシックエディタよりもずっと簡単になりますので、楽しんで使ってみてください。

Amazonアソシエイト

今回やる予定が、時間がなくなってしまってすみませんでした。

↓こちらから申し込めます

アソシエイト・セントラル
Amazonが提供するアフィリエイト(成果報酬型広告)サービス。画像への広告埋め込み機能やお手軽ウィジェットなど初心者にも嬉しい多彩なリンク作成機能をご用意しています。紹介対象商品は5,000万点以上! 携帯・スマホにも対応。アカウント登録・利用はもちろん無料です。

次回以降、アフィリエイトについてもご説明していきます。

次回の予定

  • ブロックエディターの使い方じっくり
  • Amazonアソシエイトほか、アフィリエイトについて

リクエストもお待ちしています!

タイトルとURLをコピーしました