日々のwebサイト作成記録
(2020/12/21) とりあえず、釣り部を作ります。メンバー募集中です！ちょっとずつサイトを作って行く予定ですが、 とりあえず明日はカウンタつけます。
(2020/12/22) さすがにテキストが少ないと、Webサイトとしてどうかなと思うんで、とりあえずいろいろ書きま す。 今日はカウンタ設置、適当な写真のアップ、時間あればCSSで見栄えも少しいじっていこうと思います。 カウンタ設置しました。上のカウンタがトータルアクセス数、下のカウンタが当日のアクセス数とな ります。また、カウンタ設置時に無条件に1アクセス、1カウントとなるように設定してしまった為現 時点でカウント数「6」となっています。ただ、それでは面白くないので同一IPアドレスからのアクセ スはノーカウントとなるよう設定変更を行ったので、実際は私自身がアクセスした「1」が現在のアク セス数と思われます。このURLをお伝えした2名の友人がアクセスしてくれて後日アクセス数が追加さ れる事を祈ります。
(2020/12/23) 昨日、カウンタ設置、画像アップを行って時間あればCSSでレイアウト整えようと思ってたんですが、 まずヘッダがない事に気づいたんで、本日はロゴ入りのヘッダ作りを行ってみようと思ってます。ロ ゴ自体はおいおいイラストレータ的な無料ソフトで作成しようと思いますが、取り急ぎその辺の無料 素材を拝借して形だけ作ってみます。
(2020/12/24) 23日に実行しようとおもってたheaderにロゴ掲載まで進める事ができませんでした。とりあえずheade r内にナビリスト的なものをつくったので、おいおいこのナビリストに準じたページを作って行くつも りです。また、色んな要素にclass属性で名前（クラス名/分類名）をつけてCSSの仕込みも進めておき ました。とりあえず明日こそ、headerに適当なロゴをのせつみます。
(2020/12/25) ロゴの作成自体は問題なく完了。ただheaderにロゴを表示させる事が出来ない！！原因は結局わかり ませんでしたが、レンタルサーバ付属のFTPサービスの利用を止めフリーのFFFTPをインストールして 実行すると上手くいきました。あと添付している画像にalt属性を追加。多少SEO対策になってるのか な？明日はCSSより先に別ページを作成して、昨日追加したナビリストからリンクが飛ぶ設定を行って いきたいと思います。
(2020/12/26) 昨日予定していたnaviからのリンク設定を行うのはやめました。なんとなく先にCSSでレイアウト設定 をしたくなり試みたんですが、これがまー上手い事行きませんでした。具体的には外部ファイルのCSS とhtmlがうまくリンクしてくれません。結局原因分からないまま、試しにwebサイトに掲載されていた コードをコピペしたら解決しました。。。未だにもやもやします。CSSのリンクがうまくいってからは 初めてのflexboxを使ってheader部分だけ少し変更し、同じくflexboxを利用して現在2カラムのレイア ウトに変更中です。明日はレイアウト作成の続きを行います！
(2020/12/27) 2カラムレイアウト変更完了です。まだ作業中ではある為、分けているブロックの境界がわかるように 色つけてます。今日一番苦労したのは、ロゴ横の見出し文字を行の中央に設定する方法でした。 解決策としは、heightプロパティで要素の高さを指定後、行の高さを指定するline-heightプロパティ で同じ値に指定するとテキストを水平方向で中央に寄せる事ができました。分かってしまえば大した 事ないんですが、分かんなかったんでとことん時間を費やしました。。明日はテキストサイズを部分 的に変更する方法と、メニューのデザインをもう少し見栄えがいいように変更してみます。
(2020/12/28) テキストサイズの部分的な大きさ変更はspan要素で部分的にグループ化してcssでfont-size変更で難 なく出来ましたが、小さくしたテキストを下揃えする方法がわからず断念しました。あと、メニュー デザインはまだまだ不満はありますが、変更は完了したので一旦これにて終了します。最後に、作成 したサイドバーにgoogleカレンダーつけました。他、tideグラフと天気予報のブログパーツ設置しよ うとしてましたが、なかなかいいやつが見つからず断念しました。明日は、もう1ページ作って作成し たメニューバーからのリンク設定を行っていこうと思います。
(2020/12/29) メニューにあるサイト1つ作りました。作ったといっても、Topページをコピペして余分な所を削った だけですが、元々Topページに書いていたテキストは他のページ用に作成していたので、手抜きではな く予定どおりです!それより、メニュー項目にリンク設定はしてみたものの、Topページが文字化け、 リンク先のページもcssの設定が反映していません。文字化けについては、本日コードを書いているテ キストエディタをメモ帳からTerapadに変更した事が原因かもしれませんが、とりあえず今日はこれか ら釣りにいくので、明日修正してみます。
(2020/12/30) Topページの文字化けの修正、リンク先にCSSの設定が反映するように修正、合わせてリンク先からTop ページに「Home」ボタンから戻れるようにリンク先の設定完了。あと、Topページからサイト作成ログ を削除し、初釣行記事を掲載、おいおいこの記事も「Fishig blog」のページに移管し、ちゃんとした Topページは作成する予定。あくまでぼちぼちマイペースで。。。また、本日も午後から釣行へ向かう 予定なので、サイトとしての更新は一旦終了。明日は、釣果記事の文章の校正および、記事自体のコ ンテンツとしての見栄えを調整する事と、本日実行予定の釣行結果を記事として執筆（ちょっとカッ コよく表現してみた(^-^;）する予定。
(2020/12/31) 本日は予定どり、釣果記事の校正、記事の見栄え修正（画像の周りにmarginでスペース設定及び画像 サイズの変更、text-alignでテキストの両端揃え）を行いました。また、Web making blogのテキスト は「br」をすべて取っ払って、「p」だけに一旦しまいた。おいおい、見栄えも含めた適切な段落と改 行の文章構造を考えていく予定です。あと、本日苦戦したところはテキストの両端揃えです。シンプ ルな記述なのですんなりいってもいいようなものの苦戦しました。結局これも、原因がわからぬまま 一から何度が書き直している内に上手く反映しました。なんなんでしょう、まったく。。。あと、明 日は元旦なのでwebの更新はたぶんお休みします。今後の更新予定としは、あさってから、Fishing bl ogの記事を最低5つ位は追加します。その後、Web makin blogのデザインをもうちょい何とか考えます。 これから作成予定の他のページの雛形となるように。。あと、もう少し大まかな予定として、短期目 標として、LINEをはじめ、核SNSと連携できるようにする事。天気予と、潮、風のブログパーツないし、 表示できる仕組みを組み込む事。中期目標として、スマホ対応（レスポンシブデザイン）にする事。 長期期目標として、英語対応のサイトにする事とします。それでは本日はこれにて！
(2021/1/8) メニューサイトのデザイン、レスポンシブデザインの下準備として、サイト全体にfont-sizeとline-h eight（行間）を設定してみました。具体的にはルート要素（htmlセクション）は10pxになるように62. 5%、body要素は16pxになるよう1.6em、行間を2、h1要素は36pxになるように3.6rem、行間1.3、h2要素 は24pxになるように2.4rem、行間1.3に取り合えず設定完了。次回は中間目標に設定してたメディアク エリを利用したレスポンシブデザインに先に取り掛かろうと思います。ただ、予備知識が結構いるの で、しばらくgoogle先生を複数読み漁ってから開始します。
(2021/1/9) CSSの見直しを行いデザインの微調整実施、具体的には、ロゴを除く画像のwidthはすべてCSSで記述、 またWidthの値をpxから%へ変更、CSSにて余分が記述が散見されたので削除、統合及び画像の縦横比が オリジナルと変わらないように、画像にはすべてheight:autoを追加、body要素にpadding: 0を追加。 本日は微調整で終わりましたが、現在、レスポンシブデザインの為に適切なブレイクポイントの確認、 viewportの設定を学習中。
(2021/1/10) ブレイクポイント調べれば調べるほど、どのpxで区切れていいかわからなくなってきた。とりあえず、 現在、スマホ用、タブレット用、PC用で分ける為、2つのブレイクポイントを設定するのが主流のよう だが、メンドクサイのでスマホ用とPC・タブレット用に分け1つのブレイクポイントで設定する予定。 （※テスト用のシンプルなhtml・CSSファイルで検証中）また、肝心の分岐される基準となるpxだが、 近年のスクリーンサイズの多様化で、製作者によってさまざまな考えがあり、google先生で調べてい てもまちまちである。 皆さん、直近のデータを元に結論をだされてますが、こればかりは各画面の見え方をどうしたいかの で、主観が入っていると思われる。よって俺は、767pxをブレイクポイントして今後記述していく事に する。余裕ができたらもうちょい考えて、自分なりのpxに変更する可能性も多いにあるけど(^-^;。
(2021/1/11) とりあえず、test用のhtml・cssファイルにてレイアウトの検証中。何度も何故？っていう突然のレイ アウト崩れ、またどうやったら上手くいくかさっぱり分からない事も多々ありましたが、何とか7割位 はすすみました。あとは、メニューバーの微調整と、サイト名とロゴの調整、あと余裕があるような らスマホ用の表示のメニューバーは、よくスマホサイトである、横三本線のMENUもありかなと思った ので、ロゴ＆タイトル調整してみて全体のバランス考えて要検討です。
(2021/1/17) ここ数日間、このサイト作成さぼってた分けではないんですが、レイアウトにはまってました。各要 素の配置もなんですが、特に要素間の余白の設定！なぜ、ここにこんな余白がはいるのか？この余白 はどうしたら思い通りの余白に設定できるのか？ほんとーーにややこしい。。同じような事につまず いている人のブログやら解説サイトとやら読みまくって、実際に自分のPC画面、スマホ画面で検証の 繰り返し。。。独学は効率が悪いんでしょうけど、お金かけてまでサイト作成に打ち込む気持ちもな く、ただ見た目は思い通りに制御し納得はしたいという微妙なジレンマの中作業中。Webサイトって何 かしらの目的の表現手段の1つだと思うんですが、その手段で躓くと本当に嫌になってきます。なので、 現時点では疑問解消度6割くらいなんですが、妥協して明日から理解できた部分でメインサイトに実装 していこうと思います。
(2021/1/23) ここ数日間、本当に分からずに試行錯誤していたレイアウト絡みの事が解決したので、忘れないよう に記録しておきます。ブロック間の余白のコントロールについてです。ブロック間はデフォルトで 改行が入るので自動で余白が入る事は知ってたんですが、見栄え的にどうしても納得がいかなかった ので、何とか好みの余白にコントロールできないものか試行錯誤してました。解決方法としては、こ の余白、どうやらfont-sizeが起因になっているようで、ブロック間の余白を詰めたい親要素にfont-s ize:0を設定してやれば解決する事が分かりました。これコーディングする人にとっては常識なのかも しれませんが、ググりまくりましたが、まーのってないのってない。何とかそれっぽい事が書いてあ る情報見つけて、ダメ元でやってみたらうまくいきました。本当に疲れました。。。 あと余談ですが、同じブロック内の右側余白を縮め方もわかんなかったんですが、font-size:0でこれ も解決してしまいました。なんで解決したのか原理は全くわかりません。。。原理が分からないと同 じような事がった時、まったく対応できないのでおいおい調べてみます。
(2021/1/24) 今日で、サイト作ろうと思ってから35日目、ぼちほち進めてはいますが、進捗はというと、うーん、 まずまずなのかなぁ。。。何とも言えない所です。まーわかんない事だらけで、躓きまくりです。慣 れてる人なら、記事も含めて1日で終わるくらいの出来かと思います(^-^;。今後の予定は、もうちょ いレイアウトいじって、ハンバーガーメニュー実装して、自動で更新日付が入るようにして（やり方 全然分かりませんが）、SNS連携させて、仮に作っているメニューを本格的に、どんなコンテンツを作 るか考えて、コンテンツ実際に作成して、タイポグラフィも含めもう少し、素人っぽくないデザイン になるようにデザインの勉強して、最新記事がTOPページに表示されるようにして（PHPでの実装が必 要ぽいので、途中でWordPressで作成に切り替えるかも。。）、最後に英語対応のサイトにしたい。。。 まだまだ気の遠くなるような道のりですが、また飽きて、作成を辞めてしまわぬようぼちぼち進めて いきたいと思います(^-^;。