スタイルシートの整理2日目

ローカルWikiにテンプレートを適用する2日目

ひとりWikiテンプレート試作2015年10月26日のぶん
ひとりWikiでつくる個人的なサイトのデザイン現状

個人的なサイトを作っています。公開するつもりもありますけれど半分は「自分用のまとめサイト」のつもりです。

使うソフトが決まってテンプレートを引っ張ってきてソフトで使えるように修正しました。まだアップロードしていませんので画像となりますが、上記の画像のようになります。アイコンもなにもないので殺風景ですが殺風景なのが好みなのでこのままいきます。

重複するコンテンツとかコンテナとかスタイルシートの名前を整理しました。

スタイルシートで指定した画像の背景が利かない

背景がうまく利かないなあと試行錯誤していました。今回は表示速度を上げるため、複数のファイルに分割していたスタイルシートをひとまとめにしました。リセットのスタイル記述を後のほうに書いたため、bodyタグの背景がきえました。スタイルの記述はあとに読んだものを優先しますので、リセットを使う場合は最初に記述します。複数ファイルでスタイルシートを読み込む場合も同様に最初に読み込むように設定します。

修正点

wordpressでもMovableTypeでも既存のテンプレートを流用する場合は、ソフト側の決まりとテンプレート側の決まりの衝突を回避せねばなりません。

今回はファイルの行数がすくないのとシングルカラムの簡素な構造なのでややこしいことにはなりませんでした。ただ、ふたつのありものを掛け合わせるのでよく使う名前はぶつかります。

今回は「コンテンツ」という名がidとclassで重複したので片方を「記事(kiji)」に置き換えました。ひとりWikiの目次でつかうほうを優先します。

その他の修正としましては目次の部分のレイアウトを微調整。不要なタグを処理。画像の挿入にスタイルを掛けるのが大変なのでテンプレート側の既存の枠は使わないことにします。まるでテキストサイトですが、これを自分ですべて最初から作ろうとおもうと全くできなくなるので、どなたかが作ったテンプレートがあると作業とオチの付け所が見えやすくなります。句切り線など細部の調整はもとのデザインを引き継ぎますので、私が改悪しなければセンスのよいものが引き継げます。

落しどころ

作業のおとしどころとしましては、こんなところかなと。ひとりWikiのほかのテンプレートが自由に互換できることろまで持っていくべきなのかもしれませんが、テンプレートとスタイルの組み合わせでこの青い背景の真ん中揃えができれば充分です。

特徴は、いちおうサイズ指定でウインドウ幅を変えると背景が消えて狭い画面に対応します。コードはレスポンシブのスタイルを使っていると思うのですが、HTML5とCSS3に規格が上がったのでもしかすると要らないコードを敢えて使う書き方になっているかもしれません。

あとは使って見てから修正します。

ひとりWikiの利点

書き出すときに公開用と確認用のテンプレートを別においてます。解析と広告のサーバー側のタグ無しで書き出して確認。大丈夫なら公開用は公開用のテンプレートで書き出して、広告、解析込みのファイルを書き出せます。

phpのローカルでこれをやろうとするとかなり面倒くさいので、この一点だけでもひとりWikiを使う価値はあるとおもいます。

私の使い方

思いつきでサイト構成を考えず、一階層10枚くらいのファイルで作り始めるときは直感的に使えるひとりWikiは便利です。なにせ使うソフトがひとつで完結しますので、いままでのようにエディタをまたぐ必要もなく、テキストはテキストで集中して掛けるのが最高です。タグを見ながら書くのはちょっとなにかが違うのです。あたまの隅にずっと違和感があるよりは、文字だけ追いたい。