今すぐコースを受講しましょう
今すぐ登録して、24,700件以上登録されている、業界エキスパート指導のコースを受講しましょう。
共通部分を編集する
このレッスンではテンプレートのメタ情報や レイアウトなどを調整していきます。 では begin のフォルダーを Sublime Text で開きましょう。 開きましたら company フォルダーの中にある index.html を ダブルクリックで開きます。 そしてこのメタ情報が現在は トップページの情報と 全く同一になっています。 同一だとソーシャルネットワークサービスや 検索エンジンに渡す情報としては 正しい情報が伝わらなくなってしまうので 企業情報のページだよ、ということが 分かるように メタ情報を直していきたいと思います。 例えばまず title タグ、非常に重要です。 ここを会社概要のページです、と 分からせる為に 「会社概要」と入力をしておきましょう。 半角スペース パイプ 半角スペースとして そして企業情報の中のコンテンツなので 「企業情報」と入力して またパイプで区切っておきます。 そして他にも description などにも これはサイトによって見せたい情報があれば キーワードを入れていっても良いと思いますが 今回はシンプルに「企業情報、 会社概要のページです。」と いったような一文を加えてみます。 他にもこちら og の description の方にも 上からコピーをして そしてこちらにペーストで 追記をしておいたり サイトネームはこのままでいいと 思います。 という風にメタ情報の方にも気を配って 適宜入れ替えを行っていきましょう。 次はタイトルの方を調整したいと思います。 このように div id content では これから会社概要の情報が 入る予定ですが ここが「企業情報です。」というエリア トップページで言うと メッセージのエリアのようなものを 予め作っておきたいと思います。 では div id ="title" という箱を作ります。 そして早めに div は閉じて そしてこのように id title の コメントアウトを作っておきましょう。 そして真ん中に寄せるためのボックス inner という箱を作りたいと思います。 div class="inner" そして開始タグを閉じて 終了タグをこちらで閉じて そして class inner がここで終わりですと いうコメントを入れておいて そしてこちらに見出しタグをもう…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。