本サイトは一部プロモーションが含まれます.

SAMPLE ARTICLE

ウェブデザイン
動画のキャプション

執筆編集テクニック

ブロック>高度な設定>追加CSSクラスで特定のクラス名を付与するとそれに応じた効果を得ることができます。

埋め込み

ビデオを埋め込んだブロックにおいて

cx-vidtop02を追加すると、上のようにビデオを余白なく記事トップに埋め込むことができます。

cx-vidtop01を追加すると、下の記事のようにビデオのみのエントリーをつくることができます。

YouTubeやTwitterなど対応しているメディアはURLを書くだけで自動的にブロックが埋め込まれます。

同様にブログカードもURLを書くだけで自動的に生成されます。内部へは同じタブ、外部へは新しいタブでジャンプするはずです。

通常は上のように角丸で動画が埋め込まれますが、クラス名cx-vidwidを追加すると下のように全幅で埋め込むことができます。

ツールバー

ちなみにこれツールバーの文字装飾機能を使っています。キーボード入力を押すと反映されます。

Aというボタンのキーボードキーでも似たような装飾が可能になっていますが、そちらの方が少しだけ枠線が薄いです。How are you?のような英文を書く用につくりました。

エディターでの観え方は、実際の記事の観え方を完璧に再現はしていません。常に完成記事をチェックしながら執筆編集にあたってください。

上の赤い小文字はツールバーハイライトの最深部の拡張色に割り振っています。拡張色がABCDEFとあり、ABCは小文字、DEFは極小文字、ADは黒、BEは赤、CFは灰色となっています。

これが拡張色Aです。

これが拡張色Bです。

これが拡張色Cです。

これが拡張色Dです。

これが拡張色Eです。

これが拡張色Fです。

文字の大きさはかなりナイーブなところなので、この方法以外では弄らないことをお勧めします。

太字には2種類あります。
ツールバー内にあるA太字(boldクラス指定)と、太字Bというボタンがあります。前者の方が少し細く、後者の方が極限まで太いです。
比べてもわからない程ですが、基本は前者、極端に強調したい場合は後者を使うと良いでしょう。

ちなみに普通は編集中に改行すると、新しい段落と認識され余白が空いてしまいますが、その余白を空けないこともできます。マックならshiftを押しながらreturnを押すと
このように
同じ段落内で
改行ができます。

左寄せ

中央寄せ

右寄せ

リンクを貼ることも、もちろん可能です。

それ以外のマーカーやイタリックなどありきたりなものは普通に使用可能になっていますが、特に使用頻度・重要度が高そうなもの以外には調整していないものもあるので、探りながら試しながら挙動を確かめていってみてください。これは以下ブロック編でも同じです。効果を組み合わせて重複させたりなどは、想定しきれないものがあります。もし「どうしてもコレを使いたいから調整してほしい」という機能があれば、開発者まで教えてください。

バッジは目立つ位置にあるのでとりあえず整えてみましたが、あまり使い所はなさそうです。むしろ今後この割り振られたクラスを使って追加の効果を実装していく可能性があるので、現状使用しないことをお勧めします。

現状はとりあえずの最低限の調整ですが、今後も必要になったものからひとつひとつ整えていき、アップデートがあれば都度この記事の内容を更新する予定です。

テキストブロック

普通のテキストを書く段落ブロックに続いて、もっともよく使うのが見出しブロックでしょう。

ちなみに記事中に見出しが2つ以上あるとき、最初のH2見出しの上目次(INDEX)が表示され、H3見出しまでがリストアップの対象となります。

H2見出し

H3見出し

H4見出し

H5見出し
H6見出し

H4はただの太字、H5はそれを上に押し上げ、H6は押し上げつつ灰色小文字となっています。用途に合わせて使ってください。

H5・H6は見出しとしては使わないかもしれませんね。このように補足情報を添えるのに応用するかも。H6を最初に持ってくると、目次の上に「この記事は〇〇です」という記事紹介文をイイ感じで書くことができます。

ブロックに関しては複製が便利です。ツールバーの一番右にありますが、たまに隠れてしまっているので、横スクロールして見つけてあげてください。そこでは他にもコピーグループ化なんてニクいこともできます。

リスト

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

リストはかなり使うでしょう。まずはデフォルトのリストですが、黒丸と序数の2通りあります。

  • あいうえお
    • かきくけこ
      1. さしすせそ
        • はひふへほ
      2. たちつてと
    • なにぬねの
      • まみむめも

