漫画家になったのでサイトをリニューアルした

空廻《そらね》ロジカです。昨年2021年7月に漫画家デビューしました。
それまではイラストレーターのような作家のような……お仕事を細々としていました。

今回、私のWEBサイトをリニューアルしたので、何をしたかをメモしておきます。

新サイトデザイン(PC)
新サイトデザイン(PC)
https://logica.work/

はじめに

私は「絶対に独自ドメインのサイトを持っておくべき」派なのですが、以前から保守管理が厳しくなってきていました。
主に、最新のWEB制作のお勉強が、ですけど……(Vue.jsの本とか買ったけど何もわからない!)。

ずっと前はWordPressを使っていて、その後は大して情報もないしブログも書かないし、とシングルページにしていました(データベース使えるサーバも解約した)。

旧サイトデザイン(PC)
旧サイトデザイン(PC/タブレットスマホでは横のグレー領域は表示されない)

ですが、情報が増えてきてさすがに厳しくなってきて……数ヶ月かけて少しずつリニューアル作業を進めてきて、ようやく完成です。
漫画家になってから大分経ってしましました💦

というわけで、何を参考にしてどんな手法を使ったか、自分が忘れないためにもメモしておきます(もうかなり忘れてる気もする……)。

設計の参考(インスピレーション)にさせていただいたサイト

開発環境

手打ち&EJSです。

  • テンプレートエンジンでHTMLを管理しよう。EJSのススメ dekikotu.com

ずっと、今時のWEB制作についていけてない=静的サイトジェネレータを扱えない・理解できない・勉強する時間もないことがコンプレックスで……簡単な静的サイトジェネレータのCatalpaも試しました。

でも、やっぱりだめだった……。スイスイ使えるようになるまでの試行錯誤がストレスでした💦

ロゴとか素材

素材を作ったのは右上のシェアアイコンです。Font Awesome 5 Freeのが気に入らなかったので……。
ロゴはなんか適当に。いつか、ちゃんとプロの方に依頼して作っていただきたいです。

ヘッダーのロゴ

使用・参考にさせていただいたスクリプト

絶対にjQueryを使ってなるものか、の思いでスクリプトを検索しました……!!

下からのスクロールで逆に要素をフワッと消す処理を追加しました。

ヘッダー。そのまま使用。

メニュードロワーです。そのまま使用。

あと、ローディングアニメーションで読み込み中の画面全体を隠すスクリプトは、色々組み合わせてるため、どこを参考にしたかわからないです……💦
DOMが読み込まれたら非表示ではなく、ページ内の画像がすべて読み込まれたら、に改造している筈……。

謎のこだわり

静的サイトだけど拡張子.htmlを見せたくない、という謎のこだわりで、.htaccessをいじって隠しました。

RewriteEngine on

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html [L]

完成!

新サイトデザイン(PC)
新サイトデザイン(PC)

HTML&CSSについては特に語りません。私にとって日本語の次に馴染みのある第二言語なので……。

完成したサイトはこちらです!

logica.work

SEO? 知らない子ですね……。