ホームページを無料で初めて作る! -7時間目:迷走迷走、また迷走-

一向に進まねぇ\(^o^)/

 

暴風雨にあっている状態です。

ちょっと泣きてぇ。

 

 

スポンサーリンク

まずは、トム

昨日は、歴代ハムのトムに取り掛かりました。

いい感じに進んでいたので、楽しかったんですよね。

 

文字をデカく、太くしたい

まずは、名前から。

字をでかくして、太字にしたい…。

 

 

最初、h1とか使うのかなぁ~とか思ったのはここだけの話。

 

ってことで、

<strong>と<font-size>のタグの出番ですよ。

名前をこれらのタグで囲めばいいのよ。

 

なぜか最初は上手く行かなかったのよ。

けど、もう一回入力すると反応しました。

なぜ?なんか記述が間違ってたんでしょうね。まぁできたからよしとする。

 

 

表のカスタマイズ

プロフィール欄のカスタマイズね。

ぶっちゃけ、左右の2列にしたら余白が余るんですよ。

なので、一列にしました。

 

したんだけど、やっぱり余白が気になる。

ってか、表が真ん中に来ているのでおかしいんですよね。

だって他のテキストは全部左寄りなのに、表だけ真ん中なんですよ。

 

バランスが悪いったらない\(^o^)/

 

ってなわけで、左寄せにする方法を探す。

<align=”left”>で、できるらしんですよ。

けどね…動かない。

 

???記述間違っている…?

と思ったけど、どう見ても間違っていない。だってコピペしたし。

なら、何が違うんだ?

 

ってかそもそもね、表が真ん中に勝手に行くことないのよ。

なんか命令しているから、真ん中に来ていたのね。

で、いったいどこで命令してんだ?とよく見てみると…?

HTMLの方にタグがあったのよ。CSSだったのよ。

 

やられたぜ…!

 

これが、人様の作ったものをいじる時の弊害かな?

自分で一から構築していたら、何となく分かるのよね。

けど、人の作ったものだから、作業とかの記憶がなんだわ。

 

まぁ、ベテランだったらすぐに分かるんだろうけどw

 

無料テンプレを見ると、paddingをいじっていました。

え~っと、確かこの4つは順番があったのだけど…

 

覚えていない\(^o^)/

 

もう、触って確かめるw

 

どうやら、↑→↓←だったようだ。

←を0にしたら、見事に左寄りになりました。

やったぜ!

 

 

次、色がお気に召さない。

デフォルトは灰色。でもオレンジ系にしたい。

ってなわけで、CSSいじります。

 

もう、てさぐりでね。

 

びっくりしたのですが、枠ですよ。

なんと、上下左右の枠1つ1つ指定している。

…えっそういうものなの!?めんどくさい…!!

 

1つ1つ頑張りましたよ。地味に大変だった。

 

なんとか、表は完成しました。

うん、いんじゃないかな?結構ダサいけど。

 

別のハムを作る

一番上のトムができたので、次々ハム紹介を作っていくんですよ。

トムの画像をコピペし、貼り付ける。

左、右と交互にしたいので、交互のタグを入れ込んでいく。

 

…みづらい\(^o^)/

 

これ、地味に大変でした…。

まだたった2つ貼っただけで、この労力。やべぇ。まだ10コ位あるのに。

まぁ、この2つができたら後はコピペすればいいか。

 

ってか、なんかすごく縦長になりそうな予感がする。

あんまり長すぎても、見えにくいかなぁ…?

別のページに作った方がいいんだろうか?とか思い出す。

 

あっ、あと、ハム一覧をトムの下に入れました。

ここに戻るように設定もしたい。

 

余白がうまくいかない

なんか、余白が上手くいかんのよ!

例えば、名前の下に余白を入れたい時とか「&nbsp;」を入れればできる!

って思っていたわけだ。

 

<br>でもいいだろうけど、

なんかSEO的によろしくないって聞いてから、あまり使いたくないというか…。

 

話戻し、たしかに1個はちゃんと余白はできる。

けど、2個おいても全然余白じゃなくなっている。

 

1個分の余白が、2つできると単純に思ってたんですよ。

けど、なぜか余白が2つ分できない。