cx-listheadというクラスをリストブロックに追加することで、上のようにすることができます。1段目の黒丸をなくして、2段目以降をインデントさせることで、ヘッドラインのあるリストがつくれます。2段目以降は序数も利用可能です。

  • あいうえお
    • かきくけこ
      • さしすせそ
        • はひふへほ
          • まみむめも
      • なにぬねの
    • たちつてと

cx-listdashを追加すると、上のように点線を利用したリストをつくることができます。これはむしろリストというより、以下のような使い方のために用意しました。

  • ひらがな
    • あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

リストに関しては、この後のCOCOONブロックでもさらに多様なものが用意されています。

引用・プルクオート

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

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

引用元あり

これはプルクオート

引用元

引用はなるべく他の文章に比べて浮きすぎないようにしてあります。プルクオートは「デザイン性がある引用」らしいですが、需要なさそうなので同じ見た目です。

コード・整形済みテキスト・詩

コード <br>は改行を表します
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
こっちは<strong>整形済みテキスト</strong>
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
詩かぁ……
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

コード整形済みテキストでは打ち込んだ通りの表示をしてくれます。現状コードは改行打ち消し横スクロールとなっています。残りの2つはほぼ同じ挙動なので、とりあえず詩は使用非推奨です。

詳細

詳細は情報の開閉ができます。さらに中にブロックを追加することも可能です。

あいうえお

かきくけこさしすせそ

  • aaa
  • bbb
  • ccc
見つかった!!

テーブル

ああああああ
あああ
あああ
ああああああああああああああああああ
ああああああ
キャプション
ああああああ
あああ
あああ
ああああああああああああああああああ
ああああああ
文字が小さいバージョン
あああああああああ
あああああああああああああああああああああ
あああ
あああ
あああ
キャプション
あああああああああ
あああああああああああああああああああああ
あああ
あああ
あああ
cx-table-st

表は欠かせないブロックのひとつです。シンプルな表はテーブルで実装できますが、より複雑な表が必要な場合のためにFlexible Tableというプラグインを導入しました。

細かい仕様は実際に弄りながら確かめていってみてください。しかし何事も弄りすぎるとレイアウト崩れのリスクが増します。特に表は要注意なので、大中小の画面幅において出力結果を確認しながら作業したいくらいです。同じ画面幅でもPCとモバイル・タブレットで微妙に異なることもあります。「なるべくシンプル」がシステム的にもユーザー的にもやさしいです。

表内に画像を挿入したい場合はツールバーインライン画像で可能です。サイズは一応指定できますが絶対的なものではなく、最大値くらいに思ってください。画面幅を越えることはなく、周囲の環境に応じて自動で縮小されます。他画像とのサイズ感の相対的な関係性を示すのにも使えそうです。画像にリンクも貼れます。

色や太字はOKですが、幅や文字の大きさといったサイズは画面幅により大きく見た目を損なう危険性があるので、弄らないことを推奨します。どうしても文字を小さくしたいという場合はcx-table-stというクラス名をテーブルブロックに付与してください。全体的にひとまわり小さい文字になります。

Simple Author Box

Simple Author Boxは作者プロフィールを挿入できるプラグインで、記事中にもブロックとして挿入できます。記事直下に表示されるものと同じデザインのものが出ます。

クラシックというブロックは非推奨です。

メディアブロック

画像

キャプション

画像は多用すべきブロックです。一般的には配置全幅中央揃えにして、角丸15くらいに設定するとイイ感じでしょう。キャプションは必要ではありませんが、出典情報を添えるときなどに役立ちます。画像のリンク先をメディアファイルに設定すると、クリックで拡大画像を表示できるようになります。なるべく適用したいものです。

それ以外のメディアブロックは現状未調整・使用非推奨です。どうしても使いたい場合は開発者にご一報ください。

デザインブロック

ボタン

デフォルトのボタンはデザインを固定してあります。一般的にはボタンブロックを選択後、サイドバーレイアウト>配置>中央揃えなどで位置を調整して、リンクを貼ってご使用ください。

ボタンに関しては、この後のCOCOONブロックでもさらに多様なものが用意されています。

カラム

カラムはちょっとした高等ワザです。下のように記事を2列にすることができ、さらに各カラム内にブロックを設置可能です。3列以上にもできますが、著しくレイアウト崩れの危険性が高まるため、せいぜい2列がお勧めです。

あああ
いいい
あああ
いいい

カラムブロック全体を選択してサイドバーモバイルでは縦に並べるオフにするのを忘れないようにしましょう。

ページ区切り

ページ区切りは記事を複数のページにわけてくれる実はすごい機能です。長すぎる記事などは分割しても良いでしょうが、ページをまたぐことはユーザーには好かれないかもしれません。設置するとこの記事の最下部のように次へというボタンとページナンバーが現れます。

