漫画家になったのでサイトをリニューアルした
空廻《そらね》ロジカです。昨年2021年7月に漫画家デビューしました。
それまではイラストレーターのような作家のような……お仕事を細々としていました。
今回、私のWEBサイトをリニューアルしたので、何をしたかをメモしておきます。
はじめに
私は「絶対に独自ドメインのサイトを持っておくべき」派なのですが、以前から保守管理が厳しくなってきていました。
主に、最新のWEB制作のお勉強が、ですけど……(Vue.jsの本とか買ったけど何もわからない!)。
ずっと前はWordPressを使っていて、その後は大して情報もないしブログも書かないし、とシングルページにしていました(データベース使えるサーバも解約した)。
ですが、情報が増えてきてさすがに厳しくなってきて……数ヶ月かけて少しずつリニューアル作業を進めてきて、ようやく完成です。
漫画家になってから大分経ってしましました💦
というわけで、何を参考にしてどんな手法を使ったか、自分が忘れないためにもメモしておきます(もうかなり忘れてる気もする……)。
設計の参考(インスピレーション)にさせていただいたサイト
デザイナー・尾花大輔氏のサイト d-obana.com
集英社デジタルマーガレットのサイト digitalmargaret.jp
開発環境
手打ち&EJSです。
- テンプレートエンジンでHTMLを管理しよう。EJSのススメ dekikotu.com
ずっと、今時のWEB制作についていけてない=静的サイトジェネレータを扱えない・理解できない・勉強する時間もないことがコンプレックスで……簡単な静的サイトジェネレータのCatalpaも試しました。
- Catalpa catalpa.oss.onl
でも、やっぱりだめだった……。スイスイ使えるようになるまでの試行錯誤がストレスでした💦
ロゴとか素材
素材を作ったのは右上のシェアアイコンです。Font Awesome 5 Freeのが気に入らなかったので……。
ロゴはなんか適当に。いつか、ちゃんとプロの方に依頼して作っていただきたいです。
使用・参考にさせていただいたスクリプト
絶対にjQueryを使ってなるものか、の思いでスクリプトを検索しました……!!
- 【JavaScript・CSS】スクロールしたらフワッと要素を表示させるスクリプトの使い勝手を良くしてみる noze.space
下からのスクロールで逆に要素をフワッと消す処理を追加しました。
- 下スクロールで消える・上スクロールで現れる素の JavaScript firstlayout.net
ヘッダー。そのまま使用。
- highendrawer.js
github.com
mobile.twitter.comスワイプできるスマホページ用のドロワーメニューつくってみたhttps://t.co/zWsrXAkahz
— ymxmore (@ymxmore) January 5, 2017
メニュードロワーです。そのまま使用。
あと、ローディングアニメーションで読み込み中の画面全体を隠すスクリプトは、色々組み合わせてるため、どこを参考にしたかわからないです……💦
DOMが読み込まれたら非表示ではなく、ページ内の画像がすべて読み込まれたら、に改造している筈……。
謎のこだわり
静的サイトだけど拡張子.htmlを見せたくない、という謎のこだわりで、.htaccessをいじって隠しました。
RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME}\.html -f RewriteRule ^(.*)$ $1.html [L]
完成!
HTML&CSSについては特に語りません。私にとって日本語の次に馴染みのある第二言語なので……。
完成したサイトはこちらです!
SEO? 知らない子ですね……。