<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>インコのサイト運用入門</title>
    <link rel="alternate" type="text/html" href="http://webinko.com/blog/" />
    <link rel="self" type="application/atom+xml" href="http://webinko.com/blog/atom.xml" />
    <id>tag:webinko.com,2011-05-27:/blog//6</id>
    <updated>2011-06-30T16:40:40Z</updated>
    
    <generator uri="http://www.sixapart.com/movabletype/">Movable Type Pro 5.01</generator>

<entry>
    <title>大規模Web開発というもの</title>
    <link rel="alternate" type="text/html" href="http://webinko.com/blog/2011/06/web.html" />
    <id>tag:webinko.com,2011:/blog//6.98</id>

    <published>2011-06-27T10:54:28Z</published>
    <updated>2011-06-30T16:40:40Z</updated>

    <summary> 　去年の今頃から先月ぐらいにかけて、大規模なウェブ開発に携わっていました。...</summary>
    <author>
        <name>webinko</name>
        <uri>http://webinko.com</uri>
    </author>
    
        <category term="管理者日記" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://webinko.com/blog/">
        <![CDATA[<img alt="20110630.png" src="http://webinko.com/blog/20110630.png" class="mt-image-none" style="" height="250" width="640" /> <div><br />　去年の今頃から先月ぐらいにかけて、大規模なウェブ開発に携わっていました。<br /></div>]]>
        <![CDATA[　途中、別件のＥＣシステムも掛け持ちでした（というか一時的に抜けさせて頂いた）。<br />　どちらもテレビＣＭも出しているレベルのもので、私ごときには分不相応なものでしたが、ＥＣシステムの方は運よく大したトラブルもなく収めることができました。<br />　しかし、もう一つの方がそうとう手強かったです。<br />　そちらは、複数人で取り掛かったプロジェクトで、いわゆる大規模運営のサイトでした。<br /><br />　大規模になるとシステムに思いもよらないような不可解な事象が発症します。<br />　ＩＴ技術は日々進化しており、通常のサイトやシステムであれば、セオリー以外のことはあまり意識しなくてもちゃんと動くものができるのですが、大規模になるとセオリー以外のこと、つまり、チュートリアルに書いてないことがいろいろ起こってきます。<br />　ある程度は高負荷を予想して構築し、テストもＯＫ、いざオープンとなるのですが、予想を上回る負荷が発生し、なおかつ見聞き知った事には無い現象が起きます。ググってもヒットしないような。<br />　そういうときは、ベテランほど罠にかかりやすく、いったん頭をリセットして思いもよらないところから疑ってかからないといけないことがチラホラありますが、なかなか難しいようです。<br />　なので、経験者や実際に運用している人たちでも分からない事はあり、未知との遭遇をするはめになったときには行き詰るという事を大前提でプロジェクトを進めるべきだと言えます。言える権限があればの話ですが。また、言える事情であるかも大問題ですが。<br />　ついでに痛感したものの１つで、去年ぐらいから出始めているクラウドですが、けっこう、なんちゃってクラウド＋なんちゃって営業が多いです。信用してはいけません。<br />　などと、紆余曲折したもののなんとか安定稼働にこぎつけました。<br /><br />　独立したときには、できればシステム案件は受けない方向で、もちろん大規模など論外、と考えていたのですが、今回の件であまり気にならなくなりました。最終的に詳しくなりました。そういう点でクライアントには感謝です。<br />　今更ですが、もっとあの時できていれば良かったのに、と打ちのめされた感が強く押し寄せてきています。<br /><br />　それにしても、システムを請け負うと頭と胃が痛くなることがあるので避けれるものなら避けたいと考えていたのですが、ほとんどシステム絡みの案件しかしていないというのが現実です。<br />　お金を貰ってスキルがどんどん上がるので嬉しい限りですが、もう関係者は誰もWEBINKOがデザインするところとは全く思っていないように感じます。<br />　とか、この不景気なご時世にこんな愚痴を言っていてはバチが当たりますね。<br />　ごめんなさい神様（←ＩＴらしからぬ非科学的発言）。]]>
    </content>
</entry>

<entry>
    <title>個人でサービスをはじめたい</title>
    <link rel="alternate" type="text/html" href="http://webinko.com/blog/2008/10/post-26.html" />
    <id>tag:www.webinko.com,2008:/blog//6.65</id>

    <published>2008-10-16T05:27:20Z</published>
    <updated>2011-05-27T05:27:54Z</updated>

    <summary>  　何か面白いサービスを始めて、利用している人も満足し、作成している側も喜べる...</summary>
    <author>
        <name>webinko</name>
        <uri>http://webinko.com</uri>
    </author>
    
        <category term="管理者日記" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://webinko.com/blog/">
        <![CDATA[<p> <img alt="20081016.png" src="http://webinko.com/blog/20081016.png" width="500" height="300" /><br />
　何か面白いサービスを始めて、利用している人も満足し、作成している側も喜べるようなことをしたい。<br />
　そういう感じで搾取される側から脱出したい。<br />
　というのはＩＴ関係のエンジニアは誰しも考えている希望と妄想です。</p>]]>
        <![CDATA[<p>　その際、よく言われることで、ＩＴに限ったことではないのですが以下の２点。</p>

<p>1)「ものが良いだけではビジネスにならない」<br />
2)「ものが秀逸なら利益は後からついてくる」</p>

