CQL草テイスティングアンソロのまとめページ作成をなんとなく流れで勝手に担当しました。一応アンソロの体裁の企画だしまとめページあったほうがいいよねぇっていう。

そのうちまた遊びでサイト作成することもあるかもしれないので、使用したテンプレとか素材とか参考サイトだとかの自分用メモ記事です。

テンプレート

りんごちゃんのドット絵を先に発注していたので、ドット絵が似合うデザインかつ、TLに流した場合スマホで読んでくれる人の方が大多数だろうと思われるので、必然的にレスポンシブなサイトが目標に。

htmlとCSSはﾁｮｯﾄﾜｶﾙぐらいで、イチから勉強して作る元気も無いので、テンプレート探したのがこちら。

すごいドンピシャ！とてもありがたい。

Boostrap（の、Ver.3）で構築されているテンプレートで突貫ミリシラでもなんとかコピペで弄れそうなところも良かったです。グリッドシステム万歳。

とはいえ使ったことはなかったので、このへんでちょっと付け焼き刃はした。最新バージョンは色々便利になってるみたいなので、次作るときはBoostrap5かな。

Webフォント

借りたテンプレートのデフォルトはGoogle FontsのVT323で、ドット感があって可愛くて良いんだけど当然ながら日本語には対応してないので変更することに…。

CSSで読み込むのやってみたかったので角丸ゴシック（M PLUS Rounded 1c）採用。りんごちゃん可愛いので丸ゴシックかなって…。Webフォントはあんまり突っ込んで調べる余裕が無かったので次作るときはちゃんと調べたい。

Webアイコン

ちょっとした飾りがほしかったのでWebアイコン採用。有名どころらしい「Font Awesome 6」を目次とハイライト画像のリンクのとこにちょこっと使いました。無料版だとあんまりアイコンの種類が無いんだけど、色も変えれるし画像で置くより便利だね。

下記サイト参考にしましたありがとうございます。

https://pix524.net/fontawesome-color/

ハイライト画像

草の日（9月3日）に告知したときに作ったハイライト画像も折角だし置きたいけど、画像のまま単純に埋め込むのはデザイン的に微妙だし、かといって別ページに遷移させるようには作りたくなかったので、モーダルウィンドウ化として定番のjQuery「Lightbox」採用。

凝ったことしなければ置くだけで良い感じになるの素晴らしいよね。CSSでデザイン変えられるらしいけどそのままでも十分である。

下記サイト参考にしましたありがとうございます。

https://webdesign-pg.com/lightbox2

トップに戻るボタン

そこそこ縦長になったのでトップに戻るボタンもつけました。ある一定以上ページ下がるとﾇｯってでてくるのやってみたかった。

下記サイト参考にしましたありがとうございます。CSSまでつけてくれてとても親切だった…。

Favicon

PC向けにFaviconないと寂しいなぁと思ったので（スマホで見る人の方が多いので仕込みに気づいて貰えない可能性は察しつつも）実装しておりました。

※PCでしか見えないと思ってたんだけど、スマホもタブ一覧とか表示させたときは見えるらしくて気づいて貰えてたの嬉しかった

Favicon用の画像は.icoなので別途で作る必要があるんですが、こちらのジェネレーターをお借りしました。

ファビコン favicon.ico 作成

Faviconの実装、サイトによって差異があってモダンブラウザだと type=いらんて書いてるとこも多くて、でも結局ちゃんと入れないと反映されないってとこで無駄に1時間ぐらい嵌った…。

<link rel=”icon” type=”image/vnd.microsoft.icon” href=”favicon.ico” />
<link rel=”shortcut icon” type=”image/vnd.microsoft.icon” href=”favicon.ico” />

まとめ

ただのブクマ記事になってしまいましたけど、ひさびさにサイト作るの楽しかったので、機会があればまたやりたいなぁ。あとやっぱりね、素敵な素材があると見栄え良く出来るなってしみじみしました。

いつもありがとね@harubasan

おわり。