スポンサーリンク

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

Cocoonコクーンカテゴリー表示方法コクーン(Cocoon)

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

なぜ利用しているか?

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

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

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

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

スポンサーリンク

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

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

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

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

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

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

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

コクーン(Cocoon)のスタイル(タブボックス)が消えた
コクーン(Cocoon)の文字装飾ができる標準機能、タブボックスがある日突然消えてなくなってしまいました。原因はプラグインのTinyMCE Advancedだった。でもTinyMCE Advancedの設定をすれば簡単に復活できました。
波乗りアヒル
波乗りアヒル

上記のように簡単になぜかできません。

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

リストをボックスで囲む1

まずは、リストで囲みたい部分を選択するってごくごく一般的ですよね。

間違えがどこか分かりませんでした。

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

リストをボックスで囲む2

【スタイル】から【ボックス】を選び、囲みたい色を選びます。

ここでは、黄色を選んでみると・・・

なんか違う、バラバラになってしまいます。

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

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

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

波乗りアヒル
波乗りアヒル

見栄え良くしたかったのに、これじゃあ逆効果ですよね。

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

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

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

こんな感じです。

そして、この無意味な「あ」を含めて囲みたい部分を選択して、ボックスから色を選ぶと・・・リストをボックスで囲む2

リストをボックスで囲む3

こんな感じになります。

リストをボックスで囲む4

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

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

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

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

すると完成しますよね。

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

波乗りアヒル
波乗りアヒル

おそらくHTMLが分かる方は、ワードプレスのテキストモードで書くと、このような困った現象でも簡単に解決できると思いますね。

🔰はとりあえずできれば良しって思いましょうね。

コメント