こちらでは初期費用無料ホームページ作成サイト - FunMaker[ファンメイカー]で作成したホームページの一覧に表示する説明[抜粋]のデザイン変更方法を解説します。

HOMEにおける説明[抜粋]表示

CSSマニュアル:説明文[抜粋] - FunMaker[ファンメイカー]

一覧ページにおける説明[抜粋]表示

CSSマニュアル:説明文[抜粋] - FunMaker[ファンメイカー]

対象セレクタ

FunMakerにおいて、説明[抜粋]を指定するセレクタは、『.desc p』になります。

.desc p {
	CSSプロパティ: 値;
}

CSSプロパティ一覧

説明[抜粋]に対しては、通常通りテキスト要素に指定できる全てのCSSプロパティが利用できます。
以下に、説明[抜粋]に対して利用できる代表的なCSSプロパティとその意味、使用例を紹介します。

font-family
意 味:フォント[書体]を指定。複数指定する場合は、半角カンマで区切り指定。
使用例:『font-family: 'Osaka-等幅', 'Osaka-Mono';』
font-style
意 味:文字を斜体にする。値は、italic[斜体]/oblique[斜体]/normal[通常]の3種。
使用例:『font-style: italic;』『font-style: oblique;』
color
意 味:文字色の指定。値は、RGB、RGBAでの指定が可能。
使用例:『color: #FFA001;』(Webセーフカラー一覧
font-size
意 味:文字サイズの指定。単位はpx。FunMakerの標準文字サイズは12px。
使用例:『font-size: 18px;』
font-weight
意 味:文字の太さを指定。値は、100~900の間で指定(標準は400)。
使用例:『font-weight: 700;』
line-height
意 味:行の高さを指定。単位はpxもしくは%。マイナス指定は不可。
使用例:『line-height: 100px;』『line-height: 200%;』
letter-spacing
意 味:文字間隔を指定。単位はpx。0を指定すると標準と同じになる。
使用例:『letter-spacing: 10px;』
text-decoration
意 味:文字装飾を指定。line-through[取り消し線]/underline[下線]/overline[上線]/blink[点滅]/none[装飾なし]
使用例:『text-decoration: underline;』『text-decoration: overline;』
text-align
意 味:行揃えを指定。auto[自動]/left[左]/center[中央]/right[右]/justify[両端揃え]
使用例:『text-align: center;』『text-align: right;』
margin
意 味:要素を囲むボックス外側の余白を指定。順番は上、右、下、左。
使用例:『margin: 30px 20px 40px 30px;』(上30px、右20px、下40px、左30pxの余白)
padding
意 味:要素を囲むボックス内側の余白を指定。順番は上、右、下、左。
使用例:『padding: 30px 20px 40px 30px;』(上30px、右20px、下40px、左30pxの余白)
background
意 味:背景の色、画像、画像の繰り返し、画像の固定、画像の位置を一括して指定。
使用例:『background: #FFA001 url(https://funmaker.jp/service/icon/free/symbol/plane_001/cyanL.png) no-repeat top right fixed;』
border
意 味:要素を囲むボックスの枠線を指定。下線だけを指定する時はborder-bottom、以下同様に左border-left、上border-top、右border-right。
使用例:『border: solid 1px #FFA001;』『border-bottom: solid 1px #FFA001;』

使用例

以下、説明[抜粋]に対するCSSを利用したデザインの変更例を紹介します。

文字色と文字の大きさ変更

CSSマニュアル:説明[抜粋]使用例 - 文字色と文字の大きさ変更
.desc p {
	color: #66CC99; /* 文字の色 #66CC99 */
	font-size: 14px; /* 文字の大きさ 14px */
}

2行目で文字色を変え、3行目で文字の大きさを14pxに変更しています。

HOMEと一覧の説明[抜粋]を別のデザインにする

以下、説明[抜粋]に対して、HOMEと一覧ページの説明[抜粋]を別のデザインにする方法を解説します。

FunMakerでは、

  • HOME

に以下の別のID[目印]を振っているので、それをCSSセレクタの前につけることで、個別の指定ができます。

HOME
.main-wide

例えば以下のようにCSSを記述することで、HOMEの説明[抜粋]をオレンジ、一覧の説明[抜粋]を青と別々の表示が実現できます。

.main-wide .desc p {
	color: #FFA001;
}
.desc p {
	color: #01A0FE;
}