Webサイトをリニューアルしました

1月末にWebサイトのリニューアルを行いましたが、今回のイラスト追加をもって完成です。もっとやりたいことがあったんだけど断念しました。前回のデザインに飽きてきた＆スマホ完全対応＆メンテナンス性の向上を実施したかったのが動機です。
黒ベースのデザインから白ベースのデザインに移行したので、久しぶりにお越しくださった方はどのサイトに来たのかわからないかもしれませんね。

今回のテーマは『下校』。

解説は書いてる通り。全身画像を久しぶりに描きましたが、難しかったです。でもめっちゃ楽しかった。みんな、末永く爆発すればいいさ！

備忘録がてら、変更したところをまとめてみます。

ロゴページは独立させて、後日別のサイトでアップする。http://nekoproject.net/は創作のみ。その他の優先度を整理。
インポートファイルをまとめる
Windows XPもサポート終了することだし、html5化＆CSS3化してスマホとパソコンの両方に対応。
パソコンとスマホで別のファイルを作りたくないので、土台になるファイル1つにして、パソコンとスマホで読み込むデザイン＆スクリプトを分ける。
随所に使用していたテキスト画像を、ふつうのテキストに。
パソコン版は、トップページをペライチにして遊んだ。
その他スマホデザインで便利＆使い勝手向上を目指した。

いくつかピックアップします。

ロゴページは独立させて、後日別のサイトでアップする。その他の優先度を整理。

ロゴは創作の一環なんですが、小説との関連性は低いので分けることにしました。
その他整理したものと理由を抜粋すると……。

旧デザインではブログへのリンクをメニューに組み込んでいましたが、プログラム的な話が多く、さらにサイトからのアクセスも低いので優先度を下げました。今はAboutの管理人エリアにリンクを貼っています。本当に興味ある人はそこからでも見てくれるでしょう。興味ない人には関係ないし。
Aboutからプロフィールを削除。いやもう、見てられなかったので削除。Twitterへのリンクだけは残しました。
メールフォームをAboutに統合。必要な要素ですが優先度は高くないのでAboutに混ぜました。
小説ページを作って長編と短編を突っ込んでいましたが、優先度をアップさせてトップページから各小説ページに飛べるようにしました。やっぱりここが本命だよね。

こうやって見るとAboutの加工が多いですね。

インポートファイルをまとめる。

今まではヘッダ部分をこんな風に記述していました。

<html>
<head>
<title>NekoProject</title>
<link type="text/css" rel="stylesheet" href="/common/css/import.css">
<script type="text/javascript" src="/common/js/jquery.js"></script>
<script type="text/javascript" src="/common/js/default.js"></script>
</head>

こうすることで、スタイルシートやjavaScriptとhtmlファイルを分けることができるので、デザインやスクリプトを変更したい場合は、import.cssファイルとdefault.jsファイルを編集するだけでOKでした。しかし、新しいJavaScriptを追加したい時は、全ページ修正しなければなりませんでした。それが面倒だった。
なので、このように修正しました。

<html>
<head>
<title>NekoProject</title>
<?php virtual("/common/include/import.inc") ?>
</head>

import.incの中はこんな感じ。

<link rel="stylesheet" href="/common/css/default.css" media="all">
<script type="text/javascript" src="/common/js/jquery.js"></script>
<script type="text/javascript" src="/common/js/default.js"></script>

新しいファイルを追加したい時は、import.incファイル内を修正するだけ。これだけで全ページに適用しているスタイルシートやスクリプトをまとめて変更することができます。わざわざ上書きアップロードする必要もないので、ずいぶん楽になりました。
念のため言いますが、現物のファイルはもっとアレコレ書いてます。htmlソースを見ると幸せになれるかもしれない。~~そして何やっとんじゃってなるかもしれない。~~
ちなみに、NekoProjectは全ページPHP化しているので↑のやりかたをしていますが、htmlで運用している人は、SSIのincludeを使うと良いと思います。<!–#include virtual="/common/include/import.inc" –>みたいにね。

※htmlでSSIを使うには、htaccessで設定しないと使えないので要注意。
※SSIが使えないサーバーもけっこう多い。

土台になるファイル1つにして、パソコンとスマホで読み込むデザイン＆スクリプトを分ける

CSSやjavaScriptだけで行うレスポンシブデザインが苦手なので、ユーザーエージェントを元にスマホか否かに振り分けてからインポートファイルを読み込んでいます。
こんな感じ。

<?php include("./common/include/branch.inc"); ?>
<html>
<head>
<title>NekoProject</title>
<?php if (is_mobile()) { ?>
<?php virtual("/common/include/mobile/import.inc") ?>
<?php } else { ?>
<?php virtual("/common/include/pc/import.inc") ?>
<?php } ?>
</head>

phpでincludeとvirtualを使い分けているのは、virtualだと読み込みファイルのphp構文を処理してくれないから。includeはサイトルートからのパスを受け付けてくれないから苦手なんですがね。仕方ない。

参考サイト

Web サイトのスマートフォン最適化: UA 判別篇 · terkel.jp

テキスト画像を、ふつうのテキストに。

今までは画像を使用していましたが、最近ではローカルにフォントがなくても表示できるウェブフォントの利用が簡単になってきたので、そちらを使用することにしました。

画像編集ソフトをわざわざ立ち上げなくても、好きなフォントが使用できるのはとっても良いことです。ってか、本当に楽。
ちなみに、タイトル部分がElsie Swash Caps <http://www.google.com/fonts/specimen/Elsie+Swash+Caps> で、メニューの部分がWire One <http://www.google.com/fonts/specimen/Wire+One> 。両方Googleフォントです。

参考サイト

今さらながらWebフォント「Google web fonts」の使い方・実装手順メモ | OZPAの表4

スマホデザインで便利＆使い勝手向上を目指した。

スマホへ完全対応したのに伴い、メニューを再考することにしました。Long StoryとかAboutを横に並べたら、文字小さくなっちゃうもんね……。

上部にある『≡』をクリックすると、

メニューが出てきます。

小説カテゴリは、本のマークのメニューが追加されます。これをクリックすると、

本文用のメニューが出てきます。テキストサイズと行間を微調整することができます。好みにいじってやってください。

参考サイト

超簡単jQuery！"toggle系メソッド"を使ってアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG
[JS]「jQuery Text Resizer」と「jQuery Cookie」を利用して文字サイズを大中小と変更する

nekoprojectブログ