去年の今頃から先月ぐらいにかけて、大規模なウェブ開発に携わっていました。
続きを読む: 大規模Web開発というもの
ご挨拶
ようこそいらっしゃいませ。
ホームページの運用にあたって、初心者にも分かるように、サイトの更新方法について解説致します。
さしあたって更新に必要なことだけを抽出して解説いたしますので、詳しい知識は専門書にて習得されるようお願い申し上げます。
新着記事
去年の今頃から先月ぐらいにかけて、大規模なウェブ開発に携わっていました。
何か面白いサービスを始めて、利用している人も満足し、作成している側も喜べるようなことをしたい。
そういう感じで搾取される側から脱出したい。
というのはＩＴ関係のエンジニアは誰しも考えている希望と妄想です。
続きを読む: 個人でサービスをはじめたい
グローバルメニューとは、ホームページ内の全てのページで表示されるメニューのことです。
このサイトでは右端にあるメニューがそうです。
ページを新規追加した場合や削除した場合、そのページがグローバルメニューに関わるのであれば、全ページに対してリンクの修正を行わなければいけません。
また、呼び方は違いますが、グローバルメニューと同じようにヘッダーメニュー、フッターメニューというものもあります。
ヘッダーメニューがページ最上部、フッターメニューはページ最下部にあるメニューのことで、全ページに表示されます。
グローバルメニューと異なる点は、サイトのコンテンツとは直接かかわりの無いような内容のもの、例えばメールリンクやプライバシーポリシー、サイトマップなど、どのサイトにもある共通のツールのようなものが配置されることが多いです。
また、サイトによっては無いこともあります。
ページを新規追加した場合にはこれらにも注意しましょう。
＊ページ構成解説図（グローバルメニューが上部に配置されている例）
<a href="リンク先のURLやパス">表示文字</a>
これがリンクを貼るときに書くタグです。
「リンク先のURLやパス」と「表示文字」の部分を書き換えて足してやればリンクを貼ることができます。
例えば下図の場合ではこうなります。
■同階層にあるファイルどうしのリンク
index.html→test.html
「index.html」に以下を書き足す。
<a href="test.html">テストページ</a>
test.html→index.html
「test.html」に以下を書き足す。
<a href="index.html">トップページ</a>
また、下図のようにフォルダーをまたいだ場合にはこうなります。
■異なる階層にあるファイルどうしのリンク
index.html→sita.html
「index.html」に以下を書き足す。
<a href="test/sita.html">テストページ</a>
sita.html→index.html
「sita.html」に以下を書き足す。
<a href="../index.html">トップページ</a>
下階層へはフォルダ名に / でつないで書きます。
上階層へはファイル名の前に ../ を付け足します。
２以上下や上に行くときもそのままつなげます。
３つ下 /layer1/layer2/layer3/contents.html
３つ上 ../../../index.html
「/」はスラッシュ、「.」はドットと呼びます。
■表示文字
<a href="リンク先のURLやパス">表示文字</a>
表示文字はサイトを閲覧する人のために分かり易い言葉を選んで書くものですが、この部分は画像を指定することも出来ます。
画像の指定はこれまでと同様です。
例）
<a href="リンク先のURLやパス"><img src="画像ファイルのパス" alt="代謝文字" width="横幅" height="縦幅"></a>
ページの新規追加はサイト全体に影響を及ぼすことですので、専門家に依頼するのが安全で手っ取り早い場合が多いですが、ほとんど同じ形式や内容である場合に限り、やってみても良いでしょう。
とはいえ、１から作るのはたいへんですので、まず最も似たページのファイルをコピーします。
次にファイル名を変更します。
（右クリック→名前の変更(M)、又は、２回クリック(ダブルクリックではありません）)
名前を変えるときには、拡張子を変えないよう注意しましょう。
ファイルが出来たら中身を書き換えます。
書き換える方法はこれまでの方法と同じですが、以下を追加してください。
【１】タイトル <title> ? </title>
【２】検索キーワード <meta name="keywords" content=" ? " />
【３】紹介文 <meta name="description" content=" ? " />
【１】タイトル
ここに書かれた文字が、ブックマークやブラウザー上部に表示されます。
ページに合った記述をするのが望ましいです。
【２】検索キーワード
Yahoo! や Google 等の検索エンジンが手がかりにする検索文字です。
単語は半角記号のカンマで区切って、全角文字で５００文字以内に収めて下さい。
【３】紹介文
Yahoo! や Google 等の検索エンジンの検索結果に表示される文章です。
全角文字で８０字以内に収めて下さい。
特殊な内容でなければ【２】【３】は全ページ共通で【１】は書き分けていることが多いです。
例）新しい修正箇所
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-script-type" content="text/javascript">
<meta name="keywords" content="WEB製作,サイト製作,IT,ホームページ,サイト,Flash,actionscript,perl,東大阪,デザイン,システム,ウェブ,プログラム,面白い,インコ" />
<meta name="description" content="ウェブインコは低価格でホームページを製作するオフィスです" />
<title>ウェブインコ｜トップページ</title>
<link rel="stylesheet" href="webinko.css" type="text/css">
<script type="text/javascript" src="JavaScriptFlashGateway.js"></script>
<script type="text/javascript" src="attachment.js"></script>
</HEAD>
<BODY>
<div id="bbb">
<script type="text/javascript">
<!--
flashwebinko('100%');
// -->
</script>
</div>
<div id="footer">
Copyright (c) 2007 All Right Reserved WEBINKO
</div>
</BODY>
</HTML>
★ インターネット上でのホームページの住所をＵＲＬと呼びます。
☆ パソコンやサーバー内でのファイルの住所をパスと呼びます。
【ＵＲＬとは】
例えば、http://webinko.com/ とブラウザーに入力すると当オフィスのホームページが表示されます。
この場合、ブラウザーが電話で、ＵＲＬが電話番号だと考えても結構です。
読み方は「ユーアールエル」で、フルスペルは「Uniform Resource Locator」です。
【パスとは】
ファイルを置いている場所を表すという意味ではURLと同じです。
こちらはコンピューターの中でどこにあるのかという意味になります。
Windowsなら「C:\Documents and Settings\ユーザー名\デスクトップ」等となります。
スペルは「path」です。
ホームページのページ間リンクはＵＲＬで書いてもパスで書いても結構です。
通常はＰＣ上で作業をすることからパスで指定することが多いです。
パスで書く時には「C:\Documents and Settings\ユーザー名\?」の部分は省略して「index.html」等のファイル名だけを指定します。
ＵＲＬのことを「絶対パス」と呼ぶことがあります。これに対して、ファイル名だけを指定するのを「相対パス」と呼びます。
（C:\Documents and Settings\ユーザー名\?を全てつけたパスも絶対パスと呼びますが、ホームページ更新では忘れてもらって結構です）
「index.html」について
図例のＵＲＬで、http://webinko.com/ の部分ですが、厳密には http://webinko.com/index.html となります。
ＵＲＬでは index と名のつくものは省略可能なので、省略されることが多いです。
■ディレクトリについて
Windowsで言うところのフォルダーのことをサーバーではディレクトリと呼びます。
呼び方が違うだけですが、良く目にする言葉ですので覚えましょう。
■サーバーについて
よくパソコンとかサーバーとか呼び分けられますが、どちらもコンピューターのことです。
平たく言うと、パソコンが自宅にある小さいコンピューターで、サーバーがどこかの会社にある大きいコンピューターです。
サーバーとは、同じコンピューターでも「データーを保存すること」「要求に応じてデーターの出し入れをすること」「安定していること」の機能に特化したものです。又は、その役割を指す言葉です。
ですので、多少乱暴な言い方をすれば、自宅のパソコンでもサーバーとして利用することは可能です。
しかし、ここではひとまず、インターネットで公開する為のデーターを保存したりする「どこかの会社にある大きいコンピューター」のことを指しているものとします。
これまでは、既存のページについて内容を編集する方法を述べてきました。
ここからは、新しいページを新規に追加する方法を解説します。
単純な構造のホームページでしたら何も難しくはないのですが、ページ同士が綿密にリンクしあっている場合には、新規にページを追加すると、よくリンク漏れが出来てしまいます。
ホームページの構造はそれぞれ違いますので一概には言えませんので、汎用的な注意点を踏まえて説明します。
これらの説明とご自身のホームページとを見比べて作業の手助けにして下さい。
画像を開きます。
ファイル→開く
画像を開いたら、画像の上にカーソルをもってゆき、右クリックをしてメニューを選びます。
右クリック→画像→ｷｬﾝﾊﾞｽサイズ(V)
すると、以下の画面が開きますので、画像のサイズを入力します。
このとき、幅(W): 高さ(E): の右にある鎖をクリックして下さい。
鎖が外れた状態にすると、縦横比を無視して自由にサイズを変更することができます。
幅(W): 高さ(E): を入力
サイズを変更したら、切り取られる部分を指定するために、下のサムネイル画像で調整します。
オフセットの値を入力するか、画像をドラッグします。
決まったら「サイズ変更(R)」をクリックします。
画像ドラッグ→サイズ変更(R)
画像を切り取られる部分の調整（トリミング）は通常の画面からでも以下のようにして行うことができます。
キャンバスサイズの変更が終わったら保存して完了です。
画像ウィンドウのメニューからファイル→保存 又は 別名で保存
では、まず画像を開きます。
ファイル→開く
画像を開いたら、画像の上にカーソルをもってゆき、右クリックをしてメニューを選びます。
右クリック→画像→画像拡大縮小
すると、以下の画面が開きますので、画像のサイズを入力します。
幅(W): か 高さ(E): のどちらかを入力すると自動的に縦横比を維持したまま縮小拡大します。
幅(W): か 高さ(E): のどちらかを入力→拡大縮小(S)
↑の幅、高さの値が <img src="?"> の width="" height="" に入力する値です。
画像の縮小が終わったら保存して完了です。
画像ウィンドウのメニューからファイル→保存 又は 別名で保存
今のところ無料で最も性能が良いのがGIMPです。これをインストールしてみましょう。
「GIMP」で検索すればダウンロードできることこはいくつも見つかりますが、ひとまず以下のところからダウンロードしてインストールして下さい。
http://www.geocities.jp/gimproject2/download/gimp-download.html
通常版 GIMP2.4 （インストール必要）
ファイルを解凍したら、gimp-2.4.5-i686-setup.exe をダブルクリックでインストールが始まります。
Next→Next→Installnow→Finish
イストールが終了するとアイコンができますので、それをダブルクリックして起動し、以下のようなメニューがでればＯＫです。
※解凍について：WindowsXPならダブルクリックで解凍できますが、出来ない場合は以下で解凍ソフトをダウンロードしてインストールしてください。
+Lhaca
http://park8.wakwak.com/~app/Lhaca/
リンク