…なんか、&nbsp;は2つ並べてはいけないってルールが有るのだろうか…?

でも、WordPressでは普通に使えるよね?

 

????

 

ハムは種類によって分けたいんですよ。

ジャンガリアンと、ゴールデンの種類に。

なので、1つの枠にジャンガリアンをずら~っと並べたいの。

 

けど、余白が作れないので、ギッチギチになっとるんだコレが。

 

美しくない!!

みづらい!\(^o^)/

 

ちょっとわからなかったので、保留。

まずは、できるところから始めましょう…。

 

ボーダーラインを入れてみる

余白が上手く作れないので、線を入れてみました。

 

↓みたいなやつ


 

このタグは<hr />で、できるらしい。

しかも、記述は単一でいいと。しめなくていい。ほへ~。

 

けど、線が入っただけでギッチギチ。

 

上下に&nbsp;を入れて、なんとか余白を確保してみるけど…

うっ、うん、ギチギチよりはマシかな…?って感じ。

もう1行ぐらい余白が本当は欲しいのだけどなぁ…。

 

そういえば、2万テンプレのタグに余白ってあったような?

と思って調べてみると、あるじゃないですか!

早入れてみるけど…うっ、う~む…。

 

ってかタグ見て驚いたのですが、

&nbsp;を交えて作っているんですよ。

&nbsp;って単体でしか使わないと思ってたいので、衝撃だった。

 

しかも、表とか、文字の下のベタ塗りとかにも使うらしい。

へぇ~、そうだったんだ!なんか勉強になったなぁ~。

 

しかし、コレまた解決しませんでした。

…う~む、もやもやが溜まっていく…。

 

↑に戻るを設置

ハム一覧に戻るページの文字を作成。

縦長になるので、ページの中での移動リンクを作りたいんですね。

 

調べた所、こういうのってジャンプっていうらしい。

キーワードがわからないと、調べるのも一苦労だよ。

 

#を使うみたいだけど…実際にはまだ試していない。

別のトラブルが起こったから。

 

テキストを1番右に設置したいのに、

なぜか画像の手前で止まってしまっているのだ。

 

 

……

どこまで、

うまく、

いかないんだ\(^o^)/

 

私は、かなりこの時点で参っていましたw

 

 

原因探し、開発者ツール

もやもやした気持ちで、進行。

今考えたら、よくその状態で頑張って進んだな。

 

 

これは職業訓練で習ったんだけど、

F12を押すと開発者モードになる。

かっこよく横文字で言うと、デバックモードっていうんだぜ!?

 

WEBで確認できる自分のHPを、F12を押すとHTMLがわかる。

 

……しかし、

ごっちゃごちゃしていてよくわからん!

 

ってことで、全然活用していませんでしたw

だって、▶で短縮されているんだけど、押してもよくわからん…。

 

「プロのHPはなんかブロックされているんだ」

ってことにしておいて、見れないものだと思い込みました。

 

違うんですよ。

違うんですよ!(大事なことなので2回いいました)

 

ちゃんと見れたんです。

プロの作るサイトは、超複雑に作られているんですよ。

もう、classとかつかいまくりですよ。

 

私はなぜか、

classタグとかあんまり使わないほうが美しい

という謎の固定観念がありました。

 

アホか\(^o^)/

 

…まぁ、コレがわかっただけでもいいのかもれないw

詳しく見えたときは感動したからw

 

で、自分のHPを見てみたんですよ。

「まぁなんと簡素!」はおいておき、

なぜ↑上に戻るが一番右に配置されないのか見てみた。

タグのブロックがわかるんで、視覚的にわかるんですね。

 

見るとまぁ、それは見事に、

画像の手前でブロックが止まっていました。

 

…だからなんだ?と思いました\(^o^)/

 

なんか使い方間違えたかもしれないw

まぁ、デバックモードが詳しく見方がわかったからいいとするw

 

テキストが画像に回り込んでいる

なんで、手前で止まるんだ?

トムの場合は、ちゃんとできたのに…。

 

と思って、デバックモード見たら、

トムの場合も画像の手前でとまっていました。

おそらく、画像の大きさの関係で、うまいこときれいな段になっていたんだろう。

 

つまり、偶然。運。

根本的には全然解決していない。

 

ためしに、

