編集

トップ > 当CMSの仕様について > 記事のつくりかた

記事のつくりかた（公開済）

URL：http://original-cms-sample.com/contents/cms/make/

リード文

本文

h3:編集ページにアクセスする方法
では、早速記事の作り方を見ていきましょう。

まずはどこでつくるの？という話ですが、それはずばり管理者用ページです。誰でもアクセスできる領域だとセキュリティ的に大問題ですからね。

あなたが当サイトで動かしてみる場合は、サイドメニュー上部の「こちら」をクリックしてみてください。
img:side_admin_link.png

直接「<a href="http://original-cms-sample.com/admin/">http://original-cms-sample.com/admin/</a>」にアクセスしても大丈夫です。

この↓ような画面に移動したと思います。赤い枠の「コンテンツ」をクリックしてください。（画像クリックで拡大表示）
img:admin_top.png

これでこの↓ような画面にたどり着けばOKです。
img:contents_list.png
/h3:
h3:コンテンツ情報を作成する
コンテンツ一覧のページが表示されているので、コンテンツ情報の新規登録を行います。

ですが、その前にやらねばならないことがあります。

h4:登録対象データのIDを決める
それは登録するカテゴリIDとコンテンツIDを決めることです。

というのも、テーブルの制約的にカテゴリIDとコンテンツIDが重複するデータが存在することは許されていないからです。
↓関連
relation:2,6
というわけで、コンテンツリストの画面でツルー...っと下にスクロールしてください。

すると、このように実際に存在してる記事情報の一覧が表示されます。（上の方に並んでいるのは管理用ページの情報なので無視してください。）
img:contents_list2.png
この中からまだ存在していない組み合わせをメモしておきましょう。（脳内メモで大丈夫です）

この後の例ではカテゴリID：4　コンテンツID：1　で進めます。

カテゴリの４は操作練習用として用意しました。あなたもカテゴリは４でされるといいです！
/h4:
h4:コンテンツを登録する
それでは、コンテンツ情報を登録します。

画面上部にある「新規登録はこちら」をクリックしましょう。
img:contents_insert_button.png
すると、このような画面に移動します。新規登録画面です。
img:contents_insert_form.png
先ほど決めたカテゴリIDとコンテンツIDを入力しましょう。

名前とURLも入力します。
ここでは例としてご案内するのでそれぞれ「サンプルページ」、「sample/」として登録します。

※URLは最後にスラッシュ「/」を付けないと後々不具合が生じます。必ずスラッシュをつけてください。

無効フラグというものもありますが、これはチェックONにするとユーザ（サイトの来訪者）に見えないようにすることができます。いわゆる非公開状態ですね。

下書き段階ではONにしておくといいです。

全て入力すると↓このようになります。
img:contents_sample_insert.png
各種入力できたら最後に「送信」ボタンを押します。

するとコンテンツリストの一覧と管理ページトップの「記事の編集・設定」の一覧に記事が追加されます。
img:contents_list_new_data.png
img:new_contents_link.png
↑これをクリックしてみましょう。

編集ページに移動しました。
img:edit_page.png
/h4:
これで下準備完了です。いよいよ記事を作りこんでいきます。
/h3:
h3:編集画面のサイドメニューの使い方
編集の説明に入っていきますが、画面を見てみてください。

右にあるサイドメニューの内容がほかのページと違うことに気づくと思います。

そうです。これは編集用に専用の各メニューを用意しています。ここに人気記事へのリンクがあっても仕方ないですからね。

では一つずつ説明しています。細かいところは省略するので、実際に動かしながら動きを確認してみてください。
h4:装飾・タグ
記事の本文に対して、装飾するときや画像や関連記事リンクを挿入したい場合に使います。
img:tag_insert.png
使い方は文字をドラッグした状態でアイコンをクリックするだけなのですが、1点だけ注意があります。

この編集画面には
・リード文
・目次
・本文
の3つのテキストエリアがありますよね。

実は技術的な制約で（というか私が無知なばかりに）、タグを挿入する場合に「どのテキストエリアに？」という情報を別で指定しておかなければなりません。

それを担当するのが、
img:target_compornent.png
↑ここです！挿入対象コンポーネント。サイドメニューの右にずっと固定のラジオボタンが3つありますよね。ここで挿入対象のテキストエリアを選択しておきます。

選択中のテキストエリアは枠が黒線になるようにしています。

試しにタグを挿入してみます。動かしてみてください。

↓このように選択した状態で赤文字をクリックしてみましょう。
img:red_tag_before.png
すると・・・
img:red_tag_after.png
↑このようになります。文字に対してタグが挿入されていますね。

これが基本的な使い方になります。

本文の編集中にタグの挿入アイコンが画面内にいてくれないと不便です。

そこでですね・・・。

↓この赤枠内のラジオボタンに注目してください。
img:fixed_buttons.png,50
いずれかをクリックすると、ずっとサイドにいてくれます。

