気まぐれIT

Windows, Linux, Apache, XOOPS, Software ~ デジカメ, DV, DVD などのデジタル家電のことまで。。。
ウイルスバスター トレンドマイクロ・オンラインショップ   デル株式会社

スポンサーサイト



上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

WordPressの画面のカスタマイズ(6) ヘッダーの画像



■WordPressのヘッダーの画像を変える 

前回はヘッダーの色を変更しましたが、今回はヘッダーの画像を別の画像に変更してみたいと思います。
(テーマは以前 説明した「WordPress Default(2)」を使います)

このテーマのヘッダー画像は「Wordpressのトップ\wp-content\themes\default2\images\kubrickheader.jpg」ですのでこの画像を別の画像に変えればいいわけです。

●画像の一部に別の画像をはめ込む

実際の画像見てみると下図のようになっていて、単純な水色部分だけの画像ではなく枠がついています。
(画像のサイズは 760x200 pixel )
Webページと見比べてみると、このまま画像全体を置き換えるのはバランスが悪いようで、画像の一部(水色部分)だけを置き換えればよさそうです

画像の一部に別の画像をはめ込むにはいろんなやり方がありますが、「IrfanView」というフリーウェアを使って説明します。
この「IrfanView」というソフトは、ちょっとした画像の加工になかなか重宝しますので使ってみてください。
(早速加工に入りますが、必要なら画像のバックアップを取ってください)
 

●はめ込む画像を用意し、画像の範囲を選択する

まず、上図の水色部分にはめ込む画像を用意してください。
用意できたら「IrfanView」を起動してその画像を開き、選択する矩形範囲の左上角から右下角へマウスでドラッグします。
範囲の微調整を行なうには、選択した枠線付近にマウスポインタを置くとマウスポインタの形状が変わりますので、そこでドラッグすることで枠線を移動させることができます。
(このソフトでは、4辺を個別に移動させることができます)


●選択範囲をクリップボードにコピーする

範囲が決まったら、編集⇒選択範囲をコピー (Ctrl+C) として選択範囲をクリップボードにコピーします



●はめ込まれる範囲を選択する

次に、元の画像を開き先ほどと同じ要領でマウスでドラッグして、はめ込まれる矩形範囲を選択します。
特にこちらの選択枠は、水色部分にぴったりと合わせたいので、注意して枠の微調整を行なってください。



●選択範囲に貼り付ける

選択範囲が確定したら、編集⇒選択範囲へ貼り付け (Ctrl+V) としてクリップボードにコピーしておいた先ほどの画像を貼り付けます。



●ヘッダー画像の完成

これまでの手順の結果、下図のような画像が出来上がりました。
忘れずにJPG形式で保存してください。


出来上がった画像を元の位置に保存して、ブラウザで開くと下図のようになり、だいぶ趣が変わりました。

※ 前回説明した「ヘッダーの背景と文字の色」で変更している場合は、画像が表示されません。「デフォルト設定に戻す」を行なう必要があります



いかがでしょうか? いろいろやってみてください。
次回は、新しいテーマを見つけてインストールしてみたいと思います。

<このブログ内の関連記事>
スポンサーサイト

WordPressの画面のカスタマイズ(5) ヘッダーの背景



- 記事中の小さい画像をクリックすると別ウィンドウで拡大表示します-

■WordPressのヘッダーの背景を変える 

今回はWordPressの「デザイン」の一番⇒の「ヘッダーの背景と文字の色」を利用してみます。
(テーマは以前 説明した「WordPress Default(2)」を使います)

メニューに「ヘッダーの背景と文字の色」が現れるテーマは「WordPress Default」以外ではあまり見かけませんので、簡単に説明します。
尚、画面の表示レイアウトは、ブラウザの表示の違いが影響して「IE」と「Firefox」で異なりますが、説明はIEの画面で行ないます。




●ヘッダーの背景を変える

水色のバーの右端の「詳細」をクリックすると右下に下記のような項目が表示されます
  • フォントの色 ・・・文字色をカラーコードで指定
  • グラデーション上側の色 ・・・背景色の上側の色をカラーコードで指定
  • グラデーション下側の色 ・・・背景色の下側の色をカラーコードで指定
  • デフォルト設定に戻す ・・・変更をリセットしてデフォルトに戻す
  • テキスト表示の切替え ・・・文字表示のON/OFFを切替える
実際の色を確認しながら色を選択する場合は、水色のバーの「フォントの色」、「グラデーション上側の色」などをクリックして選択します。


水色のバーの「グラデーション上側の色」をクリックすると、左図のようにカラーピッカーが現れます


