8.2 記事投稿日の表示

投稿日を表示する

記事の上部に投稿日を記入し、日付情報であることを表す<time>で囲います。

全体は<div>で囲い、クラス名を「info」としてスタイルシートの指定をしやすくします。

・・省略・・
<div class="wrap">

<article>
<h1>新型タブレット端末ついに発売</h1>

<p><img src="./img/city.jpg"></p>

<div class="info">
<time></time>
</div>

<p>今週、Mapple社の新型タブレット端末iBoard Pro(第4世代)がついに発売となりました。秋葉原の各店舗にも並んでいる模様です。管理人も早速、朝から行列に並んできました。入荷数は限られているようでしたが苦労の甲斐あって無事入手に成功！早速レビューしていきたいと思います。</p>

・・省略・・

記事の先頭に日付が表示されます。

記事との間隔を調整する

記事と投稿日との間隔が詰まり過ぎなので、投稿日の下に余白を入れて、記事との間隔を調整します。ここでは info クラスの margin-bottom を「20px」に設定します。

/* 記事 */
article h1 { margin-top: 0;
             margin-bottom: 20px;
             font-size: 34px; }

article p { margin-top: 0;
            margin-bottom: 20px; }

article img { width: 100%;
              height: auto; }

/* 投稿日 */
.info { margin-bottom: 20px; }

/* サイドメニュー */

投稿日と記事の間の余白を調整しました。

タイトルとの間隔を調整する

同様に記事タイトルと投稿日との間隔も調整します。

記事タイトルと投稿日の間にはすでに余白が設定されています。これは<h1>の margin-bottom を「20px」に設定してあるからです。ここでは余白を小さくして、記事タイトルと投稿日の間隔を詰めたレイアウトにします。

余白を減らすには<h1>の margin-bottom の量を減らしても良いのですが、ここでは info クラスの margin-top を「-10px」に設定し、投稿日の表示位置を上に10px分ずらして調整します。

/* 記事 */
article h1 { margin-top: 0;
             margin-bottom: 20px;
             font-size: 34px; }

article p { margin-top: 0;
            margin-bottom: 20px; }

article img { width: 100%;
              height: auto; }

/* 投稿日 */
.info { margin-top: -10px;
        margin-bottom: 20px; }

/* サイドメニュー */

画像と投稿日の間の余白を調整しました。

アイコンフォントを準備する

投稿日の左には鉛筆のアイコンを付けたデザインにします。こういったアイコンは通常、画像ファイルを別途用意して表示するものですが、今回は「アイコンフォント」と呼ばれるものを使います。「アイコンフォント」を使えば、画像を用意しなくとも簡単にアイコンを表示できます！

ここでは「Font Awesome」と呼ばれるアイコンフォントを利用するために、次のように<head>～</head>の範囲内に<link>を追加します。

なおこの段階では、まだアイコンは表示されず、画面に変化はありません。

<!DOCTYPE html>
<html lang="ja">

<body>
・・省略・・

行が長いために折り返して表示される場合がありますが、実際には一行で入力します。
長い上に複雑な内容なので、コピーと貼り付けによる入力が推奨です。
課題用圧縮ファイル内にあらかじめ用意されている font-awesome-4.7.0 フォルダを使用しています。もし正式にサーバーにページを公開する際は font-awesome-4.7.0 フォルダもいっしょにアップロードすることを忘れないでください。必要なフォルダです！

アイコンを表示する

Font Awesomeでは、アイコンを表示したい位置、つまり投稿日の先頭位置に<i></i>を追加し、所定のクラス名を指定すればアイコンを表示できます。ここでは鉛筆のアイコンを表示したいので、次のように<i>に対して fa fa-pencil を指定します。

・・省略・・
<div class="wrap">

<article>
<h1>新型タブレット端末ついに発売</h1>

<p><img src="./img/city.jpg"></p>

<div class="info">
<time><i class="fa fa-pencil"></i></time>
</div>

<p>今週、Mapple社の新型タブレット端末iBoard Pro(第4世代)がついに発売となりました。秋葉原の各店舗にも並んでいる模様です。管理人も早速、朝から行列に並んできました。入荷数は限られているようでしたが苦労の甲斐あって無事入手に成功！早速レビューしていきたいと思います。</p>

・・省略・・

鉛筆のアイコンを表示できました。

鉛筆のアイコンが表示できたら、次のページに進みましょう。

参考：Font Awesomeについて

Font Awesome（フォント・オーサム）はネット上で様々なアイコンをフォントとして提供しているサイトです。いくつかのバージョンがありますが、ここではバージョン 4.7 を使用しています。

Font Awesome(4.7)
https://fontawesome.com/v4.7.0/

利用できるアイコンの種類は、以下のページで確認できます。

Font Awesome アイコン一覧
https://fontawesome.com/v4.7.0/icons/

例えば歯車のマークは「fa-cog」というクラス名なので、実際に使用する際はクラス名の前に「fa」を付けて以下のようにします。

<i class="fa fa-cog"></i> 各種設定

各種設定

Font Awesome が提供してくれるアイコンフォントを使えば、さまざまなデザインに応用ができます。

アクセス

Bluetooth

撮影禁止

Twitterでシェア

戻る

Now Loading...

詳しい使い方は「font awesome 4.7 使い方」といったキーワードで検索してみましょう。

ちなみにFont Awesomeバージョン５以降では、公式サイトでのアカウント登録が必須になったり、設定方法が変化したりして、少々使いにくくなったため、ここでは少し前のバージョンである4.7を使用しています。

その他、Font Awesome から枝分かれ（Fork）した、Fork Awesome というよく似た別のサービスもあります。こちらは使いやすいので、好んで使う人も居ます。

Font Awesomeのインストール方法について

Font Awesomeを使えるようにするには、２種類の方法があります。

Font Awesomeをその都度ダウンロードする方法（CDN）
この方法は準備が簡単です。<head>～</head>の範囲内に下のように記入するだけで Font Awesome をすぐに使えるようになります。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

事前の準備などは不要なので、すぐに Font Awesome を試すことができて便利です。しかしページを表示するたびにデータを提供しているサーバーにアクセスする必要があるので、サーバーに負担がかかったり、ページの表示が遅くなったりするデメリットがあります。

あらかじめダウンロードしたFont Awesomeを使用する方法
Font Awesome 公式サイトから必要なファイルをダウンロードし、自分のサイト内にアップロードして使用する方法です。

この方法は、事前の準備が必要ですが、サーバーに負担がかからず、ページの表示も高速で行えるメリットがあります。

今回の課題では、こちらの方法を採用しています。（作業用フォルダ内にあらかじめ用意されている font-awesome-4.7.0 フォルダに必要なファイルがすべて格納されています）

とりあえず試験的に動かしてみるような用途では、準備が簡単な前者の方法がおすすめですが、本格的なアクセスが見込まれる場合は、サーバー負担の少ない後者の方法がおすすめです。