トップページ公開とファビコン作り

本日の午後3時頃、ついに製作中のホームページのトップページを公開しました。
今月に入ってからサイト制作の基礎から勉強し直し、
3週間ほどかけてようやく1ページ目の公開です。
時間をかけすぎだろ、と突っ込まれそうですが、感慨深いですね……。

こちらは以前の記事でも紹介した、製作中のトップページのSS。
現在のトップページはヘッダー部分に背景画像を設定し、
サイト名やナビゲーション部分の文字をより大きめにしています。
それ以外の部分は手を加えずにそのまま。

シンプルとはいえ、これだと寂しいので
トップページにはサイトの更新情報も見やすい形で表示したいですね。
ちょっと調べてみたところ、手軽に更新できるWpの記事を
そのままhtmlの静的ページに表示する事も可能らしいので
将来的にはその手法で実装できたら、と考えています。
ただ、.htaccessについての知識が要りそうなので
実装はもう少し先になるかもしれません……。

あと手を加えたい要素がマルチデバイス対応。
簡単に言うとスマホ向けの表示設定です。
現時点でのトップページはゴチャゴチャしておらず、
自身のスマホで表示した際もそこまで見づらくは感じなかったため
ここに関しては特に何も加えていませんが、
これから作る動画アーカイブの紹介ページや
ゲームの攻略サイト部分は多数の画像やテキストを入れていく事になるので
また色々勉強していくつもりです。

ついでにもう1つ、今日のサイト制作でやったものがファビコン制作。
ファビコンというのはブラウザ上や、ショートカットアイコンとしてPCに表示される

こういうアイコンのことです。
ブラウザによってファビコンも16×16(px)だったり32×32(px)だったりと様々で、
作り方も様々です。もちろんドットの手打ちでも作れちゃいます。

自分の場合、まずファビコンに使いたい大きめの画像を用意しました。

そしてこの画像を、
https://ao-system.net/favicon/
こちらのサイトのツールによってリサイズしてもらい、
拡張子が”.ico”の専用データに変換。
出来上がったファビコンをサーバーにアップロードした上で、
トップページのソースに

こんな記述（薄緑部分）を書き加えたらできあがり。
当ブログも同じファビコンを表示するように設定しましたが、
そちらは少し慎重に弄る必要があったため、ここでは割愛します。

ファビコンって、別に設定しなくても全く問題無い要素なのですが
せっかく自分で作ったサイトだからという事で
デザインは手抜き気味ではありますが用意してみました。
今更ですが書かれてる「KT」は
「攻」略屋「T」rigger Happyのイニシャルとなっています。
昔ニコニコ動画で字幕プレイ動画を投稿していた頃、
KT（改造タイム）とかKT（買い物タイム）といった
略語ネタが自分の動画内でちょっと人気だったようなので
ここでも使ってみることにした訳です。
ここを読む前に気付いたあなたはトリガーハッピー動画と
長く付き合ってくださっている方なのでしょう……

ひとまずトップページと、このブログはネット上に公開できたので
続いてはサイトの紹介や説明などを表示するAboutページの作成に移ります。
そちらも特に難しい構造にはしないつもりなので、
トップページのソースを書き換えるだけですぐに仕上がってくれそうですね。
勢いが良い時は勢いに乗って、どんどんサイトを完成に近づけたいものです……

それではまた！