アバウト部分を作る
メインイメージの次にアバウト部分を作成します。アバウト部分は文字と画像、背景色だけのシンプルな構成にしました。
作成するアバウト部分
HTMLとlessの詳しいソースコードの解説はしませんが、section要素にはスタイル定義用のclass名だけではなく、アンカーポイントとしてID名をつけておきます。あとは、前述の「.container」を設定した文章を入れればHTML部分はOKです。上部のナビからアクセスができるようにするためです。
背景画像は右下に沿うように指定しておきます。画像のURLはlessファイルではなくCSSファイルのパスを基準に指定しましょう。
HTMLソースコードは「<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->」の直前に、lessのソースコードは最後に追加します。
■追加するHTMLソースコード（index.htmlの一部）
<section id="about" class="about">
<div class="container">
<p>プロボノパプリカは自分のできることを表明して、ボランティア団体とマッチングできるサービスです。<br>とはいってもまだ開発途中なので、表明した人たちを一覧するだけ。<br>ボランティア団体の方がこのページを見て、声をかけてくれるのを待つというだけのものです。</p>
</div>
</section>
■追加するlessソースコード（theme.lessの一部）
.about{
min-height: 800px;
background: #FF796B url('../images/browser.png') no-repeat bottom right;
@media screen and (min-width: @screen-sm-min) {
min-height: 600px;
}
.container{
padding: 30px;
p{
padding: 20px;
font-size: @font-size-base + 4;
color: #FFFFFF;
}
}
}
index.htmlとtheme.lessへの追記が終わったら、theme.lessをコンパイルして、ブラウザーをリロードすると図のように表示されます。
アバウト部分が追加されたサイト
