grayishスキン適用中

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. エックスサーバー
    2. wpX Speed
    3. Xserverビジネス

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

  • 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カラムデモ

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