【あきばれホームページ】
ＯＥＭパートナー サポートサイト
運営：株式会社WEBマーケティング総合研究所
〒160-0023 東京都新宿区西新宿8-1-2-3F
休業日：土曜・日曜・祝日
E-Mail partner@akibare-hp.jp
パートナー窓口はこちら
03-5388-5985
受付時間 平日9:30~11:30、13:30~17:00
【CMS】部品の追加・編集方法
こちらのページでは、CMSの基本の操作である、部品の追加・編集方法についてご案内いたします。
初期で設置されている部品について
当社システムには、初期状態からいくつか最低限の部品が設置されています。
そのままお使いいただくことも、削除することも可能です。削除する場合は、このページの「４．部品を削除する」をご参照ください。
ホームページのエリア
クリックすると拡大します
当社のシステムで制作するホームページは、４つのエリアに分かれています。一番上をヘッダー、一番下をフッターと言い、ヘッダーとフッターに挟まれたエリアはメインエリアとサイドエリアに分かれています。
サイドエリアの左右位置・幅・有無は「デザインテーマ」によって異なります。
図は、比率１：３（サイドエリアが左にあり、幅が狭い）のテーマを選んでいる場合です。
このページでは、これらのエリアに部品を挿入する方法、挿入した部品の文字や画像を編集する方法をご案内いたします。
※「部品」とは、文章や画像を入れる、枠組です。画像や文字がレイアウトされたテンプレート風の部品や、フォームやサイドメニューなど独自の機能を持った部品を用意しています。
部品を追加する
「＋部品を追加」をクリックする
クリックすると拡大します
CMSの上パネルの左端に、「＋部品を追加」というボタン（図の赤枠部分）があります。
そちらをクリックしてください。
追加したい場所を選ぶ
クリックすると拡大します
「ここに追加」という灰色の帯（図の赤枠部分）が表示されるので、追加したい場所の帯をクリックします。
「＋部品を追加」をクリックした時に上パネルに出現する「共通部品も表示」「ヘッダー・サイド・フッターエリアにも追加」といったボタンをクリックすると、共通部品やヘッダー・サイド・フッターエリアに部品を追加するための帯が出現します。
部品を選択する
クリックすると拡大します
部品選択画面が表示されるので、部品を選択します。
部品は「よく使われる部品」「コンテンツで選ぶ」「おもな要素で選ぶ」といった種類別に分かれています。
「コンテンツで選ぶ」部品には、特徴・フォームといった使う意図がはっきりした部品が、「おもな要素で選ぶ」部品には、画像・箇条書きといった、構成する要素で分けられた部品が入っています。
追加する部品を決定する
クリックすると拡大します
プレビュー画面を確認し、問題なければ［決定］ボタンをクリック。すると、ページに部品が挿入されます。
プレビュー画面の右上には、「隠れている要素を表示」というチェックボックスがあります。オンにすると、初期状態では隠れている要素を確認することができます。
部品の要素を編集する
クリックすると拡大します
「部品設定モード」を開く
カーソルを要素を編集したい部品にかざし、「部品」と表示される（図の赤枠部分）場所でクリックします。
すると、部品設定モードが開かれ、部品の設定や、デザイン変更が行える右パネルが出現します。
クリックすると拡大します
要素グループを選択する
右パネルの中程に、「表示させる要素の選択」という部分があります。要素は、「▶上部の要素」や「▶基本の要素」「▶繰り返し要素」「▶下部の要素」などのグループに分かれています。グループ名、種類は部品により異なります。
要素を選択したいグループ名が書かれたボタン（図の赤枠部分）の上でクリックすると、そのグループに含まれる要素が展開されます。
「表示させる要素の選択」の上に「要素を繰り返す回数」という表示があり、繰り返す回数を選ぶことができる部品があります。この「要素」とは、「基本の要素」や「繰り返し要素」といったグループに含まれる要素のことを差します。「上部の要素」や「下部の要素」は繰り返されません。
クリックすると拡大します
表示させる要素を選択する
要素グループのボタンをクリックすると、そのグループに含まれる要素が展開されます。（図の赤枠部分）
表示させたい要素名の左側にあるチェックボックスをクリックすると「✔」が入り、その要素が表示されます。
部品追加時にプレビュー画面の右上に表示される、「隠れている要素を表示」チェックボックスをオンにしたときに表示されるのは、要素のチェックボックスにすべて「✔」が入ったときの状態です。
文字を編集する
クリックすると拡大します
文字編集モードを開く
カーソルを編集したい文章にかざし、「要素」と表示される（図の赤枠部分）場所でクリックします。
クリックすると拡大します
文章を編集する
枠内の文章を編集してください。編集ツール（図の赤枠部分）を使うと、太字にする・下線を付ける・文字色を変更するなどの操作を行えます。
クリックすると拡大します
（行った編集を反映させたいページの［更新］ボタンを押下する）
変更をインターネット上に反映する
編集が完了したら、別の要素や部品の上でクリックし、編集対象要素の文章編集モードを閉じてください。すると、自動で保存されます。保存ボタンはありません。
編集をインターネット上に反映するには、左パネルのページ一覧にある緑色の［更新］ボタン（図の赤枠部分）をクリックしてください。
文章編集の注意点
更新画面では右クリックによるコピーが動作しません。下記ショートカットキーをご使用ください。
- コピー Ctrl＋C：コントロールキー（Ctrl）を押しながら「C」を押す
- 貼り付け Ctrl＋V：コントロールキー（Ctrl）を押しながら「V」を押す
- 切り取り Ctrl＋X：コントロールキー（Ctrl）を押しながら「X」を押す
ここからの工程は、
- 素材画像を使う場合
- ご自身でお持ちの画像を使う場合
で異なります。
素材画像を使う場合
クリックすると拡大します
「素材画像」画面を
開く
画像設定画面の上部「素材画像」ボタンをクリックしてください。すると、素材画像の一覧が表示されます。
「ビジネス」「家族」など素材のカテゴリを選択することも可能です。
クリックすると拡大します
画像を決定する
画像を選択して、［決定］ボタンをクリックします。
ご自身でお持ちの画像を使う場合
クリックすると拡大します
「追加した画像」画面を開く
画像設定画面で「追加した画像」画面を開きます（図の赤枠部分が暗い色になっている状態です）
クリックすると拡大します
使用する画像をCMSにアップロードする
追加したい画像をクリックしたまま下の枠内にドラッグ、または「選択して追加」をクリックし、画像を選択して「開く」をクリックします。
クリックすると拡大します
画像を決定する
アップロードされた画像が「追加した画像」画面に表示されます。使用したい画像をクリックし、［決定］ボタンをクリックすると画像が挿入されます。
一度設定した画像を別の画像に変更するには？
クリックすると拡大します
変更したい画像（図の左側の赤枠部分）の上でクリックします。続いて、出現した右パネルの「画像変更」（図の右側の赤枠部分）をクリックし、画像設定画面を開きます。
その後は、サンプル画像を変更する際の工程と同様です。
Edition Green
Edition Green
Edition Red
「販促・制作支援サイト」もご活用ください
「販促支援サイト」「制作支援サイト」では、弊社が今まで培ってきた経験やノウハウに基づいて、ホームページの販促・制作をご支援するための情報を提供しています。
ぜひご一読いただき、パートナー業務にお役立てください。
