Cocoon Blocksの現在の対応状況

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

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

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

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

\エックスサーバー開発のWordPressテーマ/
エックスサーバー開発のWordPressテーマ

Cocoonインライン

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

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

「文字」リスト

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

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

赤字

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

赤太字

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

青字

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

青太字

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

緑字

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

緑太字

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

キーボードキー

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

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

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

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

「マーカー」リスト

黄色マーカー

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

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

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

赤色マーカー

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

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

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

青色マーカー

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

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

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

「バッジ」リスト

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

参考

重要

注目

出典

引用

案内

注意

文献

公式

「背景アイコン」(テーブルなどでの比較評価用)

ガスコンロとIHヒーターの比較表

調理機器ガスコンロIHヒーター
光熱費都市ガスなら最も安い夜間・早朝なら都市ガスと同等
安全性直接火を扱うことによる危険性高齢者・子供・ペットにも安心
お手入れバーナー周りの凸凹が面倒フラットで掃除しやすい
調理器具大体の鍋・フライパンが使用可能IH対応器具が必要
高火力の同時調理全口で同時に高火力が可能2口以上の高火力は難しい
詳細ページ詳細ページ
参考:生活堂より

上記テーブルの内容は「背景アイコン」と「インラインボタン」を組み合わせて作成しています。

「インラインボタン」リスト

文章中やテーブルのセル内にボタンを作成したい時に使用します。

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

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

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

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~

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

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

吹き出しブロックはいろいろなことができます。

人物の位置を変えたり

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

LINEスタイルにしたり

アイコンを四角型にもできます。

タイムライン

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

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

デモはこちら。

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

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

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

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

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

    1. エックスサーバー
    2. wpX Speed
    3. Xserverビジネス

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

  • STEP3
    WordPressのインストール

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

ブログカード

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

ボタン

ボタン小

ボタン中

ボタン大

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

丸型ボタン

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

ボタンを丸める

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

光るボタン

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

ボタンを光らせる

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

囲みボタン

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

ボタン小

ボタン中

ボタン大

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

デフォルトアコーディオンボックスの内容

黄色アコーディオンボックスの内容

ピンクアコーディオンボックスの内容

赤色アコーディオンボックスの内容

青色アコーディオンボックスの内容

  • 緑色アコーディオンボックスの内容
  • もちろんリストも使える

アイコンリスト

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

使い方はこちら。

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

動作デモはこちら。

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

検索案内

検索を促すスタイルも表示できます。クリックすると検索もできます。

FAQ

FAQ形式で質問と答えを入力することができます。FAQブロックはGoogleなどのリッチスニペットに対応しています。

Q
Cocoonテーマは無料で使用することができますか?
A

Cocoonテーマはダウンロードも使用も全て無料です。

Q
Cocoonテーマのライセンスは何ですか?
A

CocoonはGPL v2ライセンスを採用しています。

タブ

タブ切り替えで複数のコンテンツを切り替えて表示することもできます。

  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4
  • Tab 5

1番目の内容

2番目の内容

3番目の内容

4番目の内容

5番目の内容

レーダーチャート

レビューや能力値表示に便利なブロックです。

ランキング

ブロックエディターでもランキングを呼び出せます。

高速かつ高い安定性を誇る高性能レンタルサーバー【エックスサーバー】稼働率99.99%以上の高い安定性で、業界トップクラスの高コストパフォーマンスを誇る高品質レンタルサーバーです。

まずは無料お試し10日間。

サービス運営期間:21年

テンプレート

登録したテンプレートショートコードも呼び出せます。

以下はテンプレートで呼び出したものです。

\WordPressの情報を発信中!/

ボックスメニュー

大きなボックス形式でメニューリンクを表示します。

アイコン形式

画像形式

広告

「Cocoon設定」→「広告」タブ→「ショートコード・広告ブロックを有効にする」が有効の場合、設定された広告が表示されます。

現在は広告が無効になっているため表示されません。

プロフィールボックス

「プロフィール」ウィジェットと同様のものが表示されます。

わいひら

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

わいひらをフォローする

試着記事

「新着記事」ウィジェットと同様の設定ができます。

人気記事

「人気記事」ウィジェットと同様の設定ができます。

新着情報

「新着情報」ウィジェットと同様の設定ができます。

ナビカード

「ナビカード」ウィジェットと同様の設定ができます。

CTA

「CTA(Call To Action)」ウィジェットと同様の設定ができます。

有料テーマを購入するなら

XWRITE(エックスライト)は、誰でも簡単に使えるWordPressテーマです。
テーマをインストールすることで、さまざまな機能を利用できるようになり
専門的な知識がなくても手軽にブログを作成できます。

Cocoonと同様、エックスサーバーのテーマです。

汎用ボックス

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

見出しボックス

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

色は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をコピーしました