Cocoon大好き。まるをです
この記事を見ているということは、あなたはブログを始めたばかりの初心者さんなのかなと思います
何故なら僕もブログを始めて間もない頃、こうして『囲み枠』の使い方について超調べたからです
他人のブログを見れば分かりますが、囲み枠はあらゆるブロガーさんが当たり前の様に使っています
簡単に作れて記事がとても見やすくなるという、メリットしかない手法だからです
しかしいざやろうと思うと、『どうやって作るんだ？』と悩む方も多いと思います
そこで今回はブログに必須の『囲み枠』について誰にでもできるよう、画像マシマシで超分かりやすく解説しようと思います
なお筆者はCocoon(コクーン)ユーザーでありそれしか使ったことがないので、コクーンでの方法についての解説になります
それでは早速いってみよー！
そもそも囲み枠って？
その前に囲み枠がどんなものか改めて説明します
囲み枠とは名前の通り、文字の周りを囲うのに使用する枠のことです
囲み枠には色々な種類があり
囲み枠を使用するだけで記事が一気に見やすくなるので、ブロガーなら漏れなくほぼ全員が使っています
そしてCocoonであればこの囲み枠をめちゃくちゃ簡単に作ることができます
それでは実際の作り方について見ていきましょう
囲み枠を作ろう！
ということでいよいよ囲み枠を作っていきたいと思います！
まず初めに『ブロックの追加』をクリックします
『ブロックの追加』は文章を入力する所の左側の【 ⊕ 】のマークです
もしくはカーソルを中心の辺りに持っていくと上か下に現れます
※WordPressのバージョンによっては上記のように現れない可能性もあります
上下左右のどこかには現れるはずなので探してみて下さい
で、これをクリックすると
こんな感じのものが出てきます
拡大して見ていきます
この『ブロックの追加』では記事を見やすくするための様々な機能が備えられています
『囲み枠』を使うには『クラシック』というものを選択します
僕はクラシックを頻繁に使うので【よく使うもの】の候補の中に出てきていますが
ここにない場合は上の【ブロックの検索】の窓からクラシックと入力する、
もしくは少し下に【フォーマット】というのがあるので、そこを押すと出てきます
このクラシックを押すと
こんな感じのものが出てきます
囲み枠を作るには『スタイル』という部分を押します
すると
こんな感じのものが出てきます
インラインとかマーカーとか色々ありますが、囲み枠を作るには『ボックス』というものを選びます
今回はスタンダードなボックス(白抜き)をやってみましょう
灰色を選択してみます
すると…
できました！クラシックの中に灰色の囲み枠が出ています
あとはこの枠の中に文字を打ち込めばいいだけ！
プレビューで見てみると…
綺麗に入ってる！
これで完成です！
どのボックスも同じ手順でできるのでやってみて下さい
リストで上手く囲めない時の解決方法
非常に失敗する事例の多い、囲み枠の中にリストを入れる方法について説明します
頻繁に使うであろうリストですが、囲み枠の中にも入れて使いたいことってありますよね
- こんな感じに
- リストを入れて囲むと
- 見やすいよね
実はこれ、コクーンだと超簡単にできるんですが失敗する事例も多いんです
では何故失敗するのか？
詳しく見ていきましょう
失敗例
実際に失敗するパターンを見ていきます
まずはクラシックを出します
で、リストを押すと
ポコッとリストの【点】が出てきます
あとは文字を打って改行して…
全部の文字を選択！
これで『スタイル』から囲み枠を選べば作れるはず！完璧！
なん…だと…？
といった具合に失敗するパターンが超多いです
では成功例を見ていきます
成功例
まずクラシックを出します
で、ここからが重要！
まず改行して２行分スペースを空けます
【Enter】を２回押しちゃって下さい！
スペースが広くなりましたね
ここで本来は必要ありませんが、分かりやすくするため改行したスペースに文字を入れておきます
『改行』の文字が上下に入り、真ん中が空きました
この真ん中部分を選択し、リストを押します
あとは入力したい文字を打って行き…
全てを選択し…
『スタイル』から囲み枠を選択します！すると…
できた！真ん中のリストが綺麗に囲われています！
あとは上と下の『改行』の囲み枠を消せばOK！
晴れてリストの囲み枠の完成です！
※下の囲み枠は【Back Space】で消せますが、上は文字は消せても枠が消せません
上の枠を完全に消すには【Delete】を押しましょう
まとめ
Cocoonでの囲み枠の作り方について解説しましたが、いかがでしたでしょうか
特にリスト表示に苦戦する人が多いと思うので、これを見て作れるようになれば嬉しいです
もし作れなくてもクレームは入れないでね（スルースキルを発動します）
ただ一度できるようになると以降はラクラクできるので、是非覚えてみて下さい
以上、まるをでした
それではっ
コメント
[…] ボックスの詳しいつくり方は「まるろぐ日和。」さんのブログを読むとわかりやすいです。 […]
[…] ボックスの詳しいつくり方は「まるろぐ日和。」さんのブログを読むとわかりやすいです。 […]
コメントありがとうございます！参考になったなら嬉しいし良かったです！
[…] ボックスの詳しいつくり方は「まるろぐ日和。」さんのブログを読むとわかりやすいです。 […]
すみません、そもそも第一段階の「ブロックの追加」というのが出てこないんですけど
何か理由があるのでしょうか
WordPressの最新バージョンでは左や上には出ないようなので、それが原因かもしれません。
下や右側に【 ⊕ 】が出ないでしょうか？
初めまして。おっしゃる通りの初心者です（笑）
自分なりに調べてもなかなか出来ず、ようやくこちらを拝見させて頂き、囲み枠を使えるようになりました。
さらに内容を充実させる楽しみが増えました。ありがとうございます！
tatamamiさん、お役に立てた様で良かったです！
お互い頑張りましょう！！
色んな記事を見ても出来なかったのができました！マジ感謝です！
ありがとうございました！
tomoさん、お役に立てたなら良かったです！
この方法で枠の中にリスト表示できました～。ありがとうございます。
ひじりさん。無事表示できて良かったです！
こんにちは！
ブログを始めて1カ月の餅蔵と申します。
こちらの記事を参考にしてボックスを作ることができました！
すごく感謝しています！
ありがとうございました！
餅贈さん、お役に立てたようで良かったです！
こちらこそありがとうございます。
ワードプレス初心者なので、ものすごく分かりやすく本当に助かりました。ありがとうございました！
BALLETさん、お役に立てて良かったです！
[…] 【Cocoon(コクーン)】囲み枠の作り方を超分かりやすく解説しますCocoon大好き。まるをですこの記事を見ているということは、あなたはブログを始めたばかりの初心者さんなのかなと思い […]
初めまして。
とても分かりやすい説明ありがとうございます。
初心者なのですが最後のすべての文章を選択するところまでは出来るのですが
そこからスタイルボタンを探す事ができません。
教えていただけますでしょうか。
失礼いたしました。
問題解決しました。
解決したのであれば良かったです！