現在デフォルトスキンとして「Momoon(アクア)」を適用中。

Cocoon Blocksの現在の対応状況

Gutenberg対応デザインブロックエディター
この記事は約10分で読めます。

Cocoon Blocksで現在利用できるデザインです。

まだまだ全てのCocoonテーマスタイルに対応しているわけではないのでご了承ください。

Cocoon Blocks プラグインはテーマ内に組み込まれました。プラグインを利用している場合は無効にしてください。

スポンサーリンク

Cocoonインライン

Cocoon 1.7.2より、ドロップダウン形式で装飾を選べるようになりました。

ブロックエディターの文章装飾

「文字」リスト

太字(strongタグではなくboldクラスで指定したもの)

吾輩は猫である。名前はまだ無い

赤字

吾輩は猫である。名前はまだ無い

赤太字

吾輩は猫である。名前はまだ無い

青字

吾輩は猫である。名前はまだ無い

青太字

吾輩は猫である。名前はまだ無い

緑字

吾輩は猫である。名前はまだ無い

緑太字

吾輩は猫である。名前はまだ無い

キーボードキー

文字をコピーするには Ctrl + C キーを押してください。

貼り付けをするには Ctrl + V キーを押してください。 ※Windows

打消し線(delでなくsタグを用いた訂正の意味があるもの)

吾輩は猫である。名前はまだ無い

「マーカー」リスト

黄色マーカー

吾輩は猫である。名前はまだ無い

黄色アンダーラインマーカー

吾輩は猫である。名前はまだ無い

赤色マーカー

吾輩は猫である。名前はまだ無い

赤色アンダーラインマーカー

吾輩は猫である。名前はまだ無い

青色マーカー

吾輩は猫である。名前はまだ無い

青色アンダーラインマーカー

吾輩は猫である。名前はまだ無い

「バッジ」リスト

ちょっとしたワンポイントに利用します。

参考

重要

注目

出典

引用

案内

注意

文献

公式

「フォントサイズ」リスト

文字サイズを変更します。

12px

14px

16px

18px

20px

22px

24px

28px

32px

36px

44px

48px

ふりがな(ルビ)

使用方法。

彼女に薔薇ばらを贈った。

祖父の趣味は、仙人掌さぼてんでることだ。

Cocoonブロック

Cocoonブロックは、ブロック形式のデザインです。まずは、旧エディタースタイルの移植から。

アイコンボックス

インフォメーションボックス

クエスチョンボックス

注意喚起ボックス

  • メモボックス
  • このように箇条書きも
  • 簡単になりました
  1. コメントボックス
  2. 番号つきリストも
  3. 利用可能

OKボックス

NGボックス

GOODボックス

BADボックス

プロフィールボックス

案内ボックス

プライマリー

セカンダリー

サクセス

  • インフォ
  • 非順序リスト
  • ボックス内でリストブロック利用
  1. ワーニング
  2. 順序リスト
  3. pからリストに変換可能

デンジャー

ライト

ダーク

タブボックス

タブボックスを全部表示させると、スペースが必要なので一部だけ。

チェック

コメント

ポイント

TIPS

ヒント

  • ピックアップ
  • 箇条書きも
  • 可能です
  1. ブックマーク
  2. 非順序リストにも
  3. 変換簡単

メモ

ダウンロード

休憩

Amazonの商品紹介などに

OK

NG

GOOD

BAD

プロフィール

白抜きボックス

灰色

黄色

  • 赤色
  • 箇条書き
  1. 青色
  2. 箇条書き

緑色

付箋風ボックス

灰色

黄色

  • 赤色
  • 箇条書き
  1. 青色
  2. 箇条書き

緑色

吹き出し

Cocoonの吹き出し設定に登録した吹き出し設定を即座に呼び出せます。v1.7.0~

「吹き出し」設定の状態がそのまま表示されます。

使用頻度が高いものを呼び出すときに便利。

吹き出しEX

通常の吹き出しを拡張した吹き出し機能です。後から吹き出し表示のスタイルを変更できます。 v1.7.0~

EXで呼び出すと同じ表示スタイルを呼び出し後に変更できます。

人物の位置を変えたり

スタイルをフラットにしたり

LINE スタイルにしたり

アイコンの表示スタイルも変更できます。

タイムライン

時系列や、手順を案内するときに便利。

ブロック設定からアイテム数を変更できます。

