HTMLタグ、CSS、CGI、PHP、デザインするのに画像処理ソフトを買って、サーバー、ドメイン？？？？？

こんなに手間がかかるなら、自分のホームページを作るなんて無理！と思う方も多かったと思いますが、

今は、簡単やさしく自分のホームページが作れるようになりました。

ホームページの作り方ですが、

難しいことを考えなくてもホームページは作れます
プチなら、書いて→保存　それだけ！

というようなサービスもたくさんあります。

実際にホームページを公開してからの方が、たくさんの人に見てもらえるような工夫や、
ホームページの中身を充実させていくなど、人気のあるホームページはそれなりの作り方・育て方に悩むものです。

作る前から難しい勉強をはじめなくても、簡単に自分もホームページを作って、
それから徐々に勉強していくのが、一番の早道だと思います。

どうしても自分で思い通りのホームページを作る作り方を知りたい！と言う方の為に
少しずつ記事を追加していこうと思います。

もう少し待ってて下さいね。

全部無料でつくるはじめてのホームページ

無料アクセス解析やカウンターで気になるのが広告ですが、
ここは広告なしのプロ仕様のアクセス解析が無料で使う事が出来てオススメです。

他のアクセス解析と比較しても、無料のアクセス解析と思えないくらい高性能で、
コンバージョン解析、広告効果解析、クリック数解析などの解析レポートを作ってくれます。

詳細はこちらをご覧ください
↓
【結論：無料で充分】他社の有料版と比較して下さい。
無料のアクセス解析でも、ここまでできる！

例えば、すごく素敵なデザインの企業ホームページがあって「トップページをそのまま画像として紹介したい！」と思ったり。

ウィンドウズなら、「プリントスクリーン」キー（キーボードにある[PrintScreen]とか[Prt Sc]と書いてあるキーです）
を押すと、画面がコピーされるので、フォトショップなどの画像処理ソフトなどを立ち上げて、貼り付けしてから、加工する、というのが一般的なのでは。

※手抜き方法としては[PrintScreen]を一押ししたあと、Wordに直接「貼り付け」して、word上でトリミングして印刷、という手もありますが。

毎度キャプチャーして、他のソフト立ち上げて、加工して･･･という（私的に）相当面倒な手間を一気に省いてくれるフリーソフト

「キャプラ」

とにかく簡単。

我流な使い方です。

ウィンドウまたはコントロールボタンをクリックすると

アクティブ（さっきまで見ていたウィンドウ）が表示されて
黒枠がでるので、キャプチャーしたい場所でクリック。

サイズ変更とか、切り抜き（トリミング）して
保存形式を選んで保存も1クリックでOK。

こんな縦長のキャプチャー画像が、
すぐ保存できてしまう手軽さに感動♪

縦に長～いホームページを、途中で切れることなく丸ごと画像に出来るので、思ったとおりに印刷されない、見たまま印刷したいという時にも使えるかもしれません。

今回の説明では、都合上、文字入れするのに「プリントスクリーン」キーと別の画像処理ソフトも使ってますが、このソフトを使えば作業が断然早くなりそうです。

普通のプリントスクリーンで画面キャプチャーした時は、カーソル（ポインター）まではコピーできないのですが、このソフトは、キャプチャーした後に「カーソル埋め込み」というボタンで、後付けすることが出来るのも便利。

マニュアル作りなんかにも使えますね。

》キャプラは、ベクターでダウンロードできます。

http://www.vector.co.jp/soft/win95/art/se118008.html

》作者さまホームページ

http://homepage1.nifty.com/chappy/

》キャプチャーしたサイト

早起き生活
起きた時間を記録して、生活リズムを整えよう的な。
自分のグラフを見ると、いろいろと考えさせられます･･･不規則すぎて。

レンタルサーバー内にホームページとブログを設置する場合
ブログは外部の無料ブログを使う場合があると思いますが

どちらにしても「新着記事をトップページに表示したい」
と思った事はありませんか？

