架空カフェサイト

kanae◇Webコーダー
フリーランスWebコーダー

サイト情報

サイトURL

https://suzukana-web.com/opencafe/

※Basic認証をかけております。

　お手数をおかけしますが、下記IDとパスワードをご入力ください。

　　＊ユーザー名 : kanae

　　＊パスワード : kanae-cafe

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

制作概要

制作時間 ＊ 約131時間

制作内容 ＊ コーディング作業、WordPress構築、テスト環境へアップ

ページ数 ＊ 9ページ

サイト構成 ＊ トップページ：当店のこだわり：メニュー：お知らせ：お知らせ詳細：

　　　　　　 店舗紹介：お問い合わせ：お問い合わせ完了

使用ツール ＊ VScode、Adobe XD

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

使用スキル

HTML、Sass、JavaScript、WordPress

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

実装内容・工夫した点

CSSでの実装

・ボタンのアニメーション

・トップページ、ニュースセクションの画像のアニメーション

・ハンバーガーメニューボタンのアニメーション

・Googleマップの埋め込み

JavaScriptでの実装

こちらの架空サイトではjQueryは使っておりませんが、jQueryでの実装も可能です。

・トップページ、メインビューのスライダー実装

・ハンバーガーメニューの開閉

・トップへ戻るボタンを押した際のスムーススクロール実装

WordPressでの実装

・クリックすると該当ページへ移動するようリンク付け

・パンくずリスト

・カスタム投稿ページ

・カスタムフィールドを使って値段の変更やランチの画像の変更も可能

・最新ピックアップ記事の表示

・ページネーション

・Contact Form 7を使ったお問い合わせページ

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

トップページ（PC）外観

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

トップページ（SP）外観