FunMaker[ファンメイカー]でレイアウトの自由調整ページを用いてロゴのデザインや配置を変更するためのマニュアルページです。

ご利用前に必ずご確認ください。

CSSを扱う際の注意点やバックアップの方法はCSSマニュアルの使い方、作業に必須となる基本情報はCSSとはに記載しています。 作業前に必ずご確認ください。
Webサイトにおけるロゴ midasi-01

「ロゴ」に対してCSSを適用する際に使用するコード(見出しのセレクタ)

ロゴ
.header-logo .logo

CSSで設定できるもの

1) 背景の装飾

背景画像、背景色、枠線などを変更したい時に使用します。
設定例
.header-logo .logo {
background-color: #FFA001; /*背景色を#FFA001(オレンジ色)に指定*/
background-image: url("https://funmaker.jp/service/icon/free/mark/star_001/cyanL.png"); /*背景画像をhttps://funmaker.jp/service/icon/free/mark/star_001/cyanL.png(星形)に指定*/
background-repeat: no-repeat; /*背景画像のリピートなし*/
background-position: right; /*背景画像の位置を右端に指定*/
border: solid 3px #ff0000; /*枠線をカラーコード#ff0000(赤色)・太さ3pxの単線に指定*/
border-radius: 15px; /*枠線の角を15pxの丸みに指定*/
}
コード設定前(デフォルト) midasi-01 コード設定後 rogo-1

2) レイアウト(表示サイズと余白)

横幅や高さといった表示サイズや余白などレイアウトを変更したい時に使用します。
設定例
.header-logo .logo {
width:300px; /*横幅を300pxに指定*/
height:150px; /*高さを150pxに指定*/
margin:30px 20px 40px 30px;/*要素を囲むボックス外側の余白を指定。順番は上、右、下、左。*/
padding:30px 20px 40px 30px;/*要素を囲むボックス内側の余白を指定。順番は上、右、下、左。*/
}
コード設定前(デフォルト) midasi-01 コード設定後 rogo-2

サイトへの反映方法

上記の設定例のコードをレイアウトの自由調整にコピー&ペーストで貼り付けた上で、赤文字部分(「:」と「;」の間に設定する値)を変更してください。設定が不要な要素は行を削除してください。 どのような変更ができるかについて、変更できるバリエーションや「:」と「;」の間に設定する値について、変更できる内容や反映した際のイメージは 背景の装飾 レイアウト(表示サイズと余白) に記載していますので、変更が必要な場合はご確認ください。
ロゴのデザインや配置の変更についての解説は以上となります。

CSSでの設定はコードの記述をご自身の判断で行えるユーザー様向けの機能です。 ご留意ご利用にあたってはCSSマニュアルの使い方でご案内している注意事項をご理解の上で、ご自身の判断でお使いください。 コードに関して個別のご案内が必要な場合は、お見積りの上、当社で設定を代行することになりますので、ご入用でしたらお問い合わせフォームよりご連絡ください。