WordPressの無料テーマ「Cocoon」
↓↓↓ ボックス（案内）を使うと以下のようになります。
文字に大きめの背景色が付いたようなイメージです。強調したい文字や、ちょっとしたアクセントをつけるときなどボックスツールは非常に便利です。
▶こんな悩みの方向け
いまいちCocoonのツールの使い方がわからないブログ初心者向けに発信しています。
▶ この記事では
- Cocoonの「ボックス（案内）」の使い方【動画あり】
- 箇条書きを合わせて使う場合の方法
ボックス（案内）を活用して、ブログサイトのイメージアップの参考にしてみてください。
その他、無料テーマCocoonの記事は最後にありますので合わせてご覧ください。
こちらでCocoonメニュへスキップする
Cocoonの「ボックス（案内）使い方【動画あり】
▼ 以下のような表示になります（全8パターン それぞれ名称あり）ボックス（案内）あわせてそれぞれ文字色も変化します。
実際に管理人もCocoonを使用しています。無料テーマですが有料並みに便利なツールが揃っています。まだCocoonのテーマを使ったことがない方はこちらの記事で解説しています。
▶ プライマリー（濃い水色）
▶ セカンダリー（濃い灰色）
▶ サクセス（薄い緑色）
▶ インフォ（薄い青色）
▶ ワーニング（薄い黄色）
▶ デンジャー（薄い赤色）
▶ ライト（白色）
▶ ダーク（暗い灰色）
▶ ボックス（案内）の通常の使い方
通常のボックス（案内）の使い方はかんたんです。
▶ ボックス（案内）を使う手順
- 文字を選択
- ボックス(案内）の好きな色を選択する
▶ ボックス（案内）のやり方【動画】
箇条書きを合わせて使う場合の方法
▶ 箇条書きにボックス(案内）を使う方法
正しい例は以下のようになります。
- 箇条書き（見本）
- 箇条書き（見本）
- 箇条書き（見本）
▶ 箇条書きにボックス(案内）失敗例
▶ 失敗例として・・・
ボックス（案内）は箇条書きで文字入力したあと通常の使い方でボックス（案内）を使用すると以下の通りになります。
-
箇条書き
-
箇条書き
-
箇条書き
コレは「やっちまったなー！」状態です
これは点だけ装飾外になってしまうダサイ例ですね…こんな使い方はしないように気を付けないとね
ここからは、正しいボックス（案内）の使い方の手順を。その次に誤ったボックス（案内）の手順を。最後にかんたんな動画もあわせて解説します。
▶ 箇条書きにボックス(案内）正しい手順
まずは箇条書きにボックス（案内）を使う手順から解説。
▶ 手順は以下の通り
-
- 箇条書きで文字入力
- 別の列にボックス（案内）の好きな色を選択し表示させておく
- 箇条書きを選択
- 選択した箇条書きをボックス（案内）へドラッグもしくは切り取り➡ペースト
箇条書きで文字入力
まずは箇条書きで文字入力しておきます。
-
- 箇条書き
- 箇条書き
- 箇条書き
別の列にボックス（案内）の好きな色を選択し表示させておく
次に別の列にボックス（案内）を選択して表示させておく。
▶ 以下のような感じで
- 箇条書き
- 箇条書き
- 箇条書き
箇条書きを選択
箇条書きをカーソルで選択しておきます。
▶ イメージはこんな感じ
- 箇条書き
- 箇条書き
- 箇条書き
選択した箇条書きをボックス（案内）へドラッグ
選択した箇条書きをボックス（案内）へドラッグ。
もしくは箇条書きを選択 ➡ 切り取り ➡ ボックス（案内）を選択 ➡ 貼り付け でもできます。
- 箇条書き
- 箇条書き
- 箇条書き
【かんたん動画】箇条書きにボックス(案内）正しい手順
▶ 箇条書きにボックス(案内）失敗手順
▶ 失敗手順例
- 箇条書きで記入
- ボックス（案内）を使う
1: 箇条書きで文字入力
まずは箇条書きで文字を入力
-
- 箇条書き
- 箇条書き
- 箇条書き
2： ボックス（案内）を選択
次にボックス（案内）を選択
すると先ほどのような状態で表示されてしまいます。
-
箇条書き
-
箇条書き
-
箇条書き
【かんたん動画】箇条書きにボックス(案内）間違った手順
まとめ【Cocoon】 案内ボックスの使い方 箇条書きにも使える！
▶ 今回記事では
- Cocoonの「ボックス（案内）」の使い方【動画あり】
- 箇条書きを合わせて使う場合の方法