<p>　矛盾しているようでしていない意見だと思います。<br />
　1)に関しては、宣伝・営業力と需要の有無を視野にいれなければいけないということ。<br />
　2)に関しては、1)について最低ラインはクリアしたうえでの話であるということ。<br />
　顔より性格という場合に、それでも妥協し得る最低ラインの顔は必要、というのと似ています。<br />
　腕は良いのにサービスを開始する親分になれないエンジニアが大半なのは、1)の解決が出来ないからです。<br />
　というわけで、1)と2)を肝に銘じて新しいサービスを考える場合、更なる壁があります。<br />
　それはやっぱり資金。<br />
　ＩＴなんてパソコンだけあればいいわけで、材料も工場も人もいらないし資金は要らないと思われがちですがそうではありません。<br />
　確かに、目に見えた材料も場所も要りませんので、既にスキルがあるのなら他より準備金は少なくて済みますが、サービスで食べていけるまでの生活費は必要です。また、利益になって返ってくるまでの期間が長いです。また、勉強するところから始めるのであれば、どれぐらい大変か分かりません。<br />
　なので、利益が後からついてくるまで持ちこたえるだけの体力が必要になります。<br />
　或いは、最初から直ぐに利益が出ることが約束されているようなものを開始するしかありません。<br />
　しかし、そんな都合の良い約束などそうそうないのは言うまでもありません。<br />
　大企業は体力があるので、いろんな試みをしてみて失敗しても他で補うことが出来ますが、小規模なところや個人では困難です。そして、たまたま一発目で当たったとしても、大企業が後から類似品で参入してきたら競争に負けて終了です。（そういうときはうまくサービスを売却すべきでしょうね）いずれにしても短い命です。<br />
　そういうことからＩＴドリームは有りそうで極稀です。<br />
　宝くじ高額当選者より少ないです。</p>

<p>　それでも私は日々何か良いアイディアはないか試行錯誤し続けています。<br />
　例えば、少しずつ実験的にサイトをオープンしては反応を見ています。<br />
　大きな当たりは今のところ無いのですが、それでももがいているうちに、新しい種類のお仕事も継続して頂けるようになりました。<br />
　あくまで副業レベルのもので、到底食べていけるようなものでは有りませんが、まあ、小さいことからでも実になったことを喜んでいます。<br />
　そのうち本当に、利用している人も満足し、作成している側も喜べるようなことにたどり着ければと思います。そのときはまたよろしくお願いします。</p>]]>
    </content>
</entry>

<entry>
    <title>グローバルメニューについて</title>
    <link rel="alternate" type="text/html" href="http://webinko.com/blog/2008/03/post-25.html" />
    <id>tag:www.webinko.com,2008:/blog//6.64</id>

    <published>2008-03-03T05:26:42Z</published>
    <updated>2011-05-27T05:27:07Z</updated>

    <summary>　グローバルメニューとは、ホームページ内の全てのページで表示されるメニューのこと...</summary>
    <author>
        <name>webinko</name>
        <uri>http://webinko.com</uri>
    </author>
    
        <category term="5-4.グローバルメニューについて" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://webinko.com/blog/">
        <![CDATA[<p>　グローバルメニューとは、ホームページ内の全てのページで表示されるメニューのことです。<br />
　このサイトでは右端にあるメニューがそうです。</p>

<p>　ページを新規追加した場合や削除した場合、そのページがグローバルメニューに関わるのであれば、全ページに対してリンクの修正を行わなければいけません。</p>

<p>　また、呼び方は違いますが、グローバルメニューと同じようにヘッダーメニュー、フッターメニューというものもあります。<br />
　ヘッダーメニューがページ最上部、フッターメニューはページ最下部にあるメニューのことで、全ページに表示されます。<br />
　グローバルメニューと異なる点は、サイトのコンテンツとは直接かかわりの無いような内容のもの、例えばメールリンクやプライバシーポリシー、サイトマップなど、どのサイトにもある共通のツールのようなものが配置されることが多いです。<br />
　また、サイトによっては無いこともあります。<br />
　ページを新規追加した場合にはこれらにも注意しましょう。</p>

<p><br />
＊ページ構成解説図（グローバルメニューが上部に配置されている例）<br />
<img alt="200804083.png" src="http://webinko.com/blog/200804083.png" width="388" height="362" /></p>]]>
        
    </content>
</entry>

