瀬戸餅屋ロゴ

ホームページ開設にあたって

2024/7/29 

はじめましての方ははじめまして、そうでない方はこれからもどうぞよろしくお願い致します、しいたけと申します。

趣味できららのオタクと旅行・聖地巡礼、Minecraftなどをやっています。

...多分ここに行きついているのはTwitterから来た余程物好きなフォロワーさんぐらいだと思うので堅い自己紹介文はここまでにしておいて。 もし私のこと初見の方がいらっしゃったら適当にTwitter(現X)なり前にnoteで書いた自己紹介なり見て頂ければ素性分かるかと思います。 ぶっちゃけますとこのページは記事のレイアウトどんな感じにするか決めるためだけに作ってますので適当に書いてます。 ひたすら文章なので大学の講義とかでたまにある文字だらけで見にくいスライドみたいになってますがあしからず。

それはそれとして記事としての体裁を保つためホームページ作るに至った経緯とか今後の展望、ホームページを作るうえでやったことなど書き連ねていきます。

ホームページ作るに至った経緯

これはリアルの話なんですが、この記事を書いている現在私は求職中でして、色々あってプログラマー志望になりました。 しかし、大学でちょろっとJavaとか触った程度でプログラミングに関する知識が全然ない未経験の状態、 さらにその大学は卒業しないで中退予定となるとなかなか厳しいのではないかと思われます。 そこで、幸い休学中で時間はいくらでもあるし、ホームページ作る勉強でもするかぁとなってできたのがこのサイトです。 勉強し始めて1,2週間にしてはなかなかいい感じにできてるんじゃないかと思うのですがどうでしょうか? まあまだ改善の余地はあると思いますが。

あと、「瀬戸餅屋は、しいたけが代表の同人サークルです。」とトップページに書いてますが、 これは本当にコミケ等の即売会出たいな~と思ってるので先走って決めたサークル名をホームページの名前にした形になります。 由来は一之「瀬」と(「戸」)ももち(「餅」)に「屋」を付けたって感じです。 遅くても来年の冬とかで出たいね...。経緯は以上です!!!

ホームページを作るうえでやったこと

具体的にどうやってやったのかざっくり振り返ってみます。

まずはどうやったらホームページが作れるのか色々な記事を読んで勉強しまして、 とりあえずHTMLエディタレンタルサーバーを用意することにしました。 で、色々検討したところ、エディタは「Visual Studio Code 」、サーバーはスターサーバーの「無料レンタルサーバー」を使うことにしました。 ドメインは?というツッコミが入るかもしれませんがこの段階では初期ドメインそのまま使ってました。 そこからHTMLについて勉強し、ある程度の構造が出来たあたりでデザインが気になってきたのでCSSの勉強も並行して開始。 分かる人は分かると思いますがデザインは某サ終したきらファンをパクッ...参考にしています。 ロゴも自作したりして。

瀬戸餅屋ロゴ
瀬戸餅屋ロゴ(同じページで同じ画像何回も見せるな)

最初は文字手書きだったけど気に入らなかったのでフリーフォントの 「玉ねぎ楷書「激」無料版」 を使わせていただきました。めちゃくちゃそれっぽい(気がする)。ありがとうございます。

そんなこんなでそれっぽい形になってきたところで問題にぶち当たりました。それが、大量の画像をどう処理するかです。 1枚ごとに同じようなコードをタイトルなどだけ変えて書くのはあまりにも面倒な画像の量でした(旅行写真だけで500枚はある)。 そこでPHPを取り入れいい感じにHTMLのコードを出力してくれるようにしました。 この点については初心者ということもありまあまあ苦戦したので今度別の記事でまとめようかなと思います。 これがうまくいった時の達成感は凄かったですね。このあたりでプログラミングおもしれ~となってきました。 自分で色々調べながら独自のシステム(まあ他にもあるんだろうけど)を作り上げるのはなかなか面白いです。 あとこの段階でPHPのプレビュー表示するために開発環境をローカルで簡単に構築してくれる「XAMPP」を導入しました。

次に、個人サイトにはよくある昔ながらのアクセスカウンターが欲しいなと思い、こちらも色々参考にしながら自作しました。 これに関しても別の記事でまとめると思います。こんな感じで色々苦戦しつつPC向けのサイトが出来上がりました。 しかし今はスマホやタブレットなどがある時代。画面サイズに応じて表示変えたいよね~ということでレスポンシブ化にも対応しました。 CSSって便利ですわね。個人的にPCやタブレットなどでかい端末ではサイドバーを常時表示させつつ、 スマホなどちいさい端末ではハンバーガーメニュー(右上の三みたいなやつをタップするとメニュー開くやつ)にするのが大変でした。 あとそのサイドバーのレイアウトの色々。

こうしてサイト自体はだいたい出来上がり、いよいよ公開...の前に、 やっぱり独自ドメイン欲しい~となったのでスタードメインでドメイン取得、サーバーもドメイン契約するとついてくる高機能無料レンタルサーバーに乗り換えました。 そしてその後、色々の設定もしました。 Googleアナリティクス4(GA4)の導入、サイトのSSL化、インデックス登録のリクエスト、OGPタグ・ファビコン・アップルタッチアイコンの設定など... まあわざわざこのホームページスマホのホーム画面に追加する人いないと思うけどな! そしてものによっては設定が反映されるのに時間かかるのでそれを待ってる間にこの記事を書きつつ... そして時が来るのを待ってTwitterで公開!という流れでこのホームページが出来上がりました。 個人的には楽しかったしいい勉強になりました。これが就活、そしてその後に生きるといいのですが...。

今後の展望

今後のこのホームページの運用ですが、まずは聖地巡礼と温泉の写真整理して載せようと思います。 先にやっとけよという話なんですがさっさと公開したかったもので...。あと写真整理めんどくさくて...。 それと先に述べた別の記事も書こうかなと思います。多分この記事コーナーはそういったプログラミング関係の備忘録的な使い方すると思います。 あとは定期的にイラストや旅行写真、マイクラ建築は更新出来たらなと思います。絵を描け絵を。 というか同人サークルを名乗った以上即売会には出たいと思います。なる早で...。 いや就職後どうなるかそもそも就職できるのかといった感じなので保証は出来ませんが出たいと思ってるのは本当ですので。

そんな感じです。ここまでご覧いただきありがとうございました(読んだ人いるんか?)。今後ともどうぞよしなに。

コメント

タケシ丸ヒサノ

2024-10-1 18:03:18

同じく同人サークルのホームページを作成している者です。サークルのホームページをHTMLとCSSから自作している方をSNSで探したところ、しいたけ様の瀬戸餅屋ホームページに辿り着きました。今どき同人サークルでホームページを作ろうという方が少ないなか、さらに手打ちしようという方はほかに見つからず心強く感じておりました。ちょうどアクセスカウンターを作成していた頃に訪問させていただき、クローラーの部分など参考になりました。丁寧な解説をありがとうございました。この度ホームページを公開したため区切りとしてお礼の書き込みをさせていただきました。旅行や「まんがタイムきらら」などメンバーの趣味と近く、一同楽しく拝見させていただいております。今後の活動も楽しみにしています!

カテゴリー

新着記事

2024/10/14

【麻雀入門】完全初心者向けルール解説

2024/9/20

麻雀 待ち・役判定+点数計算ツール 使い方

2024/8/7

【PHP】アクセスカウンターを自作してみた

2024/7/29

ホームページ開設あたって