ブログは一番更新頻度が高くなる（はず）なので
ホームページとブログの相乗効果を目指すなら
ぜひ「ホームページ」に記事が自動掲載される仕組みが欲しいところです。

難しいプログラムを設置するか、ホームページそのものをブログシステムで構築するのは、ちょっとハードルが高すぎる…

そこで、簡単に無料で使えるオンラインツールをご紹介します。

RSS表示用ブログパーツFeedWind

http://feed.mikle.com/

お気に入りサイトの
最新情報・投稿記事を
あなたのブログやHPに掲載できます。

見てのとおり、ブログパーツ。

普通ブログパーツというと縦長のイメージなので、
ホームページにはちょっと使いづらい。
かつ、広告もちゃんと目立つようになっている。
つまりトップページに掲載は無理なものが多い。

その点「FeedWind」は、

• サイズが指定できる
• 枠線の非表示もできる
• タイトル部分を非表示にしたり、画像を設定する事ができる
• ブログパーツなので設定も超簡単
• あとはHTMLタグ内に貼り付けるだけ
• PRは右端に小さく控え目なので気にならない

という便利さ。

■実際に設置してみた

枠線なし。ホームページのデザインにもよく馴染むシンプルさ。

で、この上にタイトル画像を置けば、
もう少し「ホームページらしく」なるかもしれません。

その他、Youtubeや、flickrや、フォトログにも対応です。

これはすごい。

アイディア次第で、いろんなことができそうですね。

「▲このページの上へ」をクリックすると、ページがパッと切り替わって
ページの先頭部分が表示されるようになるのが一般的ですが
インターネットに不慣れな方を見ていると、
何が起こったんだろう？？とか
別のページに来ちゃった？？と一瞬戸惑ってしまう方もいらっしゃるようです。

そこで「▲このページの上へ」をクリックすると
シュルシュル～っとスクロールして上に移動してくれるJavascriptを仕込む方法があります。

SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳さんの
「このページの先頭へ、をちょこっとおしゃれに」という記事を参考にさせていただきました。

いつも興味深い記事、楽しく拝見させて頂いております<(_ _)>

元ネタは「A (slightly) better technique for “Back to Top” links.」との事。

以下解説です。

まず、「backToTop.js」というファイルを用意します。
※エディタで新規作成して「backToTop.js」という名前で保存すればOKです。

備忘の為に転載させて頂きますと、backToTop.jsの中身は下記のとおり。
function backToTop() {
var x1 = x2 = x3 = 0;
var y1 = y2 = y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
x3 = window.scrollX || 0;
y3 = window.scrollY || 0;
var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));
window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));
if (x > 0 || y > 0) {
window.setTimeout("backToTop()", 25);
}
}

.jsファイルの使い方ですが、
例えば、htmlと同じ階層に「backToTop.js」をアップロードしたとして
html のヘッダー内に

<script src="backToTop.js" type="text/javascript"></script>

という一文を追加して.jsファイルを読み込みます。

これで下準備は完了。

後は、「▲このページの上へ」を掲載したい個所に

<a href="#" onclick="backToTop(); return false">▲このページの上へ</a>

と追加すればOK。

きちんと動かないようであれば、
backToTop.jsへのパスが間違っている場合が多そうなので
ヘッダー内に追加した「src=”backToTop.js”」部分を
下記のようにhttp://からのフルパスに書きなおしてみても良いかも。

<script src="http://サイトURL/backToTop.js" type="text/javascript"></script>

■動作テスト

▲このページの上へ

↑このリンクをクリックすると、上に戻るハズ？？

<meta name="generator" content="WordPress 2.8.4" />

というようなバージョン情報が入ってしまう件について、ヘッダーからバージョン情報消したからといって、今時わざわざヘッダー情報を見ながら攻撃を仕掛けてくる人もいないので意味があるのかどうか、と意見が様々。

でもまぁ、とりあえず肥大しがちなWordpressのヘッダーをスッキリさせたかったんです。

