中野 blog

１．ナビゲーションメニューから「システム」を選択して下さい。




２．「システム」の画面サイドメニューから、「ユーザー」メニューを開き、「新規」をクリックして下さい。
「ユーザーの作成」画面が表示されます。



３．「ユーザーの作成」画面は、下のように表示されます。



３．１　ユーザー名（必須）
サインインする時のIDです。　英数字で入力して下さい。

３．２　表示名（必須）
ブログ記事等を公開した時に表示される名前を決めて入力して下さい。　日本語でも英数字でも構いません。

３．３　電子メール（必須）
ユーザーのメールアドレスを入力して下さい。

３．４　ウェブサイトURL
ユーザーのウェブサイトURLを入力して下さい。　コメント投稿時等にこのURLが表示されます。

３．５　初期パスワード（必須）　パスワード確認（必須）
ユーザーがサインインする時に使うパスワードです。　英数字で入力して下さい。

３．６　使用言語
日本語を選択して下さい。

３．７　テキスト形式
（ウェブサイト／ブログの既定値を利用）を選択して下さい。

３．８　タグの区切り
カンマを選択して下さい。

３．９　システム権限
ユーザーに許可する項目にチェックを入れて下さい。


４．必要なら、プロフィール画像を追加しましょう。

４．１　「ユーザーの編集」メニューから「一覧」をクリックして下さい。

４．２　表示されたユーザー一覧の中から、作成したユーザー名をクリックして下さい。

４．３　ユーザー情報の編集画面が表示されます。
「プロフィール画像の選択」をクリックして下さい。

４．４　「画像の挿入」画面で「新しい画像をアップロード」をクリックして、画像を登録して下さい。

取りあえず、これでOKかな？　と、思います。

X-serverで、個人無償ライセンスのMovable type 5.02を動かしていて、ウェブサイトスタイルに、プロフェッショナルスタイルの「Professional Black」を選択して（※１）、デフォルトで使っていると、鶏の写真が表示されています。
この、ウェブサイトの鶏の写真を、取り敢えず以下のようにして消す事が出来ました。
素人のやり方ですから、こころもとないですが、後日元に戻せるよう、個人的な備忘録。


１．ウェブサイトの管理画面から、「デザイン」⇒「テンプレート」⇒「スタイルシート」と進み、@import url(<$mt:StaticWebPath$>addons/Commercial.pack/themes/professional-black/screen.css);と書かれている事を確認して下さい。


２．１項のフォルダへ、FTPでアクセスして下さい。
FTPでサーバでX-server内の自分のドメインのフォルダを開いて、「public_html」⇒「mt」（※２）⇒「mt_static」⇒「addons」⇒「commercial.pack」⇒「themes」⇒「professional-black」⇒「screen.css」。


３．「screen.css」のファイルをPCのデスクトップへダウンロードして、ワードパッド等でソースを見て下さい。


４．中ほどに、
/* Content ---------------------------------------------------------------- */
と書かれた箇所があります。
そこから下へ見ていくと、以下のように、幅905ピクセル、高さ170ピクセルで鶏の画像（同じ「screen.css」のフォルダ内の、「homepage-image.jpg」が鶏の画像です）を表示するように書かれた箇所があります。
#homepage-image {
    width: 905px;
    height: 170px;
    /* photo by Anil Dash */
    background: url(homepage-image.jpg) no-repeat 0 0;
    overflow: hidden;
    text-indent: -9999px;
    margin: 0 0 25px 20px;
}
ここから、
    width: 905px;
    height: 170px;
    /* photo by Anil Dash */
    background: url(homepage-image.jpg) no-repeat 0 0;
を削除して下さい。


５．削除が済んだら、上書き保存して、「screen.css」を、X-server内の元の位置へアップロードして上書きして下さい。

１．画像作成
バナーの画像を、まず作りましょう。
Microsoft Photo Editor で作っても良いですし、何でも良いです。

画像だから！　と、意気込まなくても構いません。
下の例の場合、次のような手順で画像を作りました。　別の手順でお作り頂いてもOKです。


１．１　Microsoft Word で、HG丸ｺﾞｼｯｸM-PRO 文字サイズ14を使って書いた文字を、pdf化。

１．２　pdfを122%表示の状態でプリントスクリーンで切り取って、Microsoft Photo Editor へ貼り付け。

１．３　Microsoft Photo Editor の、「効果」→「エンボス」→「鮮明さ：１」「光源：左下」で「適用」をクリックして影を付ける。

１．４　出来た文字を、Microsoft Photo Editor の「イメージ」→「トリミング」で開く画面で、単位に「ピクセル」を選んで、左右上下を切り落として文字のまわりだけトリミング。