カラーピッカーの色の中から希望の色をマウスでクリックして指定すると、画面の色が変わり、右側の入力欄にカラーコードが入ります
左図ではグレーの(#777777)を指定しています


同様に「グラデーション下側の色」をクリックして、カラーピッカーから希望の色を選択します
左図では黒の(#000000)を指定しています


色の指定が終わったら「カラーピッカーを閉じる」をクリックしてカラーピッカーを閉じます

色の指定が終わったら「ヘッダーを更新」をクリックして変更内容が反映させます

変更後のブログ画面は下図のようになります。



但し、「カレンダー」などの項目タイトルの背景が前回の説明のままでは水色でバランスが悪いのでグレーに変更しています
(スタイルシートを「background: #ccccff;」 ⇒ 「background: #cccccc;」)に変更)


次回は、ヘッダーに任意の画像を表示させてみます

<このブログ内の関連記事>

WordPressの画面のカスタマイズ(4) テーマエディタ



■WordPressのテーマエディタを利用する 

今回はWordPressの「デザイン」の3番目の「テーマエディタ」を利用します。
(テーマは前々回説明した「WordPress Default(2)」を使います)

テーマエディタ」でははテーマを構成するテンプレートファイル(PHP)スタイルシート(CSS)を編集することができます。
これらを自由自在に操るには広範な知識が必要となりますので、画面の見栄え(文字の大きさや装飾など)を定義するスタイルシートについて少しだけ触れてみます。

画面右下の「スタイル」のところにある「スタイルシート(style.css)」をクリックすると左の編集エリアに「style.css」が読み込まれ編集可能になります。
(テキストエディタでこのファイルを直接開いて編集することも可能ですが、レンタルサーバを利用しているときなどは、この方法が直接変更ができて便利です)




●サイドバーの項目タイトルの文字の大きさを変える

サイドバーの「アーカイブ」「カテゴリ」などの項目タイトルの文字の大きさを変えてみます。
109行目あたりに下記のような記述があると思います。

#sidebar h2 {
 font-family: 'Lucida Grande', Verdana, Sans-Serif;
 font-size: 1.2em;
 }


これを次のように変更してみます

#sidebar h2 {
 font-family: 'Lucida Grande', Verdana, Sans-Serif;
 /* font-size: 1.2em;
 */
 font-size: 1.6em;
 }


変更したら編集エリアの下の「ファイルを更新」をクリックして更新してブログ画面を確認してみてください。
em」は標準文字に対する文字の高さの相対倍率を表す単位なので少し大きくなることが確認できると思います。 いろいろ変えて確認してみてください。

尚、スタイルシートでは「/*」~「*/」の間はコメントとみなされますので、以前の設定内容をコメントとして残すようにしておけば元に戻すのも簡単になります。


●サイドバーの項目タイトルの文字に背景色を付ける

今度は項目タイトルの文字に背景色を付けてみます。
上記と同じ場所の内容を下記のように変更してみてください。

#sidebar h2 {
 font-family: 'Lucida Grande', Verdana, Sans-Serif;
 /* font-size: 1.2em;
 */
 font-size: 1.6em;
 background: #ccccff;
 }


これまでの説明分をすべて反映させると下図のようになっているでしょうか?


※ 「カレンダー」の部分が水色の帯だけになって文字が表示されていない?
⇒ 前回の「ウィジェット」の画面で「カレンダー」の「編集」を選択し、タイトル欄に「カレンダー」を入力して保存してください


●サイドバーの項目タイトルの文字の背景に画像を使う

次のように記述すると、背景色の代わりに画像を使うことができます。

#sidebar h2 {
 font-family: 'Lucida Grande', Verdana, Sans-Serif;
 /* font-size: 1.2em;
 */
 font-size: 1.6em;
 background: #ccccff url('images/bg-blue18.jpg') repeat;
 }

※ イメージファイルの名前は任意です
※ 「repeat」の部分は「no-repeat」「repeat-x」「repeat-t」などのオプションがあります

例として、 この画像  を default2\images\bg-blue18.jpg として保存し、上記を反映させると下記のような画面になると思います。
いろいろ試してみてください。



●まとめ

冒頭でも述べましたとおり、テーマファイルの変更を自由自在に行なうには相当のスキルが必要です。
自分のイメージをどのようにしたら実現できるか、関連の参考書やサイトを参考にいろいろチャレンジしてみてください。


次回は、ヘッダーの背景と文字の色 利用して、ヘッダー部分の背景色を変えてみたいと思います。

<このブログ内の関連記事>

WordPressの画面のカスタマイズ(3) ウィジェット



- 記事中の小さい画像をクリックすると別ウィンドウで拡大表示します-

■WordPressのウィジェットを利用する 

今回はWordPressの「デザイン」の2番目の「ウィジェット」を利用してみます。
(テーマは前回説明した「WordPress Default(2)」を使います)

「ウィジェット」はサイドバーに表示される「カレンダー」や「最近の投稿」などの部品のコンポーネントで
  • どのウィジェットを 選択・利用するか
  • どのような配置(順番)で利用するか
を簡単に設定することができます。




●ウィジェットを1つ追加してみる

それではまず、左の上から2番面目ある「カレンダー」を追加してみます。



画面左側にある「カレンダー」の右側の「追加」をクリックすると右側にブルーの背景の「カレンダー」が表示され「カレンダー」が追加されたことがわかります。
選択が完了したら右下の「変更を保存」ボタンをクリックして設定を保存してください



