SAMPLE IMAGE この画像は差し替えてご利用ください

見出し

目次

033-1-1 見出しの作成

以下で作成する見出しと文章は、HPデザインテキストを参照します。

ここでは、「ホーム」ページに見出し1を追加する。

➊ 追加する場所にマウスを移動し、[+ コンテンツを追加]をクリックする

1)「ホーム」ページを開き、編集モードにする。

2)コンテンツ領域の最上段に表示されている[+ コンテンツを追加]をクリックする。

「032 コンテンツの追加と削除」の「032-3 コンテンツを追加する」で見たように、追加する場所へマウスポインターを移動し、表示される[+ コンテンツを追加]をクリックする。

jdg033_26:[+コンテンツを追加]
jdg033_26:[+コンテンツを追加]

[編集ツール]パネルが表示されます。

➋[見出し]のアイコンをクリックする

jdg033_02:見出しを追加する
jdg033_02:見出しを追加する

➌[見出し]の編集ツールが表示される。ここに見出しの文字を入力する

jdg033_27:見出し文字入力
jdg033_27:見出し文字入力

❹ 見出しのサイズを選択し、[保存]を押す

見出しのサイズには、「大」「中」「小」の三つが用意されている。

それぞれ、HTML の h1、h2、h3 タグに相当する。

 

ここでは、「大」を選択する。

❺ 大見出しが二行に折れているので、文字サイズを変更し修正します

1)[管理]メニューの[スタイル]を選択します。

jdg033_48:管理メニューのスタイル選択
jdg033_48:管理メニューのスタイル選択

2)マウスポインターがコロコロマークに変わるので、大見出しの領域でクリックします。

jdg033_49:大見出しのスタイル編集
jdg033_49:大見出しのスタイル編集

3)選択したコンテンツ(大見出し)のスタイルメニューが上部に表示されるので、フォントサイズ、行間隔を変更設定し、[保存]ボタンを押し、パネルを閉じます。

詳細設定: オン

フォントサイズ: 48 → 40

行間隔:          → 1.5

jdg033_50:大見出しの書式スタイル設定
jdg033_50:大見出しの書式スタイル設定

大見出しのフォントサイズが変更された

これにより、大見出しのフォントサイズは、標準の 48px から 40px へ変更されました。すべてのページの大見出しに適用されます。

❻「見出し」の作成は完了する

jdg033_28:書式スタイルが設定された大見出し
jdg033_28:書式スタイルが設定された大見出し

033-1-2 作成した見出しの修正

➊ 修正する見出しをクリックする

jdg033_29:修正する大見出し
jdg033_29:修正する大見出し

➋「見出し」の編集ツールが表示されるので、文字やサイズを変更する

ここで変更できるサイズは、大中小の見出しの大きさの設定の変更のみです。

033-1-3 練習:他のページにも見出しを追加する

➊ それぞれのページのコンテンツ最上段に見出しを追加する

「ごあいさつ」のページ(最初から[+ コンテンツを追加]が表示されている)の場合:

jdg033_30:大見出し
jdg033_30:大見出し

初めから表示されている[+ コンテンツを追加]をクリックして、見出しを追加する:

jdg033_31:大見出しの追加
jdg033_31:大見出しの追加

同様に他のページにも見出しを追加する。

以下同様に追加する:

  • 「ホーム」ページ      「きままなシニアライフへようこそ!」
  • 「ごあいさつ」ページ    「毎日元気一杯なシニアです!」
  • 「教養と教育」ページ    「今日は用があり、行く処があるのだ」
  • 「ボランティア活動」ページ 「ボランティア活動に集中してます!」
  • 「ありのままに」ページ   「ありのままに日々活動中です!」
  • 「HP作成勉強会」ページ  「HP作成の勉強中です!」
  • 「参加者作品」ページ    「参加者作品」
  • 「フォトギャラリー」ページ 「フォトギャラリー!オープン中です」
  • 「わが街」ページ      「わが街のページへようこそ!」
  • 「旅の写真」ページ     「旅の写真ページへようこそ!」
  • 「花の写真」ページ     「花の写真ページへようこそ!」
  • 「活動拠点」ページ     「活動拠点のページです」
  • 「お問い合わせ」ページ   「お問い合わせのページです!」