Document

Web製作ラボ
15
6/27, 2012
hayashiLabo
Webのデザインをどう作るか
手法
・HTMLと属性で
・HTMLとスタイルシート(CSS) →主流
ツール
・テキストエディタで手書き
・Dreamweaver、ホームページビルダー
・フリーのHTMLエディタ（KompoZer etc.)
・WordpressなどのCMS
復習
Webページ雑感
復習
・HTMLタグは最近は使われるものが限られてきた
・それだけでなく、廃止予定のものがある（例：フレーム、いくつ
かのデザインタグ、HTML5で廃止予定）
・HTML+スタイルシートで構成するのがふつう
・JavaScriptも一時流行ったが・・
・Flashも流行ったが・・
・カッコよくないのがいい、なんていうのも・・
・Wordpressなど使って、更新の容易性、構築の容易性、アク
セス対策を追求するというのが最近よく聞く話題
結局は
良い内容
と独自のスタイル
そして、見てほしい対象
それ以外のやり方
エディタとftpの基本以外では以下のようなやり方がある。
今のところ、さわりだけ。後ほど、詳しく紹介するものもあり。
・Webページ作成統合ソフトを使う
Dreamweaver、ホームページビルダー、KompoZerなど
・ブログで作る
ブログは各社いろいろあり
・ホームページ作成サービスを使う
プロバイダなどが提供。Yahooジオシティーズとか
・CMSを使う
Wordpressが今ではポピュラー
復習
サイト作成手順
・サーバーを借りる
・ドメインを取得する
・コンテンツを作る
・テストする
・公開（サーバーとドメインを結びつける）
・SEO対策
・更新
復習
CMS
CMS: コンテンツマネージメントシステム
（Content Management System）
技術的な知識がなくてもWebサイトが作れる
テンプレートによりデザイン変更容易
統一デザイン
プラグインによるシステム拡張
バージョン管理
公開期日や期間の時間管理
権限の異なる複数の管理者
公開ワークフロー
CMSの種類
たくさんある（wikipedia参照）
WordPress
Movable Type
Xoops （日本語ﾈｲﾃｨﾌﾞ）
以下多数
だいたい以下のサーバー要件があるので注意
 PHPなどのWebプログラミング言語
 MySQLなどのデータベース