この状態でブログ画面を確認してみると、左図のように、ウィジェットを追加すると既存の組み込み部品は表示されなくなり、ウィジェットのみが表示されます。



●他のウィジェットも組み込み、レイアウトを調整する

「カレンダー」に続いてその他のウィジェットも追加してみます。


「アーカイブ」「リンク」「メタ情報」「検索」「最近の投稿」「タブクラウド」「カテゴリー」「最近のコメント」を追加した状態が左図です


次に順番を変更します
例えば「検索」を「カレンダー」の直下に配置するには、「検索」のブルーのバーをドラッグしてカレンダーの下で離すだけです。
同様にしてその他の部品も希望に応じて移動させ、完了したら「変更を保存」とします

この状態でブログ画面を確認してみると、左図のようになりました
いかがでしょうか?
このように簡単にレイアウトが変更できるようになっています


●ウィジェット「テキスト」について

ウィジェット「テキスト」は、HTMLタグを記述できる汎用のウィジェットです。
ウィジェットを追加したら、一旦「変更を保存」としてから「編集」をクリッして中身を記述します。
このウィジェットは複数組み込みができますので、いろんな用途への利用が可能です。

例1)
プロフィール (文字のみ)
思いつきを気ままに書いてみます
よろしくお願いします 

例2)
広告 (リンクつき画像)
<a href="・・・・・">
<img src="・・・・・ ">
</a> 

ほかにも「アクセスカウンタの設置」「携帯用のQRコードの表示」等々いろんな使い道があると思います。 工夫してみてください。

●ウィジェット「RSS」について

「RSSフィードのURL」、「表示項目数」などを登録して、RSSサイトの項目をウィジェット内に表示します。
また、このウィジェットも複数組み込みできます。

例)
  • RSSフィードのURL: http://dailynews.yahoo.co.jp/fc/computer/rss.xml
  • フィードのタイトル: Yahoo!ニュース - コンピュータ
  • 表示項目数: 5

●ウィジェットについての若干の補足


  • ウィジェットの設定を変更したら、必ず「変更を保存」を忘れないようにしてください
    (変更時には速やかに保存しておいたほうが無難です)
  • 編集画面の不具合のためか、IE6/7 ではテキストボックス内の文字の編集がうまくできません
    ⇒ Firefox2.x ではそのようなことはないようです

次回は、テーマエディタを使って、スタイルシートを少しだけ触ってみたいと思います。

<このブログ内の関連記事>

WordPressの画面のカスタマイズ(2) テーマ



- 記事中の小さい画像をクリックすると別ウィンドウで拡大表示します-

■WordPressのテーマを変更する 

WordPressインストール直後には、「WordPress Default」と「WordPresss Classic」の2つのテーマがインストールされており、前者が現在のテーマとなっています。



●「WordPress Classic」 に変えてみる

利用可能なテーマのところにある「WordPress Classic」をクリックしてみてください
左図のように入れ替わって「現在のテーマ」のところに「WordPress Classic」が表示されたと思います

それでは「サイトを表示」をクリックしてどんな画面になったか確認してみましょう
左図のようになり、かなり趣が変わったことが確認できます

確認できたら、元の「WordPress Default」に戻してください

※ 通常通りに「サイトを表示」をクリックしてもいいのですが。。。

画面のデザインをカスタマイズするときは、「管理画面」と「ブログ画面」を何度も行き来するのは面倒ですので、「サイトを表示」を右クリック⇒新しいウィンドウで開く を選択して、別ウィンドウで開くようにすると作業が楽になります。
但し、変更時には「ブログ画面」で「画面の更新」を忘れないようにしてください


●「WordPress Default」 をコピーして2つにする






「テーマ」は下記のフォルダ内にフォルダとして入っています
 Wordpressのトップ\wp-content\themes\

これを踏まえて、エクスプローラで
 「C:\xampp\htdocs\blog\wp-content\themes」
を開いてみると「classic」と「default」の2つのフォルダがあることがわかります。

そこで、この内「default」というフォルダをコピーして「default2」というフォルダを作ってみたいと思います
  • 左図(上)のように、 「default」を右クリック⇒コピー を選択し
  • 左図(中)のように、空いたところで右クリック⇒貼り付け を選択すると
  • 「コピー ~ default」というフォルダができます
  • 「コピー ~ default」を右クリック⇒名前の変更 を選択し「default2」に変更します
  • この段階で、左図(下)のように「classic」、「default」、「default2」の3つのフォルダがある状態になります
※ エクスプローラは開いたままにしておいてください
 



フォルダのコピーが終わったら、管理画面の「テーマ」の画面に戻ってください
(以前から開いたままの場合は、画面を更新してください)
左図(上)のように「WordPress Default」が2つできていて、1と2の区別がつきませんね。

ということで、表示名を変更しておきます。
エクスプローラで「default2」の方を開いて「style.css」をUTF-8対応のテキストエディタで開き、3行目の「Theme Name: WordPress Default」の後に「(2)」を追加(「Theme Name: WordPress Default(2)」に変更)して上書き保存します