区切り

区切りはその名の通りで、以下の3種類あります。




色も変えられます。あまり使わないかもしれませんが、ちょっとしたアクセントにどうぞ。

スペーサー

ちょっと余白を空けたいときに使えますが、余白とはいえサイズの扱いは難しいので注意が必要です。ありがたいことに単位を選べますがpxのような絶対単位を選んでしまうと、PCで丁度良くでもモバイルで過剰な余白になっていたりします。

例えばこの上には3emのスペースがあります。emはそのとき設定されている文字の大きさに比例しており、つまりは文字3つ分の余白ということです。こうした環境により変動するものを相対単位と呼び、レスポンシブなレイアウトには向いています。

それぞれの単位の特性を理解した上で、大中小の画面幅やPC・モバイルなどの異なる環境下で可能な限りチェックをしながら、最善値を決めていってください。

それ以外のデザインブロックは現状未調整・使用非推奨です。どうしても使いたい場合は開発者にご一報ください。

ウィジェットテーマ埋め込みブロックは現状未調整・使用非推奨です。どうしても使いたい場合は開発者にご一報ください。

COCOONブロック

アイコンボックス

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

アイコンの種類は10種類から選べます
shift改行の方がシックリくるかも

アイコンに合わせて色彩も変わります

案内ボックス

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

案内ボックスの色味は8種類

白抜きボックス

ボックス系は中にブロックを置けます

ボーダー・背景・文字色変更可能

付箋風ボックス

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

カラーは5種類

タブボックス

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

右下の文字を16種類から選べます

見出しボックス

見出し

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

見出し

アイコンと枠・背景・文字色を選べます

タブ見出しボックス

見出し

見出しボックスと同様です

ラベルボックス

見出し

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

これはエディター上の見た目から大きく変えてあり、いっけんcx-listdashに近くしてありますが、こちらは中にブロックを置けます。

吹き出し

吹き出しはデフォルト以外は非推奨なの?

〇〇風にしたい場合は、背景・文字・ボーダー色を変えてやってみよう!

ブログカード

COCOONのブログカードブロックではラベルを付けることができます。ラベルは12種類あります。

ボタン

COCOONのボタンブロックでは上の通り、背景・文字・ボーダー色を変えたり、色々できます。

加えて以下のように特殊なクラス名によりカスタマイズしている場合もあります。その場合も基本はボタン上の文字と光らせるは設定可能です。

アコーディオン(トグル)

バァ!!

テキストブロックの詳細に近い開閉式動的ブロックです。

アイコンリスト

アイコンリストタイトル
  • あいうえお
  • かきくけこ
  • さしすせそ
アイコンリストタイトル
  • あいうえお
  • かきくけこ
  • さしすせそ

アイコンリストはかなり使い勝手の良いブロックです。黒丸の代わりに多様なアイコンを選べるだけでなく、アイコンの色と文字色を別に設定できます。

ただしボーダーと背景色は非推奨です。ボーダーと背景色をつけたい場合は、以下のように白抜きボックスと組み合わせることをお勧めします。

アイコンリストタイトル
  • あいうえお
  • かきくけこ
  • さしすせそ

FAQ

Q
デフォルトスタイルはどんなの?
A

こんなの

Q
アコーディオンスタイルはどんなの?
A

こんなの

Q
色いろいろできる?
A

うん。

FAQブロックでは簡単に質疑応答欄をつくれます。様式やカラーも選べますが、角型ラベルは未調整のため使用非推奨、色もボーダー・背景色は非推奨です。

それ以外のCOCOON系ブロックは現状未調整・使用非推奨です。どうしても使いたい場合は開発者にご一報ください。

特殊クラスまとめ

cx-en

全体的に日本語を重視したフォントバランスなため、英語用に調整したクラスです。通常は両端揃えになっていますが、左寄せにしてバランスを調整しています。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

上が通常、下がツールバーでただ左寄せにしたもの。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

こちらがクラスcx-enを付与したもの。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

cx-listhead

cx-listdash

cx-table-st

cx-vidwid

cx-vidtop01

cx-vidtop02

cx-btn01-comment

cx-btn01-amazon

cx-h2-frontia-ai

その他

アンカー

記事内の任意の場所にリンクを飛ばすことも可能です。アンカーと呼ばれる手法で、飛ばしたい先のブロック>高度な設定>HTMLアンカーに任意の文字列を入力してください。その後その文字列の頭に#を付けたURLをリンクとして貼ると、その箇所に飛ばせることができます。

例えば、以下のようになります。

https://neouniv.com/neounivcom/sample-article/#cocoonblock

以上です。

コメント

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