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

  1. TOP
  2. みんビズ制作講座 テンプレートを使って簡単スタート : 第2回 ヘッダー画像やタイトルを変更してみよう

エキスパートコラム

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

第2回:ヘッダー画像やタイトルを変更してみよう

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

2012年7月25日更新

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

閲覧数12,883views

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

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

作業を始める前に、各名称を覚えておきましょう。

ヘッダー画像の変更は、あらかじめJimdo側で用意してある画像を使用する方法と、オリジナルの画像をアップロードして使用する方法があります。ここでは、両方の解説をします。

[1-1] あらかじめ用意された画像を使用する

  1. ログインしたら、ヘッダー部分にマウスカーソルを合わせます。

  2. 「ヘッダーを編集」ボタンが表示されますので、クリックします。

  3. あらかじめ登録されているヘッダー用画像の一覧(フォトギャラリー)が表示されますので、好みの画像を選んでクリックします。

  4. 「閉じる」をクリックすると完了します。

[1-2] オリジナルの画像をアップロードする

  1. ログインしたら、ヘッダー部分にマウスカーソルを合わせます。

  2. 「ヘッダーを編集」ボタンが表示されますので、クリックします。

  3. 「オリジナル画像」のタブをクリック。

  4. 「ファイルを選択」でアップロードしたい画像を選択。

ヒント:

  • ヘッダーに設定する画像サイズは「オリジナル画像」設定画面の右側で確認することができます。みんビズにアップロードした際、自動的に拡大・縮小されますが、「現在の設定」にあらかじめ横幅を合わせた写真(もしくは少し大きめ)を用意しておくと、画像の劣化が少なくなります。
  • アップロードできるファイルの形式は、gif,jpg,png,bmpです。

「現在の設定」で幅や高さを確認できます。

もとの大きさが異なる2枚の画像をアップロードし、比較しました。

[2-1] ヘッダー画像の高さや位置などを調整する

  1. 「ヘッダー画像の高さを変更」タブをクリックすると、編集する画面が表示されます。

  2. 各機能の説明は下図の通りです。

1ヘッダーの高さ ヘッダー画像の高さを調整します。
2ズームヘッダー画像 設定した画像をズーム(拡大)することができます。
3画像を移動 ヘッダー画像の左右・上下の位置を調整します。

スライダーを動かして調整したら、「変更内容を保存」ボタンをクリックして完了です。

[2-2] タイトル文字を設定する

  1. 「タイトル」タブをクリックすると、タイトル文字を設定できる画面が表示されます。

  2. 各機能の説明は下図の通りです。

1フォントの種類 フォントの種類を変更します。
1装飾 太字、斜体
1フォントサイズ 文字の大きさを調整します。
1タイトル文字入力エリア タイトルの文字を変更することができます。
1位置 タイトルの位置を上下、左右のスライダーで調整します。
1カラーピッカー 文字の色を変更することができます。

ヒント:
次項で説明する「オリジナルロゴのアップロード」をおこなう場合、「3フォントサイズ」を「0px」にしておきます。

[3] オリジナルのロゴ画像をアップロードする

  1. 「ロゴ」のタブをクリックします。

  2. 「ファイルを選択」でロゴ画像をアップロードします。

    ヒント:
    アップロードできるファイルの形式は、gif,jpg,png,bmpです。

  3. サイズや位置を調整します。

1ロゴサイズ ロゴの大きさを調整します。
1ロゴ位置 ロゴの位置を上下、左右のスライダーで調整します。
1フレーム ロゴの周りに罫線を設定する場合の「幅(罫線の太さ)」と「余白」を調整します。
1カラーピッカー 3で設定したフレームの色を調整することができます。(ロゴの色ではありません)

ヒント:
削除する場合は「ロゴを削除」ボタンをクリックします。

[4] ヘッダーの編集が完了しました。

サンプルサイトでは、下記のように設定しました。

  • フレーム⇒罫線の幅/1px 余白/8px
  • ロゴ位置⇒左右位置/4% 上下位置/10%
  • カラーピッカー ⇒ FFFFFF(白)

次回、第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 読も読もキャンペーン「テーマ別セレクト本」プレゼント!
  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

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

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

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