ソースコードを入力する
プログラムのソースコードなどを表示したい場合、HTMLなどとして解釈されたくないという要望があります。
このような場合には、テキストユニットの「ソース」を使用します。ソースとして入力されたテキストは、”<“ や “>” などもすべてそのまま表示されます。
（入力画面）
（表示例）
プログラムのソースコードなどを表示したい場合、HTMLなどとして解釈されたくないという要望があります。
このような場合には、テキストユニットの「ソース」を使用します。ソースとして入力されたテキストは、”<“ や “>” などもすべてそのまま表示されます。
（入力画面）
（表示例）
別サイトや、文献・著書などからの引用文については、専用のテキストユニット「引用」を使用することで、構造上正しく記述でき、CSSで装飾していれば見た目にもわかりやすくなります。
（入力画面）
（表示例）
a-blog cmsでは様々な入力方法について対応していますが、独自の表現をするためにHTML文を使用したい場合があります。このような場合には、テキストユニットの「自由入力」を使用します。
ここで入力されたHTML文は、ブラウザを介して各要素の内容に合わせて表示されます。
（入力画面）
a-blog cms は、マークダウン記法と呼ばれる簡易記法に対応しています。テキストユニットの [マークダウン] を使用することで、入力された内容は自動的にHTMLに変換されます。通常の本文入力では段落ごとに入力欄が分かれますが、マークダウン入力の場合は１つの入力欄で複数の段落を入力することができます。
（入力画面）
| 内容 | 要素 | 記述方法 | 記述サンプル |
|---|---|---|---|
| 見出し | h1 | 行頭に# | ＃見出し1 |
| IDを付与 | 行末の{} 内に記述 | ＃ 見出し1 {#sample} | |
| 改行 | br | 行末に2つ以上の半角スペース | 行末に半角以上のスペースを入れると改行されます。 |
| 引用 | blockquote | 行頭に> | >文章などを引用するときに>使用します |
| 引用の入れ子 | 引用記述中の入れ子行頭に>> | > 文章などを引用するときに > 使用します。 >> 入れ子構造にもできます。 > # 見出しや > * リスト項目を追加できます。 > * 引用のマークダウン表記です。 |
|
| 強調 | em | テキストを*または_で囲む | *強調*_強調_ |
| より強い強調 | strong | テキストを**または__で囲む | **強調**__強調__ |
| 整形済みテキスト | pre | 全ての行に4つ以上の半角スペースかタブでインデント | //ここは整形されたコードブロックです。 http://example.com/ |
| ソースコード | code | テキストを`で囲む | `この部分がcode要素で囲まれます` |
| 区切り線 | hr | 3つ以上の*または- | --- |
| 画像 |  | ||
| 画像のリンク | [](http://www.appleple.com/) | ||
| リンク | a | [example](http://example.com/ "Title部分は任意で") | |
| リスト | ul.li | 行頭に *または- | * Sample1 * Sample2 * Sample3 * Sample4 * Sample5 |
| 番号付きリスト | ol.li | 行頭に 数字. | 1. Sample1 2. Sample2 3. Sample3 4. Sample4 5. Sample5 |
| 定義リスト | dl.dt.dd | 用語部分の行頭に「: 」 （Ver. 2.11まで。Ver.3.0以降は現在使用できません） |
定義する用語 : 用語の説明A : 用語の説明B : 用語の説明C |
定義リストの記法ですが、現在ご使用いただけるのは Ver. 2.11 までとなっております。
Ver.3.0以降は現在定義リストの記法に対応しておりません。お手数ですが、HTMLに置き換えてご対応ください。
将来バージョンでの実装を検討しておりますので、対応まで今しばらくお待ちください。
WYSIWYGとは、「What You See Is What You Get」の略で、「ウィジウィグ」と読みます。a-blog cmsでは、エントリーの入力方法のうちのひとつに、このWYSIWYGを採用しています。入力画面上で表示されている通りに表示することができます。
まず、テキストユニットの「WYSIWYG」を選択します。
選択した時点で、入力部分がWYSIWYGユニット専用のツール等を備えた画面に切り替わります。
ツールアイコンを利用して、様々な装飾ができます。
| 1 | ソース | HTMLのソースを表示 |
|---|---|---|
| 2 | 内容テンプレート | エディターで使用するテンプレートを選択できます |
| 3 | 切り取り | 文字または画像を切り取り（カット） |
| 4 | コピー | 文字または画像をコピー |
| 5 | 貼り付け | 文字または画像を貼り付け（ペースト） |
| 6 | プレーンテキスト貼り付け | レイアウト情報や修飾情報を持たない文字を貼り付け（ペースト） |
| 7 | ワード文章から貼り付け | Wordから文章を貼り付け（ペースト） |
| 8 | 元に戻す | 1ステップ前の状態に戻す |
| 9 | やり直し | 1ステップ後の状態にする |
| 10 | 検索 | 入力エリアの内を文字を検索する |
| 11 | 置き換え | 入力エリアの内で文字を置き換える |
| 12 | 全て選択 | 入力エリアの内容を全て選択する |
| 13 | 書式を解除 | レイアウト情報などのフォーマットを削除 |
| 14 | 最大化 | 入力エリアを最大化 |
| 15 | ブロックを表示 | ブロック要素を視覚的に表示する |
| 16 | 太字 | 文字を太字に |
|---|---|---|
| 17 | 斜体 | 文字を斜体に |
| 18 | 下線 | 文字を下線付きに |
| 19 | 取り消し線 | 文字に取り消し線をつける |
| 20 | 下付き | 下付き文字にする |
| 21 | 上付き | 上付き文字にする |
| 22 | 段落番号 | 段落番号付きの文字 |
| 23 | 箇条書き | 箇条書きの文字 |
| 24 | インデント解除 | 文字のインデントを解除 |
| 25 | インデント | 文字にインデント挿入 |
| 26 | ブロック引用 | 引用文を挿入 |
| 27 | 左揃え | 文字を左揃えにする |
| 28 | 中央揃え | 文字を中央揃えにする |
| 29 | 右揃え | 文字を右揃えにする |
| 30 | 両端揃え | 文字を両端揃えにする |
| 31 | リンク挿入/編集 | ハイパーリンクの挿入・編集 |
| 32 | リンク削除 | ハイパーリンクの削除 |
| 33 | アンカー挿入/編集 | アンカーを挿入・編集 |
| 34 | テーブル | テーブルの挿入 |
| 35 | 水平線 | 水平線の挿入 |
| 36 | スタイル | 文字列にブロックスタイル・インラインスタイルを適用 |
|---|---|---|
| 37 | 書式 | 標準/見出し1〜3/書式付きから選択して適用 |
| 38 | フォント | 文字の書体を選択する |
| 39 | サイズ | フォントサイズを選択する |
| 40 | 文字色 | 文字の色を選択する |
| 41 | 背景色 | 背景色を選択する |
ウィジウィグで入力する表の設定は、表内で右クリックして現れるメニューから設定ができます。
お手元のPC、スマートフォンで a-blog cms製Webサイトをご覧いただけます。
メニューの「ログイン」からエントリーの投稿も！
a-blog cms デモサイト