1

【マスタープラン ＣＭＳホームページブログ更新マニュアル】

＜株式会社コスモススタッフさま専用 ver4.1＞

このマニュアルはＣＭＳホームページをより深く使って頂くためのものです。

分かりにくい点等ありましたら support@mpl.co.jp までご連絡下さい。

----［まずはログインしてみましょう］----

１）まずはあなたのブログの更新をする【管理画面】にログインします。

※管理画面へのＵＲＬはお引渡しの際にメールにてお送りしています。

下のような画面が開けばＯＫです。

２）ログイン名とパスワードを入力してログインして下さい

※ログイン名とパスワードはお引渡し時にお送りしています。

※ここで管理ページをお気に入りに登録しておくのを忘れないで下さい。

※[ログイン情報を記憶しますか?]をチェックしておくと、次回からの入力が省略されます。

2

ここがＣＭＳホームページの管理画面です。

●［コンテンツ（ブログ記事）作成方法］

上記［ブログを書く］をクリック。

ブログ記事作成画面が開きます。

3

１）［タイトル］を入力。

書こうとしている内容を端的に示す言葉を入れて下さい。

なるべくキーワードを含んだ言葉を選ぶようにするのがポイントです。

（例 完成見学会開催→無垢杉材を使った木の家完成見学会のお知らせ）

２）［本文］を入力。

ワードやメールを書く感覚で打ち込んで

下さい。改行したところはサイト上でも同じように改行されます。

（文字の装飾やリンク等はあとで説明します。）

［続き］を入力。

この部分が＜詳しくはこちら＞以降の文章となります。

特に長い文章の場合は［本文］に文章の始めの少しだけを入れ、それ以降は全て［続き］に書

くようにすると、すっきりと見やすいサイトになります。

逆に短い文章の場合は全て［本文］に書いても構いません。

３）[カテゴリ]を選びます。

書いたブログ記事を載せたいカテゴリ名の横のチェックボックスにチェックを入れます。

４）［保存］をクリック。

これで、一通り終了です。

画像（写真）の載せかたやリンクの仕方は後ほど説明します。

4

［ブログ記事作成時のボタン説明］

ブログ記事本文にあるボタンの説明です。

：選択したテキストを小さくします。

：選択したテキストを大きくします。

：選択したテキストを太字にします。

論理強調という意味の<strong>タグで選択したテキストを強調しますので、特にキーワードに

なる部分に使って頂くと、ＳＥＯ対策になります。

：選択したテキストを斜体（イタリック）にします。

見にくくなるのであまり使わないほうがいいと思います。

：選択したテキストにアンダーラインを引きます。

これも[リンク]と勘違いされることがあるので、あまり使わないほうがいいです。

：選択したテキストに取り消し線を引きます。

：リンクボタンです。

テキスト・画像にリンクを張ります。

テキストは、リンクさせたいＵＲＬでも固有名詞でも構いません。

5

リンク先の文字列には、リンク処理させたいテキストを入力します。

リンク先のアドレスにリンクして表示させたいＵＲＬを入力します。

表示先のウィンドウは、リンク先の表示させるウィンドゥを選べます。今開いているウィンド

ゥと別のウィンドゥに表示させたい場合には別ウィンドゥをクリックします。

：リンク REL ボタンです。

自サイト内の他のブログ記事にリンクを張ることができます。

サイト内のリンクさせたいブログ記事(エントリー)を選択し、そのリンク先の表示の仕方を指

定します。

リンク先の文字列や表示先のウィンドゥに関しては[リンク]での場合と同様です。

：メールボタンです。

クリックするとメールを送るリンクを作ることが出来ます。テキストを選択してクリックする

とウィンドゥが開きますので、メールアドレスを入力して下さい。

6

補足）はじめに、メールアドレスを入力と聞かれます。メールアドレスを入力して下さい。

：引用開始ボタンです。

新聞記事やサイト記事などを引用したい時に選択して下さい。

：引用終了ボタンです。

：選択したテキストを箇条書きのリストにします。

：選択したテキストを番号付きのリストにします。

：選択したテキストを左揃えにすることができます。

：選択したテキストを中央揃えにすることができます。

