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

  1. TOP
  2. はじめて相談室 : 第6回 ヘッダーをかっこよくしたい!

エキスパートコラム

はじめて相談室

第6回:ヘッダーをかっこよくしたい!

執筆:#fc0(株式会社エフシーゼロ)

2015年10月13日更新

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

閲覧数2,957views

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

「はじめて相談室」では、「はじめてWEB」を使ったホームページづくりが初めての方のお悩みや不安にナビゲーターがお答えします!「こんなこと聞いていいのかな…」という方大歓迎の相談室です。

今回は、ヘッダー部分の見た目についてどのように調整したらいいのかわからない、という方のご相談です。

おたより

こんにちは、個人でネイルサロンを経営しています。はじめてWEBを使って自分でホームページを作って、一応ひととおりできました。はじめて作りましたが思ったより簡単でした!
でも、全部のページの一番上に入っているお店の名前とか写真とかのところが思いどおりになりません。お店の名前が変なところで改行されてたり、写真を入れても上のほうしか見えなかったりしています。なんとかなりませんか?

ナビゲーターからの回答

ナビゲーター

こんにちは!はじめてWEBナビゲーターの立花かずみです。
ホームページが無事できたとのこと、ひとまずおめでとうございます!内容ができたらあとは見た目の調整だけ。もう少しですね☆

ページの一番上の全ページ共通で表示される部分のことを「ヘッダー」と呼びます。今回はヘッダーの見た目調整について、操作方法をお伝えしながらお話しますね。

文字と写真それぞれに対策をしよう

さて、今回のご相談にあった「お店の名前が変なところで改行されてたり、写真を入れても上のほうしか見えなかったり」というところ、似た状態を作ってみました。こんな感じかな?

写真は爪の先しか見えてませんし、まあこれでは確かにカッコイイ!とは言えませんよね。文字と写真、それぞれに対策をしていきましょう。

文字の改行をなくすには?

まずは文字のほうから見ていきます。 お店の名前が変なところで改行されちゃうとなんともかっこ悪いですね。改善する方法として思いつくのは3つほどあります。

  1. お店の名前を短くする(重要な情報なので省略はしたくないですね…)
  2. レイアウトを変えて改行されないものにする(すでに全体を作ってしまっているので、変えるのは勇気がいりますね)
  3. 「スタイル」で調整する

1と2はあんまり現実的ではないので、ここでは3のやり方をご紹介しますね。

「スタイル」機能で、店名の見た目を変えよう

「スタイル」はとっても便利な機能なんですが、実は初期状態ではこれの「詳細設定」が「オフ」になっているんです。まずはこれを「オン」にしましょう!

編集モードのときに右側に出ている管理メニューに、「スタイル」というメニューがあります。図の場所にありますのでクリックします。

次に「詳細設定」のスイッチをクリックして「オン」に切り替えます。そうすると、ページの中のいろいろなパーツに対して個別に見た目調整ができるようになります。

そして店名の部分をクリックすると、この部分に対する設定項目がいろいろ出てきます!

ここで改行されない程度まで文字の大きさを小さくしてみます。「フォントサイズ」の数字を現状よりも少し小さいものにしながら、改行されなくなるところまで試してみましょう。

改行されなくなったところで「保存」をクリックします。
これでひとまず、改行は解決!

背景写真の配置を変えよう

次は写真です。ネイルサロンですし、もう少し爪は見せておきたいところですよね。ここでは、背景画像の配置を調整します。上のメニューから「背景」をクリックします。
※設定項目が何も出ていない場合は、管理メニューから「スタイル」を選ぶと「背景」メニューが出ます。

出てきた画面で「配置」の設定を変更します。上のほうしか見えていない状態であれば、今選択されている配置よりも下の配置をクリックすると、写真のもっと下のほうが見えます。

配置をクリックしたら「保存」ボタンをクリックします。保存ボタンを押さないと反映されないので注意です!

すると「この背景画像を適用しますか?」と質問されます。この表示があると確認がうまくできないので、とりあえず「はい」をクリックしてしまいます。

これで背景画像の配置が変わったのですが、編集画面だと見た目がちょっと違うので、必ず「プレビュー」ボタンをクリックして確認をしてくださいね。

これで、指がだいぶはっきり見えるようになりました。これでかなり見た目がよくなったと思います!

ヘッダー画像の調整は、選んだレイアウトや写真によって変わってきます。
場合によっては写真を切り取らないと無理!とか、レイアウトを変えないと無理!というものもありますが、まずはこの2つの調整をぜひ試してみてください。かっこいいヘッダーができますように♪

おたよりお待ちしています!

ナビゲーター

「はじめて相談室」では、みなさまからの「はじめてWEB」の素朴な疑問をお待ちしています!
「こんなこと聞いたら恥ずかしいかも。。。」というご質問大歓迎です!
「はじめてWEB」ナビゲーターがなんでもお答えしちゃいます!
おまちしてまーす!

ナビゲーターへの質問はこちらから!

このコラムでは、パソコン初心者の方からの
「こんなこと聞いてもいいのかしら?」という質問にお答えしています。

  • ※毎月1回程度のコラムですので、急を要する質問にはお答えできません。
  • ※すべての質問にお答えできるわけではありませんので、あらかじめご了承ください。
  • ※Jimdoの操作や、はじめてWEBに関する質問はQ&Aコーナーもご活用ください。

お名前(ペンネーム)

メールアドレス

質問

確認する

はじめてWEB

「はじめてWEB」でホームページを作成しよう!

「はじめてWEB」のホームページ開設支援サービスとは、7つのステップで簡単に無料で作成ができ、さらにその後1年間無料でご利用いただけるサービスです。

さあ、はじめよう!

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

#fc0(株式会社エフシーゼロ)

#fc0(株式会社エフシーゼロ)

JimdoExpert
http://fc0.vc/

「もっと多くの人に、"Webへの入口"を」をコンセプトに、中小企業や個人商店をメインとしたWebサイトの企画・制作・運営アドバイスなどの業務を行う。また、主に初心者を対象とした講師・執筆も多数。

主な著書に『デザインの学校 これからはじめるFireworksの本』(技術評論社)、『デザインの学校 これからはじめるDreamweaverの本』(同)、『ああしたい、こう変えたいが手にとるようにわかるCSS基礎』(共著、エムディエヌコーポレーション)など。

ああしたい、こう変えたいが手にとるようにわかるCSS基礎

  • はじめてWEB 大感謝祭!~新規加入または2年目更新をし、アンケートに答えてギフト券をもらおう!~
  • Jimdoリメイク | プロがあなたのホームページを今なら45,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

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

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

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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