Seesaa ブログの旧べたろぐ。からこの WordPress にログを移しました。
タグ: Seesaa BLOG
カテゴリー
seesaa.Vicuna
WordPress を使う機会があって、その時に Vicuna – CMS をベースにしながらテンプレートを作成しました。そんなこともあってこの Vicuna – CMS を Seesaa BLOG でも使えないものかと思い立ち、移植してみました。Seesaa 独自のテンプレートタグの情報が少なすぎて悪戦苦闘しつつもなんとか形になったようです。
ページごとのレイアウト変更
オリジナルの Vicuna CMS と同じように、開くページによって body のclass 属性を変えることによってレイアウトが切り替わるようになっています。例えば、トップページとブログ内記事検索結果を見比べるとレイアウトが違うのがわかると思います。
パンくずナビとページャー
とりあえずな感じのパンくずナビを追加。次のページへのようなナビゲーションは Vicuna CMS 方式に。
コンテンツについては使うものだけ
サイドバー等に表示されるコンテンツに関しても使う物は修正。検索フォームとかなにげに面倒くさかった。カレンダーは個人的に必要ないと思っているので放置。それにしても Seesaa BLOG の Powered by なんちゃらはどうにかならんのかな。必ず表示しなければいけないにも関わらずソースが糞すぎる。そして修正できないというジレンマ。
なるべく日本語で
やっぱ日本人なので。でも、ところどころ英語のまま。
とりあえずファイル置いときます
スキンは適当なところにアップロードして、デザインのスタイルシートに以下のようなソースを書いてスキンを読み込む。
@charset "Shift_JIS";
/*
Theme Name: wp.Vicuna
Theme URI: http://wp.vicuna.jp/
Description: wp.Vicuna Structure Template + Skin
Version: 1.5.9
Author: wu
*/
@import url("http://hogefuga/スキン名(style-vegaなど)/import.css");なお、元にするデザインはデザイン一覧から 3 カラムレイアウトのものを適当に選ぶと幸せになれます。左のサイドバーに置いたコンテンツは div id="utilities" 内 dl class="navi" の中へ格納され、右のサイドバーに置いたコンテンツは div id="utilities" 内 dl class="others" の中に格納されます。え？言ってる意味がわからない？すいません。
ライセンスとか
オリジナルの Vicuna CMSのライセンスに準じます。自己責任で。
一足先に春気分に浸ってみた。でも、配布元のサンプルショットほどサクラの花ビラは目立たなかった。設定が悪いのだろうかとも思ったが、設定項目が 2 つしかないので間違えようが無い。まぁでも少し春気分を味わった。
ちなみに、Seesaa BLOG の記事を書くときは、あらかじめ作っておいてるテンプレ HTML 文書をローカルでプレビューしながら編集し、OK そうだったら記事内容を投稿フォームにコペコペしてます。
一昨日から夜勤のバイトしていて、帰って来ると風呂入ってお酒飲んでバタンキュー。彼岸のお団子作りです。
コメントを頂いていたので、とりあえず Lightbox JS とドロップシャドウの併用はできますよ例。
- Lightbox JS とドロップシャドウ併用
-
<div class="image"> <a href="http://seize-a-day.up.seesaa.net/image/bass.jpg" rel="lightbox" title="うちのバスちゃんズ" target="_blank"> <img src="http://seize-a-day.up.seesaa.net/image/bass-thumbnail2.jpg" width="150" height="112" border="0" align="left" alt="うちのバスちゃんズ" /> </a> </div>見やすいように空白類文字を加えました。
- 表示例
-
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ)と合わせて読んでみてください。
マウスが壊れている。ドラッグがうまくいかない。うまくブロギれない。そして眠い。今日はここまで。おやすみなさい。
ふと思い立ち、Another HTML-lint gateway を使って文法チェックを試みる。
ふつうです。
http://seize-a-day.seesaa.net/ を XHTML1.0 Transitional としてチェックしました。71 個のエラーがありました。このHTMLは 60 点です。タグが 29 種類 244 組使われています。文字コードは Shift JIS のようです。
いやはや何とも中途半端な結果。ほとんどのエラーは、 Seesaa BLOG が自動生成するコード、アフィリエイトアンカーだったりするので対策のしようがない。直せるところは直してみようと思う。
やっと Seesaa BLOG の使い方にも慣れてきたところで、とりあえずあらかじめ用意されているテンプレートの CSS をいぢることから始めてみようと思う。
素材として選んだテンプレートのスタイルは、タイトルの瑞々しいガーベラが印象的な ガーベラスタイル。
なにはともあれまずはユーザビリティ確保のために、font-size を px 単位で絶対指定された値を相対的な % 単位に書き換え。次に Windows IE での表示のことなんて知りませんよ〜という感じで無駄なプロパティを削る。あとは Seesaa BLOG 固有の class / id を把握するためにも、思うがままにひたすらいぢるのみ。
書き換えまくり中なので、見る度、見栄えが微妙に変わっているかもしれない。