<entry>
    <title>リンクを追加する</title>
    <link rel="alternate" type="text/html" href="http://webinko.com/blog/2008/03/post-24.html" />
    <id>tag:www.webinko.com,2008:/blog//6.63</id>

    <published>2008-03-03T05:26:09Z</published>
    <updated>2011-05-27T13:08:02Z</updated>

    <summary><![CDATA[&lt;a href="リンク先のURLやパス"&gt;表示文字&lt;/a&g...]]></summary>
    <author>
        <name>webinko</name>
        <uri>http://webinko.com</uri>
    </author>
    
        <category term="5-3.リンクを追加する" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://webinko.com/blog/">
        <![CDATA[<p><b><font color="#ff7733" size="+1">&lt;a href="リンク先のURLやパス"&gt;表示文字&lt;/a&gt;</font></b></p>

<p>　これがリンクを貼るときに書くタグです。<br />
　「<font color="#ff7733">リンク先のURLやパス</font>」と「<font color="#ff7733">表示文字</font>」の部分を書き換えて足してやればリンクを貼ることができます。</p>

<p>　例えば下図の場合ではこうなります。</p>

<p>■同階層にあるファイルどうしのリンク</p>

<p><font color="#ff7733">index.html→test.html</font><br />
「index.html」に以下を書き足す。<br />
&lt;a href="<font color="#ff7733">test.html</font>"&gt;<font color="#ff7733">テストページ</font>&lt;/a&gt;</p>

<p><font color="#ff7733">test.html→index.html</font><br />
「test.html」に以下を書き足す。<br />
&lt;a href="<font color="#ff7733">index.html</font>"&gt;<font color="#ff7733">トップページ</font>&lt;/a&gt;<br />
<img alt="200804081.png" src="http://webinko.com/blog/200804081.png" width="281" height="226" /></p>

<p>　また、下図のようにフォルダーをまたいだ場合にはこうなります。</p>

<p>■異なる階層にあるファイルどうしのリンク</p>

<p><font color="#ff7733">index.html→sita.html</font><br />
「index.html」に以下を書き足す。<br />
&lt;a href="<font color="#ff7733">test/sita.html</font>"&gt;<font color="#ff7733">テストページ</font>&lt;/a&gt;</p>

<p><font color="#ff7733">sita.html→index.html</font><br />
「sita.html」に以下を書き足す。<br />
&lt;a href="<font color="#ff7733">../index.html</font>"&gt;<font color="#ff7733">トップページ</font>&lt;/a&gt;<br />
<img alt="200804082.png" src="http://webinko.com/blog/200804082.png" width="367" height="441" /></p>

<p>　下階層へはフォルダ名に <font color="#ff7733" size="+1">/</font> でつないで書きます。<br />
　上階層へはファイル名の前に <font color="#ff7733" size="+1">../</font> を付け足します。</p>

<p>　２以上下や上に行くときもそのままつなげます。</p>

<p>　　３つ下　/layer1/layer2/layer3/contents.html</p>

<p>　　３つ上　../../../index.html</p>

<p>　「/」はスラッシュ、「.」はドットと呼びます。</p>

<p>■表示文字<br />
　<b>&lt;a href="リンク先のURLやパス"&gt;<font color="#ff7733">表示文字</font>&lt;/a&gt;</b></p>

<p>　表示文字はサイトを閲覧する人のために分かり易い言葉を選んで書くものですが、この部分は画像を指定することも出来ます。<br />
　画像の指定はこれまでと同様です。</p>

<p>　例）<br />
&lt;a href="リンク先のURLやパス"&gt;<font color="#ff7733">&lt;img src="画像ファイルのパス" alt="代謝文字" width="横幅" height="縦幅"&gt;</font>&lt;/a&gt;<b/></p>]]>
        
    </content>
</entry>

