こんにちは、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で自作する上で気を付けたいこと
