Cocoonでブログ【初心者がおさえたい3機能】

cocoonで記事づくり WEBブログ
スポンサーリンク

XserverのレンタルとWordPress、Cocoonのインストールが完了。

初めて記事を書こうと投稿画面を開いたら、使い方が全くわからず手が止まりました

そんな経験をもとに、初心者ブロガーさんに向けて、まずはこれを知っておこうというCocoonの基本3つを今回はご紹介します。

吹き出し入れたりしたいよね!

この記事は私の記念すべき1記事目です。

つまりこれを読めば、初心者ブロガーさんもこの記事程度のことはできるようになるということです。

1. ブロックエディター(&Cocoon Blocks)を知ろう

初心者さんがまず知るべき言葉

  • ブロックエディタ
  • Cocoon Blocks

WordPressのエディターに慣れるまで
色々いじったり調べたり、本当に時間がかかりました。

Cocoonエディター画面

記事を書き始めて、改行しようとEnterを押すと次々とブロックが追加される・・。
改行さえできない始末。

※ちなみにブロック内での改行は<Shift>+<Enter>です。

Cocoonのサイトを色々読んで、下記説明にたどり着きました。

WordPressも5.0となりブロックエディター(Gutenberg)が標準化されました。-(略)-

Cocoon1.6.4以降Cocoon Blocksはテーマ内に組み込まれました。
テーマをインストールするだけでCocoon用のブロックを利用できます。

Cocoon公式サイトより。https://wp-cocoon.com/how-to-use-cocoon-blocks/

つまり、WordPressの投稿画面はブロックエディターと呼ばれています。

さらにCocoonをインストールすると、Cocoonのブロック(Cocoon Blocks)も利用できる。

ためしに、エディターの「ブロックの追加」をクリックすると、下の方にCocoonのブロックがあります。

この存在を知るだけで、記事ライティングの幅がかなり広がります。

こんな色つきのブロックを入れたり

こんなタブのボックスを作れます。


Cocoonブロックでできることは、公式サイトに説明があるので
慣れるまで、下記ページをたまに見ながら作業するのがおすすめです。

やれることがビジュアルに列挙されていて、とても参考になります。

これだけでもう、見栄えのある記事が完成。

スポンサーリンク

2. Cocoonの吹き出しを好きなイラストで作る

よくブログで見かける吹き出しも、エディターの使い方がわかれば、サクサク入れられます。

Cocoonブロックには、デフォルトで吹き出しイラストが登録されているので、エディターが使えれば、吹き出しはすぐに入れられるよ。

私もデフォルト。こんなLINE風の吹き出しもあるの。

はい、エディターの「吹き出し」を使えば、すぐにこんな会話が完成します。

でもせっかくなので、好きなイラストを入れて、自分のブログっぽくしたいですよね。

作り方は簡単。

  1. アイコンに入れる好きな画像を用意します。正方形で大きさは160px~200pxくらい。
パワポでイラスト作成

私はパワーポイントで作って画像(png)で保存しました。パワポの「図として保存」機能でサクっと完成。

  1. 一応サーバー容量節約のため、TinyJPGで軽量化しておきます。インストール不要でWEB上で使えるツールなのでとても便利。
TinyJPG – Compress JPEG images intelligently
Make your website faster and save bandwidth. TinyJPG is the best automatic JPEG optimizer and compresses your JPEG images by 40-60%!
  1. 作った画像を、Cocoonの吹き出しに設定する。

WordPressの[Cocoon設定]の中にある[吹き出し]から[新規追加]に進みます。

  必要な項目を入力したら完了です。

あとはエディターで「吹き出し」を選ぶと右側に表示される
ブロックのスタイル設定から、自分が登録した吹き出しを選択すると、こんな風に表示されるよ。

3. Cocoonの見出しブロックを使い【目次】を作る

記事のアタマの方に表示される、これです。

えっと、マスターするもない、Cocoonの「見出し」ブロックで、本文中のタイトルを入力すると自動で目次を作成してくれます。

見出しタグ
[見出し]ブロックを入れるだけ

記事を書く間にいつのまにか目次が完成していました。なんてすばらしい機能だ。

ちなみに、Cocoonのスキンによって、「見出し」のデザインも「目次」のデザインも変わります。色々試してみて好きなデザインのスキンをお選びください!

スキンによってブログの雰囲気がかなり変わります

以上、とりあえずこの3つを理解しておけば、初めてブログを書くには十分だと思います。

エディターに慣れてきたらアイキャッチ画像なども入れたいですね。

最後までお読みいただき、ありがとうございます!
Enjoy blogライティング!

2019.6.27追記

Cocoonブロックの「ブログカード」がどうしても表示されず、しばらく諦めていましたが、表示できるようになりました。

お困りの方は下記をご参照ください。

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