CMSの仕組み
■動的生成
ユーザーからのアクセスでプログラム(PHP)を起動し、
そのプログラムがHTMLを生成し、ユーザーに送り返す
アクセスのたびにページが作られる
ページのデータはデータベース（MySQL）に入っている
■静的生成
Wordpressはこっち
管理者がページを作成したら、最後に、HTML生成とい
う動作を行いすべてのページのHTMLを作成更新する
ユーザーがアクセスするのはディスク上のHTML
ページデータがデータベースに入っているのは同じ
Movable typeはこっち
動的生成CMSの仕組み
ユーザーがページアクセス
(index.php)
ﾌﾟﾛｸﾞﾗﾑ
(PHP)
読み出し
ページのHTMLデータ
一般ユーザー
テキスト
画像など
データベース
(MySQL)
動的生成CMSの仕組み
管理ページにアクセス
(index.php)
ページのHTMLデータ
サイト作成管理者
ﾍﾟｰｼﾞ管理
ﾌﾟﾛｸﾞﾗﾑ
(PHP)
ﾌﾟﾛｸﾞﾗﾑ
(PHP)
読み出し
書き込み
テキスト
画像など
データベース
(MySQL)
WordPressの使い方
テーマ
・「外観」～「テーマ」のところで、テーマを選んで適用できる
・テーマの検索、インストール、アクティベートで使う
・テーマは無料有料、ものすごくたくさんある
・WordPressチームの作ったデフォルトテーマは無難
・WordPress本体のバージョンとテーマのバージョンの食い違
いで不具合の可能性がある
・シンプルなテーマを選んだ方がカスタマイズはしやすい
シンプルなテーマ例： Blue Grey White （ただしメニューに対
応してない）
投稿
・新規追加で追加
・「ビジュアル」と「HTML]の２つの編集方法が提供されている
・ビジュアルでは、そこそこワープロ風に入力レイアウトできる
・HTMLでは、外部エディタを使って作ったHTMLをコピペすれ
ばいい
・ビジュアルとHTMLを行き来すると、タグが消滅するなど不具
合が起こることがあり注意（WPのバグっぽい）
・画像、動画、音の追加が可能。エディタ画面上の「アップロー
ド／挿入」というところにあるボタン
・ローカルファイルのアップロード、URLの指定、メディアライブ
ラリから選択、ができる
・上述「メディアライブラリ」は、WPが管理する素材ライブラリ。
画面の左側に管理用ボタンがある
・「カテゴリー」や「タグ」をつけられる
固定ページ
・投稿と似てるのだが、ブログの記事ではなく、常に同じものが
表示されているページという位置づけ
・カテゴリー、タグなど投稿にあった機能がない
・通常のホームページをWPで作るときは、この固定ページで作
った方が見通しがいいかも
・この固定ページを口述の「メニュー」に追加することで簡単に
ホームページのページ構成ができる
・記事の内容については、投稿とまったく同じユーザーインター
フェース
メニュー
・「外観」～「メニュー」
・メニューに対応したテーマで使える
・階層化されたプルダウンメニューのページ構成が簡単
に作れる
・メニューに名前をつけて追加し、あとは、固定ページ、
および、投稿のカテゴリーから項目を選んでメニューに
追加する
・メニューに追加したら、あとはマウスで項目をドラッグ
＆ドロップするだけで、階層化プルダウンメニューがす
ぐ作れる
・WPチーム製のテーマで使える
ウィジェット
・「外観」～「ウィジェット」
・ウィジェットというのは、ページ上に貼れる機能部品
みたいなもの。ブログでいうところのブログパーツ
・カレンダー、リンク集、検索窓、RSSなど
・ドラッグ＆ドロップで好きなところに表示できる
・ウィジェットは後述のプラグインで増やせる
プラグイン
・プラグインとは、様々な機能拡張
・これのおかげでWordpressがさかんに使われると言っ
てもいいかも
・とにかく、なんか「これやりたい」と思ったらWordpressプ
ラグインをひたすら探すと、だいたいある。
例：
Contact Form 7
All in One SEO Pack
Ultimate Google Analytics
WP-DBManager
ktai style、WPtouch
ユーザー
・ユーザーというものを追加でき、役割分担できる
・強い順で以下
管理者：サイトについて全て何でもできる。壊せる
編集者：記事投稿について何でもできる
投稿者：自分の投稿した記事にだけ何でもできる
寄稿者：投稿できるが、公開できない
購読者：ほとんどなにもできない（仮登録に使う）
・上記のとおり、編集者、投稿者、寄稿者、といったハ
イアラーキーができる
ツール
・インポートとエクスポートがあり、サイトをまるごとエ
クスポートし、これをまるごとインポートできる
・サイトを移設するときに使う
・メディアライブラリ（画像や音などのデータ）はエクス
ポートされないので注意。これらは自分でftpして保存
する
・ということで、サイトを完全にインポート・エクスポート
するわけじゃないので、少し高度。
・ただ、とにかくサイトのバックアップとして常日頃やっ
ておくとよい
設定
・各種設定
WPのホームurlを別のところにしたい（一般）
最初に出るページを変えたい（表示設定）
コメントについて設定（ディスカッション）
画像サイズのデフォルトなど変えたい（メディア）
などなど
WordPressのカスタマイズ
テーマをこのまま使うのではなくデザインしたい
■GUIでユーザーカスタマイズがガンガンできるテーマを探して
くる（例：Suffusion）
・GUIを懸命に使ってカスタマイズ
・作者やフォーラムで聞く
■GUIも何にもないシンプル極まりないテーマを探してくる
（例：Blue Grey White、Cleanfrog）
「外観」～「テーマ編集」でソースをいじる
・CSSをいじる（デザインを変更する）
・PHPをいじる（項目追加したい、消したい、などなど）

Download Report