コンテンツ追加方法

「+」マークにカーソルを合わせると「コンテンツを追加する」「ヘッダーコンテンツを追加する」「フッターコンテンツを追加する」等のテキストが表示されます。

そのまま「+」マークや「+」マークから発生している破線をクリックすると、「コンテンツを追加する」画面が表示されます。

コンテンツ追加方法

文章

文章コンテンツの追加

  1. 「コンテンツを追加する」「ヘッダーコンテンツを追加する」「フッターコンテンツを追加する」の「文章」をクリックすると、文章追加のレイアウトが表示されます。
  2. 1列~3列の中でお好みのレイアウトを選択してください。
    なお、ヘッダーエリアおよびフッターエリアの文章レイアウトは、1列のみとなります。

文章コンテンツの追加

スマートフォン表示設定

レイアウト選択画面で2列以上を選択すると、スマートフォン表示設定をすることができます。

文章編集

  1. 編集したい文章エリアをクリックすると簡単編集ツール(ウィジウィグエディタ)が表示されます。
  2. そのままキーボードの操作で文章の入力・削除・編集などが可能です。簡単編集ツール(ウィジウィグエディタ)の詳細は以下をご覧ください。

簡単編集ツール(ウィジウィグエディタ)について

簡単編集ツール(ウィジウィグエディタ) では、簡単に文字の装飾などホームページの編集ができます。
視覚的にイメージをつかみやすいため、HTMLやCSSの知識がない方でも、文字の装飾などのデザインを作成することができます。

元に戻す: 一つ前に行った動作を取り消します

やり直し: 直前に取り消した動作をもう一度行います

フォントカラー: 選択範囲の文字の色を変更します(※)

フォント背景色: 選択範囲の背景色を変更します(※)

太文字: 選択範囲の文字を太字にします

斜体: 選択範囲の文字を斜体にします

下線: 選択範囲の文字に下線を引きます

取り消し線: 選択範囲の文字に取り消し線を引きます

フォントスタイル: フォントのスタイルを設定します

フォントサイズ: フォントのサイズを設定します

左揃え: 編集箇所を左揃えにします

中央揃え: 編集箇所を中央揃えにします

右揃え: 編集箇所を右揃えにします

両端揃え: 編集箇所を均等割付します

区切り線: 選択範囲の下に区切り線を追加します

段落番号の追加: 行頭に番号のついた箇条書きを追加します

箇条書きの追加: 行頭に中黒(・)のついた箇条書きを追加します

リンク挿入/編集: 選択した文字にリンクを設定します

リンク解除: リンクを設定した文字を選択しクリックし、リンクを解除します

※2021年9月よりカラーパレットが新しくなりました。2021年9月以前のカラーパレットのカラーコードは、以下のとおりです。

2021年9月以前のカラーパレット カラーコード一覧

#ffffff #000000 #eeece1 #1f497d #4f81bd #c0504d #9bbb59 #8064a2 #4bacc6 #f79646 #ffff00
#f2f2f2 #7f7f7f #ddd9c3 #c6d9f0 #dbe5f1 #f2dcdb #ebf1dd #e5e0ec #dbeef3 #fdeada #fff2ca
#d8d8d8 #595959 #c4bd97 #8db3e2 #b8cce4 #e5b9b7 #d7e3bc #ccc1d9 #b7dde8 #fbd5b5 #ffe694
#bfbfbf #3f3f3f #938953 #548dd4 #95b3d7 #d99694 #c3d69b #b2a2c7 #b7dde8 #fac08f #f2c314
#a5a5a5 #262626 #494429 #17365d #366092 #953734 #76923c #5f497a #92cddc #e36c09 #c09100
#7f7f7f #0c0c0c #1d1b10 #0f243e #244061 #632423 #4f6128 #3f3151 #31859b #974806 #7f6000

動画でのご紹介

画像コンテンツの追加

  1. 「コンテンツを追加する」「ヘッダーコンテンツを追加する」「フッターコンテンツを追加する」の「画像」をクリックしてください。

  2. 画像追加のレイアウトが表示されます。1列~4列の中でお好みのレイアウトを選択してください。なお、ヘッダーエリアおよびフッターエリアの画像レイアウトは、1列のみとなります。

