段落フォーマットのスタイル

行揃え

左揃え(標準)

段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。

中央揃え

段落ダミーテキストです。段落ダミーテキストです。

右揃え

段落ダミーテキストです。段落ダミーテキストです。

均等揃え

段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。

見出し

見出し2

段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。

見出し3

段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。

見出し4

段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。

見出し5

段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。

見出し6

段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。段落ダミーテキストです。

class “見出しスタイル無”

見出し2 + class=”見出しスタイル無”

見出し3 + class=”見出しスタイル無”

見出し4 + class=”見出しスタイル無”

見出し5 + class=”見出しスタイル無”
見出し6 + class=”見出しスタイル無”

箇条書き(ul:unordered list)

  •  箇条書き項目(li:list item)
    • 箇条書き項目(子項目)
    • 箇条書き項目(子項目)
      • 箇条書き項目(孫項目)
      • 箇条書き項目(孫項目)
  • 箇条書き項目
  • 箇条書き項目

番号付 箇条書き(ol:ordered list)

  1. 箇条書き項目(li:list item)
  2. 箇条書き項目
    1. 箇条書き項目(子)
    2. 箇条書き項目(子)
      1. 箇条書き項目(孫)
      2. 箇条書き項目(孫)
  1. 箇条書き(番号付、ラテン大文字)
  2. 箇条書き(番号付、ラテン大文字)
  3. 箇条書き(番号付、ラテン大文字)
  1. 箇条書き(番号付、ラテン小文字)
  2. 箇条書き(番号付、ラテン小文字)
  3. 箇条書き(番号付、ラテン小文字)
  1. 箇条書き(番号付、ローマ数字大文字)
  2. 箇条書き(番号付、ローマ数字大文字)
  3. 箇条書き(番号付、ローマ数字大文字)
  1. 箇条書き(番号付、ローマ数字小文字)
  2. 箇条書き(番号付、ローマ数字小文字)
  3. 箇条書き(番号付、ローマ数字小文字)
  1. 箇条書き(番号付、ギリシャ文字)
  2. 箇条書き(番号付、ギリシャ文字)
  3. 箇条書き(番号付、ギリシャ文字)

UL OL 混在

  • 箇条書き
    • あああ
  • 箇条書き
    1. 箇条書き
    2. 箇条書き

ブロッククオート(引用)

引用時で使用する「ブロッククオート」のフォーマットです。「引用」ボタンで適用します。他サイトや、文献からテキストを引用する場合には、このブロックフォーマットを使用してください。

インラインフォーマットのスタイル

リンクスタイル

文字色

文字色緑 文字色茶 文字色橙 文字色赤 文字色青

文字サイズ

  • normal
  • small
  • x-small
  • xx-small
  • xxx-small
  • xxxx-small
  • xxxxx-small
  • large
  • x-large
  • xx-large
  • xxx-large
  • xxxx-large
  • xxxxx-large

インラインフォーマット

  • 太字の表示例
  • 打消し線の表示例
  • 下線の表示例
  • マークの表示例

画像の配置

配置:左

通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。

通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。

通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。

配置:右

通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。

通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。

配置:中央

通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。通常の本文で使用する「段落」のフォーマットです。

配置:なし

  画像は、行内に文字列と同じように配置されます。

コンテンツ幅に収まるかぎり、画像は横に並びます。また、改段落や改行により、折り返すことができます。

画像サイズ

画像サイズは、「サムネイル」「中」「大」「フルサイズ」のいずれかを選択します。

挿入後に画像をクリックすると「リサイズ ハンドル」(四隅の白い四角形)が表示されますので、ハンドルをドラッグすると任意のサイズに変更することができます(小さくする方向にだけ使用してください)。

サイズ:大

サイズ:中

サイズ:サムネイル

サムネイルは正方形に切り抜かれます。切り抜かれる前の写真も表示させたい場合は、リンク先に「メディアファイル」を選択して、拡大画像表示をさせてください。


画像の加工

画像のトリミング、回転、反転の操作を行うことができます。「画像詳細」のウィンドウで「オリジナルを編集」ボタンから、画像編集画面に移動します。

円型画像