※ 左図(中)のようにエディタを開いておいて、「ファイルをドラッグ&ドロップ」すると簡単に開くことができま

管理画面の「テーマ」の画面を更新してみてください
左図(下)のように、「WordPress Default」と「WordPress Default(2)」と表示され、区別がつきやすくなったはずです


なぜこんなことを。。。

あるテーマの中身に手を加えるとき、「オリジナルではなくコピーに手を加える」ようにすれば、

  • 手を加える前後の比較が簡単に行える
  • 万が一、失敗しても少なくとも元の状態に簡単に戻せる
  • 元が1つのテーマに対して複数の派生テーマが作成できる
ということです。気にしない方はその必要はありません



●今回のまとめ
  • 管理 ⇒ デザイン ⇒ テーマ でテーマの選択を行うことで簡単に画面のデザインを取替えできる
  • テーマは、wp-content\themes\ 以下にフォルダとして入っている
  • テーマに手を加えるときは、コピーしてから行なうと都合がいいことがある
次回は、テーマ「WordPress Default(2)」に少し手を加えてみたいと思います
(新しいテーマの入手とインストールについては、それ以降に補足します)

<このブログ内の関連記事>

WordPressの画面のカスタマイズ(1)



■WordPressの管理画面

WordPressの画面のカスタマイズには管理画面を利用します。
管理画面を開くには、
  • ブログのトップページから「メタ情報」のところの「ログイン」(ログイン済みの場合は「サイト管理」)をクリックする
  • ブログのトップページ/wp-admin/ にアクセスする
のいずれかで行います
(ログイン状態でない場合は管理者でログインしてください)




■WordPressのデザイン変更画面

画面のデザインを変更するには、管理画面の「デザイン」をクリックします。



デザインを選択すると上の画面のようになります
  • テーマ
    テーマを別のものに変更することにより、画面全体を大きく変更することができます。 インターネットには多くの個性あるWordPress用のテーマが公開されておりこれらを利用することも可能です。
  • ウィジェット
    ウィジェットを利用することにより、アーカイブ、カテゴリなどのサイドバーの表示項目をウィジェットを選択するだけで変更したり追加することができます。
  • テーマエディタ
    テーマエディタを使うと、テーマで使用されているファイルの中身を変更することができますので、大掛かりなカスタマイズが可能です。
    しかし、HTMLやスタイルシート(CSS)、PHPなどいろんな知識が必要ですので難易度も高くなります。
    この内、スタイルシートの変更の簡単な例を後で説明することにします。
  • ヘッダーの背景と文字の色
    この項目はどのテーマでも利用できる項目ではありませんが、WordPressのデフォルトテーマでは利用可能になっていますので少し説明します。

■WordPressの初期画面を再確認する

変更を加える前に、初期画面を確認しておきます。



さて、この画面をどのように変身させられるでしょうか。
次回以降、少しずつ説明していきたいと思います。

<このブログ内の関連記事>

WordPressのインストール



- 記事中の小さい画像をクリックすると別ウィンドウで拡大表示します-


■WordPressをインストールする環境

今回は、ブログシステム作成のためのソフトウェアであるオープンソースの「WordPress」をインストールすることにします。インストールする環境は前回まで2回にわたって説明した「XAMPP1.6.6a」とし、次のようになっているものとします。
  • OS: WindowsXP Pro SP2
  • Webサーバ: Apache 2.2.8
  • データベース: MySQL 5.0.51a
  • スクリプト: PHP 5.2.5
  • データベース管理: phpMyAdmin 2.11.4

■WordPressの設置内容

このページでは、WordPressの設置にあたり下記の「前提条件」と「設置方針」にしたがって説明していきます。
環境や方針が異なる場合は適宜 読み替えるなどしてください。

<前提条件>
  • XAMPPのインストール先: C:\xampp
  • Windowsのコンピュータ名: my-server
<WordPressの設置方針>
  • サーバ名: my-server
  • URL: http://my-server/blog/
  • ファイルの配置先: C:\xampp\htdocs\blog\ 以下に配置 
  • データベース名: wp
  • データベースユーザ: wp 
  • データベースユーザのパスワード: wppwd
※サーバ名について
  • 「サーバ名」は、Windowsの「コンピュータ名」(マイコンピュータのプロパティで確認できる)を使用するのが簡単ですのでこれを使用することにします
  • HOSTSファイル(C:\Windows\System32\drivers\etc\hosts)に「名前」と「IPアドレス」を登録してその名前を使用することも可能ですがその説明はしません
  • localhost」を使うこともできますが、その場合はサーバ本体以外から正常にアクセスできませんのであまりお勧めしません
  • 「192.168..1.10」のようにサーバのIPアドレスを直接指定することも可能ですが、IPアドレス変更時などを考慮すると「名前」を使用する方がベターです

■WordPressのファイルをダウンロードする

