HOME > ホームページ制作 > ホームページ制作 補助金関係 イタリアンホームページ完成(飲食事業者向け経営基盤強化支援事業) 2022/07/14 2024/04/16 1 制作の経緯 先輩診断士の先生にご紹介いただいた「一汁三菜イタリア~の」 様(中央区八丁堀)からの再度ご依頼をいただくことができました。旧サイト制作から、5年ほどがたち、そろそろ独自ドメインをとって、ホームページをリニューアルをされたいとのご要望で、有難いことにでした。資金源は、飲食事業者向け経営基盤強化支援事業を実施したので、その助成金も充当されるとのことでした。 2 以前のサイトからの変更点 「このようなサイトに似せて救って欲しい」 というご要望をいただき、そのサイトのソースコード(html,css,Jquery)を分析し、似せられるようにしました。具体的には①サイト全体のメニュー②各ページのレイアウト構造③各ページで使われているJqueryのアニメーションのソースコードを分析し、カスタマイズする形で作り直させていただきました。 3 技術的レベルアップ (1)既存のstyle.cssとのclassやIdの重複を避ける 管理画面(ダッシュボード)における機能が充実している(ブログ機能等)既存のWordPressテーマ(stinger+)を使いたかったので、元々あるCSS等と重複しないように設定するのに苦労しました。具体的には、stinger+のテーマで使われているデフォルトのCSSとclass名やidが重複 すると、デフォルトのレイアウトが指定されてしまい、崩れた全レイアウトとなるので、それを避けるのに苦労しました。行った対策は、class名を一部変えるか、既存のテーマにあるstyle.cssにあるclassを表示させないように消すなどの作業を行いました。今後はSCSS( CSSの親戚みたいなプログラム言語)を使って各classやidが特定できるよう、全てに親要素をつけて、実施していければ、うまくいくというようでした。 (2)お問い合わせ機能はWordPressプレス特有のショートコードを使う お問い合わせ機能はWordPressでは、Contact Form 7を使っていますが、レイアウト設定を変えて使う場合には、併せてショートコード[ ] を使っていかないと機能しないので、その点について苦労しました。 (3)Jqueryを動かすための精緻な取り組み Jqueryを動かす為には ・header.php、footer.php、style.css,jqueryフォルダー、固定ページ(html)などへソースコードと記述が必要 です。その際に、JqueryのCDN(Contents Delivery Network)、CSSのCDN(Contents Delivery Network)、追加CSSの記載などが必要です。この設定がとても難しいです。具体的には、どの順番でそどの場所にコードを記載すれば良いのか?(Jqueryの前に個別のJqueryを書いても動きません。)又、そのディレクトリーをしっかりと階層を指定して、動くようにheader.phpに記載するすること。さらに、発火点となる条件を指定したclassやid をしっかりと、html内、Jquery内、css内でしっかり連携させることなどが精緻で、難しかったですです。※ Jquery必要なもの 4 全ページ紹介 (1)トップページ トップページ (2)一汁三菜イタリア~のとは 一汁三菜イタリア~のとは? 八丁堀イタリアン (3)ランチコース イタリア~の ランチコース 八丁堀 (4)ディナーコース イタリア~の ディナーメニュー (5)テイクアウト イタリア~の テイクアウト (6)店内の様子 一汁三菜イタリア~の 店内 以前 5 まとめ今回は、複数のJqueryを使った面白みのあるサイトにできたのではないかと思います。ブログやSNSとの連携もしっかり使っていただき、有効にご活用いただけるよう、サポートをしていきたいと思います。 -ホームページ制作, 補助金関係 Twitter Facebook LINE