1. トップ
  2. 操作マニュアル
  3. 登録・変更マニュアル
  4. いろいろな情報の入力方法

いろいろな情報の入力方法

ソースコードを入力する

プログラムのソースコードなどを表示したい場合、HTMLなどとして解釈されたくないという要望があります。
このような場合には、テキストユニットの「ソース」を使用します。ソースとして入力されたテキストは、”<“ や “>” などもすべてそのまま表示されます。

(入力画面)



(表示例)



引用文を入力する

別サイトや、文献・著書などからの引用文については、専用のテキストユニット「引用」を使用することで、構造上正しく記述でき、CSSで装飾していれば見た目にもわかりやすくなります。

(入力画面)



(表示例)



HTMLを直接入力する

a-blog cmsでは様々な入力方法について対応していますが、独自の表現をするためにHTML文を使用したい場合があります。このような場合には、テキストユニットの「自由入力」を使用します。
ここで入力されたHTML文は、ブラウザを介して各要素の内容に合わせて表示されます。

(入力画面)



マークダウン記法による入力

マークダウン記法とは

a-blog cms は、マークダウン記法と呼ばれる簡易記法に対応しています。テキストユニットの [マークダウン] を使用することで、入力された内容は自動的にHTMLに変換されます。通常の本文入力では段落ごとに入力欄が分かれますが、マークダウン入力の場合は1つの入力欄で複数の段落を入力することができます。

(入力画面)



内容要素記述方法記述サンプル
見出しh1行頭に##見出し1
IDを付与行末の{} 内に記述# 見出し1 {#sample}
改行br行末に2つ以上の半角スペース行末に半角以上のスペースを入れると改行されます。
引用blockquote行頭に>>文章などを引用するときに
>使用します
引用の入れ子引用記述中の入れ子行頭に>>> 文章などを引用するときに
> 使用します。
>> 入れ子構造にもできます。
> # 見出しや> * リスト項目を追加できます。
> * 引用のマークダウン表記です。
強調emテキストを*または_で囲む*強調*
_強調_
より強い強調strongテキストを**または__で囲む**強調**
__強調__
整形済みテキストpre全ての行に4つ以上の半角スペースかタブでインデント//ここは整形されたコードブロックです。
http://example.com/
ソースコードcodeテキストを`で囲む`この部分がcode要素で囲まれます`
区切り線hr3つ以上の*または----
画像![画像1](https://www.a-blogcms.jp/themes/www/images/siteLogo.gif "画像1")
画像のリンク[![test](https://www.a-blogcms.jp/themes/www/images/siteLogo.gif)](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用語部分の行頭に:定義する用語
:用語の説明A
:用語の説明B
:用語の説明C

WYSIWYG(ウィジウィグ)による入力

WYSIWYG(ウィジウィグ)とは

WYSIWYGとは、「What You See Is What You Get」の略で、「ウィジウィグ」と読みます。a-blog cmsでは、エントリーの入力方法のうちのひとつに、このWYSIWYGを採用しています。入力画面上で表示されている通りに表示することができます。

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背景色背景色を選択する

WYSIWYGユニットで表組(テーブル)を入力・編集する


ウィジウィグで入力する表の設定は、表内で右クリックして現れるメニューから設定ができます。


表を挿入するには


  1. 表のアイコンをクリックします。(上記「各アイコンの説明」のアイコン34)
  2. プロパティのポップアップが表示されますので、行や列などを入力し[OK]ボタンをクリックして表を挿入します。

表のセルを複数選択するには

  1. 表を挿入したら、セルの中の部分をクリックします。セル内にカーソルが現れます。
  2. 入力エリア下にある要素名(tr, th, td)をクリックすると、セルが水色の枠で囲まれ、セルが選択状態になります。他に選択したいセルをShiftキーを押しながらクリックしていくと、複数選択できます。(セルをドラッグして複数選択することもできます。)

表のセル・行を追加・削除するには

  1. セルの中の部分をクリックします。セル内にカーソルが現れます。
  2. 右クリックすると、メニューが表示されますので、「セル」または「カラム」(行)にカーソルを持って行きます。
  3. 「挿入」または「削除」を選択すると、追加や削除が実行されます。

a-blog cmsを体験してみよう!

お手元のPC、スマートフォンで a-blog cms製Webサイトをご覧いただけます。

メニューの「ログイン」からエントリーの投稿も!

a-blog cms デモサイト