<entry>
    <title>ページを追加する</title>
    <link rel="alternate" type="text/html" href="http://webinko.com/blog/2008/03/post-23.html" />
    <id>tag:www.webinko.com,2008:/blog//6.62</id>

    <published>2008-03-03T05:25:38Z</published>
    <updated>2011-05-27T05:26:01Z</updated>

    <summary> 　ページの新規追加はサイト全体に影響を及ぼすことですので、専門家に依頼するのが...</summary>
    <author>
        <name>webinko</name>
        <uri>http://webinko.com</uri>
    </author>
    
        <category term="5-2.ページを追加する" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://webinko.com/blog/">
        <![CDATA[<p> 　ページの新規追加はサイト全体に影響を及ぼすことですので、専門家に依頼するのが安全で手っ取り早い場合が多いですが、ほとんど同じ形式や内容である場合に限り、やってみても良いでしょう。</p>

<p>　とはいえ、１から作るのはたいへんですので、まず最も似たページのファイルをコピーします。<br />
　次にファイル名を変更します。<br />
　（右クリック→名前の変更(M)、又は、２回クリック(ダブルクリックではありません）)<br />
　名前を変えるときには、拡張子を変えないよう注意しましょう。</p>

<p><img alt="2008040074.png" src="http://webinko.com/blog/2008040074.png" width="357" height="326" /></p>

<p>　ファイルが出来たら中身を書き換えます。<br />
　書き換える方法はこれまでの方法と同じですが、以下を追加してください。</p>

<p>【１】タイトル　&lt;title&gt; ? &lt;/title&gt;<br />
【２】検索キーワード　&lt;meta name="keywords" content=" ? " /&gt;<br />
【３】紹介文　&lt;meta name="description" content=" ? " /&gt;</p>

<p>【１】タイトル<br />
　ここに書かれた文字が、ブックマークやブラウザー上部に表示されます。<br />
　ページに合った記述をするのが望ましいです。<br />
【２】検索キーワード<br />
　Yahoo! や Google 等の検索エンジンが手がかりにする検索文字です。<br />
　単語は半角記号のカンマで区切って、全角文字で５００文字以内に収めて下さい。<br />
【３】紹介文<br />
　Yahoo! や Google 等の検索エンジンの検索結果に表示される文章です。<br />
　全角文字で８０字以内に収めて下さい。</p>

<p>　特殊な内容でなければ【２】【３】は全ページ共通で【１】は書き分けていることが多いです。</p>

<p><br />
例）<font color="#ff7733">新しい修正箇所</font></p>

<p>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;<br />
&lt;html lang="ja"&gt;<br />
&lt;head&gt;<br />
&lt;meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS />
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;<br />
&lt;meta http-equiv="Content-script-type" content="text/javascript"&gt;<br />
&lt;meta name="keywords" content="<font color="#ff7733">WEB製作,サイト製作,IT,ホームページ,サイト,Flash,actionscript,perl,東大阪,デザイン,システム,ウェブ,プログラム,面白い,インコ</font>" /&gt;<br />
&lt;meta name="description" content="<font color="#ff7733">ウェブインコは低価格でホームページを製作するオフィスです</font>" /&gt;</p>

<p>&lt;title&gt;<font color="#ff7733">ウェブインコ｜トップページ</font>&lt;/title&gt;<br />
&lt;link rel="stylesheet" href="webinko.css" type="text/css"&gt;<br />
&lt;script type="text/javascript" src="JavaScriptFlashGateway.js"&gt;&lt;/script&gt;<br />
&lt;script type="text/javascript" src="attachment.js"&gt;&lt;/script&gt;<br />
&lt;/HEAD&gt;<br />
&lt;BODY&gt;</p>

<p>&lt;div id="bbb"&gt;<br />
&lt;script type="text/javascript"&gt;<br />
&lt;!--<br />
flashwebinko('100%');<br />
// --&gt;<br />
&lt;/script&gt;<br />
&lt;/div&gt;</p>

<p>&lt;div id="footer"&gt;<br />
Copyright (c) 2007 All Right Reserved WEBINKO<br />
&lt;/div&gt;<br />
&lt;/BODY&gt;<br />
&lt;/HTML&gt;</p>]]>
        
    </content>
</entry>

<entry>
    <title>URL、パスについて</title>
    <link rel="alternate" type="text/html" href="http://webinko.com/blog/2008/03/url.html" />
    <id>tag:www.webinko.com,2008:/blog//6.61</id>

    <published>2008-03-03T05:25:01Z</published>
    <updated>2011-05-27T05:25:29Z</updated>

    <summary> ★ インターネット上でのホームページの住所をＵＲＬと呼びます。 ☆ パソコンや...</summary>
    <author>
        <name>webinko</name>
        <uri>http://webinko.com</uri>
    </author>
    
        <category term="5-1.URL、パスについて" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://webinko.com/blog/">
        <![CDATA[<p> ★ インターネット上でのホームページの住所をＵＲＬと呼びます。<br />
☆ パソコンやサーバー内でのファイルの住所をパスと呼びます。</p>

<p><font color="#ff7733">【ＵＲＬとは】</font><br />
　例えば、http://webinko.com/ とブラウザーに入力すると当オフィスのホームページが表示されます。<br />
　この場合、ブラウザーが電話で、ＵＲＬが電話番号だと考えても結構です。<br />
　読み方は「ユーアールエル」で、フルスペルは「Uniform Resource Locator」です。</p>

<p><font color="#ff7733">【パスとは】</font><br />
　ファイルを置いている場所を表すという意味ではURLと同じです。<br />
　こちらはコンピューターの中でどこにあるのかという意味になります。<br />
　Windowsなら「C:\Documents and Settings\ユーザー名\デスクトップ」等となります。<br />
　スペルは「path」です。</p>

<p><img alt="200804072.png" src="http://webinko.com/blog/200804072.png" width="500" height="450" /><br />
<img alt="200804073.png" src="http://webinko.com/blog/200804073.png" width="500" height="330" /></p>

<p>　ホームページのページ間リンクはＵＲＬで書いてもパスで書いても結構です。<br />
　通常はＰＣ上で作業をすることからパスで指定することが多いです。<br />
　パスで書く時には「C:\Documents and Settings\ユーザー名\?」の部分は省略して「index.html」等のファイル名だけを指定します。</p>

<p>　ＵＲＬのことを「<font color="#ff7733">絶対パス</font>」と呼ぶことがあります。これに対して、ファイル名だけを指定するのを「<font color="#ff7733">相対パス</font>」と呼びます。<br />
（C:\Documents and Settings\ユーザー名\?を全てつけたパスも絶対パスと呼びますが、ホームページ更新では忘れてもらって結構です）</p>

<p>「index.html」について<br />
　図例のＵＲＬで、<font color="#ff7733">http://webinko.com/</font> の部分ですが、厳密には <font color="#ff7733">http://webinko.com/index.html</font> となります。<br />
　ＵＲＬでは index と名のつくものは省略可能なので、省略されることが多いです。</p>

<p>■ディレクトリについて<br />
　Windowsで言うところのフォルダーのことをサーバーではディレクトリと呼びます。<br />
　呼び方が違うだけですが、良く目にする言葉ですので覚えましょう。</p>

<p>■サーバーについて<br />
　よくパソコンとかサーバーとか呼び分けられますが、どちらもコンピューターのことです。<br />
　平たく言うと、パソコンが自宅にある小さいコンピューターで、サーバーがどこかの会社にある大きいコンピューターです。<br />
　サーバーとは、同じコンピューターでも「データーを保存すること」「要求に応じてデーターの出し入れをすること」「安定していること」の機能に特化したものです。又は、その役割を指す言葉です。<br />
　ですので、多少乱暴な言い方をすれば、自宅のパソコンでもサーバーとして利用することは可能です。<br />
　しかし、ここではひとまず、インターネットで公開する為のデーターを保存したりする「どこかの会社にある大きいコンピューター」のことを指しているものとします。</p>]]>
        
    </content>