スマートフォン表示設定

レイアウト選択画面で2列以上を選択すると、スマートフォン表示設定をすることができます。

画像の変更

変更したい画像エリアをクリックすると「画像変更」「詳細設定」のメニューが表示されるので「画像変更」を選択します。


起動した画像ライブラリの中から表示したい画像を選択すると、ホームページに画像が挿入されます。

画像詳細設定について

画像エフェクト:表示している画像の縁に対するエフェクトです。

画像タイトル(title属性):ふきだしチップを表示する属性です。

代替テキスト(alt属性):画像が表示できない環境において、画像の情報をテキストや音声で伝えるための属性です。

リンクの種類:リンク設定方法の詳細はこちらから

動画でのご紹介

文章+画像

文章+画像コンテンツの追加

  1. 「コンテンツを追加する」の「文章+画像」をクリックすると、文章+画像追加のレイアウトが表示されます。
  2. 1列~4列、また左寄せ・右寄せ・中央寄せ・画像余白なしの中からお好みのレイアウトを選択してください。

スマートフォン表示設定

レイアウト選択画面でスマートフォン表示設定をすることができます。

(「1列 画像中央寄せ」を除く)

文章+画像コンテンツ編集

前述にある「文章」「画像」同様に文章の入力・削除・編集や画像の変更が可能です。

動画でのご紹介

表組み

表組みコンテンツの追加

  1. 「コンテンツを追加する」の「表組み」をクリックすると、どんな表組みを追加するかの入力画面が表示されます。

  2. 「列数行数指定」から何列・何行の表にするか各数値を入力いただき、「見出しセル(テーブルヘッダー)の設定」からお好みのパターンを選択してください。

表組み編集

  1. 編集したい表組みをクリックすると簡単編集ツール(ウィジウィグエディタ)が表示されます。

  2. そのままキーボードの操作でセル内の文章入力・削除・編集などが可能です。

※簡単編集ツール(ウィジウィグエディタ)の詳細は以下をご覧ください。

簡単編集ツール(ウィジウィグエディタ)について ~表組み~

簡単編集ツール(ウィジウィグエディタ) では、表組みのデザイン編集も設定することができます。

行・列の追加と削除: 選択しているセルの直後の行または列の追加や、選択しているセルの行または列の削除ができます

セル背景色: セルの背景色を変更します

セル幅設定: セル幅を変更します。枠線をドラッグして幅を設定できます

枠線: 「下線のみ」「格子」「枠線なし」から選択してください

※簡単編集ツールを利用して文章の編集を行う場合は、こちらをご参照ください。

動画でのご紹介

スライドショー

スライドショーコンテンツの追加

  1. 「コンテンツを追加する」の「スライドショー」をクリックすると、どんなスライドショーを追加するかの入力画面が表示されます。
  2. 「スライドショータイプ」からタイプを選択いただき、下記設定を行ってください。
- コントロールボタン(写真左右)の表示設定
- コントロールボタン(写真下)の表示設定
- シャドウの表示設定
- 自動再生設定
- 切り替えスピード設定
・「画像枚数」への数値入力(最大10枚まで)

- 画像表示エリアの比率固定(横:縦)
キャッチフレーズのアニメーション

スライドショー編集

挿入したスライドショーにカーソルを合わせると、「スライドショー変更」「詳細設定」メニューが表示されるので「スライドショー変更」をクリックします。


  1. 変更したい画像を選択した状態で、下に表示されているライブラリから変更後の画像を選択すると画像を変更することができます。
  2. また、各画像に対し、キャッチフレーズの挿入・リンクの設定・代替テキスト(alt属性)の設定をすることができます。


代替テキスト(alt属性):画像が表示できない環境において、画像の情報をテキストや音声で伝えるための属性です。

リンクの種類:リンク設定方法の詳細はこちらから

動画でのご紹介

見出し

見出しコンテンツの追加

  1. 「コンテンツを追加する」の「見出し」をクリックすると、どんな見出しを追加するかの選択画面が表示されます。

  2. 「スタイル」から大(H2)・中(H3)・小(H4)のいずれかを選択し、「カラー」からお好みのカラーを選択してください。

見出し編集