WordPress日本語版は、従来「WordPress Japan」で運営管理され「WordPress ME」として配布されておりましたが、こちらは諸般の事情により2008年3月末に閉鎖されました。
現在は「WordPress日本語版作成チーム」により「WordPress 日本語ローカルサイト」にて配布されています。

まず、「WordPress 日本語ローカルサイト」から最新版をダウンロードしてください。2008年4月1日現在の最新版は、「WordPress日本語版2.5」(wordpress-2.5-ja.zip)です。


■ファイルを解凍して配置する

ダウンロードしたファイル(ZIP形式)を解凍すると「wordpress」フォルダ以下にたくさんのファイルやフォルダが展開されます。

「wordpress」フォルダ以下のファイルとフォルダをすべてC:\xampp\htdocs\blog\ 以下にコピーしてください。
(実際の操作は、「wordpress」フォルダをC:\xampp\htdocs\にコピーし、フォルダ名を「wordpress」⇒「blog」に変更するのが簡単です)

インストールの説明用のHTMLファイル(readme.html)が「C:\xampp\htdocs\blog\」にありますので、これにも目を通しておくことをお勧めします


■wp-config.phpファイルを編集する

WordPressを動作させるためには、事前準備として下記の手順が必要です。
  1. WordPressのトップフォルダ (C:\xampp\htdocs\blog\) にある「wp-config-sample.php」を「wp-config.php 」に名前を変更(またはコピー)し、
  2. 「wp-config.php」を、文字コード「UTF-8」に対応したテキストエディタで開き、
  3. 3~5行目の「データベース名」および「データベースユーザ名とパスワード」を上記の「■WordPressの設置内容」に従い次のように編集し、
     項 目  修 正 前  修 正 後
     データベース名  'putyourdbnamehere'  'wp'
     ユーザー名  'usernamehere'  'wp'
     パスワード  'yourpasswordhere'  'wppwd'
  4. 文字コード「UTF-8」で保存する
※「UTF-8」に対応したテキストエディタ

Windows標準のメモ帳は対応しておりません
お持ちでない方は、フリーウェアの中にも対応製品がたくさんありますのでそれらの中からお好きなものを利用してください。
ちなみに私は「K2Editor」などを利用しています。

 
■MySQLデータベースを設定する

WordPressでは、データベースの設定を事前に行う必要があります。
データベースの設定には「XAMPPのインストール(2) で紹介した、「phpMyAdmin」を使用します。

 メイン画面

「phpMyAdmin」のメイン画面が開いたら、画面の下の方にある「特権」をクリックします

ユーザ管理画面
 

左図のようなユーザ管理画面が開きますので、画面の下の方にある「新しいユーザを追加する」をクリックします

ユーザ追加画面
 

次に、左図の追加画面で
  • ユーザ名: 「wp」
  • ホスト: 「localhost」
    (左のコンボボックスから「ローカル」を選択)
  • パスワード : 「wppwd」
を設定し、「同名のデータベースを作成してすべての特権を与える 」にチェック。

以上の入力内容を確認してから、右下の「実行する」ボタン (図には表示されていません)をクリックします

ユーザ追加
完了画面

正常に処理が完了すると、左図のように「新しいユーザを追加しました」のメッセージが表示され、左の列にデータベース一覧に「wp」が追加表示されます

尚、この状態ではWordPressnoデータを入れる「入れもの」ができただけですのでデータベースの中身は空っぽです。
(データベース一覧の「wp」をクリックしてみると「このデータベースにはテーブルがありません」となります)



■WordPressをインストールする

これまでの説明内容が滞りなく完了すると、WordPressをインストールすることができます。まず、Webブラウザで「http://my-server/blog/wp-admin/install.php」を開きます。

<ご注意>
my-server」の部分は環境に応じて読み替えてください。
また、「■WordPressの設置内容」のところで説明しましたように、
http://localhost/~  」でアクセスしてインストールすると、別のコンピュータからアクセスできません!

 ようこそ画面

この画面では、「ブログのタイトル」と「管理者のメールアドレス」を入力します
また、このサーバをすぐに公開しない場合は「このブログをGoogleや~  」の左のチェックをはずしておきます
(いずれの設定も、後で変更することができます)

内容を確認して画面下部の「WordPressをインストール 」ボタンをクリックします

インストール
完了画面


 

処理が完了すると「成功しました!」のメッセージと管理者のユーザ名「admin」と自動生成されたパスワード「*****」が表示されます
パスワードをメモ し、画面下部の「ログイン」ボタンをクリックします

ログイン画面

左図のようなログイン画面になりますので、先ほどメモした「ユーザ名」と「パスワード」を入力し、「ログイン情報を記憶」にチェックして、下部の「ログイン」ボタンをクリックします

管理画面

無事ログインできると左図のような管理画面になります
  • 上部右の「adminさん」の部分をクリックすると、管理者のパスワードなどの管理者情報を変更できます 
  • ブログ名の右の「サイトを表示 」をクリックするとブログ画面を表示します 
  • 「作成」「管理」…「ユーザー」が横に並んでいるところは管理のメニューで、新規の記事の投稿や記事の修正、画面のデザインの変更や運用に関わる設定などを行います