本体部分を修正すれば消えるのですが、もっと簡単にできないかと探しているとfunctions.phpに数行書き込むだけでOKとのこと。

≫ヘッダーからバージョン情報を消す

覚書させていただくと、

今使っているテーマ（themes）フォルダの中にある

functions.php　の中に

remove_action('wp_head', 'wp_generator');

と一行追加するだけ。簡単♪

functions.phpの一番最後に追加すればいいと思います。

最後というか「　?>　」　の上と言えば分かりやすいでしょうか。

remove_action('wp_head', 'wp_generator');
?>

あとヘッダーに自動生成されてしまうwlwmanifest.xmlってなんだろうと思っていたら、Windows Live Writerというものを使うためのものらしいです。

Windows Live Writer（マイクロソフト）
Windows Live Writer は、写真やビデオなどのリッチ コンテンツを自分のブログに簡単に投稿できるようにするデスクトップ アプリケーション

やっぱり私には不要そうなので、消すことに(笑)

remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'wlwmanifest_link');
?>

こんな感じになればOKかと。

同じデザインでも配色次第で全く印象が違ってきます。

ホームページ カラー サンプルや、配色パターンなどを参考にしてみるも、どうもピンと来ない…そんな時に役立ちそうな、ホームページ配色の参考になる、無料のツールをご紹介します。

Adobe® Kuler™

アドビの「Kuler（クーラー）」は、無料のオンライン配色ツール。

カラーテーマを自分で作成したり、コミュニティでテーマを探したりすることができます。

これまた英語なので、使い方を簡単にご説明しておきます。

http://kuler.adobe.com/ にアクセスすると、下記のような画面に。

好きな配色を見つけてクリックすると、中央に詳細が表示されます。

右上にあるアイコンをクリックすると、このテーマを元に配色をカスタマイズできる画面に移動します。

バーをドラッグしたり、ルールを選択することで、色を作ることができます。

左側の「Create」にある「From an Image」をクリックすると、下記画面へ。

画像をアップロードするか、Flickerから写真を選ぶと、写真の中から自動で色を抽出して配色パターンを作ってくれる。

メインとなる写真が決まっている場合には、ものすごく便利かも。

アドビID無料ユーザー登録してログインすると
自分で作成したテーマを保存したり、見つけたテーマをお気に入り登録できるようになります。

さらに、テーマをダウンロードして、PhotoshopやIllustrator（CS2以降)でスウォッチとして取り込む事ができます。

イラレなら、
メニューバーのウィンドウ→スウォッチライブラリ→その他のライブラリ
辺りから選択すると使用できるようになると思います。

とはいえ、配色は分かったけど、実際どうホームページに反映したらキレイに見えるの？と思った方は、webデザインを集めたサイトがたくさんあるので、参考に見て回ると、何か閃くかもしれません。

• Webデザイナー専用Webデザインブックマークリンク集 – straightline bookmark | Sharing Web Design
• Web Design Clip [WEBデザインのクリップ・リンク集]

「サイトマップ」には2種類あって、HTMLのサイトマップは、ユーザーがサイト内で迷子にならないように、XMLのサイトマップは検索エンジンの巡回を促進する意味で作成します。

googleによると、サイトマップは次の場合に特に役立ちます。

• サイトに動的なコンテンツが含まれている。
• Flashなど、検索ロボットのクロールでは簡単に検出されないページ。
• サイトが新しく他のサイトからのリンクが少ない 。
• リンク切れになっていそうなページ、どこからもリンクされていないページ。

XMLって難しそうでしょう？
作成にはクリックしていくだけで出来上がりなwebツールを使うのが簡単です。

英語サイトなので、これも一通りご説明していく事にします。

まずは下記にアクセス↓

Create your Google Sitemap Online -  XML Sitemaps Generator

設定は下記みたいな感じでよろしいかと。

※画像クリックで拡大して見れるハズ。

“www”があるのと無いのでは全然違うから、間違わないように注意。

http://example.com/  　と

http://www.example.com/　　の違い、という意味です。

サイトURLの所は、ページ（index.htmlとか）は入れません。

