Cocoonのボックスの中に段落を入れる方法

BLOG作成

このブログはCocoonというテーマを利用して作っています。無料とは思えないクオリティのテーマで大満足で愛用させていただいています。

まなみん
まなみん

Cocoon寝ログを運営しているわいひらさんが作成しているよ。

さまざまなスタイルのボックスがワンクリックで利用できるのですが、その種類とデザインが素敵すぎて、以前記事にもしました。
Cocoonのスタイル一覧表。無料でこのクオリティ!

Cocoonのスタイル一覧表。無料でこのクオリティ!
このサイトは寝ログを運営しているわいひらさんが作成したCocoonという無料のテーマを使用しています。 無料とは思えない使いやすさで、WP初心者でもなんとかブログ作成ができています。 様々...

今回はこのボックスの活用方法を紹介します。

Cocoonのボックス活用法

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

普通にリストを作って、ワンクリックでボックスで囲もうとするとこんな感じになってしまいます。

  • 春はあけぼの
  • 夏は夜
  • 秋は夕暮れ
  • 冬はつとめて

 

まなみん
まなみん

ちがう、ちがう、そうじゃ、そうじゃなーい!

と思わず口ずさんでしまいますね。

 

こんな感じはどうでしょう?

  • 春はあけぼの
  • 夏は夜
  • 秋は夕暮れ
  • 冬はつとめて

 

まなみん
まなみん

うんうん、これ、これですよ!

このようにリストをボックスの中に入れる方法はCocoonの公式サイトで紹介されているので、ぜひ参考にしてみてくださいね。

ビジュアルエディターの機能のみでリストをボックスで囲む方法
順序リストや非順序リストをビジュアルエディターの機能のみでボックスで囲む方法です。

 

段落をボックスの中に入れる方法

リストではなく段落をボックスの中に入れる方法なのですが、ボックスに入れたい部分を選択してスタイルをクリックすると

春はあけぼの
夏は夜
秋は夕暮れ
冬はつとめて

 

やはり、

まなみん
まなみん

ちがう、ちがう(以下略)

になっちゃうんですよね~。

 

そうではなくてこんな感じにする方法を紹介します。

春はあけぼの
夏は夜
秋は夕暮れ
冬はつとめて

 

失敗例

全ての段落を選択

 

スタイルを設定するとこんな感じ

 

段落をボックスの中に入れよう

1段落目だけ入力して範囲選択。スタイルを設定します。

 

こうなりますね。

春はあけぼの

 

次にテキストタブに切り替えます。

 

こんな感じで入力されていますね。

 

divタグの間に続きを入力

ビジュアルタブに切り替えると段落全体がボックスの中に納まりました。

春はあけぼの
夏は夜
秋は夕暮れ
冬はつとめて

 

他にもっといい方法があるかもしれませんが、私がいろいろと試した中ではこれが一番簡単だと思います。

まとめ

デザインにこだわりすぎるとなかなか記事を書けないのですが、いろいろいじるのも楽しいんですよね。

ちょこちょこいじりながらも記事をたくさん書けるように精進しましょう!

まなみん
まなみん

Cocoonなら吹き出しもワンクリックで設定できます。

コメント

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