</entry>

<entry>
    <title>手順２</title>
    <link rel="alternate" type="text/html" href="http://webinko.com/blog/2008/03/post-22.html" />
    <id>tag:www.webinko.com,2008:/blog//6.60</id>

    <published>2008-03-03T05:24:22Z</published>
    <updated>2011-05-27T05:24:46Z</updated>

    <summary>  　これまでは、既存のページについて内容を編集する方法を述べてきました。 　こ...</summary>
    <author>
        <name>webinko</name>
        <uri>http://webinko.com</uri>
    </author>
    
        <category term="5.手順２" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://webinko.com/blog/">
        <![CDATA[<p> <img alt="200804071.png" src="http://webinko.com/blog/200804071.png" width="500" height="200" /></p>

<p>　これまでは、既存のページについて内容を編集する方法を述べてきました。<br />
　ここからは、新しいページを新規に追加する方法を解説します。<br />
　単純な構造のホームページでしたら何も難しくはないのですが、ページ同士が綿密にリンクしあっている場合には、新規にページを追加すると、よくリンク漏れが出来てしまいます。<br />
　ホームページの構造はそれぞれ違いますので一概には言えませんので、汎用的な注意点を踏まえて説明します。<br />
　これらの説明とご自身のホームページとを見比べて作業の手助けにして下さい。</p>]]>
        
    </content>
</entry>

<entry>
    <title>余分な部分を切り取る</title>
    <link rel="alternate" type="text/html" href="http://webinko.com/blog/2008/03/post-21.html" />
    <id>tag:www.webinko.com,2008:/blog//6.59</id>

    <published>2008-03-03T05:23:48Z</published>
    <updated>2011-05-27T05:24:14Z</updated>

    <summary> 　画像を開きます。 　ファイル→開く 　画像を開いたら、画像の上にカーソルをも...</summary>
    <author>
        <name>webinko</name>
        <uri>http://webinko.com</uri>
    </author>
    
        <category term="4-4-3.余分な部分を切り取る" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://webinko.com/blog/">
        <![CDATA[<p> 　画像を開きます。<br />
　<span style="color:#f60">ファイル→開く</span></p>

<p>　画像を開いたら、画像の上にカーソルをもってゆき、右クリックをしてメニューを選びます。<br />
　<span style="color:#f60">右クリック→画像→ｷｬﾝﾊﾞｽサイズ(V)</span><br />
<img alt="200803151.png" src="http://webinko.com/blog/200803151.png" width="491" height="293" /></p>

<p>　すると、以下の画面が開きますので、画像のサイズを入力します。<br />
　このとき、幅(W):  高さ(E): の右にある鎖をクリックして下さい。<br />
　鎖が外れた状態にすると、縦横比を無視して自由にサイズを変更することができます。<br />
　<span style="color:#f60">幅(W):  高さ(E): を入力</span><br />
<img alt="200803152.png" src="http://webinko.com/blog/200803152.png" width="396" height="446" /></p>

<p>　サイズを変更したら、切り取られる部分を指定するために、下のサムネイル画像で調整します。<br />
　オフセットの値を入力するか、画像をドラッグします。<br />
　決まったら「サイズ変更(R)」をクリックします。<br />
　<span style="color:#f60">画像ドラッグ→サイズ変更(R)</span><br />
<img alt="200803153.png" src="http://webinko.com/blog/200803153.png" width="462" height="371" /></p>

<p>　画像を切り取られる部分の調整（トリミング）は通常の画面からでも以下のようにして行うことができます。<br />
<img alt="200803154.png" src="http://webinko.com/blog/200803154.png" width="471" height="453" /></p>

<p>　キャンバスサイズの変更が終わったら保存して完了です。<br />
　画像ウィンドウのメニューから<span style="color:#f60">ファイル→保存 又は 別名で保存</span><br />
<img alt="200803155.png" src="http://webinko.com/blog/200803155.png" width="438" height="398" /></p>]]>
        
    </content>
