htmlコーディングの続きと、WordPressテンプレートの制作

作業報告

37デザインのブログをご覧くださいましてありがとうございます。

本日は昨日の続きのhtmlコーディングと、WordPressテンプレートの制作を行いました。

CSSが効かないとかなかなか苦労しましたが、コーディングは完了。

WordPressテンプレートもほぼ完了しているので、明日細かいところを終わらせて納品です。

HTMLコーディング

昨日Photoshopでスライスしたものを引き続きコーディングしていきました。

ウェブサイトのコーディングを行いました

他社様でデザインをおこなっていた物を弊社でコーディングしたのですがやっぱりデザインを再現していくと結構時間がかかるものですね。

しかしながら、やっぱりデザインがいい!!

素晴らしいデザインです。

女子力高めのデザインはまたうちとは全然違ったデザインなので、見せていただいてとても刺激を受けます。

37デザインではまずはコンテンツ!!というふうにビジネスに割り切ってますから、このようなデザインを頂いたら本当にテンションが上がります。

素直に勉強になりました。

うちで可愛い系のデザインがきたら、デザインはこちらでお願いしようと思います。

今後共どうぞよろしくお願いいたします。

 

コーディング自体はすんなり行ったのですが、テーマとの相性問題で、CSSが効かない部分がありました。

強制的にCSSを聞かせる「!important」という命令を付加したんですが、なぜか効かない。

そんなことってあるの??と思いながら色々調べましたが、決定的な解決策に至らず。

テーマに色を決める機能があるんですが、それが悪さをしているんじゃないかと思い、テンプレートも色々と調べましたが、どうしても

時間が取られることが嫌だったのでそのまま進めました。

 

その後、ページがほぼ完成というところで、やぶれかぶれで先述の部分に、CSSセレクタを全部指定してCSSを指定するとあっさりとCSSが適用されるという。

うーん、そんなこともあるんかいと思いながらも、勉強になったなと。

やっぱりまだまだ知らないこともたくさんありますね。

WordPressテンプレートの制作

そして、そのコーディングしたページなのですが、単なる固定ページではデザイン的に不可能な部分がありましたので、個別でWordPressテンプレートを入れて対応しました。

もともとあったランディングページ用のテンプレートを流用して、ヘッダー部分に100%幅の画像を入れました。

ヒーローイメージとかジャンボトロンとか言い方はあるみたいですが、ページ幅に対応した100%幅の大きな画像はまだまだ流行りそうです。

ただ、画像の読み込みで若干時間が書かているみたいなので、圧縮した画像に差し替えるとか、少し対策を考えないとダメかもしれませんね。

 

そしてまた、頂いたデザインの中にはニュースが入っているという。

新しい記事の中から3つだけニュースカテゴリのものを表示させる、と言う素晴らしい仕様です。

ニュース部分が入っているとは知らなかったので、こちらの部分を新しく全部新規で作りました。

基本的に固定ページの中に入れたいので、functions.phpにショートコードを使えるように記述し、その部分だけのテンプレートを制作。

newspost.phpとか名前つけて、その中にサブループ作って記事が出力されるようにして完了です。

最初やったときは失敗して案の定真っ白画面が出ましたが、一つづつ調整しながら確認していきました。

タイトルなども出力されて、完璧に動いています。

サムネイルなどがなかったり、パーマリンクが出力されていなかったんですが、こちらも修正して、サムネイルやタイトルなどから各々の記事へ飛ぶように修正。

こんな感じに綺麗に出力されるようになりました。

ショートコードが便利なので、もうちょっと突っ込んだ使い方ができるようにしていきたいですね。

あとはクライアント様に確認していただき、細かいところを修正しながら納品です!

これはいい出来になったのでクライアント様の喜ぶ顔が見れると思うと、とても楽しみです!!

投稿者プロフィール

古田 健
古田 健
WordPressを使ったホームページの構築を得意としており、その中でも企業が勝ち残るため、強みを徹底的に研ぎすませた、一点突破型ランディングページを提案している。
ECサイトからスタートアップのサイトまで幅広く手がけ、、サイトの改善をおこなうことで、売上をあげる実践的なWebマーケティングを行っている。