WEBデザインの学習 | ナイアルラトホテップ

このブログは池袋にあるフェリカテクニカルアカデミーで学んだ学習過程を記録するためのものです。HTML+CSS及びJavaScript、jQueryなど。

企業サイト制作【完成】

後から追記予定。

知人のソフビフィギュア会社の一ブランドのサイトを制作した。

仕様:モバイル対応(レスポンシブ) IE9以上より対応

構想:約1週間
画像加工:約1日
コーディング:1週間

wordpressでのテーマ制作は初めてでもろもろの仕様について理解していなかったため、時間がかかった。実際にコードを打った時間よりはほぼ調べていた時間である。
一からwordpressでサイトを作るのは難しかったため、Bonesというカスタマイズ前提のスターターテーマを使用した。


bonesの落とし穴(修正点)
・そのままではアウトラインを見たときにUntitled BODYになるのとsectionの後に見出しが入らないためUntitled SECTIONになってしまう。
・管理ページより入力するサイトのタイトルとキャッチコピーがタイトルの後ろにキャッチコピーがくっついて表示される。タイトルはタイトルのみでmeta descriptionが空なのでキャッチコピーを入れるようにした。
wp-titleがfunction.phpでフックされており、その内容がテーマ固有のbones.php

■苦労した点
index.phpはあくまでブログ画面のインデックスでトップページをサイト風の好きな見た目にするには固定ページのテンプレートを追加して実装する。

テンプレートはデフォルト以外に3つ制作した。

  • トップページ
  • 作品紹介のトップ画面
  • 作品紹介の作品の個別ページ

固定ページのデフォルトは古紙風の背景画像を表示するようにした。
トップページはヘッダー画像とその下に投稿記事とサイドバーを表示した。
作品紹介のトップはモンスターを画面の横幅いっぱいに可変するように表示した。課題としてポジションで上に載せているサイドバー部分の見た目の問題が残る。
作品の個別ページは黒く透過するようにし作品をよりすっきり見せるように心がけた。

カスタマイズ元テーマ:Bones
参考書籍:「基礎からのWordPress 改訂版」高橋のり著
     「WordPressレッスンブック HTML5&CSS準拠」エビスコム著

パンくずリスト作成については基礎からのWordPressを参考にした。