Twitterはこちら instagramはコチラ

【Cocoon】 案内ボックスの使い方 「実は箇条書きにも使える!」

スポンサーリンク

WordPressの無料テーマ「Cocoon」

今回はCocoonのツールにあるボックス(案内)」の解説。
上記のボックスは(白抜き)タイプ

↓↓↓ ボックス(案内)を使うと以下のようになります。

ボックス(案内)

 

文字に大きめの背景色が付いたようなイメージです。強調したい文字や、ちょっとしたアクセントをつけるときなどボックスツールは非常に便利です。

 

▶こんな悩みの方向け

いまいちCocoonのツールの使い方がわからないブログ初心者向けに発信しています。

 

▶ この記事では

  • Cocoonの「ボックス(案内)」の使い方【動画あり】
  • 箇条書きを合わせて使う場合の方法

 

ボックス(案内)を活用して、ブログサイトのイメージアップの参考にしてみてください。

その他、無料テーマCocoonの記事は最後にありますので合わせてご覧ください。

こちらでCocoonメニュへスキップする

 

スポンサーリンク
▶ PayPay モール

▼ Achargeでは ★PC本体 + 4画面モニター セット★などデイトレ・クリエイター向けPC 販売中!

Cocoonの「ボックス(案内)使い方【動画あり】

▼ 以下のような表示になります(全8パターン それぞれ名称あり)ボックス(案内)あわせてそれぞれ文字色も変化します。

 

実際に管理人もCocoonを使用しています。無料テーマですが有料並みに便利なツールが揃っています。まだCocoonのテーマを使ったことがない方はこちらの記事で解説しています。

 

▶ プライマリー(濃い水色)

ボックス(案内)プライマリー

▶ セカンダリー(濃い灰色)

ボックス(案内)セカンダリー

▶ サクセス(薄い緑色)

ボックス(案内)サクセス

▶ インフォ(薄い青色)

ボックス(案内)インフォ

▶ ワーニング(薄い黄色)

ボックス(案内)ワーニング

▶ デンジャー(薄い赤色)

ボックス(案内)デンジャー

▶ ライト(白色)

ボックス(案内)ライト

▶ ダーク(暗い灰色)

ボックス(案内)ダーク

 

▶ ボックス(案内)の通常の使い方

通常のボックス(案内)の使い方はかんたんです。

▶ ボックス(案内)を使う手順

  1. 文字を選択
  2. ボックス(案内)の好きな色を選択する
▼ 実際に使用した例
ボックス(案内)インフォ

▶ ボックス(案内)のやり方【動画】

ボックス(案内)のやり方をわかりやすく動画にしました。
動画解説

箇条書きを合わせて使う場合の方法

▶ 箇条書きにボックス(案内)を使う方法

正しい例は以下のようになります。

  • 箇条書き(見本)
  • 箇条書き(見本)
  • 箇条書き(見本)

▶ 箇条書きにボックス(案内)失敗例

失敗例として・・・

ボックス(案内)は箇条書きで文字入力したあと通常の使い方でボックス(案内)を使用すると以下の通りになります。

▼ 失敗例
  • 箇条書き
  • 箇条書き
  • 箇条書き

 

ひろくま
ひろくま

コレは「やっちまったなー!」状態です

せつやくま
せつやくま

これは点だけ装飾外になってしまうダサイ例ですね…こんな使い方はしないように気を付けないとね

 

ここからは、正しいボックス(案内)の使い方の手順を。その次に誤ったボックス(案内)の手順を。最後にかんたんな動画もあわせて解説します。

▶ 箇条書きにボックス(案内)正しい手順

 

まずは箇条書きにボックス(案内)を使う手順から解説。

 

▶ 手順は以下の通り

    1. 箇条書きで文字入力
    2. 別の列にボックス(案内)の好きな色を選択し表示させておく
    3. 箇条書きを選択
    4. 選択した箇条書きをボックス(案内)へドラッグもしくは切り取り➡ペースト

箇条書きで文字入力

まずは箇条書きで文字入力しておきます。

    • 箇条書き
    • 箇条書き
    • 箇条書き

別の列にボックス(案内)の好きな色を選択し表示させておく

次に別の列にボックス(案内)を選択して表示させておく。

▶ 以下のような感じで

  • 箇条書き
  • 箇条書き
  • 箇条書き

箇条書きを選択

箇条書きをカーソルで選択しておきます。

▶ イメージはこんな感じ

  • 箇条書き
  • 箇条書き
  • 箇条書き

選択した箇条書きをボックス(案内)へドラッグ

選択した箇条書きをボックス(案内)へドラッグ。

もしくは箇条書きを選択 ➡ 切り取り ➡ ボックス(案内)を選択 ➡ 貼り付け でもできます。

  • 箇条書き
  • 箇条書き
  • 箇条書き

【かんたん動画】箇条書きにボックス(案内)正しい手順

 

▶【かんたん動画】箇条書きにボックス(案内)正しい手順

▶ 箇条書きにボックス(案内)失敗手順

 

▶  失敗手順例

  1. 箇条書きで記入
  2. ボックス(案内)を使う

1: 箇条書きで文字入力

まずは箇条書きで文字を入力

    • 箇条書き
    • 箇条書き
    • 箇条書き

2: ボックス(案内)を選択

次にボックス(案内)を選択

すると先ほどのような状態で表示されてしまいます。

  • 箇条書き
  • 箇条書き
  • 箇条書き

【かんたん動画】箇条書きにボックス(案内)間違った手順

【失敗編】参考動画

 

まとめ【Cocoon】 案内ボックスの使い方 箇条書きにも使える!

▶ 今回記事では

  • Cocoonの「ボックス(案内)」の使い方【動画あり】
  • 箇条書きを合わせて使う場合の方法

上記の内容を解説しました。箇条書きをボックスで囲むと見栄えもよくなりキレイにまとまる印象になります。

今後のご自身のブログイメージアップに活用してみてください。

タイトルとURLをコピーしました