デザイン:「デザイン」に表示された一覧から、いずれかを選択します。プレビューボタンをクリックして実寸大のデザインをご確認いただきながら、お好みのものを選択してください。選択後の見出しの文章(ここに見出しを入力してください)は、直接編集することができます。

 

ID設定(任意):見出しにIDを設定することができます。
文章や画像等にリンクを設定する際、IDを設定した見出しへ直接リンクを飛ばすことができます。

※1ページ内に同じIDは設定できません。2つ以上のIDを設定する際には、それぞれ異なるものを設定してください

動画でのご紹介

動画

動画コンテンツの追加

  1. 「コンテンツを追加する」の「動画」をクリックすると、YouTube埋め込みコード入力ボックスが表示されます。

  2. YouTubeから「埋め込みコード」を生成し、この入力ボックスにコピーするとホームページにYouTubeの挿入をすることができます。

動画でのご紹介

Google Map

Google Mapコンテンツの追加

「コンテンツを追加する」の「Google Map」をクリックすると、住所の入力ボックスが表示されます。


ここにホームページに掲載したい住所を入力するとホームページにGoogle Mapの挿入をすることができます。

所在地が指定できない場合 

全世界表示になる、町域までしか焦点があわない等、所在地が指定できない場合は、以下をおためしください。

  1. ビル・施設名や会社名のみ入力をしている場合は、都道府県から番地までの正式な住所にかえる
  2. ビル・施設名や会社名まで入力している場合は削除し、都道府県から番地までの住所にかえる
  3. 郵便番号から入力している場合は削除し、都道府県から番地までの住所にかえる

上記の方法でも所在地が指定できない場合は、区画整理や住居表示変更などの影響により、現在の住所データがGoogleの地図データベースに登録されていない可能性があります。期間をあけて再実施をおためしください。

またGoogle社へエラー報告を送信することで、改善が早まる可能性があります
▽Google マップのデータまたはコンテンツのエラーを報告する
https://support.google.com/maps/answer/3094088?hl=ja

動画でのご紹介

SNS

SNSコンテンツの追加

  1. 「コンテンツを追加する」の「SNS」をクリックすると、Facebook Like BoxまたはTwitter Widgetsのコード入力ボックスが表示されます。
  2. ここにFacebookまたはTwitterから生成したコードをコピーするとホームページにSNSコンテンツの挿入をすることができます。

※Twitter社によるMicrosoft Internet Explorerのサポートは終了されています。
そのためInternet Explorerでは「Twitter Widgets」が正しく表示されません。

Twitter社がサポートしているブラウザの確認は、こちらをクリックしてください。

Facebookの埋め込み

1.Facebookの「開発者ツール - Facebook for Developers」の「ページプラグイン」のページにアクセスします。

2.「FacebookページのURL」に事務所のFacebookページのURLを入力します。

3.Facebookページのタイムラインが表示されます。
タイムラインの下にある「コードを取得」ボタンをクリックします。

4.コード取得メッセージが表示されます。
「ステップ2: ページ上でプラグインを表示する場所にこのコードを配置します。」のコードをコピーします。

5.毎月更新サービスの管理画面で「自分で編集する」ボタンをクリックします。

6.見たまま編集画面が表示されます。
左のメニュー下にFacebookのタイムラインを埋め込みます。
左のメニューの一番下にある「コンテンツを追加する」ボタンをクリックします。

7.「SNS」ボタンをクリックします。
「Facebook Page Pluginコード」入力欄に、コピーしたコードをペーストします。

8.「OK」ボタンをクリックします。

9.Facebookページが表示されます。

Twitterの埋め込み

1.https://publish.twitter.com/#にアクセスします。

2.「Enter a Twitter URL」に事務所のTwitterのURLを入力して「→」ボタンをクリックします。

3.「Embedded Timeline」をクリックします。

4.Twitterのタイムラインが表示されます。
テキストリンク「set customization options.」をクリックします。

5.オプション画面が表示されます。
高さを指定します(目安は500px程度です)。

6.言語のプルダウンで「Japanese」を選択します。

7.右下の「Update」ボタンをクリックします。

8.埋め込みコードをコピーします。
「Copy Code」ボタンをクリックします。

9.コピー完了のメッセージが表示されます。

