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