[Cocoon] 記事の編集方法 ~ ブロックエディターを使う

[Cocoon] 記事の編集方法 ~ ブロックエディターを使う
アイキャッチ画像は
Valeria MoschetによるPixabayからの画像

「Gutenbergブロックエディター」で記事を編集する方法を紹介します。

・・・ナニ?と思っても大丈夫です。

初期設定のままなら、Gutenbergブロックエディターを使っていることになります。

3記事も書けば、ブロックの動作にも慣れてくると思います。

いくみ
いくみ

記事の作成は、初日に唯一大丈夫そうと思ったポイントです。

マウス操作とタイピングのみでOKです。

「旧エディタ」というオプションもあるのですが、当記事では特に触れません。(とっかかりは旧エディタのが簡単に思えても、「ブロックエディタ」のがおススメです。)

ブロックの説明

[投稿]メニューの[新規追加]をクリックしてみてください。

WordPress投稿メニュー

以下のような画面になります。

WordPress投稿画面のブロック

一番上は、記事タイトル専用のブロックです。

その下にあるのが普通の「ブロック」です。

この普通のブロックに、文を入力したり、画像ファイルや装飾付きのボックスを挿入したりして、記事を作っていきます。

パソコンキーボードの[Enter]キーを押すと、新しいブロックを作れます。

いくみ
いくみ

まずは文を入力してみましょう。

WordPressブロック

クリックするとカーソルが現れて、すぐに文章を入力できます。

クリックしたのにカーソルが出ないと思ったら、もう一度[Enter]キーを押してみてください。

新しいボックス内でカーソルが有効になっていると思います。

ブロックの扱いに慣れると何てこと無いのですが、最初はちょっとモタモタするものです。

いくみ
いくみ

さて、ブロックの使い方を説明します

すべては、プラスサインから始まります。

プラスサイン:[ブロックの追加]アイコンです。クリックすると、更にメニューが表示されます。どのような機能を使うかを選べます。

WordPressのバージョンによってちょっと動作が違います。

[WordPress 5.5]

[WordPress 5.5の場合]

1.ブロックの右辺にプラスサインが表示されています。クリック。

以下のようになります。

WordPress ブロックメニューの選択

[WordPress 5.5より前]

1.新しいブロックをクリックしてください。

WordPress編集画面ブロック

2.以下のように、プラスアイコンが現れます。クリック。

WordPress編集画面プラスサイン

3.vマークは表示・非表示ボタンです。クリックすると、各セクションのメニューを広げて表示させたり、たたんで非表示にしたりできます。

一番右にあるスクロールバーを下げると、更にまだメニューがあります。

WordPressブロックの追加メニュー
いくみ
いくみ

このプラスサインのアイコンが、全ての機能につながるドアなのです。

いくみ
いくみ

ここから先は、いかに遊ぶかです。

「プラスアイコン」をクリックして表示されるメニューをイロイロと選んで試してみてください

何がどこにあるかを覚えるまで、使いにくく感じることもありますが、それも段々と慣れていきます。

「プラスアイコン」の中身のメニューの概要は、以下のサイトが分かりやすいなと思いました。

基本はもちろん、詳しいところも紹介されていて勉強になります。画像付きです。

いくみ
いくみ

とにかく早く書きたい・・・。

という場合はですね、プラスアイコンをクリックして、[一般ブロック](WordPress5.5では[テキスト]ブロック)と[Cocoonブロック]だけ試せばよいと思います。

いくみ
いくみ

慣れてきたら、他のメニューも試したいですね。

ブロックで、スラッシュ/を入力した場合も、以下のように機能メニューが出ます。
ご参考まで。

WordPressブロックの追加メニュー

空っぽのブロックは記事に表示されません。

空っぽのブロックは「何も無い」ことと同じです。

文と文の間を開けたい場合に空っぽのブロックを入れても隙間はできません。

そういう場合は、プラスアイコン > [レイアウト要素] (WordPress5.5では[デザイン]) > [スペーサー]を使えます。

[スペーサー]の高さは、ドラッグか、右サイドに数値を入れるセクションが現れますので、そこで調整します。

文字装飾とボックスの種類

ものすごくたくさんの種類がありますので、わいひらさんの以下のページでチェックするのがおススメです。文字に色をつけたり、いくつかの機能を使う動画もあります。

ボックスの種類もたくさんリストされているので、ここで目星をつけて、好きなスタイルを使ってみましょう!

1年やってみて思うのは、あんまり多くの種類を使うよりも、数種類を使いまわすほうが読みやすいかなとは思います。スタイルを減らそう・・・と修正中です。

いくみ
いくみ

こんな風に、ハートリストも作れます。

Cocoonの「アイコンリスト」機能!
  • アイコンを選べる
  • アイコンの色を選べる
  • 外枠を追加して色も選べる
  • ボックス内に色もつけられる

わいひらさんのサイトと同じスタイルを使っても、自分の画面と見た目が違うものがでてきます。スキン機能で、ボックススタイルに独自のデザインや色合いがつけられている場合があるからです。

例えば以下の[補足情報]スタイルは、[Fuwari]スキンシリーズを使っている場合のみ使えます。

いくみ
いくみ

このスタイルかわいい・・・!

私がよく使うブロック機能

私がよく使うブロックメニューを紹介します。

中身があるブロックをクリックすると、以下のようになります。

WordPressブロックの詳細設定アイコン

ズラリと、文字スタイルのアイコンが並んでいます。

一番右にある、3つの点が縦に並んでいるアイコンをクリックすると以下のようなメニューが表示されます。

WordPressブロックの詳細設定メニュー

色々ありますが、私が良く使うのは[複製]、[前に挿入]([後ろに挿入]も同じく)、[ブロックの削除]です。