</entry>

<entry>
    <title>画像を縮小する</title>
    <link rel="alternate" type="text/html" href="http://webinko.com/blog/2008/03/post-20.html" />
    <id>tag:www.webinko.com,2008:/blog//6.58</id>

    <published>2008-03-03T05:23:19Z</published>
    <updated>2011-05-27T05:23:40Z</updated>

    <summary> 　では、まず画像を開きます。 　ファイル→開く 　画像を開いたら、画像の上にカ...</summary>
    <author>
        <name>webinko</name>
        <uri>http://webinko.com</uri>
    </author>
    
        <category term="4-4-2.画像を縮小する" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://webinko.com/blog/">
        <![CDATA[<p> 　では、まず画像を開きます。<br />
　<span style="color:#f60">ファイル→開く</span><br />
<img alt="200803143.png" src="http://webinko.com/blog/200803143.png" width="283" height="321" /></p>

<p>　画像を開いたら、画像の上にカーソルをもってゆき、右クリックをしてメニューを選びます。<br />
　<span style="color:#f60">右クリック→画像→画像拡大縮小</span><br />
<img alt="200803144.png" src="http://webinko.com/blog/200803144.png" width="500" height="400" /></p>

<p>　すると、以下の画面が開きますので、画像のサイズを入力します。<br />
　幅(W): か 高さ(E): のどちらかを入力すると自動的に縦横比を維持したまま縮小拡大します。<br />
　<span style="color:#f60">幅(W): か 高さ(E): のどちらかを入力→拡大縮小(S)</span><br />
<img alt="200803145.png" src="http://webinko.com/blog/200803145.png" width="399" height="313" /><br />
　↑の幅、高さの値が &lt;img src="?"&gt; の width="" height="" に入力する値です。</p>

<p>　画像の縮小が終わったら保存して完了です。<br />
　画像ウィンドウのメニューから<span style="color:#f60">ファイル→保存 又は 別名で保存</span><br />
<img alt="200803146.png" src="http://webinko.com/blog/200803146.png" width="500" height="400" /></p>]]>
        
    </content>
</entry>