無料テンプレの同じような場所でも、画像の手前で止まるのか試してみました。

やっぱり止まっていました。

 

どうやら、私が何かやらかしたわけではなさそうだ。

コレがわかっただけでも、収穫。

 

ここで、ふと職業訓練のときに作ったHPを思い出しました。

そう、職業訓練で作成したHPでも同じようなことがあったのです!

 

画像が回りこむ

 

このキーワードを思い出したのです!

overflowだよ!

 

検索してみると、出てきました!解決策っぽい記事が!

いよっしゃぁぁぁぁぁぁぁ~~!!

 

 

ってな具合で、タイムアップ。

もう疲れたよ、パトラッシュ!

 

よく頑張ったと褒めてほしいよ、ままん!

 

おわりに~物事に取り組む覚悟~

めっちゃモヤモヤ残しながら終わりました。

 

全然進んでねぇ~~~!!

 

と思ったけど、

こうやって書き出してみると意外と色々やってたな。

 

まぁ物事は、

早々に簡単には進まないってことなのか。

 

私は、コレすらわからなかった。

だから「はぁ…つまづいた、終わった…」と1回躓いて諦めるんですね。

 

そうじゃないんですね、

何かを成功させるには、何百回もコケる覚悟を持て

ってことだったんですね。

 

よくある例え話でも、

  1. プロ野球選手でも打率は3割
  2. プロでもこの打率
  3. なら、初心者は100回うって当たるかどうかの確率

ってのがありますよね。

 

まぁ、野球は興味が無いので、

半分ぐらいの気持ちで勉強してたんですがw

 

私の悪い癖なんですよね。

興味ないor嫌いなたとえだと、頭に入らない。

 

「正しいかもしれないけど、なんか嫌い。だからあんたの意見聞きたくない」

 

って、なるんですよね。幼稚園児か!

…いや、幼稚園児の思考なんだろうな…。

 

一歩ずつ、成長しないとですね。

 

 

ってかね、例え話を聞かされても、

なんとなくしか頭に入っていないんですよね。

「わかる!なるほど!」って読んだときは思うんですね?

けど、忘れるんですよ。

 

んで、またノウハウコレクターが始まって、

「それ、知っているし…」ってなる。

 

いや、

さっきまで忘れてただろ?と。

知ってたなら、実践しろよと。

忘れるから、同じこと繰り返してんですよね…。

 

そうなんですよね。

耳がタコになるほど聞くけど、

けっきょく実践していないから忘れるんですよ。

 

で、実践しないと、

その言った人の気持ちが全然わかっていないんですよ。

なんとなくわかって気になっているんですよ。

だから記憶に残らない。

 

今色々挑戦しているから、なんとなくわかってきた。

アウトプットってこういうことなんだろうな、って。

「読むだけ」と「実際にやる」のはぜんぜん違う。

 

 

……あ~、HPの記事なのに、

なぜこんなに長くなっとるんだw

 

HP作成していると、色々考えるんだよ。

すごいな、考える事大っ嫌いだったのに。自然と出てくる。

ってか、自然と悪い部分が浮き出てくるんですよね。

 

自分と向き合うって、

自分の悪いところから出会う

から始まるのかもしれない。

 

あ~、いい加減おわれ!

この記事の作成時間も、2時間超えましたww

 

なにやってんの\(^o^)/

 

けどすごくね?休憩せずに一気に打てたんだよ?

しかも「書かなくちゃ」じゃなくて「書きたい」って感じ。

まぁ、完全には「書きたい」ってわけじゃないけどさぁw

 

そんなパワー持ってたんですね、私。

 

 

▼HP作成記録▼

HP作成まとめ前半

HP作成まとめ後編

 

 

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

・コミュ障・協調性なし社会不適合者
・毎日、自己嫌悪の時間が多い
・とにかくネガティブで生きづらい…
・とにかく自信がない
・完璧主義でなかなか動けない
・いい子ちゃんで人と会うと疲れる
・クズな性格でガラスメンタル
・承認欲求の塊
・好きなこと以外で動きたくない!
・働きたくないでござる!

「私はまじめに働けないダメ人間…」
と凹んでいたけど、今は家で1人黙々とネットで稼げる時代になっていました。

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

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

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

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