《基礎編》記事執筆テクニックまとめ

動画のキャプション

執筆編集テクニック

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

埋め込み

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

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

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

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

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

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

ツールバー

エディタ画面上部のツールバーには執筆をする上で役立つ様々な便利機能が集約されています。例えば赤青黄3色のマーカーやアンダーラインマーカーがあります。

フォントサイズは触れないようにしてください。文字の大きさは様々な環境下での見え方を考慮しながら細かくパターン分けして予め設定されています。そのため、色や太さは問題ありませんが、大きさや余白の変更はサイト全体で一貫して非推奨です。

コレはツールバーの文字装飾機能を使っています。∨>キーボード入力を押すと反映されます。
コレもツールバー内のAというボタンのキーボードキーで装飾可能です。
shiftキーのようにキーボード表記用のボタンですがHow are you?のように英文など文中でひとまとまりを見やすく表現する用に使ってもOKです。

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

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

これが拡張色Aです。

これが拡張色Bです。

これが拡張色Cです。

これが拡張色Dです。

これが拡張色Eです。

これが拡張色Fです。

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

太字には2種類あります。
ツールバー内にあるAの太字（boldクラス指定）（boldと呼びます）と、同じくツールバー内の太字B（strongと呼びます）です。前者の方が少し細い太字、後者の方が一般的なわかりやすい太字です。

あいうえおアイウエオ愛上男aiueo（bold）

あいうえおアイウエオ愛上男aiueo（strong）

比べてもわからない程ですが、基本はstrong、場合によってはboldなど、お好みで使い分けてください。

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

左寄せ

中央寄せ

右寄せ

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

それ以外のマーカーやイタリックなどありきたりなものは普通に使用可能になっていますが、特に使用頻度・重要度が高そうなもの以外には調整していないものもあるので、探りながら試しながら挙動を確かめていってみてください。これは以下ブロック編でも同じです。例えば効果を組み合わせて重複させるとなると無限の組み合わせが生まれ、想定しきれない領域が必ず生じます。可能な限り多彩な記事を自由に描ける環境を目指しつつも、安定性のために最低限のよりシンプルな環境も重視しており、対極ともいえる相異なる2つの方向性の間でバランスをとっています。そしてそれにはユーザーの協力が不可欠です。「システムに合わせていく」感覚、そのなかで「最大限の自己表現をして差別化をはかる」感覚を持ってもらえると幸いです。もし「どうしてもコレを使いたいから調整してほしい」という機能があれば、開発まで教えてください。

ツールバーのインラインタグ内にはバッジとインラインボタンというものがあります。インラインとは簡単にいうと「文中」の意味で、文章中に（リンクが貼られていない色付の）バッジと（リンクが貼られている色付等の）ボタンを設置できるというものです。

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

インラインボタンも同様で目立つ位置にあるのでとりあえず整えてみましたが、あまり使い所はなさそうです。むしろ今後この割り振られたクラスを使って追加の効果を実装していく可能性があるので、現状使用しないことをお勧めします。文章中やテーブル内のリンクに関しては、普通にテキストリンクを利用したり、どうしてもボタンっぽくしたいということであればボタンやボタンのようにキーボードキーやキーボード入力と太字などを応用することで現環境でも簡易的に実現することは可能です。

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

テキストブロック

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

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

H2見出し

H3見出し

H4見出し

H5見出し

H6見出し

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

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

ブロックに関しては複製が便利です。ツールバーの一番右に縦に点が3つ並んだボタン︙があり（たまに隠れてしまっているので横スクロールで見つけてあげてください）そこでは複製以外にもブロックのコピーやグループ化なんてニクいこともできます。

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

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

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

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

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

引用・プルクオート

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

あいうえおかきくけこさしすせそ
引用元あり

これはプルクオート
引用元

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

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

#container .xxx a::before {
    margin: 30px;
}

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

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

<strong>詩</strong>です
太字・色字なども使えます
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

コード整形済みテキスト詩は打ち込んだ通りの表示をしてくれるブロックで、普通に入力しても表示されないコードなど表示させることができます。

それぞれ改行は反映されますが、コードは折り返さないのに対して、整形済みテキストは折り返します。詩は折り返すだけでなく、行末のスペースも反映します。

上の表示例の通りコードと整形済みテキストは特殊なスタイルを当てており、自動でコードに色付けされます。自由に使い分けてください。（先頭の例はコードブロック）

詳細

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

あいうえお

かきくけこさしすせそ

見つかった！！

テーブル

あ	あああ	あああ
あああ	あああ	ああああああああああああああああああ
あああ		あああ

テーブルのキャプション

あ	あああ	あああ
あああ	あああ	ああああああああああああああああああ
あああ		あああ

文字が小さいバージョン

あああ	あああ	あああ
あああ		ああああああああああああああああああ
あああ	あああ	あああ

Flexible Table

あああ	あああ	あああ
あああ		ああああああああああああああああああ
あああ	あああ	あああ

cx-table-st

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

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

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

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

Simple Author Box

NeoUniversity

みんなのオンライン大学

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

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

メディアブロック

画像

画像は多用すべきブロックです。一般的には配置で全幅や中央揃えにして角丸を10〜15くらいに設定するとイイ感じでしょう。キャプションは必須ではありませんが、出典情報を添えるときなどに役立ちます。

画像のリンク先をURLの他画像ファイルへのリンク・添付ファイルページへのリンク・クリックで拡大の3種類から選べるようになっています。「添付ファイルページへのリンク」は別ページへ飛ばしてしまうことになるので非推奨です。「画像ファイルへのリンク」と「クリックで拡大」に関しては、後者がその画像だけを拡大表示するのに対して、前者は加えて記事内の別画像もスワイプ表示でリストアップできるので、前者の方が上位互換ともいえます。なので画像に特段URLのリンクなどを設定しない場合は、基本画像ファイルへのリンクを選択・設定しておいてもらえると良いでしょう。

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

デザインブロック

ボタン

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

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

カラム

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

あああ

いいい

あああ

いいい

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

ページ区切り

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

区切り

区切りはその名の通りで、以下の3種類あります。上からデフォルト・幅広線・ドットです。全幅にして区切り感を出してます。背景から色も変えられます。あまり使わないかもしれませんが、ちょっとしたアクセントにどうぞ。

スペーサー

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

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

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

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

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

COCOONブロック

アイコンボックス

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

アイコンの種類は10種類から選べます
shift改行も使えます

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

案内ボックス

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

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

白抜きボックス

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

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

付箋風ボックス

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

カラーは5種類

タブボックス

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

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

見出しボックス

見出し

見出しは太字にすることもできます

見出し

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

タブ見出しボックス

見出し

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

ラベルボックス

見出し

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

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

ちなみに上の文字列の数字部分（1234567890）ですが、モバイルでみると下線が引いてありタップすると電話が起動する（つまり電話番号と認識されて自動的に電話番号リンクに変換される）事象があります。これは便利な機能ですがユーザー側としては意図せず望まないケースの方が多いと感じるので、（電話番号・メールアドレス等のリンクへの自動変換は）基本無効にしてあります。

※個別にリンクを設定することは可能なので、電話番号にリンクを設定したい場合はtel:等で個別に意図して貼っていってください。メールアドレスへのリンクはスパムの標的になる恐れがあるため非推奨です。リンクを貼らずとも書くだけ、最近では画像化して貼るだけでもメールアドレスをスパマーに収集される恐れがあります。

※モバイルの一部ブラウザでは電話番号等の自動リンク化が無効になっていない（できない）ケースがあります。