スマートフォンサイトを表示する

  1. TOP
  2. みんビズ制作講座 テンプレートを使って簡単スタート : 第3回 背景や文字の設定をしてみよう

エキスパートコラム

みんビズ制作講座:テンプレートを使って簡単スタート(全4回)

第3回:背景や文字の設定をしてみよう

執筆:志鎌 真奈美(Shikama.net代表)

2012年8月8日更新

  • このエントリーをはてなブックマークに追加

閲覧数5,280views

このコラムをPDF形式でダウンロードする

みんビズの初期テンプレートを使って簡単に、そして「ちょっと見栄えよく」自社のホームページをスタートさせるには?みんビズの登録からヘッダー・背景画像の編集まで、知ってて損はないベーシックな編集のコツを解説します。
第3回目は「背景や文字の設定をしてみよう」です。

みんビズでは、簡単に背景や文字の設定を変更することができます。 あらかじめみんビズ側に用意されている背景を利用する方法と、オリジナルの画像を設定する方法があります。ここでは両方を解説します。

[1-1] テンプレートを変更してみよう

みんビズでは、背景が変更できるテンプレートと、できないテンプレートがあります。変更ができないテンプレートの場合は、次の手順でまずはテンプレートを変更します。

  1. ログイン後、右のツールボタンから「レイアウト」を選択します。

  2. タブから「スペシャルレイアウト」をクリックします。

  3. 「レイアウト詳細」をクリックすると、背景やフォント、ヘッダーの高さ等が変更可能かどうかがわかります。ここでは「背景の変更」と「フォントの編集」ができるテンプレートを選択します。

  4. 「新しいレイアウトを適用しますか?」と表示されますので、「はい」をクリックします。

    サンプルサイトでは、スペシャルレイアウトの「S4096」番を選択しました。

ヒント:

レイアウトは「スペシャルレイアウト」の他、「レイアウト」「JIMDO PROレイアウト」が利用できます。(BUSINESS版は、別途アップグレードの手続きが必要です)

[1-2] 背景パターンを変更してみよう

  1. ログイン後、右のツールバーから「スタイル」をクリックします。

  2. 「背景パターン」をクリックします。

  3. カラーとパターンを選びます。

  4. 決定したパターンの上にマウスカーソルを動かし、クリックします。
    「この背景画像を使用」と表示されますので、更にクリックします。

  5. 「新しい背景パターンを適用しますか?」と表示されますので「はい」をクリックします。

  6. 背景パターンが変更されました。

    ※サンプルサイトでは、背景カラーを「99CCFF」に設定しています。

[1-3] 背景画像を変更してみよう

みんビズにあらかじめ用意されている画像を使って、背景を変更してみましょう。

  1. 「背景画像」のタブをクリックします。

  2. あらかじめ用意されている背景画像の一覧が表示されます。好みのものを選んでクリックすると、「新しい背景画像を適用しますか?」と表示されますので「はい」を選択します。

  3. 背景画像が変更されました。

[1-4] 背景画像を変更してみよう

みんビズでは、オリジナルの背景画像を設定することができます。あらかじめ画像ソフトなどで作成したデータをご用意しておきます。

1. 「オリジナル背景画像」のタブをクリックします。

2. 「ファイルを選択」で、あらかじめ用意しておいた背景画像を選びます。

3.「アップロード」をクリックすると、背景画像がアップロードされます。

4. 「設定」で背景画像の配列の仕方などを変更することができます。

画像の並び/設定について

1画像の並び

以下の3項目から選ぶことができます。

「並べて表示しない」

背景画像は繰り返ししません。風景のイメージなど、大きな写真を一枚で使用するときや、繰り返しをしたくないときに選択します。

「横並び」

背景画像を横方向にのみ繰り返します。

「縦並び」
背景画像を縦方向にのみ繰り返します。
2横配列 設定した画像をズーム(拡大)することができます。
3縦配列 ヘッダー画像の左右・上下の位置を調整します。
4画像の固定 画面をスクロールした際に、背景画像を固定するかどうかを選択できます。

5. 背景の設定が完了しました。

※サンプルサイトでは、画像の並びを「横並び」、横配列を「左」、縦配列を「上部」、画像の固定を「はい」に設定しています。必要に応じて、「1-2」で設定した背景パターンも変更します。(ここでは、パターンを無地、カラーを「FFFFFF」に変更しました)

[2-1] 文字の設定をしてみよう

1. ログイン後、右のツールボタンから「レイアウト」を選択します。

2. 「フォント設定」の画面が表示されますので、各設定を行います。

1プリセット 「見出し」「文章」「リンク」などがあらかじめ、style1~4のセットになっています。2以下の細かい設定を省略することが可能です。
2文章 本文のフォント、フォントサイズ、行間幅、カラーを設定することができます。
3見出し1/Heading1 「見出し1」のスタイルを設定できます。
4見出し2/Heading2 「見出し2」のスタイルを設定できます。
5見出し3/Heading3 「見出し3」のスタイルを設定できます。
6リンク 「リンク」のカラーを設定できます。
7水平線 「水平線」(区切り用の線)のスタイルを設定できます。

カラーピッカーについて

カラーピッカーを使って、フォントの微妙な色合いを調整することもできます。

3. 設定が終わったら「保存」をクリック。「フォントの変更を適用しますか?」と表示されますので、「はい」をクリックします。

4. フォントの設定が完了しました。

※サンプルサイトでは、「プリセット」で「style3」を選択しました。

次回、第4回「まずはココを編集してみよう」では、会社概要や簡単なテキストの入れ替えなどを解説します。

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

志鎌 真奈美(しかま・まなみ)

志鎌 真奈美(しかま・まなみ)

Shikama.net 代表/JimdoExpert
http://www.shikama.net/
http://www.web-supporter.jp/

北海道函館市生まれ。北海道教育大学函館校卒業。千葉県市川市在住。
1997年よりWeb制作を始める。ソフトウェア会社のWeb制作部門に5年間勤めた後、2002年4月に独立。Web制作・企画・制作、システム構築などに従事。
講師として、Webマーケティングやデザインのセミナー活動も行っている。

著書にWebデザイナーのためのJimdoスタイルブック』(共著、マイナビ)、『Web文章の「書き方」入門教室~5つのステップで「読まれる→伝わる」文章が書ける!』(技術評論社)。

Web文章の「書き方」入門教室~5つのステップで「読まれる→伝わる」文章が書ける!

  • 1年間無料

    「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/5/14~2017/5/20]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!