１．５　width 251ピクセル、height47ピクセルで切り取って、バナー画像として.png 形式で保存。

なお、幅251ピクセル×高さ47ピクセルは、適当なサイズであって、他の方のサイトにバナーとして貼ってもらう為には、一般的な幅と高さのバナーにする事をお勧めします。
画像を作れたら、画像をアップロードして下さい。


２．拡張子、名称、画像サイズ
バナーの画像のファイル名を確認して下さい。
大抵、***.gif、***.jpg、あるいは ***.png になっていると思います。　*** はアップロードした時の画像の名前です。
次に、ファイル名が日本語や全角になっていない事を確認して下さい。　ボタン.gif や ｂａｎｎｅｒ.gif では、表示されませんから、ファイル名を半角に直して下さい。


３．バナー貼付
バナーを貼りたいページのソースを開いて下さい。
ページの貼りたい部分に、<IMG src="画像のファイル名" width="画像の幅（ピクセル表示）" height="画像の高さ（ピクセル表示）" >
このように貼り付けて下さい。
画像の幅と画像の高さは、任意に入力して頂いて結構です。


４．リンク先貼付
バナーをクリックしたらリンク先に飛んで欲しいですから、<IMG・・・ の前にリンク先を書き加えて下さい。
<A href="リンク先のURL"><IMG src="画像のファイル名" width="画像の幅" height="画像の高さ"></A>

例えば、画像のファイル名がbannner.pngで88×31の大きさで、リンク先がhttp://www.test.ne.jp/blog/だとしたら、
<A href="http://www.test.ne.jp/blog/"><IMG src="banner.gif" width="88" height="31"></A>
です。


５．枠線
後ろの方に、width="***" height="***" に加えて、border="0" と書く事があります。
border="0" は、枠線を表しています。
border="0" と書いていて大抵問題はありませんが、場合によっては禁止タグとされるところもあるので、その場合は付けないようにして下さい。


６．新しいウィンドウで開かせる
飛んでいく先のURL の後ろに、 target="_blank"と、書き加えて下さい。
例えばこんな感じです。
<A href="http://www.test.ne.jp/blog/" target="_blank"><IMG src="banner.gif" width="88" height="31"></A>
これで、バナーをクリックしたら新規にウィンドウが開いてリンク先が表示されます。

ウェブサイトのテーマに「プロフェッショナル ウェブサイト 1.0」を使い、ブログのテーマに「プロフェッショナルブログ 1.0」を使って作っている、ウェブサイトとブログのヘッダーに画像を入れた作業の記録です。　後日元に戻せるように、簡単な備忘録。


１．写真を入れるフォルダの作成

１．１　ウェブサイトで、左側の「ウェブページ」をクリックして、「フォルダ」をクリックして下さい。



１．２　「トップレベルのフォルダを作成」をクリックして、



開いた入力用の窓に、「images」と入力して下さい。
入力用の窓の右の「新規作成」をクリックして下さい。




２．画像のアップロード（※１）

２．１　左側の「アイテム」をクリックして、「一覧」をクリックして下さい。　「アイテムを作成」をクリックして下さい。



２．２　「ファイルを選択」をクリックして、ヘッダーに貼付ける画像を選択して下さい。
「フォルダの選択」をクリックして、先程作った「images」を選択して下さい。



２．３　「アップロード」をクリックして下さい。

２．４　アップロードした画像のアイコンをクリックしたら、「アイテムの埋め込み」と書かれた箇所に画像の居場所のURLが表示されますから、これをコピーして下さい。（※２）




３．ウェブサイトのテンプレート書き換え

３．１　ウェブサイトの管理画面の左側の「デザイン」をクリックして、「テンプレート」をクリックして下さい。
「テンプレートモジュール」のグループにある、「ヘッダー」をクリックして下さい。

３．２　「スタイル」で「プロフェッショナルウェブサイト」を選択しているなら、29行目と32行目に、<$mt:WebsiteName encode_html="1"$>と書かれた箇所がありますので、これら２カ所を、<img src="◯◯◯">（この◯◯◯に、２．４項でコピーしたURLを貼付けて下さい）と、書き換えて下さい。（※２）
「変更を保存」をクリックして下さい。



４．ブログのテンプレート書き換え

４．１　ブログの管理画面の左側の「デザイン」をクリックして、「テンプレート」をクリックして下さい。
「テンプレートモジュール」のグループにある、「ヘッダー」をクリックして下さい。

４．２　「スタイル」で「プロフェッショナルウェブサイト」を選択しているなら、30行目に、<$mt:WebsiteName encode_html="1"$>と書かれた箇所がありますので、この１カ所を、<img src="◯◯◯">（この◯◯◯に、２．４項でコピーしたURLを貼付けて下さい）と、書き換えて下さい。（※２）
「変更を保存」をクリックして下さい。



