【cocoonブロック①】テキストブロックの使い方一覧｜ブロックを使いこなそう！

cocoonにはサイトを おしゃれで見やすくするために、様々なブロックが用意されています。
僕も、どのようなものがあるか把握しておきたいので、このページにまとめておきます。

ブロックのデザインが多すぎるので、今回はテキストブロックのみ！ ブログを書く前に、ざっと目を通しブロックの用途をマスターしちゃいましょう！

段落 ブロック

あいうえお

段落ブロックは文字を書き込むブロックです。webサイトの本文はこのブロックに書き込んでいきます。

見出し ブロック

見出し (H2)

webサイトに見出しを挿入するためのブロックです。この、見出しに書いた部分が目次になります。
Cocoonには小見出しもありますので確認してみてください。見出しは「H〇」という表記で分けられています。〇に入る数字が大きいほど下の階層の見出しとなります。

小見出しの種類はこちら↓

見出し (H3)

見出し (H4)

見出し (H5)

見出し (H6)

僕は、見出しH2と見出しH3のデザインを変えています。デザインの変更方法はこちらで紹介しています。

リスト

• あいうえお
• かきくけこ
• さしすせそ

「リストブロック」を使用すると、このような箇条書きができます。

引用

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

夏目漱石「吾輩は猫である」

誰かのwebサイトの表記、誰かの言葉を引用する場合に、引用ブロックを使用します。

コード

/* 赤色のマーカーの色を変更するための追加CSS */

.marker-red {background-color: #eb4463; }

「コードブロック」はプログラムコードをブログに載せるときに使用します。

ちなみに、このコードはマーカーの色を変えるCSSコードです。こんな感じで、デフォルトの色と違うでしょ？　変更方法はこちらに書いておきました。

あと、デフォルトのコードブロックは薄い青色をしていませんか？　かっこいい黒色にする方法はこちらに書いてあります。

詳細

詳細ブロックの使い方

上には要約を書き、ここに詳細を書く。この部分は隠すことができるのでブログがスッキリするかも！

このブロックを使用すると、ブロック内に書き込んだ内容を出したり隠したりでき、ブログをスッキリ見せることができます。

整形済みテキスト

あいうえお
かきくけこ
さしすせそ

あいうえお

かきくけこ

さしすせそ

整形済みテキストは、編集の仕方が違う段落ブロックのようなものです。webサイトの見た目が違うというより、webサイトを編集する側に違いがあります。上の文字は整形済みテキストで書いたものです。整形済みテキストでは「あいうえお」の後に Enterキー を押しても改行されるだけです。でも、段落ブロックでは Enterキー を押すと、新たなブロックが生成されてしまいます。

現在、整形済みブロックの部分の背景は黒くなっていると思いますが、「整形済みブロック」を「段落ブロック」に変換してしまえば問題ありません。

ちょっと伝えにくいので、後で別の記事にまとめます。

プルクオート

引用ブロックとの違いはデザインだけみたいです。好きな方使えばいいと思う！

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

夏目漱石「吾輩は猫である」

テーブル

詩

古池や蛙飛びこむ水の音

クラシック

あいうえお

クラッシックブロックとは、以前のcocoonの編集エディタで編集するためのブロックです。

この「あいうえお」という文字は、クラッシックブロックに入力したものです。正直、見た目に違いはないですね？ このブロックも、ブログを見る側にとってはただの「段落ブロック」と同じです。段落ブロックとの違いはブログを書く側にしかわかりません！ このブロックを使うと、別バージョンのエディタで編集できるようになります。