以前にこれからはブロックエディターで記事を書きますと宣言しましたが、一つ問題がある事に気が付きました。
現在使っているテーマ「Cocoon」がどの位ブロックエディターに対応してくれているのかを調べなくてはなりません。
そこで今回はCocoonでブロックエディターがどの位使えるか検証します。
ブロックエディターについてはこちらに記事を載せていますのでよろしければお読みください。
Cocoonで出来るカスタマイズ
Cocoonカスタマイズ
まずは内部リンクが出来るか確認します。
上にブロックエディター記事に飛べるようにリンクを設定してみました。
旧エディター同様簡単にリンク出来ました。
リンク自体は出来る事は解っていましたがカスタマイズもそのままで安心しました。
リスト
リストを作ってみましょう
- テスト１
- 漢字
どうでしょうか。
リストも簡単に作れました。
漢字にはルビもふってみましたがちょっと小さい感じですね。
ただ、以前はぽんひろさんの色付きのお洒落なリストを使わせて頂いていたのですがそれはブロックエディターでは使えないのかもしれません。
残念！！
- このリストを使いたい時だけクラッシックにすればOK
- やっぱり色付きがいい
- ちょっとてまがかかります
吹き出し
ワタシのブログによく登場する吹き出しはどうでしょうか？
吹き出しも簡単に出来た。
スタイルとか一目でわかるようになった。
文字や吹き出しの色も簡単に変えられて前よりも便利！！
でもちょっと吹き出しの上下の余白が広いのが気になります。
調整が効くのか後で調べていきたいと思います。
後、気になったのが絵の下に未入力と文字が出ますがプレビューでは消えているので問題は無いでしょう。
吹き出しの枠も変更できるから便利です。
白抜き
白抜きなのにこんなにカラフルにも出来ます。
白抜きでもこんなにカスタマイズが出来るとは驚きです。
全部の機能は使いこなせないかな。
アフィリエイト
ここではアフィリエイト関係の機能を見ていきましょう。
ボタン
アフィリエイトをするなら必須のボタンです。
種類もたくさんあって目立ちますよ。
バナー
上はAmazonのバナー広告ですがCocoon独自ではなくブロックエディターで設定する事が出来ます。
ブロックエディターの場合入力画面ではバナーは表示されずHTMLが表示されるので必ずプレビュー画面で間違えが無いか確認しましょう。
ブロックの追加からカスタムHTMLを選びます。
赤枠で囲っているところです。
ここをクリックするとHTMLを入力する画面が出てきます。
左画面の赤枠内にASPからコピーしてきたコードを入力して終了です。
これで上のようなAmazonのバナーを張る事が出来ました。
アフィリエイトタグ
Cocoonにはいつも使う広告コードを管理できる項目があります。
まずはCocoon設定のアフィリエイトタグを開きます。
上の図で赤矢印の場所にアフィリエイトタグを入力します。
ワタシは先程のAmazonのバナーを登録しました。
それではバナーの貼り付け方を実証していきましょう。
手順としては
赤い枠で囲まれた場所をクリックします。
登録したAmazonバナーをクリックするだけです。
まとめ
今回はCocoonがクラッシックエディターとブロックエディターで使い勝手の違いを見てみました。
結論として使い勝手はクラッシックエディターと変わらないどころかそれ以上に改良されているように感じました。
ブロックエディターの簡略性とCocoonの多機能を合わせる事で効率よく記事を書くことが出来るはずです。
一度ブロックエディターとCocoon を試してみませんか？
