ホーム > ホームページの作り方 > トップページをコーディングする(twitterで新着情報)

トップページをコーディングする(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ファイル)


次のお話

「ホームページ作成講座」に関連するオススメ記事

フリー漫画素材

無料で使える漫画素材です

ホームページの作り方

初心者向けHP作成講座

同人サークル専用HP

ホームページ作ります!

Copyright (C) 牛屋へ.com, All Rights Reserved.