トップページをコーディングする(twitterで新着情報)

今回はトップページをコーディングしていきます。作業方法は、雛形と同じで、トップページに必要な画像だけまた切り抜きます。

境界線を省いて切り出し

画像の用意ができたら、先ほど作成した雛形に組み込んでいきます。雛形は各ページで必要ですので、複製してファイル名をindex.htmlに変更します。

ホームページのトップは必ず「index(インデックス=目次)」です。サーバーへアップした際は、ファイル名を省略しても表示されます。

index.htmlは省略される

これはブラウザがindex.htmlをホームページのトップページと判断し読み込んでいるためです。仮にこれをtop.htmlなどにすると、URLを省略した際に真っ白になってしまうので注意してください。

ではまず、デザインを見比べて必要のないコードを削除します。

レイアウトの確認作業

次にトップページだけに反映されるCSSを作るため、コンテンツ内に下記のようなクラス名で「div」で囲みます。



次にCSSの記述ですが、「dl」や「dt」タグはこれから何回も使用するため、他のページと命令が混ざらないように、下記のように追加します。



クラスまたはID名の後ろに半角スペースを入れて要素を指定することで、特定の「div」内だけの命令ができます。タイトル部分は、ちょっと文法的に間違っていますが、「span」で色を変えるとちょっとお洒落です。

170110_img_03

さて、ここでデザインテクニック。以前、「普通のホームページ」では新着情報は自動でされないと説明しましたが、ここにtwitterで、「新着っぽい」コンテンツを作ることができます。

ただ、個人用のつぶやきを表示させても全く意味がないので、新規にアカウントを作成し、ホームページの更新に関する情報だけつぶやいてください。上の新着と合わせてもいいのですが、タイムラインはどんどん下にいってしまいます。まだおわってないイベント情報なんかも下がってしまうので、常に表示させたい情報と分けたほうがいいでしょう。


プラグインの導入方法

アカウントのアイコンをクリック→「設定」→「ウィジェット」と進み、「ウイジェットの作成と管理」で作成したコードを「index_contens」内に記述することで、追加することができます。

twitterウィジェット導入方法

さてさて、またここでデザインテクニックなのですが、そのまま表示させるとツイッターのヘッダーやフッターが場所をとってしまい「新着」っぽくありませんので下記コードを追加して、コメントのみ表示されるようにします。




ツイッターのヘッダートフッターを削除する

トップページが完成すると、なんか「作った!」って感じがしますね!そのモチベーションを維持したまま、どんどん他のページも作っていきましょう!

>>今回作ったページ(トップページ)

>>サンプルデータをダウンロード(zipファイル)

次のお話