特長セクションの作り方

今回は上の画像にあるような特長セクションの作り方について解説していきます。

スマホの場合は縦並びに表示されます。

カスタマイザーを開く

管理画面の左側「外観」から「カスタマイズ」を開きましょう。

ここで開いた画面のことを「カスタマイザー」と言います。

カスタマイザーを開いたら一番上に「トップページのカスタマイズ」があります。

今回はここからトップセクションを編集していきます。

アイコンの下に見出しが表示されます。

本サイトでは「月額780円」と書いてある部分です。

文字数が長くなると2行になってかっこ悪くなるので、短い文字にしておきましょう。

見出しの下に説明が追加されます。

各特長の説明は同じくらいの文量で書くとバランスがいいですね。

<br>で改行できます。

見出しの上にアイコンを表示させることができます。

アイコンはFont Awesomeというサービスを使うことができます。

サイト内から表示したいアイコンのタグを取得してください。

「fas fa-crown」のようなタグを入力するとアイコンが表示できるようになります。

カスタマイザーにある「追加CSS」に下記コードを入力するとアイコンの色を赤に変えられます。

.featureicon {
 color:#ff0000;
}

それ以外の色は原色大辞典などを参考にして色コードを調べてみましょう。

「#ff0000」この部分を変えることで色を変えられます。