とりあえず、上部右の「adminさん」のところをクリックして管理者パスワードを変更してみます

 

ユーザ情報
の変更画面

この画面では、パスワード以外にもメールアドレスその他の情報を変更できますが、とりあえずパスワードを変更してみます
2箇所の新しいパスワード入力欄に入力し、「プロフィールを更新」ボタンをクリックすると変更が完了します

※パスワード以外の項目のみの変更の場合は、新しいパスワード入力欄は空白のままでOKです
 

ブログ画面

それでは、ブログ名の右の「サイトを表示」をクリックしてブログ画面を確認してみましょう

インストール直後は左図のような画面になっていると思います
テーマファイルに変更を加えたり、別のテーマをインストールすることによりがらりと違った画面になります


今回は、ここまでで一旦終りにします。それにしても、ずいぶん簡単にインストールできるようになったと感じます。

次回は「テーマの変更」について少し補足したいと思います。

<このブログ内の関連記事>

XAMPPのインストール(2)



- 記事中の小さい画像をクリックすると別ウィンドウで拡大表示します-


■セキュリティ設定の前に。。。

  1. 「XAMPP管理ツール」画面のURLについて

    トップページ(http://localhost/)にindex.htmlなどを設置する場合は、「C:\xampp\htdocs\ndex.php」を削除してください
    このとき、管理ツールは「http://localhost/」ではアクセスできなくなりますので、「http://localhost/xampp/でアクセスするようにしてください

  2. デモを実行してみましょう

    「XAMPP管理ツール」の左のメニューに用意されている7つの「デモ」の
    のうち一番上の「CDコレクション」をクリックしてエラーが出ないか確認してみてください。
    このデモでは「PHP+MySql」が利用されていますので、このデモが正常に動作すればこれらの基本動作はOKと考えられます。
    セキュリティ設定後、このデモはそのままでは利用できなくなります。
    (対応方法は別の機会に説明の予定。この他のデモは利用できます)

■XAMPPのセキュリティ設定をする

さあ、それでは最低限のセキュリティの設定をします。
「XAMPP管理ツール」のトップ画面を表示してください。

「XAMPP管理ツール」
のトップ画面

XAMPPの管理画面(トップ)

セキュリティの確認画面を開く前に、「phpMyAdmin」という「MySQLの管理画面」を開いてみましょう
左のメニューのやや下のあたりにある「phpMyAdmin 」をクリックしてみてください

「phpMyAdmin」の画面
phpMyAdminの画面

「phpMyAdmin」では、MySQLを利用できるユーザの管理などのMySQLの運用にかかわることから、データベースやテーブルの作成や削除、データの更新などMySQLに関するほとんどの設定や操作が行えます

「この画面が何の制限もなく起動できた」ということを覚えておいてください

それでは「XAMPP管理ツール」のトップ画面に戻り、左のメニューの「ようこそ」の2つ下にある「セキュリティ」をクリックして「XAMPP のセキュリティ」画面 を開いてください

「XAMPP セキュリティ」確認画面 XAMPP セキュリティ画面

下記の4つの「要注意」項目が表示されていると思います
  1. これらのXAMPPページは一般的にネットワーク経由でアクセス可能です
  2. MySQLユーザルートにパスワードがありません
  3. PhpMyAdminはネットワーク上から自由にアクセスできてしまいます
  4. PHPは"safe mode"で起動していません
1.は「XAMPP管理ツール」自体のアクセスに制限がないこと、2.と3.は「MySQLに関するもの」です。

1~3の3項目について対策を講じることにします。確認画面の枠の下の方にある下記のリンクをクリックしてください
 http://localhost/security/xamppsecurity.php

セキュリティ設定画面(1)
MySQLのセキュリティコンソール & XAMPPのディレクトリ制御画面

左図のような「MySQLのセキュリティコンソール & XAMPPのディレクトリ制御」の画面が現れます
まず、上の方の「MYSQL 項目: "ROOT" パスワード」の設定を行います
  • 「新しいパスワード」と「新しいパスワード(確認)」の2箇所に設定したいパスワードを入力
  • 「http」と「cookie」の選択は規定値の「cookie」のままでOK
その下の「パスワードを変更しました」ボタンをクリックします

セキュリティ設定画面(2)
MySQLのセキュリティ設定完了画面

画面が左図のように変わり、 MySQLの管理者「root」のパスワードが設定されたことが確認できればOKです

セキュリティ設定画面(3)
XAMPPのディレクトリ制御 (.htaccess)設定画面

 続いて、下の方の「XAMPPのディレクトリ制御 (.htaccess) 」の方のパスワードを設定します
  • 「ユーザ」に「root」を入力
    (「root」以外でもかまいません)
  • 「パスワード」に設定したいパスワードを入力

その下の「安全なXAMPPディレクトリを作成してください」ボタンをクリックします

セキュリティ設定画面(4)
XAMPPのディレクトリ制御 (.htaccess)設定完了画面

画面が左図のように変わり、「XAMPPのディレクトリ制御」が設定されたことが確認できればOKです

以上で「最低限のセキュリティの設定」が完了です



■XAMPPのセキュリティ設定後は、。。。


「XAMPP管理ツール」
を開こうとすると。。。

XAMPP管理ツールのログイン画面

「XAMPP管理ツール」を開こうとすると左図のような認証ダイアログが開き、「ユーザ名」「パスワード」が求められるようになります
(但し、認証後一定時間内は再認証は行われません)

「phpMyAdmin」
を開こうとすると。。。

phpMyAdminのログイン画面

「phpMyAdmin」を開こうとすると、左図のような画面となり、上記同様に「ユーザ名」「パスワード」が求められるようになります
(但し、認証後一定時間内は再認証は行われません)

「セキュリティ確認画面」は。。。
セキュリティ設定後のセキュリティ確認画面


MySQLのセキュリティコンソール & XAMPPのディレクトリ制御 」の画面はどうでしょう。
  1. XAMPPページはネットワーク経由での一般的なアクセスが可能でなくなりました
  2. MySQLユーザルートはパスワードが無しの状態が解消されました
  3. PhpMyAdminのログインパスワードが有効になりました
  4. PHPは"safe mode"で起動していません
対策を講じた3項目が「要注意」→「安全」に変わりました


以上で、最小限のセキュリティ対策が完了です
これでWebサーバの基盤ができました

次はこのサーバにブログツールである「WordPress」をインストールしてみたいと思います

<このブログ内の関連記事>

XAMPPのインストール(1)



- 記事中の小さい画像をクリックすると別ウィンドウで拡大表示します-


■XAMPPをダウンロードする

2008年4月1日現在のXAMPPの最新版はバージョン1.6.6aであり、apache friends の下記のURLからダウンロードできる。

 ○ダウンロード先: apache friends - xampp for windows

 ○パッケージの内容:
  • Apache 2.2.8 + OpenSSL 0.9.8g 
  • MySQL 5.0.51a
  • SQLite 2.8.15
  • PHP 5.2.5 & PHP 4.4.8
  • MiniPerl 5.8.7,
  • phpMyAdmin 2.11.4

00.XAMPP Download
「XAMPP Windows版 1.6.6a, February 22th 2008」の「XAMPP Windows版 1.6.6a」〔ベーシックパッケージ〕 のところにインストーラ版、ZIP版、EXE (7-zip)版の3つがありますが、今回は、最も簡単で安全と思われる「インストーラ」版(xampp-win32-1.6.6a-installer.exe 34 MB)をダウンロードして使用します。




■XAMPPをインストールする

インストールはとても簡単です。
ダウンロードしたファイル「xampp-win32-1.6.6a-installer.exe」を実行し、順番に進めていくだけで数分で終了します。

 言語の選択
00.XAMPP Download

既定値の「Japanese」のままでOKです

インストール先
の選択

00.XAMPP インストール先の選択

C:\XAMPP」が既定値となっています
この場合、ドキュメントルート(Webサイトのトップフォルダ)は「C:\xampp\htdocs」となります

D:ドライブが使用できる場合は、「D:\xampp」に変更するという選択肢もあります

後でインストール先を変更すると面倒なので、あらかじめ決めておく方がいいでしょう

 オプション選択
00.XAMPP オプション選択

ショートカットの作成は、特に変更の必要はないでしょう
サービスの設定は、後で変更できますので特にここで設定する必要もありません

「インストール」をクリックすると、しばらくしてインストールが完了します



■ XAMPP Control Panel を利用する

XAMPP Control
Panelの起動

10.XAMPP Control Panelの起動

「デスクトップ」 または 「すべてのプログラム→Apache Friends→XAMPP」 にある「XAMPP Control Panel」アイコンをダブルクリックまたはクリックして起動します

インストール直後の起動画面
10.XAMPP インストール直後の起動画面

モジュールのところは、上から、
Apache(Webサーバ)、MySql(データベースサーバ)、FileZilla(FTPサーバ)、Mercury(SMTPサーバ) の順に並んでいます

すべての「サービス」の左のチェックボックスが空欄でサービスとしてインストールされていません。また、右側のボタンが「開始」となっていて、プログラムが起動していない状態となっています

※とりあえず、ApacheとMySqlを利用できるようにします
 (FileZillaとMercuryについては別の機会に譲ります)

Apacheのサービスをインストール
10.XAMPP Apacheのサービス

Apacheはサービスとして起動しなくても利用できますが、XPなどのNT系のWindowsでは通常サービスとして起動するようにします

Apacheの左側のサービス欄のチェックボックスをクリックすると、「Apacheのサービスをインストールします。よろしいですか?」という確認のダイアログボックスが現れますので「OK」をクリックします

MySqlのサービスをインストール
10.XAMPP MySqlのサービス

Apacheの場合と同様に、

MySqlの左側のサービス欄のチェックボックスをクリックすると、「MySqlのサービスをインストールします。よろしいですか?」という確認のダイアログボックスが現れますので「OK」をクリックします

2つのサービス
がインストールされた状態
10.XAMPP 2つのサービスがインストールされた状態
 

ApacheおよびMySqlのサービスをインストールしたので、この2つのモジュールのサービス欄にチェックが入っています

サービスを開始する
10.XAMPP サービスを開始する

いよいよApacheとMySqlを起動します

開始したいサービスの右の「開始」ボタンをクリックすると、「開始」ボタンが「停止」ボタンに変わり、その左に「起動」と表示されます

左図は「Apache」と「MySql」の右の「開始」を順番にクリックした後の画面です
(Apacheのボタンが「停止中」となっているのは愛嬌か?)

各々のサーバの設定を変更した場合などは、サービスを再起動(停止→起動)する必要があります

Windowsを再起動後の画面
10.XAMPP Windowsを再起動後の画面

上記のようにサービスとしてインストールしておくと、Windows起動時に自動的にサービスが開始します
(ログインしなくてもサービスは開始します)

ログインして「XAMPP Control Panel」を開くと、左図のようにサービスが開始状態になっていることが確認できます

※再起動は後ほど行なってください
※起動時にサービスを自動的に開始しないようにすることもできます
(コントロールパネル→サービス で該当サービスの「スタートアップの種類」を「自動」→「手動」に変更する。詳細は省略)

XAMPP Control Panel
を常駐させる
10.XAMPP XAMPP Control Panel

「XAMPP Control Panel」は、普段はあまり利用機会がありません
  • 右下の「終了」ボタンをクリックすると終了します
  • 右上の[X](閉じるボタン)をクリックすると、終了せず右下の通知領域(タスクトレイ)に入ります。この場合は、このアイコンをクリックすることですばやくウィンドウを開くことができます

右上の最小化ボタンをクリックするとタスクバーに入りますので少し邪魔なります。[X]で通知領域に入れるのがお勧めです。

動作の確認
12.XAMPP 動作の確認

以下のいずれかの方法でインストールしたWebサーバのページを表示させてみます
  • 「XAMPP Control Panel」の「Apache」の右にある「管理ツール」をクリックする
  • IEなどのWebブラウザを起動し、URLに「http://localhost/」を指定する
※インストール後の最初の起動時には左のような「言語選択画面」になるかもしれません。その場合は、右端の「日本語」をクリックしてください
12XAMPP 動作の確認

正常にインストールされていれば左のような画面になり、
 「XAMPP Windows版へようこそ。。。
  おめでとうございます:
  システム上にXAMPPが正しくインストールされました!」
という文言が確認できるはずです

※ここまででうまく動作しない場合は、一旦アンインストールしてから再インストールしたほうが近道かもしれません。


以上で、最小限のインストールが完了です
既定値の「C:\xampp」にインストールした場合は、「C:\xampp\htdocs」以下にHTMLファイルを置くことでWebブラウザで「http://localhost/~ 」と指定することで表示可能になっているはずです。

しかしこの状態ではセキュリティ上、全く無防備です。
ということで、次回はセキュリティの設定について記述したいと思います。

<このブログ内の関連記事>

自分の「Windowsパソコン」に、「Webサーバ」をインストールする(1)



■Webサーバをインストール?

ホームページを公開する方法としては、
  • 無料のホームページスペースを借りる
  • 無料のブログサービスを利用する

などの方法がありますが、

  • オープンソースのCGIなどを利用したい
  • もっと容量がほしい
  • もっと自由度がほしい

という場合は、

  • 自宅サーバを立てる
  • レンタルサーバを利用する

といったことが必要になってきます。

自宅サーバではもちろんWebサーバを構築することが必須ですが、レンタルサーバを利用する場合やホームページスペースを借りるだけの場合でも身近なところにWebサーバがあるとテスト環境として利用でき何かと便利です。

■Webサーバのソフトウェアにはどんなものがある?

Windowsで利用できるWebサーバのソフトウェアとしては、次のようなものがあります。

   ※ヒット数: サーバ名でGoogle検索したときのヒット数。

No.

サーバ名

ヒット数

概   要

 1  Apache

 639,000

世界中で最も多く利用されているオープンソースのWebサーバ。
Linuxなどの多くのUNIX系のOSのほかWindowsにも対応しでいる。
レンタルサーバの多くがAppacheで構築・運用されている。
 2  IIS

 446,000

マイクロソフト社のWebサーバ。
Windows ServerやWindowsXP Proなどに標準搭載されている。
マイクロソフト社のWebアプリケーション環境であるASP.NETのサーバとの位置づけが強く業務アプリケーションで多く利用されている。
 3  AN HTTPD

 73,000

中田昭雄氏の製作のWebサーバ。
国内のWindowsユーザの利用者が多い。
 4  sHTTPd

 2,000

VectorにおけるWebサーバのダウンロードランキング1位。
設定が簡単で容易にWebサーバの構築ができる


次回は「何をインストールするか?」について書いてみたいと思います。
 
<このブログ内の関連記事>

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。