<entry>
    <title>GIMPをインストールする</title>
    <link rel="alternate" type="text/html" href="http://webinko.com/blog/2008/03/gimp.html" />
    <id>tag:www.webinko.com,2008:/blog//6.57</id>

    <published>2008-03-03T05:22:43Z</published>
    <updated>2011-05-27T05:23:09Z</updated>

    <summary> 　今のところ無料で最も性能が良いのがGIMPです。これをインストールしてみまし...</summary>
    <author>
        <name>webinko</name>
        <uri>http://webinko.com</uri>
    </author>
    
        <category term="4-4-1.GIMPをインストールする" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://webinko.com/blog/">
        <![CDATA[<p> 　今のところ無料で最も性能が良いのがGIMPです。これをインストールしてみましょう。<br />
　「GIMP」で検索すればダウンロードできることこはいくつも見つかりますが、ひとまず以下のところからダウンロードしてインストールして下さい。</p>

<p><a href="http://www.geocities.jp/gimproject2/download/gimp-download.html" target="_blank">http://www.geocities.jp/gimproject2/download/gimp-download.html</a><br />
通常版 GIMP2.4 （インストール必要）</p>

<p><img alt="200803141.png" src="http://webinko.com/blog/200803141.png" width="317" height="263" /></p>

<p>　ファイルを解凍したら、gimp-2.4.5-i686-setup.exe をダブルクリックでインストールが始まります。<br />
　Next→Next→Installnow→Finish </p>

<p>　イストールが終了するとアイコンができますので、それをダブルクリックして起動し、以下のようなメニューがでればＯＫです。</p>

<p><img alt="200803142.png" src="http://webinko.com/blog/200803142.png" width="470" height="243" /></p>

<p>※解凍について：WindowsXPならダブルクリックで解凍できますが、出来ない場合は以下で解凍ソフトをダウンロードしてインストールしてください。<br />
+Lhaca<br />
<a href="http://park8.wakwak.com/~app/Lhaca/" target="_blank">http://park8.wakwak.com/~app/Lhaca/</a></p>]]>
        
    </content>
</entry>

<entry>
    <title>画像を加工する</title>
    <link rel="alternate" type="text/html" href="http://webinko.com/blog/2008/03/post-19.html" />
    <id>tag:www.webinko.com,2008:/blog//6.56</id>

    <published>2008-03-03T05:22:02Z</published>
    <updated>2011-05-27T05:22:23Z</updated>

    <summary> 　画像の差し替えのところで触れませんでしたが、画像を差し替える前には当然のこと...</summary>
    <author>
        <name>webinko</name>
        <uri>http://webinko.com</uri>
    </author>
    
        <category term="4-4.画像を加工する" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://webinko.com/blog/">
        <![CDATA[<p> 　画像の差し替えのところで触れませんでしたが、画像を差し替える前には当然のことながら画像を用意しなければいけません。<br />
　携帯で撮るにせよデジカメで撮るにせよ、画像サイズが意図したものとは異なる場合があると思います。<br />
　画像加工ソフトにはいろんなものがあります。ご自身で使い慣れたものがあればそれで良いのですが、なかなか触れる機会がなくて知らないのが普通です。<br />
　ですので、簡単にではありますが画像加工ソフトの説明をしたいと思います。</p>

<p><img alt="200803140.png" src="http://webinko.com/blog/200803140.png" width="323" height="456" /></p>]]>
        
    </content>
</entry>

<entry>
    <title>文字の線を太くする</title>
    <link rel="alternate" type="text/html" href="http://webinko.com/blog/2008/03/post-18.html" />
    <id>tag:www.webinko.com,2008:/blog//6.55</id>

    <published>2008-03-03T05:21:16Z</published>
    <updated>2011-05-27T05:21:38Z</updated>

    <summary><![CDATA[ 　文字の線を太くするには以下のようにします。 　１．　文字の前後を&lt;sp...]]></summary>
    <author>
        <name>webinko</name>
        <uri>http://webinko.com</uri>
    </author>
    
        <category term="4-3.文字の線を太くする" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://webinko.com/blog/">
        <![CDATA[<p> 　文字の線を太くするには以下のようにします。</p>

<p>　１．　文字の前後を<span style="color:#f60;">&lt;span style="font-weight:<span style="color:#f0f;">bold</span>;"&gt;</span><span style="color:#00f;font-weight:bold;">←この記号→</span><span style="color:#f60;">&lt;/span&gt;</span>で挟みます</p>

<p>　これまで文字の色や大きさを変えたときに使用した <span style="color:#f60;">&lt;span style="?"&gt;</span> ですが、styleの中身は ; で区切って並べることがかのうです。<br />
　例えば以下のようになります。</p>

<p>　いろいろ<span style="color:#f60;">&lt;span style="color:#<span style="color:#f0f;">0000ff</span>; font-size:<span style="color:#f0f;">larger</span>;font-weight:<span style="color:#f0f;">bold</span>;"&gt;</span><span style="color:#00f;font-size:large;font-weight:bold">複合した場合</span><span style="color:#f60;">&lt;/span&gt;</span>の例</p>

<p>まとめ</p>

<p>style="の中身↓"<br />
<span style="color:#ff6600"><br />
color:#　　文字色<br />
font-size:　　文字サイズ<br />
font-weight:　　太文字<br />
</span></p>]]>
        
    </content>
</entry>

<entry>
    <title>文字の大きさを変える</title>
    <link rel="alternate" type="text/html" href="http://webinko.com/blog/2008/03/post-17.html" />
    <id>tag:www.webinko.com,2008:/blog//6.54</id>

    <published>2008-03-03T05:20:46Z</published>
    <updated>2011-05-27T05:21:08Z</updated>

    <summary> 　文字の大きさ部分的に変えるには２つ方法があります。 　１．　文字の前後を&amp;l...</summary>
    <author>
        <name>webinko</name>
        <uri>http://webinko.com</uri>
    </author>
    
        <category term="4-2.文字の大きさを変える" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://webinko.com/blog/">
        <![CDATA[<p> 　文字の大きさ部分的に変えるには２つ方法があります。</p>

<p>　１．　文字の前後を<span style="color:#f60;">&lt;span style="font-size:<span style="color:#f0f;">large</span>;"&gt;</span><span style="color:#00f;font-size:large;">←この記号→</span><span style="color:#f60;">&lt;/span&gt;</span>で挟みます</p>

<p>　２．　文字の前後を<span style="color:#f60;">&lt;font size="#<span style="color:#f0f;">14</span>"&gt;</span><span style="color:#00f;font-size:14pt;">←この記号→</span><span style="color:#f60;">&lt;/font&gt;</span>で挟みます</p>

<p>　このうち、２．の方法では変わらないときがあるので、１．の方法を覚えて下さい。</p>

<p>　<span style="color:#f60;">&lt;span style="font-size:<span style="color:#f0f;">large</span>;"&gt;&lt;/span&gt;</span></p>

<p>　この中で、<span style="color:#f0f;">large</span> が大きさを表します。<br />
　この値は色々な指定方法があり、以下のようになります。</p>

<p>　<span style="color:#f90; font-weight: bold;">【大きさ見本例】</span></p>

<p>　<span style="font-size:xx-small">xx-small　　　非常に小さいサイズ</span><br />
　<span style="font-size:x-small">x-small　　　小さいサイズ</span><br />
　<span style="font-size:small">small　　　やや小さいサイズ</span><br />
　<span style="font-size:medium">medium　　　普通サイズ</span><br />
　<span style="font-size:large">large　　　やや大きいサイズ</span><br />
　<span style="font-size:x-large">x-large　　　大きいサイズ</span><br />
　<span style="font-size:smaller">smaller　　　親要素に対して小さくサイズ</span><br />
　<span style="font-size:larger">larger　　　親要素に対して大きいサイズ</span><br />
　<span style="font-size:medium">mm、cm、in、pt、pc、em、ex、px　　　サイズ指定</span><br />
　<span style="font-size:%">%　　　%指定</span></p>

<p>　mm、cm、in、pt、pc、em、ex、px、% の詳細は以下の通りです。</p>

<p>　mm　　ミリメートル<br />
　cm　　センチメートル<br />
　in　　インチ<br />
　pt　　ポイント<br />
　pc　　パイカ(1pc = 12pt)<br />
　em　　英字の「M」の高さを基準とした大きさ<br />
　ex　　英字の「x」の高さを基準とした大きさ<br />
　px　　ピクセル、画面のピクセルとなります<br />
　% 　　パーセント、画面サイズや親要素に対する割合となります。</p>

<p>　smaller（小さい）、larger（大きい）あたりが無難だと思います。</p>]]>
        
    </content>
</entry>

<entry>
    <title>文字の色を変える</title>
    <link rel="alternate" type="text/html" href="http://webinko.com/blog/2008/03/post-16.html" />
    <id>tag:www.webinko.com,2008:/blog//6.53</id>

    <published>2008-03-03T05:20:17Z</published>
    <updated>2011-05-27T05:20:38Z</updated>

    <summary> 　文字の色を部分的に変えるには２つ方法があります。 　１．　文字の前後を&amp;lt...</summary>
    <author>
        <name>webinko</name>
        <uri>http://webinko.com</uri>
    </author>
    
        <category term="4-1.文字の色を変える" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://webinko.com/blog/">
        <![CDATA[<p> 　文字の色を部分的に変えるには２つ方法があります。</p>

<p>　１．　文字の前後を<span style="color:#f60;">&lt;span style="color:#<span style="color:#f0f;">0000ff</span>;"&gt;</span><span style="color:#00f;">←この記号→</span><span style="color:#f60;">&lt;/span&gt;</span>で挟みます</p>

<p>　２．　文字の前後を<span style="color:#f60;">&lt;font color="#<span style="color:#f0f;">0000ff</span>"&gt;</span><span style="color:#00f;">←この記号→</span><span style="color:#f60;">&lt;/font&gt;</span>で挟みます</p>

<p>　このうち、２．の方法では変わらないときがあるので、１．の方法を覚えて下さい。</p>

<p>　<span style="color:#f60;">&lt;span style="color:#<span style="color:#f0f;">0000ff</span>;"&gt;&lt;/span&gt;</span></p>

<p>　この中で、<span style="color:#f0f;">0000ff</span>の部分 が色を表現します。<br />
　左から順番に２ケタづつで、赤、緑、青を表しています。<br />
　これは光の三原色でＲＧＢともいいます。（印刷はＣＭＹＫ）<br />
　２ケタの中身は１６進数（０?Ｆ）になっています。<br />
　例えば 0000FF は青１００％、緑と赤が０％なので、青色を表しています。</p>

<p>　<span style="color:#f90; font-weight: bold;">【色見本例】</span><br />
<span style="font-size:14px;"><br />
　<span style="color:#000;">000000　黒</span><br />
　<span style="color:#f00;">ff0000　赤</span><br />
　<span style="color:#ff0;">ffff00　黄</span><br />
　<span style="color:#888;">ffffff　白</span><br />
　<span style="color:#0ff;">00ffff　水</span><br />
　<span style="color:#00f;">0000ff　青</span><br />
　<span style="color:#f0f;">ff00ff　紫</span><br />
　<span style="color:#0f0;">00ff00　緑</span><br />
　<span style="color:#f80;">ff8800　オレンジ</span><br />
　<span style="color:#f6f;">ff66ff　ピンク</span><br />
　<span style="color:#a0f;">aa00ff　青紫</span><br />
</span><br />
　全体的な値が大きいと明るく、小さいと暗くなります。</p>]]>
        
    </content>
</entry>

<entry>
    <title>応用知識</title>
    <link rel="alternate" type="text/html" href="http://webinko.com/blog/2008/03/post-15.html" />
    <id>tag:www.webinko.com,2008:/blog//6.52</id>

    <published>2008-03-03T05:18:47Z</published>
    <updated>2011-05-27T05:19:37Z</updated>

    <summary><![CDATA[ 　文章と画像の差し替えにつきまして。 　ここまでは &lt;br /&gt;（...]]></summary>
    <author>
        <name>webinko</name>
        <uri>http://webinko.com</uri>
    </author>
    
        <category term="4.応用知識１" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://webinko.com/blog/">
        <![CDATA[<p><img alt="776398_40868655.jpg" src="http://webinko.com/blog/776398_40868655.jpg" width="500" height="200" /></p>

<p>　文章と画像の差し替えにつきまして。<br />
　ここまでは <span style="color:#f60;">&lt;br /&gt;</span>（改行） と <span style="color:#f60;">&lt;img src="画像ファイル名" alt="代替文字" /&gt;</span>（画像表示）だけ覚えました。<br />
　これだけでもひとまず簡単な修正は出来ますが、文字に色をつけたり大きくしたり、画像の加工をしたりするために、もう少し細かい説明をします。</p>]]>
        
    </content>
</entry>

</feed>

