リニューアルをしたい！！！…と思い続けて何年経っただろうか。このサイトはもともとイラスト倉庫として使いたくてサーバーを借りていたんですが、いまはpixivやポイピクなどの外部サービスがだいぶ使いやすいのでデータを集約する必要性を感じず。じゃあせめてブログでも書くか…と、数年前からなんとな～くたまに書いていたんですが、なにせ目的が無いから放置気味。昨年なんて3つしかブログ書いていないありさまで…。

サーバーとドメインをレンタルしている費用が勿体ない…！そしてWordpress勉強するする言ってるものの、本当に、未だに、何一つ理解をしていない…。（テーマのカスタマイズ程度は何とかできるといったレベルです）

頑張りました…

そんなタイミングで、借りていたテーマのサポートが終わってしまったことも発覚。サイトに飛べなくなっていた…。

世に素敵なテンプレートは沢山あるんだけど、すみずみまで好きにカスタムできるかと言ったら実は1から作るよりも難しい。（むりっやり外部CSSを読み込んでなんとかしていた）

まあサイトで凝ったことをするわけでもないし、せっかくの機会だからとテンプレートの自作に挑戦したわけです。自分のWEB制作のレベルは、静的ページはまあなんとか出来るかなという程度です。phpの知識は【無】。本当に何にもわからないくらい。。。ですが、教本やHOW TOサイトのコピペでなんとか形になりました…。これをきっかけにもう少し勉強したいと思ってます。

以下、ざっくりした作り方メモ。

（1）サイトの草案を作る

デザインを軽く…。せっかちなので紙で簡単にレイアウトを作ったら画像作成から画面に移行しました。本当はワイヤーフレームとかしっかり作った方が作業がスムーズだけど、手を動かしながらイメージを固めたかったので。。。

アナログっぽいサイトにしたかったので水彩風の素材を沢山作りました。ipadにて。画像素材作成は「Adobe Fresco」というアプリをメインに使ってます。アナログの風合いも凄くリアルに再現されるのと、その後の作業がしやすいPSDで書き出せるのが最高。一つの画面に素材を沢山描いてからphotoshop（PCへ移動）で1つずつ切り出してます。

（2）静的ページを作る

手元のレイアウトを参考に、ローカル環境でコーディング。

・index用ページ（一部動的ページ）
・ブログ一覧ページ（動的ページ）
・単体記事ページ（動的ページ）
・他、プロフィール記事など個別ページ（静的ページ）

後からテンプレート化します。ここが一番時間がかかった。Wordpressに載せるときに管理しやすいようidやclassを考えます。

（3）テスト環境の作成

ここからphpの作業。まず、Wordpressのカスタマイズをするためにローカルにテスト環境を作ることから始めます。

①XAMPP（ザンプ）をインストール
②MySQLの設定　データベースの作成
③ローカル環境にWordpressをインストール
（「htdocs」フォルダの直下にWP関連ファイル一式を入れて管理ページにログイン）
かなり参考にさせていただきました。
https://bazubu.com/xampp-wordpress-23795.html

④テスト用Wordpressの完成
⑤「wp-content」>「themes」の中にデザイン用フォルダを作成
⑥作成したデザイン用ファイル※　をどんどん格納していく

（４）各要素をパーツ化（phpファイルに）する

ヘッダー、フッター、コンテンツ部分…と、共通パーツとそうではないパーツを切り分けてphpファイルにしていきます。が、ここからの知識が「無」のためこちらのサイト様の記事を参考に一つずつ対応していきました。神サイト様です。。。

【テーマ自作】WordPress オリジナルテーマの作り方と基本

こんなに素晴らしいハウツーがネットには沢山ある環境、感謝してもしきれない…。一応教本も一冊持っているのでサイトと本と行ったり来たりして作業を進めました。最初は全く分からなかったけど、順を追って作業するうちに書いてある内容がわかってくるのが楽しい。

まあなんといっても「無」なので、わからないことを紐解いて明確にするのが何より必要かなと思ってます。

（5）テストサイトで確認

おお！！出来た！！！思ったよりもすんなりと表示されました。あとは、表示崩れを起こしているところをかをCSSで直してアップし直しての繰り返しです。静的ページをしっかり作っていればここの作業はスムーズのようでした。

しかしどうしても起こってしまう予期せぬエラー。サイドバーが無限に表示されたりトップページへのリンクがうまく貼れなかったりと、静的ページではあまりハマらないようなミスに何時間も手がかかってしまう始末。

自分の場合、phpについての理解が全くないのが最大の弱点ですね…恐れ知らずすぎる。なんもコードわからん。今回一応なんとか形にはなったのですが、エラーが起こった時の調査や応用などが出来ないので今年は…勉強…する！！

（6）本番サイトへ反映！

一般的なテーマのインストールと同じく、子テーマも作ります。サイトが無事に切り替わればリニューアル成功です。いや～難しい！

2000年代前半からインターネットにいて、ホームページビルダーでサイトを作っていた世代です…。イラストサイトはもちろん持っていたという。今はスマホ対応とかも考えないとなので、自サイト運営の敷居は高くなってしまったかなと思います。でも、楽しい！！！自分の城を自由に好きに作れるのは感動です。

今回はそれはもう思う存分好きにしたかったので、ちょっと当時の香りも入れてみました。

同盟バナーや、200×40pxのバナー。自カプは身長差があるので200pxの中に収めるのがとても難しかったです。
古（いにしえ）の同人サイト…。好きすぎる…。

というわけで、今年はもっとサイトを活用したいなと思いました。おかしいところは随時直してまいります。

（7）微調整は続く…

いざ本番サイトの方のWordpressにテーマをインストールしてみると…やっぱり崩れちゃうなあ。見出しや画像サイズなどの微調整が延々続く…。管理画面の編集画面や外付けのCSSで無理やり、サクラダファミリアのように調整していたツケです。記事を投稿するたびに修正が必要かもしれない。気長に頑張ります。