５．ヘッダーの背景色の変更。

５．１　左側の「デザイン」をクリックして、「テンプレート」をクリックして下さい。
「インデックステンプレート」のグループにある、「スタイルシート」をクリックすると、2行目にヘッダーを描いているcssが表示されます。
下の例だと、mt_static/addons/Commercial.pack/themes/professional-black/の中の、screen.css です。
FTPクライアントソフトを使って、この css のフォルダを開き、screen.css をテキストエディタで開いて下さい。



５．２　ヘッダーの背景色を白にするなら、
/* Header ----------------------------------------------------------------- */

#header {
background: #000 url(header-bg.gif) repeat-x 0 0;
}

これを、

#header {
background: #FFFFFF;
}

と、書き換えてください。

５．３　サインインの背景色も白にするなら、

X-serverのデータベース設定について書かれたサイト
http://hpfuyuri.com/hp/2010/04/movable-typemysql-12-.html
Movable Type 5 の設定について書かれたサイト
http://hpfuyuri.com/hp/2010/04/movable-type5--15-.html

これらを併せて参照しながら、以下のように設定を進めてもらえれば、設定できるだろう　と、思います。

既に、 Movable type 5 プログラムの X-server へのアップロードが済んでいると仮定して、以下に記しております手順は、「X-server の データベース設定」と、「Movable type の設定」「ブログの作成」です。

なお、まさログさんの 記事の方が、より的確です。


１．X-server データベースの設定

１．１　X-server panelにログインしてください。

１．２　X-sever panel の、DATABASE の、MySQL設定 を、クリックしてください。

１．３　MySQL設定 の、MySQLの追加 をクリックしてください。

１．４　MySQLデータベース名 に、◯◯_mt となるよう、mt を入力してください。　◯◯は、サーバIDです。（データベース名を手帖に控えてください！）
文字コードで UTF-8 を選択してください。
続いて MySQLの追加（確認） ボタンをクリックしてください。

１．５　MySQLデータベースを追加しますか？　と尋ねられますから、MySQLデータベースの追加（確定）ボタンをクリックしてください。

１．６　MySQLユーザの追加 をクリックしてください。

１．７　MySQLユーザID に ◯◯_user となるよう、user を入力してください。　◯◯は、サーバIDです。　（ユーザIDを手帖に控えてください！）
ホスト名 を、変えずにそのままにしておいてください。（ホスト名を手帖に控えてください！）
パスワード を、決めて入力してください。（パスワードを手帖に控えてください！）
パスワードの確認 に、パスワードを再度入力してください。
続いて MySQLユーザの追加 ボタンをクリックしてください。

１．８　ユーザをほんとに追加しますか？　と、尋ねられますから、MySQLユーザの追加（確定） ボタンをクリックしてください。

１．９　アクセス権未所有のユーザに、◯◯_user の名が現れますから、その横の 追加 ボタンをクリックして、◯◯_user をアクセス権所有ユーザに変えてください。


２．Movable type の設定

例えば、ムームードメインを取得して、X-server でドメインを設定する場合、参考にして頂けそうなサイトのURLを下に記します。

http://www.soft-explanation.org/domain/index.html
http://www.soft-explanation.org/domain/domain-company.html
http://www.soft-explanation.org/domain/domaincheck.html
http://www.soft-explanation.org/domain/mousikomi.html
http://www.soft-explanation.org/domain/pay.html
http://www.soft-explanation.org/domain/syutoku.html
http://www.soft-explanation.org/server/index.html
http://www.soft-explanation.org/server/companychoise.html
http://www.soft-explanation.org/server/x-mousikomi.html
http://www.soft-explanation.org/server/x-set.html
http://www.soft-explanation.org/server/domainset.html
http://www.soft-explanation.org/server/dns.html
http://www.soft-explanation.org/server/access.html

Movable Type 5 のプログラムダウンロードがお済みで、更に独自ドメインの取得、X-server のレンタル契約が済み、X-server でのドメイン設定も済んでいらっしゃるのであれば、次の作業は FTPクライアントソフト を使った Movable type 5 プログラムの X-server へのアップロードです。

Mac で Cyberduck（※１）を使ってアップロードしても、Fire Fox の FTP でアップロードしても良いですが、取りあえず Windows で、FFFTPを使ってアップロードする方法を下に記します。

なお、まさログさんの記事の方が、より的確です。



１．FFFTP の X-server への接続

１．１　FFFTP を起動して下さい。

１．２　「ホスト一覧」の画面で、「新規フォルダ」ボタンをクリックして下さい。

