無料ホームぺージjimdo ホームページ・ロゴ・チラシ

【JIMDO】ヘッダーの色をページごとに変更する方法

更新日:

 

こんにちは、WEBデザイナー兼
趣味で社会人バンドを
しているエミリです*

 

今回は、よくバンドやお店などの
ホームページを自分で作成したい場合に
利用するサービスJIMDOについて
ご相談を頂いたので紹介したいと思います。

 

相談者のMさんはネットショップを
運営されています。

 

商品紹介ページのヘッダーを
商品のイメージと合わせた色に
変更したいというご希望でした。

 

ページごとにヘッダーの色を
変更したいということだったのですが
JIMDOでは、エディター内ではそれを
簡単に編集することができない仕様に
なっています。

 

となると。。。

 

どうしても、CSS(スタイルシート)を
指定するしか方法がありません。

 

少し専門的になってしまいますが
もし、お困りの方は以下より
ご確認ください。

 

JIMDOのCSSはどこに設定すればよいの?

 

エディタ内で編集できないことがある場合
「ヘッダー編集」でcssを追記すれば、
細かいカスタマイズが可能です。

 

それでは、「ヘッダー編集」の
ページにいってみましょう。

 

「管理メニュー」⇒ 「基本設定」⇒ 「ヘッダー編集」

 

ヘッダー編集に、cssを入れ込んでいけば
カスタマイズが可能です!

 

それでは、ページごとにヘッダーを
変更するcssをメモ帳などで
先に作っておきましょう!

 

JIMDOのヘッダーをページごとに変更するためのCSS

 

私が以前、テストで作成した
ホームページで検証していきます!

 

まず、以下の画像見ていただくと・・・
「ホーム」のヘッダーは白です。

 

しかし、「ショップ」をクリックすると
ヘッダーの色が白から緑に変更されました!

 

 

このような感じで、ページごとに
ヘッダーの色を変更していきます。

 

①変更したい色をWEBカラーから決定する

 

まず、あなたの変更したい色を
WEBカラーの中から選択しておきます。

 

以下のページから選んでみてください!
(#がついてるものがCSSに
指定するコードになります。)

>>原色大辞典

 

②GooglechromeでページのIDを確認する

 

JIMDOはページごとにIDが
ついています。

 

そのIDをCSSで指定するので
調べる必要があります。

 

IDの調べ方ですが
私はブラウザGooglechrome
使用しているのでchromeで
説明していきます!

 

変更したいページをchrome開いて
右クリック「検証」を選択してください。

 

そうすると以下のような画面が
ブラウザ下部に開きます。

 

 

以下の画面から「body」から
始まるタグを見つけてください。

 

「body」の付近に「id="page-数字"」
という記載があります。

 

 

これがページのIDになります。

 

ページのIDさえ、分かれば
あとは以下のようなCSSを
作ってください!

 

③CSSを作成する

 

ヘッダー背景の色を指定する
CSSは以下になります。

 

以下をコピペしてご自身のIDと
変更したい色に変えてください!

 

<style type="text/css">
#page-3027426996 .navigation-colors {
    background: #d8f6d5;
}
</style>

 

・「#page-●●」の●●をご自身のIDに変更
・「background: #〇〇;」の〇〇を変更したいWEBカラーの番号に変更

 

以上です!

 

④作成したCSSをヘッダー編集へ貼り付ける

 

先ほども説明したように、
CSSをヘッダー編集へ設定すれば
カスタマイズができます!

 

「管理メニュー」⇒ 「基本設定」⇒ 「ヘッダー編集」

 

へ作成したCSSを貼り付けて
「保存」で完成!!

 

 

実際に変更した私のテストサイトは
以下です!

 


>>検証サイトで確認する

 

まとめ

 

いかがでしたか?

 

CSSと聞くとちょっと難しく
感じるかもしれませんが
上記をコピペしていただくと
簡単に変更できると思います*

 

このようなCSS設定について
他にもいろんなことができます。

 

いろいろカスタマイズしたいけど
上記説明では分かりにくい!や、
自分ではCSS設定は無理!という方は
私の方で代わりに設定することも可能ですので
お気軽にご相談くださいませ*

 

【あなたにおすすめの記事】

jimdoで作成したホームページの見出しの背景色を変更する方法

バンドホームページを実際にjimdoの無料テンプレで作成し検証!

ホームページをwixやjimdoで自作する上で気を付けたいこと

 

エミリへのお問い合わせはこちらから

エミリへのお問い合わせ

ホームページ作成やバンドのことでお悩みの方や、不明点などございましたら下記アドレスまでお気軽にお問合せ下さい!


<質問例>
・ホームページ作成のお悩み
(バンドのページでなくてもOKです。)

・ロゴ作成のお悩み
・チラシ作成のお悩み
・バンド人間関係のお悩み
・バンドメンバーに聞けないお悩み


等、どんな些細な事でもなんでもいいです!
あなたのちょっとしたサポートができれば幸いです。こちらのブログの感想も添えてくださると嬉しいです。とにかくどんな時も「楽しむ」ということを念頭に取り組んでいきましょう!

●以下、メールアドレス宛にご相談ください!
⇒info@bandemiri.com
●メールフォームからも受け付けてます!
⇒メールフォーム
  • この記事を書いた人

emiri

アラフォー。♀。WEBデザイナー。バンド歴15年くらい。パートはギターボーカル、シンセと渡り歩き、40歳手前でベースを始めました笑!音楽に年齢は関係ないので思い切り音楽ライフを楽しんでおります。エミリの音楽歴&影響を受けた音楽は >>詳しいプロフィールをご覧ください。

-無料ホームぺージjimdo, ホームページ・ロゴ・チラシ

Copyright© 音楽を通して人生を豊かにする方法 , 2023 All Rights Reserved.