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

  1. TOP
  2. みんビズ制作講座 デザインカスタマイズ : 第2回 背景を変更してみよう

エキスパートコラム

みんビズ制作講座:デザインカスタマイズ(全10回)

第2回:背景を変更してみよう

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

2012年11月7日更新

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

閲覧数4,216views

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

デザインの方向性を決めた後は、サイトへ反映させていきましょう。「デザインカスタマイズ」の第2回目は「背景を変更してみよう」です。

背景の変更が可能なテンプレートへ変更

みんビズにあらかじめ用意されているテンプレートには、背景の変更が可能なタイプと不可能なタイプがあります。(既に設定しているテンプレートが、背景変更可能なタイプであれば、そのまま次項「背景一つで、これだけ雰囲気が変わります」へ進んでください)

※テンプレートの変更については、「テンプレートを使って簡単スタート 第3回:背景や文字の設定をしてみよう」を参照

ここでは、「スペシャルレイアウト」の「S4096」を選択しています。

「フォントの編集」「ヘッダーの高さを変更」「背景を変更」「レイアウト調整」「色の調整」が変更可能になっている、自由度の高いレイアウトです。

背景一つで、これだけ雰囲気が変わります

背景の変更を行う前に、どのようなテイストの背景を設定するかを検討しましょう。背景一つで、これだけ雰囲気が変わります。

カジュアルな雰囲気

クールな雰囲気

エコロジーな雰囲気

ポップな雰囲気

ナチュラルな雰囲気

元気な雰囲気

【NG例】

スナップ写真をタイル状に配置した背景を見かけることがありますが、写真のクオリティが高くない場合、逆に印象が悪くなってしまうため、あまりおすすめできません。
背景に写真を使う場合には、「クオリティの高いもの」「繰り返さずに使える大きさのもの」を使用するようにしましょう。

【背景を選ぶコツ】

背景を変更しよう

使用する背景が決まったら、サイトへ設定してみましょう。

  1. 右側のツールバーで「スタイル」をクリックします。

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

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

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

  5. 「横並びと縦並び」を選択し、「保存」をクリックします。

  6. 「この背景を適用しますか?」と表示されますので「はい」をクリックします。

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

ナビゲーションのカラーも変更してみよう

「スペシャルレイアウト」の「S4096」では、ナビゲーションのカラーも調整することができます。雰囲気に合うカラーに変更してみましょう。

  1. 「スタイル」の画面で「色彩テンプレート」を選択します。

  2. 「色彩テンプレート」が表示されます。全体の雰囲気に合うカラーを選びましょう。

  3. 「新しい色を適用しますか?」と表示されますので「はい」をクリックしてください。

  4. ナビゲーションカラーの変更が完了しました。

全体的にナチュラルな雰囲気になったのではないでしょうか。

次回、第3回目「訴求力の高い画像の選び方」では、訪問者の印象に残る写真の選び方を解説します。

  • このエントリーをはてなブックマークに追加
このコラムを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つのステップで「読まれる→伝わる」文章が書ける!

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

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

コラム週間アクセスランキング[期間:2017/6/18~2017/6/24]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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