Boxil CMS 見本記事｜編集してご活用ください｜タイトルは30〜40文字程度が理想

Boxil CMS での記事作成の基本

Boxil CMS（ボクシル・シー・エム・エス）は、Web上で記事を書ける「コンテンツマネジメントシステム」と呼ばれるものです。簡単にいうとブログの作成画面のようなものです。

Boxil CMSでは記事を作成することができ、次のような要素を組み合わせて作ります。

• 通常のテキスト
• 見出し
• 図や写真
• 目次
• ボタン
• リンク

これらのパーツを HTML や Markdown といった記述方法により、組み合わせていきます。

HTMLとはWebページを構成するための言語です。HTMLのタグと呼ばれるものをよく使うものにかぎり、簡単にかけるようにした言語が「Markdown」です。

Boxil CMSでは、このHTMLとMarkdownの一部とBoxil CMS独自の記述方法を使用します。

それでは、ひとつずつ書き方を確認していきましょう。

通常のテキストの書き方

記事編集画面の左側がエディターになっており、右側が簡易プレビューになっています。

エディター部分に文字を打ってみると、右側の簡易プレビューにも表示がされることを確認してください。

強調の仕方

強調したいところを選択した状態で、編集画面上部のツールバーにある ボタンを押しましょう。

2個ずつのアスタリスクで囲まれ、このように強調表示されます。

リンクのつけ方

編集画面上部のツールバーにある マークをクリックしましょう。

角括弧[]の中に、リンクを付けたいテキストを入れ、丸括弧()の中に、飛ばす先のURLを入力しましょう。

例として、「ボクシル」というテキストに https://boxil.jpを追加します。

（例）
ボクシルとは法人向けITサービスの比較・検索・資料請求サイトです。

これを応用して画像にもリンクを貼り付けることができます。

見出しの書き方

↑この大きい文字＋下線のデザインになっている見出しを作成する方法です。
HTMLではhタグとよばれ、<h2>見出し2</h2>といった形で適用することができます。

見出し3（HTML表記）

↑これはエディター上で見ると<h3>見出し3（HTML表記）</h3>と記述されています。
ですが、この書き方は前と後ろに開始タグと終了タグを入れる手間がかかるので、Markdownという記法を使うことで簡単に書けるようになります。

見出しレベル3の場合は

HTMLだと <h3>見出しのテキスト</h3>
Markdownだと ### 見出しのテキスト

と書けます。このようにMarkdownの方が簡単に見出しが記述できます。

記述が難しい方は、記事の編集画面上部のメニューバーにある「h2」や「h3」のボタンをクリックすると自動で挿入されるようになっています。

見出し3（Markdown表記）

HTMLとMarkdownには見出しレベルごとに#マークが増える形で対応がされています。

記事内では見出し2から始まり、最大で見出し4までレベルを付けることができます。
見出し1と見出し5以降はサポートをしていないので、見た目が崩れるおそれがあります。
また、Boxil CMS の SEO対策観点でも見出し2〜4までを推奨しています。

それではこの下にあるテキストに#マークの個数を変えてみて、デザインがどう変化するか試してみましょう。

テスト用テキスト

注意点としては#マークの後に来るテキストとの間に半角スペースを入れていなかったり、上下に改行を入れていなかったりすると、表示不具合が起こる場合がございますので、改行の仕方やスペースの空け方も真似するようにしてください。

図や写真の挿入方法

記事の編集画面のうえに黒いメニューバーがあります。
この中にある図のアイコン をクリックして画像を挿入することができます。
手順は以下になります。

1. エディター上で画像を挿入したい行をクリック
2. 図のアイコンをクリック
3. ポップアップで画像選択＆アップロード画面が表示される
4. ファイルをドラッグ・アンド・ドロップするか、ファイル選択をして画像をアップロード
5. アップロード後に画像が表示されるのでクリック

うまくいくと以下のように図の要素を示すMarkdownが挿入されます。
簡易プレビューで実際に画像が表示されていることも確認してください。

)

その他の機能

Boxil CMSには他にも多くの機能があります。
使い方についてご質問がございましたら、お問い合わせください。

• 続きを読む：会員登録者のみ次のページを読める機能
• 改ページ：次のページに切り替える機能
• ボタン：ボタン型のリンクをつける機能
• 資料請求ボタン：資料請求ができるボタンを設置する機能
• Message Box：テキストに囲いをつける機能
• Image Box：画像を解説しやすくする機能
• OGP：外部の記事情報をひっぱってくる機能

記事を書いている途中や、完成したらやるべきこと

校正チェックをする

言い回しの統一や、送り仮名のつけ方などを自動チェックしてくれる機能です。
誤りがあった場合は Ctrl + F や command + F などを押して、誤りを検索してみましょう。

校正チェック機能は機械的なチェックのため、おかしくないケースも誤りとして検出してしまう場合があります。その際は無視をしても問題ありません。

下書き保存＆プレビューをする

記事を書いている途中はこまめに下書き保存をしましょう。

下書き保存をしないでウィンドウを閉じてしまうなどすると、データが消えてしまいます。

上部ツールバーのプレビューを押すと、別ウィンドウで実際に公開されたときと同じ画面を確認できます。