ホームページを無料で初めて作る! -4時間目:挫折しまくったホームページ作成がどんどん進んで感動しまくった-

どーよ、これ?

めっちゃよくねーべ!?

 

いきなり今日の成果を出したったw

ここまで来たら、楽しくて仕方がねぇよ。

 

んでは、今日やったことをおさらいしよう。

 

 

スポンサーリンク

本日取り組んだ作業

  1. タイトル
  2. サブタイトル
  3. 不要なものを消す
  4. タイトル横アイコン
  5. 背景の色
  6. メニューバーのテキスト・色変更
  7. ヘッダー作成
  8. ヘッダー部分のテキスト
  9. カテゴリの画像&文章
  10. フッターの色
  11. フッターのタイトル&ロゴ
  12. フッターのメニュー
  13. 著作権表記

 

すげぇ!

13箇所も変更しとる!

 

1個ずつ、見ていきやしょう。

 

1.タイトル

これは最初から決まってました。

なので、時間かけずにすんなりと終わる。

タグは、HTMLのheaderのところでした。

 

ちなみに色変更は、CSSのリンク設定ってのがあったのでそこを変更。

a{color:#993333;text-decoration:none;}

のところですね。

 

そして、リンクなのでカーソル合わせた時の色も変更。

a:hover{color:#662B2C;}

これだね。

 

全体のリンクに影響してたんですよね。

タイトルもテキストなんで見事に影響されます。

画像作ろっかなぁ~と思ったけど、まぁこれでいっか。

 

2.サブタイトル

ヘッダーの下の文字ですね。

これはいらないかなぁ~と思ったけど、一応入れる。

タイトルのすぐ近くに入れるところがありました。

 

 

3.不要なものを消す

電話番号とか、会社概要とか色々あったんで消しました。

載せる必要ないっすwただの趣味HPだしぃw

HTMLに記述があったので、ごっそり消しました。

 

 

4.タイトル横アイコン

タイトルの横にある。ハムスター。

後述のカテゴリ画像を再利用してはめ込みました。

 

かわいいと思うだが、どうだろうか?(ドヤァ)

 

 

5.背景の色

真ん中の白以外の部分ですね。

これは、CSSです。

bodyの、backgroundのところ。

 

最初、全体って書かれていたところをいじって、真ん中の白いところが変わったんだよねw

やっぱコンテンツ部分は白が無難だと思う。

 

色はちょい悩みました。

もうちょい彩度の高いオレンジを最初に選んだのですが、目がチカチカする…。

やっぱり目に優しいのは、パステル系かもしれません。

 

ちなみに色は、

color-sample.comさんを利用しました。

 

類似色とか、きれいな配色を選んでくれていたりするのでオススメ。

餅は餅屋ですよ。

短時間で、恐ろしく美しい配色出てきますしね。

 

 

6.メニューバーのテキスト・色変更

これも変更します。

<id>で、CSSに作っていました。

これは職業訓練で習ってたんで、助かった…。

 

HTMLのメニューバーの上の方に、

<nav id=”mainNav”>ってあったら、それ。

CSSで「mainNav」ってのが有るはず。

そのColorをいじったら、文字の色変更可能。

 

 

あと、メニューの数も変更してます。

最初6個あったので、5個にしたところ左寄りに。

まぁこれはいっか、と思っとります。

 

 

7.ヘッダー作成

これは一番最後にやりました。

すでにある画像を、切り貼りして完成。

 

ぶっちゃけ気に入っている。

15分ぐらい?で作りました。よくね?よくね!?

(褒めてほしいやつぅw)

 

 

8.ヘッダー画像部分のテキスト

これ、どんな原理でデキてんのか知らんけど…

ヘッダーの中に、テキスト入ってんですよね。

最初、画像に直接文字がうたれているのかなぁ~と思ったけど、違った。

 

HTMLで触れんのよ!

今度時間見つけて、ぜひその秘密を暴いてみたい。

ちなみに、h2でくくられていました。

 

9.カテゴリの画像&文章

この画像は、設計図のときに作っていたので、後は既存の画像サイズに変更するだけ。

だいたい同じサイズだったので、ちょっといじったらデキました。

 

設置した時の感動って言ったら…!!

 

実は、初めて自分の絵を無料テンプレに入れたのが、これ。

しばらく眺めてましたからねぇw

 

 

10.フッターの色

意外と時間がかかりました。

最初はやや薄い茶色にしてたんですが、なんか違う…。

更に暗い茶色にしたら、暗い…。

 

テーマカラーはオレンジなので、

「いっそ、彩度高めのオレンジにすっか~!」

とやったのが、正解。

 

明るいし、可愛い雰囲気に。

ついでにヘッダーの色もこの色に合わせたら、統一感が…!

 

統一感、超大事!

 

 

11.フッターのタイトル&ロゴ

ロゴの方は、上のロゴものと一緒に自動で入りました。

テキストは、HTMLのフッター部分を触る。

上と同じ文章です。

 

12.フッターのメニュー

色々書かれていました、消しまくりです。

HTMLに記述されていました。

 

上のメニューバーと一緒だけど、サイトマップだけ増やした。

…けど作らないかもしれない。

だってコンテンツそんなに多くないし、TOP画面で十分じゃんw

 

著作権表記

ALRIGHT~ですね。

 

 

今日の作業を終えて

楽しかった、マジで楽しかった!

 

今まで悩んでいたのが、何だったんだってぐらい楽しかった…!

とにかくまずはやってみる

今回のことでそう感じたのだよ…!

 

ってかすでに、HTMLとかCSSは、ある程度知識があったんですね。

一応HPも、教科書の通りで1本、完全オリジナルで1本作ったことが有るんですよ。

(職業訓練にて)

 

なので、

触ってたら、何となく分かるレベル

まで行ってたんですね。

 

「けど、自分なんて…」って気持ちが、HP作成を遠ざけてたんですね。

ってか、逆に知識があったので、「またアレ作るのか…」ってなったのは有るけどw

 

ちがうんですよ。

私は別に、WEBデザイナーになりたいわけじゃないんですね?

WEBデザイナーなら、それはもう1からHPを作れるようにならないといけない。

 

けど私の目的は、

なんとなくきれいなHP作りたい。

なんですね?

 

つまり、0からHPを作れるようになりたいわけじゃない。

すでにあるHPをちょいといじって、HPを作れるようになりたい。

この程度なんですよ。

 

最初っから、プロの力を借りればよかったんですよ。

ありがたいことに、無料でテンプレート提供してくれているんですよ。

 

無駄にプライドが働いて、「0から作ってやる!」ってなってたんですね?

んで完璧主義なんで、ちょっとでも躓いたら「自分なんてダメだ…」になる。

 

挫折が一番、バッドエンドじゃないかな?

 

ここまで進めてみて、すごく思った。

 

私は最低限、HTMLとかの知識があって、いじれるようになりたい。

でよかったんですよ。

 

よくアフィリ系で「HTMLの知識がないとダメ」って書かれていて、

「そうか、HTMLをマスターしないといけないのか…」って思い込んでたんですね?

 

違いますよね?

最低限使えるようになれればいい。

ってことですよね?

 

色を変更したりとか、文字を太字にしたりとか。

リンクを貼ったりとか。

 

そんなにアフィリにのめり込んでないので、絶対にこうだ!とは言えないけど、

要はそういうことなんじゃないかな?って思った。

 

うん、また長くなった。

とにかくそんな感じです(笑)

 

 

とにかく!

本日の作業は、絶好調でした!

次は別のページを作っていきます。

 

また大変になりそうな予感です(笑)

頑張って乗り越えるぞ、お~!\(^o^)/

 

そして、本日の記事はちょうど50分ぐらいでできました。

よしよし、ちょっと早くなったな!

 

 

5時間目▼

ホームページを無料で初めて作る! -5時間目:ついに他のページに取り組む!…しかしどんなふうに作れば良いんだ?-
え~っと、まず報告。 HP作成に集中します。 というのも、きのう勉強したアフィリのところで、 マルチタスク止めて、1つに集中しような? ってのがありまして。 確かに、1日50分じゃなかな...

 

 

▼HP作成記録▼

HP作成まとめ前半

HP作成まとめ後編

 

 

無気力で居場所が無くて毎日つらいあなたへ

生きづらくて、人生詰みかけて辛かった私が、自分を好きになり、かつ残酷な世界で戦える方法を伝えています。

引きこもりながらお仕事しませんか?

コミュ障のせいで、人間関係も上手くいかず、働くのが辛い!苦しい!
この先、ずっとコミュ障に悩まされないといけないの!?将来が不安だ!!
「コミュ障なんかじゃなかったら…!!」
と考えたことはないでしょうか?

実はそのコミュ障、ネットのお仕事では大きな武器になるんです!
新しいあなたらしい働き方、見つけてみませんか?

HP作成記録
スポンサーリンク
コミュ障でもいいのです。
トップへ戻る