FunMaker[ファンメイカー]で
レイアウトの自由調整ページ を用いて最上部テキスト(SEO対策)のデザインや配置を変更するためのマニュアルページです。
CSSを扱う際の注意点やバックアップの方法は
CSSマニュアルの使い方、作業に必須となる基本情報は
CSSとはに記載しています。
作業前に必ずご確認ください。
最上部テキスト(SEO対策)とは
最上部テキスト(SEO対策)とは各ページの最上部に表示されるテキストで、 SEO対策においてページタイトル(title)に次いで効果が高い見出し(h1)となります。
デザインの面で当箇所のテキストが見えないように文字色を透明色にしたり背景色と同色にしますと、不正をしているサイトと認識される可能性がありますので、最上部のテキストは目視で読み取れるように表示しましょう。
Webサイトにおける最上部テキスト(SEO対策)
CSSの書き方
CSSコードでは「どの要素」の「何を」「どのように」表示させるか指定します。
その際に記述する「どの要素」を指し示すものをセレクタ、「何を」を指し示すものをプロパティ、「どのように」を指し示すものを「値」と呼びます。
例えばロゴの横幅を300pxに指定する場合、
と記述し、コード内の各要素は
を表しています。
CSSの基本的な書き方は
CSSとは に記載されていますので併せてご確認下さい。
「最上部テキスト(SEO対策)」に対してCSSを適用する際に使用するコード(最上部テキスト(SEO対策)のセレクタ)
最上部テキスト(SEO対策)に関連するセレクタは下記のものがあります。
- 最上部テキスト(SEO対策)
- .catchcopy h1
1) 文字の装飾
文字の書体(フォントの種類)、色、大きさ、太さ、行間、文字間などを変更したい時に使用します。
記述例
最上部テキスト(SEO対策)で文字の書体(フォントの種類)や色、大きさ、太さ、行間、文字間の各要素を指定する際のコードです。
「/*」と「*/」で囲んだ部分はCSSコードとして反映させないものを記載しており、削除しても問題なく、また、書き換えても反映内容は変わりません。
02 | font-family : 'Osaka-等幅' , 'Osaka-Mono' ; |
07 | letter-spacing : 10px ; |
コード設定前(デフォルト)
コード設定後
2) 背景の装飾
背景画像、背景色、枠線などを変更したい時に使用します。
記述例
最上部テキスト(SEO対策)で背景色や背景画像、枠線の指定をする際のコードです。
「/*」と「*/」で囲んだ部分はCSSコードとして反映させないものを記載しており、削除しても問題なく、また、書き換えても反映内容は変わりません。
02 | background-color : #FFA001 ; |
03 | background-image : url ( "https://funmaker.jp/service/icon/free/mark/star_001/cyanL.png" ); |
04 | background-repeat : no-repeat ; |
05 | background-position : right ; |
06 | border : solid 3px #ff0000 ; |
コード設定前(デフォルト)
コード設定後
3) レイアウト(表示サイズと余白)
横幅や高さといった表示サイズや余白などレイアウトを変更したい時に使用します。
記述例
大最上部テキスト(SEO対策)の表示サイズと余白を指定する際のコードです。
「/*」と「*/」で囲んだ部分はCSSコードとして反映させないものを記載しており、削除しても問題なく、また、書き換えても反映内容は変わりません。
コード設定前(デフォルト)
コード設定後(余白の解説用に最上部テキスト(SEO対策)に枠線(破線)を追加しています。)
サイトへの反映方法
上記の設定例のコードをレイアウトの自由調整にコピー&ペーストで貼り付けた上で、赤文字部分(「:」と「;」の間に設定する値)を変更してください。
設定が不要な要素は行を削除してください。
どのような変更ができるかについて、変更できるバリエーションや「:」と「;」の間に設定する値について、変更できる内容や反映した際のイメージは
背景の装飾 ・
レイアウト(表示サイズと余白) に記載していますので、変更が必要な場合はご確認ください。
最上部テキスト(SEO対策)のデザインや配置の変更についての解説は以上となります。
CSSでの設定はコードの記述をご自身の判断で行えるユーザー様向けの機能です。
ご留意ご利用にあたっては
CSSマニュアルの使い方でご案内している注意事項をご理解の上で、ご自身の判断でお使いください。
コードに関して個別のご案内が必要な場合は、お見積りの上、当社で設定を代行することになりますので、ご入用でしたら
お問い合わせフォームよりご連絡ください。