デモはこちら。

サイト開設手順
  • STEP1
    ドメインを取得する

    サイトを始めるには ドメインを取得した方が良いでしょう。

    僕が利用しているドメインサービスはムームードメイン です。

  • STEP2
    レンタルサーバーに登録する

    次に、サーバースペースを借りましょう。お勧めはこのあたり。

    1. MixHost
    2. エックスサーバー
    3. カラフルボックス

    ↑のようにリストも利用できます。

  • STEP3
    WordPressのインストール

    サーバーのインストール機能を利用してWordPressを導入しましょう。

ブログカード

もちろん外部リンクも可能。

ボタン

ボタン小

ボタン中

ボタン大

大ボタンは、左右寄せ、中央寄せの変化はなく全て同じです。

丸型ボタン

丸いボタンも可能です。v1.8.3~

ボタンを丸める

丸型ボタンは「囲みボタン」でも利用できます。

光るボタン

ボタンが光ります。 v1.8.3~

ボタンを光らせる

光るボタンは「囲みボタン」でも利用できます。

囲みボタン

囲みボタンは、アフィリエイトタグなどを改変したくない場合に利用します。

ボタン小

ボタン中

ボタン大

トグル(アコーディオン)ボックス

デフォルトトグルボックスの内容

黄色トグルボックスの内容

ピンクトグルボックスの内容

赤色トグルボックスの内容

青色トグルボックスの内容

  • 緑色とブルーボックスの内容
  • もちろんリストも使える

アイコンリスト

リストの・をアイコンにして枠線設定ができるブロックです。

使い方はこちら。

アイコンリストの使用方法

動作デモはこちら。

必要なもの(チェックリスト風)
  • 印鑑
  • 本人確認書類(運転免許証など)
  • 現金(6万円程度)
  • 記入した必要書類一式
メリット
  • 早い
  • 安い
  • うまい
デメリット
  • 女性が入りにくい
  • 栄養が偏る

検索案内

検索を促すスタイルも表示できます。クリックすると検索もできます(※AMPページでは検索できません)。

汎用ボックス

ボックスの見出し、アイコン、色を自由に選択し、汎用的に利用できるボックスブロックです。

見出しボックス

見出しと内容を書き込める汎用ボックスです。

色は20種類以上、アイコンは50種類以上の中から選択できます。

案内

ワンポイント案内など。

購入したもの

Amazon関係の内容など。

注意

注意喚起を促す内容など

経路

交通手段の入力など。

○○の日程

スケジュールなど。

タブ見出しボックス

フォルダー風のタブ見出しボックスです。

色は20種類以上、アイコンは50種類以上の中から選択できます。

○○のコメント

人物の発言など。

注意しましょう

注意喚起文など。

良かった点

OKな内容など。

良くなかった点

NGな内容など。

質問

問い合わせ内容など。

ラベルボックス

ラベルボックスは、囲み枠の上部にラベル形式で見出しを表示できる汎用ボックスです。

色は20種類以上、アイコンは50種類以上の中から選択できます。

○○とは

ワンポイント説明など。

○○の経費

金銭に関することなど。

ポイント

ポイントとなるような内容など。

カスタマイズの際は

WordPressカスタマイズの際に気をつけたい点など。

検索を促す内容など。

マイクロコピー

ボタンに付加する 補助文書など。 (v0.1.1~)

マイクロテキスト

\ 無料WordPressテーマ /
/ 100%GPL \
\ 初期セットアップはこちら /
/ 取り扱い説明書 \
\ 全記事一覧 /
/ 様々な記事 \

マイクロバルーン

吹き出しつきのをマイクロコピーです。色も変更できます。

通常のバルーン
円形にもできます
色変更も可能
色変更して円形にするなんてことも
マイクロコピーバルーン
色も豊富

Cocoonレイアウト

カラムレイアウトです。v1.7.4~

2カラム

2カラムでは、オプションで複数のカラム比率を選ぶことができます。

2カラムの使用デモ

1:1

1:2

2:1

1:3

3:1

3カラム

縦3列のカラムです。

3カラムデモ

ブロックエディター
スポンサーリンク
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめレンタルサーバー

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年4ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに20%割引(※2019/12/18 17:00まで)。

クーポンコード:Y2KIC92J9Y

クーポンの使用方法はこちら

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:16年

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:1年2ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon

コメント テーマの質問はフォーラムへ

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