[複製]:全く同じブロックができます。一言だけ変えれば良い場合などに便利です。

[前に挿入]:クリックすると新しいブロックが前(上の行)に挿入されます。

[後ろに挿入]:クリックすると新しいブロックが後ろ(下の行)に挿入されます。

[ブロックの削除]:文字通り、ブロックが削除されます。

画面にショートカットキーも表示されていますね。[複製]のCtrl + Shift + Dは良く使うようになりました。それ以外は押しにくくて、クリック操作しています。

あとは、[ブロックの移動]機能もよく使います。

[WordPress5.5]

中身があるブロックをクリックすると、以下のようなオプションがでます。

WordPress5.5 [ブロックの移動]機能

^ マークをクリックすると上に、下方向のマークをクリックすると下に移動します。

[WordPress 5.5より前]

中身があるブロックの左辺にマウスをもっていくと、以下のようなオプションがでます。

WordPressブロックの移動アイコン

^ マークをクリックすると上に、下方向のマークをクリックすると下に移動します。

複数のブロックを選択しても、この矢印が出てくるので、かたまりで一気に移動させたい時も使えます!

SEO設定

投稿画面を最後までスクロールすると、SEO設定のセクションがあります。

画面内に、非常に分かりやすい説明があります。

WordPressSEO設定

説明に従って入力してみましょう。

[メタディスクリプション]というセクションに入れた説明文は、以下のように表示されますので、結構大切だと思います。

WordPressSEO設定,メタディスクリプション

面倒な場合は省略可能ですが、自分でできるSEO対策なので、私は入力するようにしています。

下書き保存・プレビュー・公開ボタン

投稿画面の右上にボタンがあります。

WordPress下書き保存、プレビュー、公開ボタン

記事を書き終わっていない場合は、[下書きとして保存]をクリック。

記事がどんな風に表示されるか確認するには[プレビュー]をクリック。

書きあがって公開したい場合は[公開する]ボタンをクリックですね。

プレビューを開くと、画面下に以下のようなメニューがでてきます。

Cocoonレスポンシブテストリンク

[レスポンシブテスト]をクリックすると、様々な携帯・タブレットでの表示を確認できます。ぜひ利用しましょう。

サーチコンソールでURL検査

新しい記事を書きました、とか、記事を更新しました、っていうのをグーグルに報告できる機能があります。URL検査をして「インデックス登録」というのをすると、グーグルがページを認識してくれます。

平たく言えば、グーグルの検索結果に載せてくれますか?っていうお願いをするわけですね。

本格的に理解したい場合は、以下の公式ページをお読みください。

上記のページにありますが、注意点としては。

「URL は Google に登録されています」と表示されても、実際にそのページが検索結果に表示されるとは限りません。

引用元:https://support.google.com/webmasters/answer/9012289?hl=ja

インデックス登録をしたけど、検索結果に無いというお悩みがある場合の対策は以下のページにありました。

インデックス登録の方法はいたって簡単です。

記事を公開したら、そのURLをコピペしてサーチコンソールの画面にいきます。

WordPressブログ投稿後 サーチコンソール

上部のボックスにURLを貼り付けてEnterキーを押すだけです。

その後メッセージに従ってクリックしていきます。

[新記事の場合]

「Googleからインデックスデータを取得しています。」というメッセージの後に、問題が無ければ

「URLがインデックスに登録されていません。」と出ます。

「インデックス登録をリクエスト」をクリックします。

(問題がある場合は、リンクをクリックしてみましょう。)

[更新記事の場合]

「URLはGoogleに登録されています。」というメッセージの下に、「ページを更新しましたか?インデックス登録をリクエスト」というリンクがあるのでクリックです。

おわりに ~ 直観的のイミ

直観的に操作できるソフト」というのが流行りだして久しいですね。

WordPressの投稿画面もそう表現されていると思います。

私は直観的ではないらしく、その走りであったと思われるWord2010がでたときは戸惑いました。

もう10年前です。

古き良きOffice 2003&Windows XPの大ファンでした。

職場で2010が導入されたとき、ネガティブサーチをしてしまった自分を覚えています。

いくみ
いくみ

Word2010、不便、キライ 検索。

みたいな。笑。

私の解釈ですが、「直観的」って、「メニューが隠れてます」ってことです。

プラス、「文字ラベル」ではなく、「アイコンラベル」だよってことです。

マウスや指をウロウロさせて、とにかくクリック・スワイプ・タップしてみるのが大切なんですよね。

それができる直観的な方々は、どんどん新しい機能を見つけられるんだと思います。

携帯画面の上辺をスワイプすると、あんなにたくさんメニューが出るなんて、私は気が付くのすごく遅かったです。

娘が1歳くらいのときかな、携帯をめちゃくちゃにスワイプしていて、偶然「携帯の懐中電灯機能」を発見しました。(それまで、自分の携帯には無いのだと思っていました。)

最高に便利なGoogle Docsとかを使い始めたのも、遅いほうだったと思います。

9個のマルからなるアイコンの存在に気が付かないし、クリックしてみようという展開にならなかったんですよね~。

「便利アプリ!」とかの文字ラベルだったら、速攻気が付いてクリックしたと思うのですが。

・・・という自分の性質に気が付いたのもブログのおかげで、最近は、超絶シンプルな、よく分からないアイコンでもホバーしてみるというのを心がけております。

いくみ
いくみ

「直観力」向上中です!

WordPressはやっぱり、単純に「文字を打って記事を書く」に至るまでに、色々とあったなと思います。

でも、いよいよ、いよいよ、記事の投稿!

楽しみですね!

WordPressブロックエディタの使い方
StockSnapによるPixabayからの画像

コメント

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