ここの挙動はこの後説明するパーツたちも同じです。
/h4:
h4:画像ファイル
画像を登録したい！記事中に挿入したい！というときはここを使います。
img:img_insert.png,50
アイキャッチ（記事のトップやサイドメニューに出てくる画像）もここから登録できます。

このCMSの仕様でファイル名が「index」だったらアイキャッチとして使用されることになっています。拡張子の制限もありますが、それは<a href="">note</a>に譲ります。

では、登録してみましょう。「ファイルを選択」をクリックし、任意の画像を選びます。
img:open_files.png
「開く」をクリックします。で、画像が選択された状態になりますので、「画像送信」を押下しましょう。
img:add_img.png
これで、画像一覧に追加されます。画像一覧のエリアで下スクロールしてください。ちゃんとあります。

ファイル名のアイコンをクリックすると、記事中に画像挿入文字が挿入されます。

すぐには分からないので、サイドメニューの下部にあるプレビューをクリックして確認してみてください。

登録してしまった画像を削除したい場合はファイル名の右にある「[削除]」をクリックします。これ、押しても画面上からは消えません（内部的には消えてます）。

画面更新することでちゃんと消えてることを確認できます。画面更新する前は記事内容の保存を忘れずに。

また、「[削除]」の右の画像をクリックすると画像を正規のサイズで確認できます。
/h4:
h4:関連記事
関連記事です。ここにはリストボックスで、他の記事たちが並んでいます。
img:side_relation_list.png,60

まず、挿入方法ですが、入れた場所にカーソルを合わせて関連記事のタイトルをダブルクリックします。

すると「relation:2,5」というような文字が挿入されます。実際の画面には内部で変換されて↓このように表示されます。
relation:2,5

この関連記事情報はリード、本文に入れるパターンと関連記事に入れるパターンで表示が異なります。

リードや本文の場合は↑の表示になりますが、この記事自体に関連付ける場合は画面右下の挿入対象コンポーネントで「関連記事」を選択します。

その状態で、関連させたい記事を選ぶと編集画面下部にある「関連記事一覧」に追加されます。

この↓ような感じですね。
img:add_relations.png

ここの設定はどこに活きるかというと、一度保存をしてプレビューを表示します。
すると、先ほどの設定が以下のように記事の下部の関連記事一覧として表示されています。
img:relations.png

こんな感じで利用しましょう。
/h4:
h4:リンク
リンクです。ここにはこの記事の更新と削除をする画面へ飛べます。
img:side_link.png,50
これは本来なくてもいいんですが、「あった方が便利だよね」ということでつけています。

記事が完成して「よし、公開するぞぉー！」ってときにいちいち管理者ページのトップへいってコンテンツ一覧から探して・・・というのは手間なのでここからダイレクトに飛べるようにしています。

親切ですね。
/h4:
h4:ボタン４つ
ずっと画面に追随してくるエリアに「保存」「プレビュー」「お掃除」「目次反映」の4つのボタンがあると思います。
img:buttons.png,50
保存は記事を保存します。リード文、目次、本文、関連記事情報を保存します。サイドメニューの画像に関しては「画像送信」を押した瞬間に登録が完了しているので、この保存ボタンではノータッチです。

プレビュ―は新しいタブでプレビュー表示をします。今の状態で記事公開をするとどんな表示になるか？というものを見せます。コンテンツ作成の要ですね。

お掃除はこのコンテンツに関する不要なファイルを削除します。

このCMSでは保存するたびにバックアップも残していきます。消さないと増える一方ですので削除するボタンを用意しているわけです。

「今どれだけバックが保存されているの？」については編集画面で一番下までスクロールしてください。

ファイル名一覧の中で日付情報のついたものがバックアップファイルです。その時間時点の記事の状態です。

「目次反映」は目次に入力した情報で本文を編集する準備をするボタンなんですが・・・次の章で案内します。
/h4:
これで一通り画面パーツについては説明しました。
/h3:
h3:注意したい仕様
ここまでの説明で記事の作成はおそらく可能かと思います。・・・が、いくつか事前にお伝えしておきた仕様があります。

h4:目次と本文の連携部分
目次は章タイトルを並べるだけでいいのですが、それを本文に反映する場合はとあるルールに則らなければなりません。

たとえば、目次が
■オリジナルCMSを作る前に環境を用意しよう
■必要なファイルをそろえよう
だったとしたら本文側では
 h3:オリジナルCMSを作る前に環境を用意しよう
 ～～～ここに本文～～～
 /h3:
 h3:必要なファイルをそろえよう
 ～～～ここに本文～～～
 /h3:
と書く必要があります。

これはそういう仕様なんです。これら文字列が内部でHTMLタグに変換されます。詳しくは学習をされるときに。