１．３　「ホストの設定」画面が開きますから、「基本」のタグをクリックして下さい。
「ホストの設定名」に、お好みの名前を入力して下さい。　わかりやすい名前でOKです。
「ホスト名（アドレス）」に、X-server の FTPホスト を入力して下さい。　大抵末尾が .xsrv.jp で終わっています。　X-server から受け取ったメールに書かれてあると思います。
「ユーザ名」に、X-server で登録したサーバID（英数半角）を入力して下さい。
「パスワード／パスフレーズ」に、X-server のサーバーの パスワード を入力して下さい。
「ローカル初期フォルダ」では、FFFTP を接続した時に最初に出てくるローカル側のフォルダ指定ができます。　特に指定せずに済ませて良いのであれば、「ローカルの初期フォルダ」に何も入力しなくてOKです。　
「ホストの初期フォルダ」では、ホスト側（転送先 X-server）のフォルダを指定できます。　「ホストの初期フォルダ」にも、特に何も入力しなくてOKです。
anonymous と、「最後にアクセスしたフォルダを次回の初期フォルダとする」のところに、チェックしないでいいでしょう。

１．４　入力が済んだら、「OK」ボタンをクリックして下さい。　「ホストの設定」画面が消えます。

１．５　「ホスト一覧」画面で、「接続」ボタンをクリックして下さい。
無事に接続できたなら、FFFTP の画面の下に、「ファイル一覧の取得は正常終了しました. (○○○ Bytes）」と、表示されます。


２．Movable type 5 の X-server へのアップロード

２．１　 Movable type 5 のプログラムフォルダがある場所を、FFFTPの左側の窓に表示させて下さい。
例えば、 Movable type 5 のプログラムフォルダがデスクトップにあるなら、左側の「フォルダを開いている」アイコンをクリックして、現れる「フォルダ変更（ローカル）」の画面の右の、... のアイコンをクリックして下さい。
「フォルダの参照」の画面が現れるので、デスクトップをクリックして選択してから、「OK」ボタンをクリックして下さい。
「フォルダ変更（ローカル）」画面に戻って、「OK」ボタンをクリックして下さい。
FFFTP の左側の窓に、デスクトップの情報が現れ、そこに Movable type 5 のプログラムフォルダも表示されます。

２．２　FFFTP の右側の窓には、X- server の中の様子が表示されます。
取得済みのドメイン、例えば △△.xsrv.jp のフォルダも見えます。
△△.xsrv.jp のフォルダを左ダブルクリックして下さい。　△△.xsrv.jp のフォルダの中が表示され、幾つかのフォルダの中に混ざって、public_html のフォルダを見つける事ができます。

２．３　public_html をダブルクリックして下さい。　ここが Movable type 5 のプログラムの居場所になります。

２．４　FFFTP の右側の窓の余白で右クリックして、「フォルダ作成」を左クリックして下さい。　「フォルダ作成（ホスト）」と書かれた画面が立ち上がりますから、フォルダ名称を「mt」と入力して、「OK」ボタンをクリックして下さい。

２．５　FFFTP の左側の窓にある、Movable type 5 のプログラムフォルダをダブルクリックして開いて下さい。
続いて、FFFTP の右側の窓に作った、mt のフォルダをダブルクリックして開いて下さい。
FFFTP の左側、Movable type 5 のフォルダの中に13個のフォルダと、17個のファイルがあります。　これら全てを左クリック＋ shift で選択して下さい。
選択した全てを、FFFTPの右の窓の mt のフォルダの中へドラッグして下さい。
Movable type 5 プログラムの、X-server の「mt」フォルダへのアップロードが始まります。
FFFTPのアップロードは遅くて、通信環境によりますが光回線でも10分以上掛かります。

２．６　X-server の mt フォルダへのアップロードが済んだら、無事 Movable type 5 のプログラムのアップロード終了です。

２．７　FFFTP の右側の窓の、mt フォルダ中にある、タイトル末尾が .cgi、あるいは .cgi-original となっているファイルを右クリックして、「属性変更」を選択して下さい。
（Mac だと、-original を消さないと、後で Movable type 5 の設定が出来なかったりしますが、Windows では、名称変更などしなくても設定できます。）

２．８　「属性の変更」の画面が開きますから、右下の「現在の属性」に、「755」と入力して、「OK」ボタンをクリックして下さい。

２．９　全ての .cgi ファイルの属性変更が済んだら、次に、mt-static のフォルダをダブルクリックして開いて下さい。
mt-static の中にある幾つかのフォルダに混じって support フォルダがあるのが見えます。
support フォルダを右クリックして、「属性変更」を選択してください。

２．１０　「属性の変更」の画面が開きますから、右下の「現在の属性」に、「777」と入力して、「OK」ボタンをクリックして下さい。


以上で、Movable type 5 の X-server へのアップロードは終了です。