スタートを押して、しばらく待つ。
サイト規模によっては数分かかる事もありますが、気にしない方向で。

サイトマップが完成すると、こんな画面になります。

sitemap.xml をダウンロードしておけばいいと思います。

ちなみに、他のリンクをクリックすると以下のようなファイルがダウンロードできます。
sitemap.xml.gz　圧縮された形式
ror.xml　現在はあまり効果が無いかもしれない形式
sitemap.html　人間用(？)見る為のHTMLサイトマップ
urllist.txt 　名前通りURLの羅列

ダウンロードしたXMLサイトマップはFTPでサーバーにUPしましょう。
アップロードが完了したら、各検索エンジンのウェブマスターツールに登録します。

• Googleウェブマスターツール
• Yahoo!サイトエクスプローラー
• Bingウェブマスターセンター（詳しいBingサイト登録の仕方 ）

XMLサイトマップの書式について詳しく知りたい方は「サイトマップの XML 形式」が分かりやすいです。

現在Bingはベータ版で、ウェブマスターツールは英語のみです。
英語な時点でダメという方の為に(？)
とりあえず、サイトマップの登録手順などを図解していきます。

まずは、Bing Webmaster Center（ウェブマスターセンター）にアクセス。

http://www.bing.com/webmaster

「Sign in to use the tools」をクリックすると
ログイン画面に移動します↓

ここは日本語なので安心ですね。

ホットメールや、msnのアカウントでログインするか、
アカウントを新規登録します。

新規登録画面も日本語です。
登録が終わったら、ログインしましょう。

ログインすると、こんな画面になります。

「Add a site」をクリック。

サイトのURLと、サイトマップのURLを登録します。

サイトマップって何？作り方が分からない？という方は「xmlサイトマップの作り方」をご覧ください。

「Webmaster e-mail:」は任意です。
メールアドレスを登録しておくと、お知らせなどが届くみたいですね。

「submit」をクリックして、次の画面へ。

認証用のファイルをダウンロードして、index.htmlと同じ階層にアップロードするか、

index.htmlのヘッダー内にメタタグを一行追加します。

どちらか片方（楽な方）でOKですよ。

下にある 「Return to Site List」をクリックすると、登録完了して、ログインした時と同じ画面に戻ります。

これで登録完了です。

が、

話をうかがってみると…

「素人っぽい」＝「デザインがプロっぽくない」
という様な意味合いが強い気がするんです。

同じような質問として、
「Wordで作ると素人っぽいので、イラストレーターを買おうと思うのですが」
これも、センスと、ツールの使いこなし次第です。

例えば

↑これ。

Word講座用にサンプルを作ってみました。
Wordアートと、オートシェイプだけでできてます。
ちなみに花は「＊」をワードアートに文字入力して、グラデーションをかけただけです。(笑)

ちょっとグラデーションを付けるだけで、だいぶ雰囲気が変わりますよね。

ホームページビルダーについてくる素材をただ並べると、
たぶん「素人っぽく」なります。

素材を自分でセンスよく作れれば
「ちょっとプロっぽく」なるはずです。

逆に、高額のドリームウィーバーを買ったからといって、あなたの思い通りの「プロっぽい」感じにはならないかもしれません。

ドリームウィーバーにも、とてもシンプルカッコいいテンプレートも付いていますが、画像次第ではやはり中途半端な感じにならないとも限りません。

自分で作れなくても、今はインターネット上で無料配布されていたり、選ぶだけでセンスのいい画像が作れちゃう無料ツールなんていうのも、たくさん公開されていますので、利用させて頂いたり、参考にするのもいいですね。

ただ、ドリームウィーバー（dreamweaver）と、ホームページビルダー、買うならどちらがいいですか？とたまに聞かれるんですが、予算さえあれば、ドリームウィーバー（dreamweaver）がお勧めです。

テンプレートの修正で、サイト全体の共通部分が一気に書き変わる機能などなど、使いこなせればとても楽になる機能が満載なのです。