テーマ Cocoon ブロックの見栄え一覧

サイト制作の一木堂 Cocoonハウツー How To

WordPressテーマ『 Cocoon 』の基本のブロック・ビジュアル一覧です。ここからCSSなどでいくらでも変更できます。以下は「デフォルトの状態」での各ブロックの見栄えです。

ちなみにこのBOXは、右メニュー・ボーダー設定から挿入したボックスです。テキストを右クリックで選択した後、右メニューの設定の⚙から選択できます

見出しそれぞれ

このサイトのH2見出しはCSSでカスタムしてしまっているので、画像でご紹介しますが、Cocoonの基本の「H2」見出しはシンプルな四角で全塗デザインです。以下が「H2」見出しです。

H2見出し

Cocoonではこの時点で、記事の始めのH2上に「目次」が勝手に入ります。

ちなみにCocoon の「H1」はページのタイトル「テーマ Cocoon ブロックの見栄え一覧」のブロックです。

Cocoon見出し

ボックス各種

右メニュー「スタイル」から設定したボックスです

こういうことも。

こういうことも。

こういうことも。

こういうことも。

こういうことも。

吹き出し

ふきだしです。これは左のブロックメニューから挿入しています。

アイコンをクリックするとメディアから画像を取り込んで独自のアイコンにすることが出来ます

吹き出しブロックを挿入した上で、右メニューのスタイルから背景やアイコン位置を変更します。背景色や文字色は右メニューの「スタイル」から変更できます

需要の高い「あわせて読みたい」

需要が高い「あわせて読みたい」です。左から「ブログカード」ブロックを選択し、右メニューからラベルの文言を選択します。

Cocoon「あわせて読みたい」

ボタン

これはCocoonボタンブロックです。位置は上部のメニューから「左寄り」「中央」「右寄り」を選択できます。右のスタイルメニューで色、丸みなどを設定できます

QAブロック

Q
Q&Aのラベルを変更するには
A

ブロック選択した状態で右メニューから変更します

Cocoonから挿入した「アイコンリスト」です

  • リストブロックはWordpressデフォルトのリストブロックとCocoon仕様のリストブロックがあります
  • リストの頭にアイコンを付けられるのはCocoonのリストブロックのみです
  • アイコンは右メニューのスタイルから選択できます
  • 先ほどのボタンもWordpressデフォルトのボタンブロックとCocoon仕様のボタンブロックがあります
  • デザイン性が高いのはCocoonの方ですが使いやすい方をお使いになって下さい
Cocoonアイコンリスト

新記事一覧

これもCocoonブロックの「新着記事ブロック」です。

Cocoon カバーブロックを固定背景にしてスクロールコンテンツページを作る
Cocoonで作る「コンテンツがスクロールする時に切り替わっても背景が固定されている」状態……をブロックエディターのみでノーコードで作ってみました。初心者の方でも簡単に設定できます
Cocoon アイコンボックス メニューの作り方
WordPressテーマ Cocoonで作られたサイトのサイドバーなどでよく見る「アイコンメニューBOX」の作り方。初心者の方でも簡単に設定できるようにシェアしています。コピペOKな色変更コードもお伝えします。
[WordPress]Cocoon設定 の使い方全て覚え書き
推奨無料テーマ『Cocoon』では無料とは信じられ無いほどの機能が備わっているというお話は常々させていただいておりますが、ここではその「Cocoon設定」をザッと書かせていただきます。どこをどういじれば良いのか分からない、機能が多すぎて設定個所を忘れる、という方のための目次。
[WordPressテーマ]Cocoon 基本の見出し設定
ここでは Cocoon の一番簡単な、初心者の方に向けた見出しの色設定などカスタマイズをご説明していきます。
テーマ Cocoon ブロックの見栄え一覧
Cocoonの「あわせて読みたい」などラベルの入れ方を画像でご説明。Wordpressテーマ『 Cocoon 』の基本のブロック・ビジュアル一覧です。ここからCSSなどでいくらでも変更できます。以下は「デフォルトの状態」での各ブロックの見栄えです。

Cocoonブロックのプロフィールブロック

「設定」→「プロフィール」に記入した内容がここに表示されます。ライターが数人いる場合などは記事ごとに表示できるので便利です

一木堂
一木堂をフォローする

基本です

基本は左メニューからブロックを選択→右メニューでスタイルを選択

という形です。

左ブロックメニューには「Wordpress既存のブロック」「テーマ(Cocoon)ブロック」があります。テーマのブロックを使用した方がデザインの自由度が高いので、選択する時に気を付けて下さい。

カスタマイズのご依頼は一木堂まで

「一木堂」では、Wordpress テーマCocoonあるいは他テーマでも、解決できないカスタマイズをサラっと承ります。 「ここのボックスだけ色を変えたい」「ここに色の違うボタンが欲しい」など、解決したい作業、ご依頼をお待ちしています。

一木堂ご依頼はこちらから
タイトルとURLをコピーしました