：選択したテキストを右揃えにすることができます。

7

：リッチテキスト・改行を変換モードへの切替ボタンです。

簡単にモードを変換することができます。

左：リッチテキストモード

右：HTML モード（改行を変換）→上級者向けです。分からない内は使う必要はありません。

初期設定では、リッチテキストモードになっています。

フォーマットのボックスの中から選んでもモード切り替えが可能です。

入力エリアを拡大、縮小するためのバーです。これをドラッグしながら下に移動すると入力ボ

ックスが広がり、逆に上移動すると狭くなります。

8

［ブログ記事内の画像の配置方法］

ブログ記事内に好きな画像を配置することができます。初めはかなりややこしく感じますが、

下の手順どおり行って下さい。まずは通常に画像を配置する場合の方法です。

（画像の配置については後にある※注意点をご覧になった上で始めて下さい。）

１）［画像の挿入］を選択。

２）［新しい画像をアップロード］をクリックし、［参照］をクリック。ご自分のパソコンの中

からアップロードしたい画像を選びます。

選んだら、［アップロード］をクリックして下さい。

（※画像ファイル名は日本語使用不可。半角英数字のみでファイル名を付けて下さい。

日本語名のファイルをアップロードすると、サイト上では表示されない事があります。）

9

３）[参照]からパソコン内に入っている画像を選択し、[アップロード]をクリックします。

４）［名前］を入力。

ホームページで画像を表示させる場合、その画像が一体何の写真なのか？

を説明するために名前を入力してください。

10

↑名前は、画像の上にポインタを持って行った時に表示される画像の説明文です。

Google のイメージ検索等ではこの文章がキーワードになります。

画像のアップロードでは、初期設定で［ファイル名］が入るようになっています。

［cosmos.jpg］

ここを日本語の写真説明文章に変えてあげて下さい。

例：［無垢材を使った家の写真です。］

この文章も検索エンジンの対象になりますので、画像についてなるべく細かく説明して下さい。

また画像を表示しない設定で見られている方や音声ブラウザ使用の方（視覚障害のある方）は

この文字でしか情報を得ることができません。SEO 対策とユーザー対策として行って下さい。

※[説明欄]と[タグ欄]には何も入力しなくて大丈夫です。

11

４）[画像のサイズ、表示の仕方]を選択。

[サムネイルを利用]：元の画像が大きい時にチェックを入れてください。画像が小さいときは

チェックを入れる必要はありません。

サイト上で表示されるサイズをピクセルの前に入力してください。

※通常は、幅 200 ピクセルぐらいにしてください。デジカメや携帯で写真を撮るときに、画質

をＶＧＡ 640×480 に設定しておくと便利です。

[ポップアップウインドウで元の大きさの画像にリンクします]：ポップアップを作成します。

別ウインドウで画像を表示したい時にチェックを入れてください。

12

↑ポップアップ使用例。右の画像をクリックすると、

大きな左の画像が表示されます。

イベント情報や施工例など、サイト上では小さな写真で表示させておいて、クリックした時も

っと大きな画像で細かいところまで見せたい、というときに役立つのがこのサムネイルです。

※ポップアップ使用時は＜画像クリックでさらに拡大します。＞

という一言を入力しておくと親切です。

５）［位置］：画像位置を指定できます。

左側、中央、そして右側、表示させたい位置を選びます。

表示したい位置にとくに指定がない場合、HTML タグの知識があり、細かく配置を指定できる場

合は「なし」を選択します。

６）［完了］をクリック。

ファイルがアップロードされました。

同じ名前のファイルが既にある場合は［上書きしますか？］と聞かれます。

ＯＫの場合は“はい”をクリックすると新しいファイルが上書き保存されます。

13

画像をアップロードする際は、ライブドアブログ等と違い、画像のサイズを調整しておく（リ

サイズ）必要があります。

通常のデジカメで撮った写真は1600×1200ピクセルや1280×960ピクセルといったサイズにな

っています（ 近はもっと大きなものもあります）

このままアップロードしてしまうと画面からはみ出してしまい正しく表示されません。

デジカメの設定を VGA 640×480 にしておけばほとんどのモニタで表示されます。