サイトほぼ全体をレスポンシブデザインに対応致しました！！
長年挑戦しては挫折していた日々を思うと泣けてきます……。
パソコン表示では下記の2つのような感じで、
スマホ環境では下記のように表示されるはず。
そんなわけで追記。
数年越しの野望だったレスポンシブウェブデザイン大作戦をどうにかやり遂げることができて感無量です。
最後にサイトデザインに真剣に取り組んだのは去年の創人ギルドのサイト作り以来ですね。
案の定CSSの基礎をまるッと忘れてしまい、レスポンシブ大作戦に取り組もうにも CSS3の解説サイトを見てもちんぷんかんぷんだったり、目が滑ったり、寝落ちしたりと全く身に着けることができなかったんですね……。 さすがにこのままで終わるわけにはと一念発起して、CSS3とりわけレスポンシブウェブデザインについて丁寧に解説されている教本を購入したのでした。
その教本での解説に従って作り、己の浪漫のためにjQueryを取り付けたが今回のデザインというわけです。お手本が素敵でしたので、ご覧の通りの素敵なデザインになりましたとさ。ありがとうございました！ 各ページ内のGoUP!プラグイン（出現するボタンクリックでページ上部までするするスクロールする仕掛け）や絵置き場のモーダルウィンドウは実用性よりも割と自分の趣味の方が強いですね。浪漫万歳！
CSSとHTMLの基礎の基礎もすっかり抜け落ちていたこともあり、大変勉強になりました。苦手な部分はノートに書き込んで読み直した甲斐がありました。 idとclass、remとemの違い。HTML5で新しくなった要素などなど。 h1などのヘッディングコンテンツ、img textraなどのフレージングコンテンツはきちんとマスターできたら重宝するのでは……。 いやー、試験前の受験戦士の気持ちを久しぶりに味わいました。
さてさて、お世話になったCSSフレームワークのご紹介。
Papier
藤里さんに教えて頂きました。
シンプルなのにお洒落かつ驚きの軽さ！ おかげさまでメールフォームの確認画面などもこちらで一気に見やすく変更できました。
また、合わせて教えて頂いた記事「通常サイトに不要な機能をそぎ落とした軽量CSSフレームワーク「Papier」を使ってみた」もとても参考になりました。 藤里さん、その節はご紹介頂きありがとうございました！
一番楽しかったのはイラスト置き場のjQueryです。そして、一番苦労したのはイラスト置き場のjQuery入れ替え大作戦ですかね！（…）
元々使用していたhighslideさんも好きなんですが、スマホ環境だといちいち拡大しないと見づらかったのが気がかりでしたので思い切って変更しました。 元のイラスト置き場のファイルを見ながら、新しい頁へちまちまサムネイルやリンクを貼り付けていく作業はなかなか辛いものがありました。 こちらを活用して拍手のお礼やロマンシングメガネ配布ページもレスポンシブ対応できて満足です。
ロマメガ配布ページには、お父さんの新規スクリーンショットがあるのでぜひ！（笑）
「先生と番犬」もスマホ環境からでもモフモフして頂けますよー。うふふ。 あとは、「Celeste」と短編小説のレスポンシブ対応に取り掛かりたいです。もうしばらくお時間を頂きます。 ラーニングで得た知識が抜け落ちないうちにがんばりたい。
それにしても、今回導入したGoUP!プラグインがとても楽しくて楽しくて！ 意味もなくスクロールしてはページ上部へ戻ってニコニコしています。