当ブログは広告が含まれています

【Cocoon】リストをボックスで囲む方法(バラバラになる対処法)

Cocoon ボックスでリストを囲む方法 Cocoon

こんにちは、ikuzo(いくぞう)です。

無料テーマで至れり尽くせりのCocoonですが、何かと自分の思い通りに操作できないこともありますよね。

初心者の私が特に悩んだのがこれです。

リストをボックス(枠)で囲もうとするとバラバラになる!

 

もちろん、解決方法はあります。

今回はCocoonで「リストをボックスで囲む方法」です。

スポンサーリンク

Cocoonでボックス(囲み枠)がバラバラになる現象

私が悩んだのは、リストを枠で囲もうとするとバラバラになる現象でした。

本当はこうやって囲みたいのに、

  • いぬ
  • しか
  • ちょう

バラバラになる現象!

  • いぬ
  • しか
  • ちょう

     

しかも先頭の黒丸が枠からはみ出てるし…

今回はこれを解消します!

グループをリスト化する

まず、囲みたいグループをリストにします。

ここではグループを「いぬ」「しか」「ちょう」にします。

(別に花札が好きなわけではありませんが)

 

リストは「番号なしリスト」と「番号付きリスト」の2種類あります。

Cocoon番号なしリスト番号付きリスト

 

ビジュアルエディタで、「いぬ」「しか」「ちょう」をドラッグで選択して、好きなリストを指定します。

今回は「番号なしリスト」の「黒丸」を指定しました。

番号なしリスト黒丸

 

「いぬ」「しか」「ちょう」の先頭にそれぞれ黒丸がついています。

これでリスト化されました。

番号なしリスト黒丸

リストをボックスで囲む方法

次にリスト化された「いぬ」「しか」「ちょう」をボックスで囲みます。

囲む方法はリストを選択して、スタイルからお好みのボックスを選びます。

ためしに「インフォ(薄い青)」を選んでみましょう。

インフォ(薄い青)

 

すると残念ながら、このようにバラバラになってしまいました。

リストがバラバラになる

 

対策は「きじ」と「さる」に登場してもらいます。

リストに含めない「きじ」と「さる」で、リストの3匹を前後から挟みます。

Cocoonリストをはさむ

 

今度は「きじ」から「さる」までを選択して、先ほどと同様にボックスを指定します。

Cocoonボックス(案内)

 

真ん中の3匹をボックスで囲むことに成功しました。

Cocoonボックスインフォ

 

あとは「きじ」と「さる」にご苦労さまと労いの言葉をかけてBACKSPACEなどで消えてもらえば完成です。

ボックスで囲んだあと、必要がなければ黒丸も消してしまってOKです。

テキストエディタでボックスの範囲を指定する方法

先ほどの3匹がバラバラの状態を、テキストエディタで見てみると

Cocoonビジュアルからテキストエディタ

 

3匹がそれぞれが<div class=”info-box”>~</div>で、はさまれています。

これが、バラバラになる原因です。

 

3匹全体を1つの<div class=”info-box”>~</div>ではさんでみます。

divタグ

 

ビジュアルエディタに戻してみると、

いぬ

しか

ちょう

 

見事に合体しました。

こちらの利点としては、「きじ」と「さる」にご登場いただかなくても良いことです(笑)

まとめ

いかがだったでしょうか。

どちらでも自分のやりやすい方法でよろしいかと思いますが、慣れればテキストエディタで調整した方が早いかもしれません。

ビジュアルエディタで躓いたら、HTMLやCSSを理解していなくてもテキストエディタに切り替えてみると、何かしらのヒントを発見できるかもしれませんよ。

Cocoon
スポンサーリンク

コメント

  1. mitsu より:

    Cocoon使いたての者です。僕の悩みにかなりドンピシャの内容だったので、とても参考になりました。本当に助かりました。

    • ikuzo|いくぞう より:

      mitsuさん、コメントありがとうございます!
      少しでもお役に立ててうれしいです。
      また、初めてコメントをいただき感激しております。
      ありがとうございました!

  2. 海月遊 より:

    始めて1ヶ月未満の超初心者です。
    リストを枠で囲む作業を何度かやってみて、うまく出来るときと出来ない時があって試行錯誤していました。

    いくぞうさんの説明がとても分かりやすくて助かりました!
    ありがとうございます(*’ω’*)

    • ikuzo|いくぞう より:

      海月遊さん、コメントありがとうございます。

      そうなんです、私も最初はうまく囲めず悩みました。
      記事にしておいてよかったです(^_^)

      最初は色々と戸惑うこともあるかもしれませんが、
      素敵なブログを作ってくださいね!

      • 海月遊 より:

        ありがとうございます!がんばります(/・ω・)/

        きっとまたお世話になるので、その時はよろしくお願いしますm(__)m