「画像詳細」パネルで、サイズ「サムネイル」を選択し、「上級者向け設定」内の「画像CSSクラス」のフィールドに「img-circle」を追加します。

画像のリンク先

リンク先は、「なし」「メディアファイル」「添付ファイルのページ」「カスタムURL」を選択できます。

  • なし:リンクをつけない。
  • メディアファイル:縮小されていないフルサイズの画像にリンクします。モーダルウィンドウが開き、フルサイズの画像が表示されます。
  • 添付ファイルのページ:添付ファイルを表示するウェブページにリンク(SEOに効果がありますが、閲覧ユーザーにとっては便利なものではありません)
  • カスタムURL:リンク先を自由に設定できます。

画像の拡大表示例・キャプション表示例

キャプション表示例

左の画像をクリックすると、モーダンウィンドウが開き、拡大画像が表示されます。キャプションテキストを設定した場合は、モーダンウィンドウにも画像のタイトルとして、キャプションが表示されます。


ギャラリー

一度にたくさんの画像を表示させたい場合には、「メディアを追加」画面で複数の画像を選択し「ギャラリーを作成」をクリックします。

縦位置の写真と横位置の写真が混在する場合には、画像サイズ「サムネイル」を選択すると、きれいに並べることができます。

5列・サムネイル
4列・中

テーブル(表組み)

列見出しがあるテーブル

行見出しセル通常セル
行見出しセル通常セル

行見出しがあるテーブル

ヘッダー行
列見出しセル
ヘッダー行
列見出しセル
ヘッダー行
列見出しセル
ヘッダー行
列見出しセル
通常セル通常セル通常セル通常セル
通常セル通常セル通常セル通常セル

列見出しと行見出しがあるテーブル

ヘッダー行
列見出しセル
ヘッダー行
列見出しセル
ヘッダー行
列見出しセル
ヘッダー行
列見出しセル
行見出しセル通常セル通常セル通常セル
行見出しセル通常セル通常セル通常セル
行見出しセル通常セル通常セル通常セル

モバイル表示で見切れてしまう表をスクロール可能にする設定

PCの画面では、右端まで表示されても、スマートフォンでは見切れてしまう可能性のある表は、スクロール可能にすることで、見切れた部分をスライドさせて確認することができます。
(ブラウザのウィンドウ幅をコンテンツ幅より縮めるとPC上でも動作の確認ができます)

※以下のコンテンツは左右にスワイプしてご確認ください。

ヘッダー行
列見出しセル
ヘッダー行
列見出しセル
ヘッダー行
列見出しセル
ヘッダー行
列見出しセル
ヘッダー行
列見出しセル
ヘッダー行
列見出しセル
ヘッダー行
列見出しセル
行見出しセル通常セル通常セル通常セル通常セル通常セル通常セル
行見出しセル通常セル通常セル通常セル通常セル通常セル通常セル
行見出しセル通常セル通常セル通常セル通常セル通常セル通常セル

記述方法:

表を[swipable]ショートコードで囲みます。

[swipable]
aaaabbbb
ccccddddd
[/swipable]

※上のコードをコピー&ペーストする場合には、必ず「テキストとしてペースト」ボタンを押した状態でペーストしてください。

セル内のテキストを折返さない設定

セル内にカーソルを置いて、「スタイル」ボタンから「折返し無し(表セル内)」を選択すると、スタイルを適用したセル内では、テキストが自動で折り返されないようになります。改行の必要がある場合は、任意の場所で「shift + enter」キーで改行してください。

※以下のコンテンツは左右にスワイプしてご確認ください。

ヘッダー行
列見出しセル
ヘッダー行
列見出しセル
ヘッダー行
列見出しセル
ヘッダー行
列見出しセル
ヘッダー行 列見出しセル
「折返し無し」
スタイルを適用
ヘッダー行 列見出しセル
「折返し無し」
スタイルを適用
ヘッダー行 列見出しセル
「折返し無し」
スタイルを適用
行見出しセル通常セル通常セル通常セル通常セル通常セル通常セル
行見出しセル通常セル通常セル通常セル通常セル通常セル通常セル
行見出しセル通常セル通常セル通常セル通常セル通常セル通常セル