WordPressのテーマであるcocoonにあるブロックを利用して、かっこいいWebページを作りたいと思いました。
まずは、どんなことができるのかを調べてみようと思いました。
アイコンボックスとは？
アイコンを利用して、直感的にメッセージを伝えるボックス
次のようなタイプがある
案内ボックスとは？
ボックスの背景により、メッセージを強調する。８種類の色が用意されている。
白抜きボックスは？
コンテンツを囲むだけのボックス
付箋風ボックスとは
目立つ濃いめの色でメッセージを伝える
アコーディオン（トグル）
クリックすることで、コンテンツ内容の表示を切り替えることができる。
検索案内とは、訪問者に検索を促すためのボックス。商品やお店の名前で検索を促す。
タイムラインは時系列を表現するためのブロック
- ラベル嘉永 / 安政 / 万延 / 文久 / 元治 / 慶応
嘉永 かえい 1848～1854 嘉永６年に黒船来航
安政 あんせい 1854～1860 安政の大獄は安政５年から６年にかけて
万延 まんえん 1860～1861 孝明天皇、怒り、和宮降嫁が延期
文久 ぶんきゅう 1861～1864 薩英戦争
元治 げんじ 1864～1865 五稜郭完成
慶応 けいおう 1865～1868 坂本竜馬、中岡慎太郎、暗殺
アイコンリストのアイコンは次の通り
Cocoon汎用ボックス
見出しボックス
個々のエリアに見出しに対する補足文章を入力します。枠の色、アイコンなどの設定が可能
タブ見出しボックス
タブ風の見出しを作成
ラベルボックス
見出しをラベルのように扱う
COCOONレイアウト
２カラム
3カラム
３カラムの左側
左側には、文字だけを入力します。
3カラム右
https://www.conoha.jp/lets-wp/wp-shortcode/！ 基本的な使用方法を紹介
WordPressのショートコードを活用しよう！ 基本的な使用方法を紹介
２つのエリアに分かれたレイアウト
背景に色を設定できる。
画像を配置することもできる
ブロック作成時は、背景色がついているようにみえるが、公開表示では色がついていない。
スマホの表示では２カラムは再現されていない。
COCOONブロック以外のブロックを使いレイアウト作成
デザインの項目に含まれる「カラム」を利用しました。
コメント