10.毎月更新サービスの管理画面で「自分で編集する」ボタンをクリックします。

11.見たまま編集画面が表示されます。
左のメニュー下にTwitterのタイムラインを埋め込みます。
左のメニューの一番下にある「コンテンツを追加する」ボタンをクリックします。

12.「SNS」ボタンをクリックします。

13.「Twitter Widgets」をクリックします。
「Twitter Widgetsコード」入力欄に、コピーしたコードをペーストします。

14.「OK」ボタンをクリックします。

15.Twitterのタイムラインが表示されます。

フォトギャラリー

フォトギャラリーコンテンツの追加

  1. 「コンテンツを追加する」の「フォトギャラリー」をクリックすると、どんなフォトギャラリーを追加するかの選択画面が表示されます。

  2. 「フォトギャラリータイプ」からタイプを選択いただき、写真を並べる列数(列数選択が存在しないタイプもあります)および、日付・タイトルの表示有無を選択してください。

スマートフォン表示設定

レイアウト選択画面でスマートフォン表示設定をすることができます。

(「タイプC」を除く)

フォトギャラリー編集

挿入したフォトギャラリーにカーソルを合わせると、「フォトギャラリー変更」「詳細設定」メニューが表示されるので「フォトギャラリー変更」をクリックします。


  1. 下に表示されているライブラリから画像を選択すると画像を追加することができます。

  2. 空白画像を選択した状態で、ライブラリから画像を選択しても画像の追加が可能です。

また、追加された画像を選択すると、日付やタイトル・説明文を設定をすることもできます(コンテンツ追加時や詳細設定で日付・タイトルを表示するを選んだ場合のみ表示されます)。なお、画像の選択可能数は300枚までとなります。

動画でのご紹介

スライダー

スライダーコンテンツの追加

  1. 「コンテンツを追加する」の「スライダー」をクリックすると、どんなスライダーを追加するかの選択画面が表示されます。

  2. 「スライダータイプ」からタイプを選択いただき、コンロールボタンの表示および自動再生の有無、また自動再生をonにした場合はスピードを選択してください。

スライダー編集

挿入したスライダーにカーソルを合わせると、「スライダー編集」「デザイン設定」メニューが表示されるので「スライダー編集」をクリックします。


  1. 変更したい画像を選択した状態で、下に表示されているライブラリから画像を選択すると画像を変更することができます。

  2. 空白画像を選択した状態で、ライブラリから画像を選択すると画像の追加が可能です。また、追加された画像を選択すると、代替テキスト(alt属性)・リンクの設定をすることができます。

なお、画像は最大30枚まで選択可能となります。


代替テキスト(alt属性):画像が表示できない環境において、画像の情報をテキストや音声で伝えるための属性です。

リンクの種類:リンク設定方法の詳細はこちらから

動画でのご紹介

文字のせ画像

文字のせ画像の追加

「コンテンツを追加する」「フッターコンテンツを追加する」の「文字のせ画像」をクリックすると、レイアウト設定画面が表示されます。

レイアウト設定画面に表示された一覧から、お好みのものを選択してください。

文字のせ画像の編集

画像を変更する場合は「ライブラリから選択」ボタンをクリックし、表示されたライブラリから画像を選択します。


文字の各項目について任意の内容に変更できる(スマートフォン表示時は一部自動調整されます)ほか、それぞれ「表示する」「表示しない」を切り替えることができます。

キャッチフレーズ:メインとなる文字を入力します。(最大100文字まで)

キャッチフレーズ説明:キャッチフレーズを補足する説明を入力します。(最大100文字まで)

説明文:コンテンツやリンク先の説明を入力します。(最大500文字まで)

ボタン:ボタンの中に表示する文字を入力します。(最大50文字まで)また、お好きなデザインを選択することが可能です。

背景色:文字の背景色について「表示する」「表示しない」を切り替えることができます。背景色の変更は「カラーの詳細設定」から変更可能です。

テキスト・ボタンの配置:文字とボタンの位置について「中央揃え」「左揃え」「右揃え」を切り替えることができます。

カラーの詳細設定

文字・ボタン・背景色の色を変更したい場合は「カラー詳細設定」をクリックするとカラー詳細設定が表示されます。

