Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8807

MAMPを使ったWordpressでのWEB制作方法② 初心者向け

$
0
0

MAMPを使ったWordpressでのWEB制作方法② 初心者向け

前回の記事はこちら
MAMPを使ったWordpressでのWEB制作方法① 初心者向け

今回制作するのは以下のようなコーポレートサイトです
画像や文章などは簡略化してhtmlとcssでマークアップしています

トップページ(index.html)
いわゆるトップページです。
Image from Gyazo

記事一覧ページ(archive.html)
投稿のアーカイブ(一覧)ページです。
レイアウトは以下にします
infomation・・・リリース業務に関するお知らせのセクション
blog・・・ブログの投稿に関するセクション
※好みに合わせてカスタマイズが可能です

Image from Gyazo

お問い合わせページ(contact.html)
ユーザーからのお問い合わせページです
受信方法としてメールアドレスを設定します
Image from Gyazo

会社概要ページ(company.html)
固定ページです
会社の概要ページです。
Image from Gyazo

サービス紹介ページ(service.html)
固定ページです
サービス内容のページです。
Image from Gyazo

投稿結果ページ(single.html)
リリース、業務に関するお知らせ、ブログは
同じレイアウトにして管理を簡単にします
投稿はwordpressの管理者画面からできるようにします
Image from Gyazo

ディレクトリ構成は以下のとおりです
CSSはstyle.cssに記述をしています。今回JSは使用しません
Image from Gyazo

制作の段階で共通化する部分は同じレイアウトにしておきます
今回の場合はヘッダー、フッター、サイドバーは共通レイアウトです

このようにマークアップしたファイルをwordpressのテーマ化をすることで
プログラミングがわからない方でもWEBの管理ができるよう制作します

次回はMAMP内にwordpressに必要なファイルを作成していきます。

MAMPを使ったWordpressでのWEB制作方法③ 初心者向け


Viewing all articles
Browse latest Browse all 8807

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>