まず、一番上の所にAjaxを使ってコンテンツスライダーを作ります。
↓この記事を参考
コンテンツスライダーとツールチップナビゲーションを実装するチュートリアル
チュートリアルが英語なんでよくわかりません。
英語は読めるくらいにならないとダメだな…と反省。
で、しょうがないのでDEMOをまるまるコピペしてCSSとか微調整します。
感覚です。
ちゃんと説明できるようになったら別記事であげます。
すいません。
そして、その下の部分は前回のままだと柔軟性にかけるというか300×250で決め打ちしちゃってたので横幅はそのままで立て幅は自由に出来るように調整。
ここで「あれ？このデザインって別に背景画像作る必要なくね？」って今更気づく。
で、出来たのがこんな感じ。
windowsで見ると結構青いんだよね。
PCの設定の問題かな？
一応、黄色っぽいグレーをベースにロゴとかタイトルとかは濃いネイビーっぽくしてあります。
上記リンクを基にグローバルナビツールチップも付けてみました。
ちょいちょい直したいところがあるのでその時その時でエントリーした方が良さそうな気がしてきました。
…と、言う事で次回細かいところを修正してTipsとしては終了としたいと思います。
読者のみなさん、記事にリンクを頂いたみなさんありがとうございました。
これからも小ネタを書きつつ次のシリーズを書き貯めておきます。