サンプルページ – 孫ページ

明朝見出し(見出し2)

背景カラー見出し(見出し3)

サブ見出し(見出し4)

小見出し(見出し5)
小見出し2(見出し6)
表の見出し りんご 198円(1個)
表の見出し2 トマト 398円(1袋)
表の見出し3 キャベツ 98円(半玉)
表の見出し4 198円(1パック)

テキストの装飾

本文サンプルがこのように入ります本文サンプルがこのように入ります本文サンプルがこのように入ります本文サンプルがこのように入ります本文サンプルがこのように入ります本文サンプルがこのように入ります本文サンプルがこのように入ります本文サンプルがこのように入ります本文サンプルがこのように入ります本文サンプルがこのように入ります本文サンプルがこのように入ります本文サンプルがこのように入ります本文サンプルがこのように入ります。

なんの装飾も行わなければ通常は左寄せにテキストが挿入されていきます。

改行でスペスを開けて段落表現を行います。

本文サンプルがこのように入ります本文サンプルがこのように入ります(右寄せ)

本文サンプルがこのように入ります本文サンプルがこのように入ります(中央寄せ)

本文サンプルがこのように入ります本文サンプルがこのように入ります本文サンプルがこのように入ります本文サンプルがこのように入ります本文サンプルがこのように入ります本文サンプルがこのように入ります本文サンプルがこのように入ります本文サンプルがこのように入ります本文サンプルがこのように入ります本文サンプルがこのように入ります本文サンプルがこのように入ります本文サンプルがこのように入ります(両端寄せは改行位置を揃えるために使用します)

テキストブロックの下線にドットを使いたい場合はスタイルから選んで適用します(行内の一部のテキストへの適用は不可)。

画像の挿入と横並びレイアウト

画像の挿入は「挿入 > メディアの追加」から可能です。メディアへアップロードした画像を投稿へ追加することができます。

画像へはキャプションと、リンクの設定を行うことが可能です。挿入後に編集する場合は、画像をクリックして表示される鉛筆マークの「編集」メニューから各箇所を編集します。

画像は右寄せ・左寄せ・中央寄せと指定が可能です。このように画像の右隣にテキストを挿入する場合は、画像を左寄せに設定し、画像の隣にテキストを追加していきます。

横並び設定(左寄せ・右寄せなど)を使用した後には必ずclear floatsを挿入します。

clear floatsはエディタメニューの一番左端にあるボタンです。横並び設定を解除したい箇所にカーソルを置き、clear floatsボタンをクリックすると「CLEAR」という点線が挿入されます。この点線とCLEARの文字は、投稿されたページでは表示されません。

Clear floatsを挿入ことで横並びによるレイアウト崩れを防ぎます。

デバイスごとでの見た目の変化

PCのように横幅の広いデバイスの場合は正常なレイアウトでも、モバイルからの閲覧ではレイアウトが崩れたように見えるな場合があります。

朝食例

画像を左寄せで横並びにした場合はどうなるのでしょうか。

朝食例

画像を右寄せで横並びにした場合はどうなるのでしょうか。右寄せのレイアウトでは、画像の記入箇所があとに来ているように見えますが、画像が先に記入され、テキストが後に記入されています。

次に、中央寄せの画像です。

朝食例

画像の上下テキストで挟んでみました。

リスト項目

番号なしリスト

  • りんご

番号付きリスト

  1. 朝礼
  2. 午前の業務
  3. 昼食
  4. 午後の業務
  5. 終礼

リンクへのスタイル追加

リンクに各種アイコンやボタンの装飾を追加することが可能です。

リンクにしたいテキストを選択し、「スタイル」から適用したいスタイルを選択した後、「リンクの挿入/編集」からリンク先URL(ファイルURL)を設定することで正しく装飾が適用されます。

ボタンリンク

グレーボタンリンク

テキストリンク

自動で付与されるアイコン

テキストリンクには属性や種類ごとに自動でアイコンが付与されます。

PDFファイルリンク(リンク先のファイルが.pdfの時)

Wordファイルリンク(リンク先のファイルが.doc、もしくは.docxの時)

エクセルファイルリンク(リンク先のファイルが.xls、もしくは.xlsxの時)

パワーポイントファイルリンク(リンク先のファイルが.pptの時)

その他のファイルリンク(リンク先のファイルが.zipの時)

外部サイトへのリンク(リンクを別のウィンドウで開く設定をした時)

電話番号リンク(電話番号リンクの時)

メールアドレスリンク(メールアドレスリンクの時)

※自動で付与されるアイコンを削除したい時は、テキストを選択して「スタイル > リンクアイコン削除」を選択してから、リンクの挿入・編集を行ってください。

PDFファイルリンク(リンク先が.pdfだがリンクアイコン削除を設定しているためアイコンなし)

引用文

引用文とは別のサイトや文献から文章や画像等を引用することです。

引用を用いて記事を書く場合は、引用元の明記が必要です。引用箇所をこのように装飾することで、わかりやすくしています。