ホームページの作り方についてお話をさせて頂きます

**********

このAOKINGのホームページって、どうやって作っているの??


という事に興味がある方もいらっしゃるかと思います


そういう方の為に、今回ちょっとばかり解説を行いたいと思います☆


結構マニアックな内容になりますが、興味のある方は読んでみて下さい・・・

「このホームページは、HTMLというWEB言語で作られています。」



そうですか・・・。



「internet explorerやSafariといったブラウザが、組まれたHTML言語を読み込んで画面にページを表示しています。」



へぇ、なるほど・・・。


「表示されるレイアウトやテキストの仕様はCSSで指示しています」



あぁ、そうですか。


・・・・


よくわかりましたか?



マニアックだという事が 笑



というのは冗談ですがw


このご時勢、便利な世の中になっておりまして、ホームページの仕組みなんて知らなくても、


ホームページを作れます


ただし、仕組みはわからなくてもいいですが、ホームページの作成ソフトの操作方法を覚える必要はありますが


今は色んな企業様がネットにさえ繋がれば無料で使えるシステムを提供してくれているので、気軽に誰でも作れるようにはなっていますね


代表的なホームページ無料作成サービスは、


jimdo


でしょう


デフォルトでは広告が入ってしまいますが、有料会員になれば広告が消えます


ほとんどの無料サービスは広告が入り、有料会員で広告が消えるシステムですね


どの企業様のサービスもテンプレートが豊富なので、イメージにあうものを探してみると良いでしょう


お金と時間にゆとりがある人は、Dreamweverを購入して勉強してみるのも面白いかと思います


Adobe Dreamweaver CS5.5 Windows版Adobe Dreamweaver CS5.5 Windows版
販売元:アドビシステムズ
(2011-05-20)
販売元:Amazon.co.jp
クチコミを見る


で、AOKINGのホームページはどうやって作っているかというと、


わたしはこういったホームページ作成ソフトを持っていないので、livedoor blogでこのホームページを作っています


このホームページを見ている方で、livedoor blogを使っている人いますか~??


使っている人なら管理方法はご存知ですね


開催後記を書く時はいつもこの管理画面を開いて記事を投稿していますし、デザインを変える時は、


管理画面の中にある「デザインカスタマイズ」という項目をいじっています



「いやいや、ちょっと待って、わたしもlivedoor blog使ってるけど、何をいじったらこうなるの・・・」



そういう声が聞こえてきそうですがww


確かに、ちょっといじっただけではこのようにはなりません


元々使用しているデザインテンプレートは、実はこれです



このデザインテンプレートをカスタマイズしまくった結果、こうなっていますwww


どうでしょう、このBEFORE → AFTER 


そうです、実はこのホームページ、


猛烈にカスタマイズしています


ここから先はマニアックな話になるので、わかる人のみじっくり読んでください。※興味ない人は飛ばし読みで


カスタマイズ手順を説明しますと、


まず、デザインに組み込む背景やボタンの画像(GIF)を全てフォトショップで作成し、サーバーにアップロードしておきます


次に、デザインカスタマイズページにて、以下の手順で大まかなレイアウトデザインを完成させます。


1:CSSのレイアウトの幅、枠組み、フォントの大きさ・色を修正する
2:画像(GIF)のURLをCSSの各々のbackground箇所に挿入し、repeatを指定する


そして、blog container(記事欄)に表示するもの、しないものを以下の手順で修正します


3:トップページ、個別記事、アーカイブ、それぞれに記述されたHTMLから不要なHTMLを削除して、必要なHTMLやjavascriptを記述する


と簡単に言いましたが、これはかなりの高度テクで専門知識も必要ですし、慎重な作業が必要で時間がかかります


初めてカスタマイズした時は、何をどういじれば全くわからずにお手上げ状態でした


次に、左右と上に、以下の手順でメニューボタンとなる画像リンクやTwitterなどのウィジェットを追加します。

左右
4:プラグインに、HTML、javascriptを記述できるフリーエリアを追加して、そこに画像リンクのHTMLと、Twitterなどのjavascriptを記述する


5:画像リンクとjavascriptをTABLEタグで囲って記述する


とりあえず、これにてデザインは完成です


あとは随時編集しやすいように、メニューとなる記事の編集画面をお気に入りにブックマークしておきます


この5ステップさえこなせれば、AOKINGのホームページが完成します


・・・



いや~、読むのに疲れましたね


ここでちょっと一息入れましょうか


あ、URLに関しては、livedoor blogの有料プランに加入して、aoking.jpのドメインをlivedoorドメインで購入して登録してます


もしaoking.jpのような独自ドメインを使いたい、という人がいたら、livedoor blogをオススメします


FC2やアメブロでは独自ドメインは使えないですので


デフォルトでの広告表示も少ないし、カスタマイズも自由にできるし容量も多いのでわたしはlivedoor blog一筋ですね


ホームページの作成や運用は、このように、本格的にやろうと思うと結構手間隙かかります


ちなみに私はWEBの知識は完全に独学なのですが、この本を一度読んだ後、辞書代わりに傍に置いてカスタマイズに励みました


速効!図解 ホームページ作成 HTML&CSS編 Windows 7・Vista・XP対応速効!図解 ホームページ作成 HTML&CSS編 Windows 7・Vista・XP対応
著者:森理浩
販売元:毎日コミュニケーションズ
(2010-03-20)
販売元:Amazon.co.jp
クチコミを見る


とりあえずはわからなくてもイメージを形にしようと試行錯誤してみる事ですね


形にしたいイメージはあるけど作る時間が無い~


という方については相談を受ける事もできますので、個サルに参加した際にでも一声かけて下さい☆