第17回 ブロックエディターを使いこなして記事を魅力的に仕上げよう

前回のおさらい

1「Local」を使って”ローカル”環境にWordPressサイトを構築

(対義語:ローカル環境←→本番環境)

Localを使う理由

  • コストがかからない
  • 不具合でレンサバに迷惑をかける心配がない
  • アップロード/ダウンロードがないのでレスポンスが良い(ストレスがない)

お金をかけず、誰にも迷惑をかけず、快適に制作できる。気軽に何度でも作って/壊して/消してみよう!

2「あったかキッズ」をローカル環境に再現してみよう

この実習の目的

  • ブロックエディターを使いこなそう(←今日の作業)
  • テーマを変更(インポートして有効化)するだけでサイトの見た目&機能がガラッと変わることを確認

ブロックエディターを使いこなして記事を魅力的に仕上げよう

ブロックエディター(別名:Gutenberg / グーテンベルク)とは

記事の本文をブロック単位で作成/編集できる機能(例:見出し、段落、写真、カラム、リストetc.)。v5.0以降、標準機能となった。

「ブロック単位ではない」編集ってどんな感じ?

1つの入力欄に文字や写真などをひたすら入力していくイメージ。画面はシンプルでわかりやすいが、凝ったレイアウトをしようと思うとコード(HTML/CSS)を書かなければならない。

プラグイン『Classic Editor』を有効化して新規投稿画面を開いた様子

プラグイン『Classic Editor』をインストールすると、従来のブログ編集画面に戻すことができる。

ブロックエディターを使うメリット

  • ブロックごとに様々な設定項目があり、コードを書かずとも記事にメリハリをつけることができる
  • 一連のコンテンツがブロック単位で分かれているので並び替えがラク
  • プラグインによってはブロックエディターが用意されていて、プラグインの機能を簡単に設置できる
    例)Googleマップ、スライドショー、お問い合わせフォーム

ブロックエディターの難点

  • 機能がありすぎてすべてを把握し切れない

ブロックの機能を解説

段落ブロック

もっとも基本的なブロック。普通に文章を入力すると段落ブロックになる。改行するとそこでブロックが区切られる。

ブロック内で使う機能
  • 太字 – 文字列を選択して「B」ボタンをクリック。解除する場合はカーソルを置いて「B」ボタンをクリック。
  • リンク – リンクを張りたい文字列を選択肢、リンクボタン(鎖のようなアイコン)をクリック。リンクを解除するにはリンクされた文字列のどこかにカーソルを置きリンクボタンをクリック

画像ブロック

画像を挿入するブロック。設置する画像のサイズやクリックで拡大表示なども設定できる。

ブロック内で使う機能
  • キャプション – 挿入した画像をクリックすると直下に入力欄があるのでそこに画像の説明や引用元を書く


ここまで説明したブロックを使用して下記の記事を再現してみよう

複雑度 Level 1
今だから読もう!「つくもがみ貸します」の小説の魅力

材料をダウンロード:

段落ブロック(つづき)

ブロック内の機能
  • 文字色 – 色を付けたい文字を選択し、文字の上にあらわれたボタン一覧の右寄り、下矢印のアイコンから 「テキスト色」を選択
  • テキストの配置というボタンをクリックして左揃え/中央揃え/右揃えを変更できる
  • 改行 – 通常、enterキーを押すと段落ブロックが分かれるが、段落にせずに文章の途中で改行するには、キーボードのShiftキーを押しながらenterキーを押す

メディアとテキスト

写真と文章を横並びで配置することができる。写真の位置を左右入れ替えたり、画像と文章エリアのバランスを調整できる。

ポイント

「メディアとテキスト」を入れ子にすることで、より複雑なレイアウトがつくれる
 → つまり、テキストエリアにさらに「メディアとテキスト」ブロックを挿入


ここまで説明したブロックを使用して下記の記事を再現してみよう

複雑度 Level 2
Tokyo2020 ~高森町からしあわせはこぶ 巨大人形「モッコ」が行く~ Part2

材料をダウンロード:

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x