「白」「黒」のほか、「カスタム」を選択するとカラーパレットからお好みの色を選択することが可能です。

デフォルトに戻す

「全項目をデフォルトに戻す」ボタンをクリックすると、カラーやフォントサイズなどを選択中デザインの初期設定の状態に戻すことができます。
※下記の項目は保存している内容に戻ります。

  • 背景画像
  • キャッチフレーズ・キャッチフレーズ説明・説明文・ボタンに入力した文字の内容

デザインの変更(レイアウト設定)

カーソルを合わせると、「レイアウト設定」「詳細設定」メニューが表示されます。
デザインを変更する場合は「レイアウト設定」をクリックします。
※レイアウトを変更しても下記の項目は変更前の内容が維持されます。

  • 背景画像
  • キャッチフレーズ・キャッチフレーズ説明・説明文・ボタンに入力した文字の内容
  • ボタンの種類・デザイン
  • カラー詳細設定内の各項目
  • リンク設定

動画でのご紹介

HTML

HTMLコンテンツの追加

「コンテンツを追加する」「ヘッダーコンテンツを追加する」「フッターコンテンツを追加する」の「HTML」をクリックすると、HTML入力ボックスが表示されます。

HTML編集

ここにHTMLを入力すると、入力したHTMLのコンテンツがホームページ上に掲載されます。

入力可能コード

  • html
  • css

安全性への配慮として、Script要素(JavaScript、VBScriptなど)の入力、実行は規制されております。

※ヘッダーエリアでのみ使用可能なコンテンツとなります。

ロゴコンテンツの追加

「ヘッダーコンテンツを追加する」「フッターコンテンツを追加する」の「ロゴ」をクリックすると、どんなロゴを追加するかの選択画面が表示されます。

ロゴ編集

文章表示または画像表示を選択し、ホームページ名を入力してレイアウトを選択すると、ロゴがホームページ上に掲載されます。

なお、ヘッダーエリアのロゴ掲載は1つのみ可能になります。フッターエリアについては、掲載数の制限はありません。

※フッターエリアでのみ使用可能なコンテンツとなります。

ページリンク集コンテンツの追加

  1. 「フッターコンテンツを追加する」の「ページリンク集」をクリックすると、どんなページリンク集を追加するかの選択画面が表示されます。
  2. 「カラー」からお好みのカラーを選択してください。

ページリンク集編集

  1. 「デザイン」に表示された一覧から、いずれかを選択します。
  2. プレビューボタンをクリックして実寸大のデザインをご確認いただきながら、お好みのものを選択してください。

なお、ページリンク集の掲載は1つのみ可能になります。

カレンダー

「コンテンツを追加」のコンテンツセット「カレンダー」をクリックすると、カレンダーの設定画面が表示されます。

カレンダーコンテンツ追加

カレンダー表示設定

「カレンダー表示設定」から表示月数、枠線の種類、カレンダーの説明の有無など設定したいコンテンツを選択してください。

カレンダーコンテンツ カレンダー表示設定

表示月数

表示月の数を変更できます。最大表示月は3か月です。

説明欄

カレンダー下部にテキストを表示させます。カレンダーの補足説明などにご活用ください。

枠線表示

カレンダーの枠線を設定できます。枠線の種類は「格子」「下線」「なし」の3種類です。

予定入力

「予定入力」では表示月の各日にちに予定を入力できます。

カレンダーコンテンツ 予定入力

定期予定入力

各曜日ごとに予定入力ができ、全角半角問わず5文字まで入力可能です。

日付予定入力

各日付ごとに予定入力ができ、1日ごとに予定を入力できます。全角半角問わず5文字まで入力可能です。入力内容は「日付予定入力」が優先されます。

各日付ごとに入力した予定を解除されたい場合は「日付予定クリア」ボタンを押下してください。入力内容が空白になります。「定期予定入力」で設定した曜日の内容は残ります。
表示月については前後12か月です。当月から12か月を超える月は変更できません。
「表示月変更(右矢印)」ボタンをクリックすると表示月が1か月進み、「表示月変更(左矢印)」ボタンをクリックすると表示月が1か月戻ります。

(例)
表示月のはじまりが「2023年10月」の場合、さかのぼれる表示月は 2022年10月 ~ 2024年10月 です。