で、「h3:」とか「/h3:」ってよくわからないと思います。なので、編集されるときは目次を入力し終わった段階で、一度「目次反映」を押下してみてください。

タグ変換文字が適切に本文エリアに設定されるので、そこから本文を入力していきましょう。

分からないときはほかの記事をお手本として見てみてください。
/h4:
h4:改行の仕様
テキストエリア内の改行はすべて実際の記事内でも反映されます。

なので、記事編集の作業的に見やすいから、という理由だけで改行を入れまくったとしても実際の記事でも改行がされます。

そこは注意してください。妙に広いスペースができて記事のテンポが悪くならないように。
/h4:
/h3:
h3:おわりに
ここまでの説明で、あとは実際にブラウザから文字を打ったりボタンを押したりしながら記事を作っていく感じです。

このサイトはタイトル通りサンプルとして存在しているので、あなたも是非一度動かしてみてください。触れるところは好きに触っていただいて構いません。

記事を作ってそのまま公開状態にしておいてもいいですし、下書きもOK。削除ももちろん構いません。

分からないところやご質問があったら下のコメント欄からお願いします。

ありがとうございました。
/h3:

↓このコンテンツのファイル情報↓

ファイル名	更新時刻	サイズ(byte)
2020-11-18_17-24-41-p_lead.txt	2020/11/18 17:24:41	314 B
2020-11-18_17-24-41-p_message.txt	2020/11/18 17:24:41	13693 B
2020-11-18_17-24-41-p_toc.txt	2020/11/18 17:24:41	163 B
2021-04-08_16-50-31-p_lead.txt	2021/04/08 16:50:31	314 B
2021-04-08_16-50-31-p_message.txt	2021/04/08 16:50:31	13693 B
2021-04-08_16-50-31-p_toc.txt	2021/04/08 16:50:31	163 B
2021-05-09_17-20-33-p_lead.txt	2021/05/09 17:20:33	314 B
2021-05-09_17-20-33-p_message.txt	2021/05/09 17:20:33	29 B
2021-05-09_17-20-33-p_toc.txt	2021/05/09 17:20:33	163 B
2021-06-10_23-57-51-p_lead.txt	2021/06/10 23:57:51	314 B
2021-06-10_23-57-51-p_message.txt	2021/06/10 23:57:51	13693 B
2021-06-10_23-57-51-p_toc.txt	2021/06/10 23:57:51	163 B
2021-06-12_23-15-43-p_lead.txt	2021/06/12 23:15:43	318 B
2021-06-12_23-15-43-p_message.txt	2021/06/12 23:15:43	13928 B
2021-06-12_23-15-43-p_toc.txt	2021/06/12 23:15:43	167 B
2021-06-29_18-40-43-p_lead.txt	2021/06/29 18:40:43	314 B
2021-06-29_18-40-43-p_message.txt	2021/06/29 18:40:43	13693 B
2021-06-29_18-40-43-p_toc.txt	2021/06/29 18:40:43	163 B
2022-05-27_08-54-03-p_lead.txt	2022/05/27 08:54:03	318 B
2022-05-27_08-54-03-p_message.txt	2022/05/27 08:54:03	13928 B
2022-05-27_08-54-03-p_toc.txt	2022/05/27 08:54:03	167 B
2022-05-27_08-54-19-p_lead.txt	2022/05/27 08:54:19	318 B
2022-05-27_08-54-19-p_message.txt	2022/05/27 08:54:19	13934 B
2022-05-27_08-54-19-p_toc.txt	2022/05/27 08:54:19	167 B
2023-06-08_13-35-19-p_lead.txt	2023/06/08 13:35:19	318 B
2023-06-08_13-35-19-p_message.txt	2023/06/08 13:35:19	13928 B
2023-06-08_13-35-19-p_toc.txt	2023/06/08 13:35:19	167 B
2023-07-14_17-26-36-p_lead.txt	2023/07/14 17:26:36	318 B
2023-07-14_17-26-36-p_message.txt	2023/07/14 17:26:36	13928 B
2023-07-14_17-26-36-p_toc.txt	2023/07/14 17:26:36	167 B
lead.txt	2019/08/04 21:27:55	314 B
message.txt	2019/08/04 21:27:55	13693 B
p_lead.txt	2023/07/14 17:26:36	318 B
p_message.txt	2023/07/14 17:26:36	13928 B
p_toc.txt	2023/07/14 17:26:36	167 B
toc.txt	2019/08/04 21:27:55	163 B

記事のつくりかた（公開済）

装飾・タグ(固定/解除)

画像ファイル(固定/解除)

関連記事(固定/解除)

リンク

装飾・タグ画像関連記事

挿入対象コンポーネント

記事のつくりかた（公開済）

装飾・タグ(固定/解除)

画像ファイル(固定/解除)

関連記事(固定/解除)

リンク

装飾・タグ 画像 関連記事

挿入対象コンポーネント

装飾・タグ画像関連記事