コクーン（Cocoon）のリストをボックスで囲めない時の対処法

このブログはWordPressの無料テーマ「Cocoon」（コクーン）を使用しています。

なぜ利用しているか？

無料なのはもちろんうれしいのですが、なんといってもHTMLタグとかCSSとか全く分からなくても大丈夫って事です。

こんな風に蛍光ペンで下線を入れるもの標準装備。本来CSSを理解していない私にはできなかったことが可能になりました。

まあ、こんなレベルなのでCocoonをインストールしてからも大変。マニュアルを見ながら四苦八苦。

マニュアルの簡単な単語の意味も未だま分からず、笑われてしまうぐらいでお恥ずかしい！だから人一倍疑問が多いので、これらを書いてみました。

標準機能なのにリストがバラバラになるボックス

私もそうですがこのようにブログを日々コツコツと書いていると、少しでも見栄え良く書きたいものですよね。

箇条書きなどを書く時によく使うのが、ワードプレスの標準機能のリストで、「番号なし」と「番号付き」の2種類あります。

• 灰色
• 黄色
• 赤色
• 青色
• 緑色

そしてこのリストをもっと見栄え良く目立たたせるために、コクーン（Cocoon）の機能で【スタイル】の中から、ボックス（白抜き）を選び、好みの色を（ここでは黄色）選ぶとこのように目立つようになります。

その前にコクーンの【スタイル】が画面から消えてしまった事ありませんか？

私がリストをボックスで囲った方法はこんな感じですが、なにが間違ったのか分かりませんでした。

次に、コクーンの機能を使います。

こんな風になりませんか？

• 灰色
• 黄色
• 赤色
• 青色
• 緑色

各リストが分かれてしまい、さらにそれぞれのリストが囲まれてしまいました。

では、最初の方で綺麗にリストが囲まれるようにするには、どんな方法で解決したかというと・・・

リストの前と後に「あ」と、無意味な文字を入れています。

こんな感じです。

こんな感じになります。

リストの前後の無意味な「あ」と本来必要なリストがそれぞれ囲まれましたね。

ここで無意味な「あ」を消せば、完成です。

消す方法は、無意味な「あ」をキーボードの【back space】です。

すると完成しますよね。

なぜこんな方法じゃないとリストをボックスで囲めないかは分かりませんが、この方法でできたので良しとしましょう。