11月29日18時まで、エックスサーバーで「独自ドメインプレゼントキャンペーン」!更新料金も無料!サーバー新規開設が条件です。

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

記事の編集方法
アイキャッチ画像は
Valeria MoschetによるPixabayからの画像

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

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

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

30分くらい集中して遊ぶと、十分基本はおさえられると思います。

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

いくみ
いくみ

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

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

「旧エディタ」というオプションもあるのですが、当記事では特に触れません。

ブロックの説明

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

WordPress投稿メニュー

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

WordPress投稿画面

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

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

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

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

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

WordPressブロック

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

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

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

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

いくみ
いくみ

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

[Enter]キーを押して新しいブロックを作り、「文章を入力、または・・・」の、「文」という漢字の左側にマウスポインターを合わせてみてください。

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

WordPressブロックの追加アイコン

または、ブロック上辺の真ん中あたりにマウスポインターを合わせてもOK。
同じくプラスアイコンがでます。

WordPressブロックの追加アイコン
いくみ
いくみ

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

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

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

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

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

いくみ
いくみ

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

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

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

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

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

いくみ
いくみ

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

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

すると自分がよく使う機能が[よく使うもの]に入っていく・・・と書きましたが。
(8月24日、訂正中です。)

よく使うのに、[よく使うもの]に入らない、という経験をしました★。失礼しました。

[よく使うもの]に頼れないときもあるかと思いますが、[一般ブロック][Cocoonブロック]を使えば、初期の内は大体大丈夫のはずです。

いくみ
いくみ

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

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

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

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

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

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

そういう場合は、プラスアイコン>[レイアウト要素]>[スペーサー]を使えます。

もしくは、パソコンキーボードで[Shift]を押しながら[Enter]キーを押して、ソフトリターンキーを入れると簡単です。(隙間を開けたいときは私はこうしてます。)

ソフトリターンキーは改行の一種ですが、新しい段落を作らずに改行だけしてくれます。

[Cocoon] テキストにつけられるスタイルやボックスの種類

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

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

ブログを始めて4か月くらいになりましたが、まだまだ使ったことがないものがたくさんあるくらいです。

いくみ
いくみ

こんな風に、ハートリストを作れるなんて知りませんでした。

Cocoonの「アイコンリスト」機能!
  • アイコンを選べる
  • アイコンの色を選べる
  • 外枠を追加して色も選べる

わいひらさんのサイトと同じスタイルを使っても、わいひらさんサイトで適用されているスキンによって、見た目が違うものがでてきます。

このボックスは、アイコンボックスの「補足情報」という種類です。

わいひらさんのサイトで、Fuwariシリーズが適用されていると以下の様に見えます。(わいひらさん独自のカスタマイズだと思っていました、10月19日訂正いたしました。失礼しました。)

いくみ
いくみ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SEO設定

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

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

WordPressSEO設定

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

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

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

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

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

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

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

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

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

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

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

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

おわりに ~ 直観的のイミ

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

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

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

もう10年前です。

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

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

いくみ
いくみ

Word2010、不便、キライ 検索。

みたいな。笑。

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

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

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

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

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

娘が1歳くらいのときかな、携帯をめちゃくちゃにスワイプしていて、偶然「携帯の懐中電灯機能」を発見しました。

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

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

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

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

いくみ
いくみ

「直観力」向上中です!

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

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

楽しみですね!

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

コメント

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