WordPressのテーマであるcocoonにあるブロックを利用して、かっこいいWebページを作りたいと思いました。
まずは、どんなことができるのかを調べてみようと思いました。

アイコンボックスとは?
案内ボックスとは?
ボックスの背景により、メッセージを強調する。8種類の色が用意されている。
白抜きボックスは?
コンテンツを囲むだけのボックス
付箋風ボックスとは
目立つ濃いめの色でメッセージを伝える
アコーディオン(トグル)
クリックすることで、コンテンツ内容の表示を切り替えることができる。
検索案内とは、訪問者に検索を促すためのボックス。商品やお店の名前で検索を促す。
タイムラインは時系列を表現するためのブロック
- ラベル嘉永 / 安政 / 万延 / 文久 / 元治 / 慶応
嘉永 かえい 1848~1854 嘉永6年に黒船来航
安政 あんせい 1854~1860 安政の大獄は安政5年から6年にかけて
万延 まんえん 1860~1861 孝明天皇、怒り、和宮降嫁が延期
文久 ぶんきゅう 1861~1864 薩英戦争
元治 げんじ 1864~1865 五稜郭完成
慶応 けいおう 1865~1868 坂本竜馬、中岡慎太郎、暗殺
アイコンリストのアイコンは次の通り

Cocoon汎用ボックス
見出しボックス
個々のエリアに見出しに対する補足文章を入力します。枠の色、アイコンなどの設定が可能
タブ見出しボックス
タブ風の見出しを作成

ラベルボックス
見出しをラベルのように扱う
COCOONレイアウト
2カラム
3カラム
3カラムの左側
左側には、文字だけを入力します。
3カラム中央
中央のカラムは新着記事
3カラム右
https://www.conoha.jp/lets-wp/wp-shortcode/! 基本的な使用方法を紹介
WordPressのショートコードを活用しよう! 基本的な使用方法を紹介
2つのエリアに分かれたレイアウト

背景に色を設定できる。
画像を配置することもできる
ブロック作成時は、背景色がついているようにみえるが、公開表示では色がついていない。
スマホの表示では2カラムは再現されていない。
COCOONブロック以外のブロックを使いレイアウト作成
デザインの項目に含まれる「カラム」を利用しました。

画像を左寄せにしてカラム内に文章を入れてみた
コメント