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

  1. TOP
  2. はじめて相談室 : 第16回 一度レイアウトを選んだら、色は変えられないの?

エキスパートコラム

はじめて相談室

第16回:一度レイアウトを選んだら、色は変えられないの?

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

2016年8月8日更新

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

閲覧数945views

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

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

今回は、ピンク色のホームページを作りたいけど思ったような色がないという方からのご相談です。

おたより

最近はじめてWEBに登録したのですがさっそくつまずいています。
ピンク色のホームページを作りたいんですが、「レイアウト」で見てもピンク色のレイアウトがあまりありません。あってもレイアウトがちょっと合わなくて。
ピンク色のホームページをつくるためには、Jimdoを諦めるしかないんでしょうか。
Jimdoはとても簡単そうなのでJimdoで作れたらいいなと思うのですが、無理ですか?
(ももいろ鉄子さん)

ナビゲーターからの回答

ナビゲーター

ももいろ鉄子さん、おたよりありがとうございます!
ナビゲーターの立花かずみです。

ピンク色のホームページ、どんな内容なんでしょうか、気になります!
Jimdoのレイアウトは何十種類もあって、レイアウトを選ぶとそれに合った色が全体的に設定されるのですが、ももいろ鉄子さんのように「思ったような色がない」という方もいらっしゃると思います。
今回は、そんなお悩みを解決する「スタイル」という機能についてご紹介しますね。

レイアウトを決めると全体の色も決まる

Jimdoでレイアウトを一度選ぶと、レイアウトに合わせてあらかじめ決められた色が設定されます。
実は、各レイアウトのところにある「プリセット」というものを選ぶと、ある程度色のバリエーションが選べるものもあります。たとえば「Chicago」のレイアウトでプリセットをクリックすると、4色のカラーバリエーションが表示されます。

たとえばここからオレンジ色のものを選ぶと、メニューや見出しなどの文字がオレンジ系になります。これは、Jimdoがレイアウトに紐付けて決めている色です。↓こんな感じ。

このように、レイアウトと色がセットで設定されます。

大丈夫!色は「スタイル」で変えられる!

でも、「これらの色が好きじゃないからこのレイアウトはやめよう…」と諦めなくても大丈夫です。Jimdoの「スタイル」機能を使うと、結構いろいろなところの色を自分で変えられるんです。今回の「Chicago」のレイアウトもピンク色がないので、自力でピンク色のオリジナルデザインをつくってみましょう。

「スタイル」機能は管理メニューにあります。↓ここです!

クリックすると、上に設定エリアが現れます。
左に「詳細設定」がありますが、「オン」の場合と「オフ」の場合でできることが違います。

(1)「オン」の場合:細かく設定したい人向け

画面に説明が出ていますが、変更したい箇所をクリックすると、その場所についてそれぞれ設定することができます。こちらはのちほど詳しくお話します。

(2)「オフ」の場合:手間をかけたくない人向け

「オン」のときのように場所ごとに細かな設定はできませんが、ベースの色を一つだけ決めると、その色がホームページ全体のいろいろな場所で自動的に設定されます。

たとえばピンク色を設定すると、メニューや見出しの色を一度に変えることができます。
↓こんな感じ!

ただ、「オフ」の場合は選択した色によって文字が見えづらくなったりして、一部を変更したくなることもあるかもしれません。一度「オフ」で全体を設定してから、「オン」にして気になるところを個別に設定するというやり方もアリです!

コンテンツごとにスタイルを設定してみよう

次に、詳細設定「オン」のときの設定についていくつか見ていきます。

(1) 上のメニューの背景

たとえば、上のメニュー部分の背景をピンクにしたい!とします。
その場合は、詳細設定が「オン」の状態でメニューの背景部分をクリックします。すると上部に「背景色」の設定エリアが現れるので、ここで色をピンクにすると、背景をピンクにできます。

(2) 上のメニューの文字の部分

背景をピンクにしたら文字と背景が同じ色になってしまい、見えなくなってしまいました。
そこで、メニューの文字の色や、文字の周りの部分の背景色を変更します。ここで色を設定すると、メニューすべての色が同じ設定で変更されるので、一個一個設定しなくてもだいじょうぶです!

注目は「(active)」と書かれている色の設定です!「active」のところで色を設定すると、

  • そのページ自身を見ている状態のとき
    (「ホーム」のページを見ているときは「ホーム」の文字がactive)
  • メニューの中でマウスカーソルが上に乗ったとき

の色が変わります!これは結構使えるのでぜひ試してみてください。

(3) 見出し部分

次に見出し部分の色を変えてみます。「中」が設定された見出しを設定してみます。
見出しのどれかをクリックして、「フォントカラー」を変更すると、クリックをした見出しだけではなく、中見出しのすべての色が変わることがわかります。実はこれはページ内だけではなく、他のページにある中見出しもすべて書き変わります!

ここがJimdoのスタイル設定のポイントです。見出し、メニューなどの「コンテンツ単位」でスタイルを設定するので、ホームページ全体の統一感を保てるんですね。

「スタイル」機能でオリジナルなホームページをつくろう!

今回は一部だけご紹介しましたが、「スタイル」で設定できるものはまだまだたくさんあります!
また、図でもでちらっと見えていますが、設定できるのは色だけではなく、いろいろなことができます。
宝探しをするつもりでいろいろクリックして、設定を試してみてください!
すてきなホームページができますように♪

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

ナビゲーター

「はじめて相談室」では、みなさまからの「はじめて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オフィスナンバー

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