ブログ個別ページの作成

ブログ個別ページもこれまで学習した内容を元に作成してみましょう。
ファイル名を blog_entry.htmlとしてください。

記述例

上手く出来なかった方は、記述例の記述方法を真似して作成を行ってください。
ブログページのHTMLとCSSの設定の記述例は次のようになります。
※ヘッダー・フッター・サイドバーなどの共通部分については省略しています。

blog_entry.html

<div class="blog">
    <h2 class="heading">月一恒例の町内清掃で、嬉しい言葉をかけてもらいました!</h2>
    <p class="post-info">投稿日 : 2014年8月13日 最終更新日時 : 2014年8月21日</p>
    <p>弊社では月に一度の恒例行事として、会社の敷地周辺の町内清掃を5年ほど前から行っています。</p>
    <p>町内清掃を始めるきっかけになったのは、本社が今の場所に移転する事になった際に、新しい土地の人たちとの交流もなく商売を始める事はよくないという社長の言葉がきっかけでした。</p>
    <p>当初は、すれ違う人皆さんに大きな声で挨拶をして驚かれたり引かれたり(汗)したことも多々ありましたが、最近では顔なじみのご近所さんも増えて、出勤時にすれ違う際にも挨拶をする・される関係にスタッフみんながなっております。</p>
    <p>そんな中、前回の町内清掃の時に町内会長さんから嬉しい言葉をかけてもらいました!</p>
    <p>今までは、月に一度弊社のイベントとして町内清掃を行っておりましたが、「せっかくだから、私たちも一緒になって掃除をしたいんだけどどうかな?」とお声がけくださいました。</p>
    <p>どうやら、私たちが清掃をしているのに地域の人間が何もしないのは格好が悪いと、皆さんで話し合ってくださったようで、そのようなお話をいただきました。</p>
    <p>言ってしまえば、私たちが地域の皆様と繋がるきっかけづくりとして初めた事が、地域の皆様を巻き込んでの一つのイベントになったということで、スタッフみんなでこのお声がけを嬉しく感じ、「是非とも一緒にやりましょう!」と即答をさせていただきました。</p>
</div>
<a href="blog.html" class="button">一覧に戻る</a>

style.css

/* --------------------------
 * ブログ
 * --------------------------
 */
.blog p {
    font-size: 14px;
    line-height: 1.5;
}
.blog p.post-info {
    font-size: 12px;
    color: gray;
}

これで、ブログ個別ページの完成です。
FacebookやTwitterのタイムライン、地図の埋め込み方法を知りたい方は もっと機能を追加 を見てください。

正しくブログ個別ページの作成ができなかった方は、
「ブログ個別ページ」サンプルコードをダウンロードして、「business」フォルダの内容を上書きしてから、
次のもっと機能を追加の作成に進んでください。