Tuesday, September 26, 2006

[blog / css / Design]_ red_one さようなら / サイトデザインあれこれ

去年からホスティングさせて頂いていたサーバが最近何かよく落ちてるなぁ、と思ったらサービスを停止してしまいやがった

ので、blogspot に待避。 将来またレンタルサーバに手を出すかは分かりませんが、しばらくはここでやります。
新しい URL はコチラ.

  http://redone-on.blogspot.com/


で、新装開店ついでにテンプレートも温めていたものに変えました。 テーマは白黒・赤です。
初めて来られた方には違和感ないかも知れませんが,昔はコレ → です。


テンプレ変えた、だけじゃ味気ないので、ブログデザインに関して参考にしたところ、記事などを振り返ってみたいと思います。


2カラム → 可変レイアウト → 1カラムへ


考えてみれば今回変える前にもデザイン変えているんですけど、余り post にする余裕がなかったので、そこから振り返ります。
まず、3カラムはどうしてもしたくなくて、サイドバーを右側一本にしたかった。

「全体の横幅はウィンドウサイズに合わせて可変で,サイドバーを固定長で右に置く」

ということをテーマにして、始めは一人で四苦八苦していたのだけれど,どうにも出来なくて。
ここのサイトスタイルシートによる崩れない 2カラム 3カラム・レイアウトを参考にしました。
目から鱗もので、これから CSS を勉強したいヒト、悩んでいるヒトたちにオススメです!


Previous Postsを何とかする


Blogger ブログは記事を過去へさかのぼるのが分かりにくい(Bloggerに限らずほとんどがそう)。 ですので、デザインでだけでも過去記事が参照しやすいようにしようと試みました。
参考にしたのはこれ。
Lucky bag::blog: リモートロールオーバーを CSS だけでやってみる

リモートロールオーバを利用して、過去記事のリストとそれに対応したボタン画像なりなんなりを横に並べ、現在記事からの過去記事への参照を見やすくした・・・つもり。
元ネタからはかなり改造しました。
まず、リストの1つ1つに連番でIDを割り当てることができないので(多分;Blogger のテンプレート編集では)、タグの入れ子の数をどんどん増やし、CSS で入れ子の数分ずらす大きさを大きくしていするようにした。




目次?設置


clmemo@aka: 記事目次をトップページの頭につけてみた |Blogger| 様からアイデアを頂き、ページ冒頭に目次っぽく更新リストをつけた。
最初は Blog Search の検索結果を使っていたのだけれど、最近文字化けや機能不全がおおく、rss を使うことにした。
Blogger が提供しだした RSS は最近作成されたものではなく、最近更新されたもの順にならんでいるらしいので、コレ一本でいいやと思いました。 Feed2JS で貼り付ける。

また、クリボウの Blogger Tips: アーカイブページに投稿一覧リストを 様からもアイデアをパクリ、月毎のアーカイブページではその月の Post の一覧を更新リストの変わりに載せています。


かなり尻切れトンボですけど、書いてて疲れてきたのでここで一時筆を置きます。
補足など後日いたしたいと思いますので、よろしく~
それでは、新ブログ投稿1回目を終わります。

Wednesday, September 06, 2006

[blog]_ 金魚

結構思い通りの金魚のイラストが手に入ったので、本格的にこのブログのデザインを変えます。
Ryu-Kin
↑ 他ブログのテンプレートですが、画像だけ加工して利用させて頂きます。


JUGEM ブログのテンプレートですが、こうして色々見ると創作意欲を刺激されます!
それでは おやすみ!

Monday, September 04, 2006

[Blogger]_ 新 Blogger テスト / 雑感 / 注意点

えっと、現在利用させていただいている Blogger ブログが、新機能追加のため beta が公開された、というのは以前書きました

で、色々書き散らしはしたものの浮気心もとい、探究心からから、新 Blogger でブログを作りました。 → http://redone-ex.blogspot.com/
※ テスト用ブログです
後にアカウント統合できると何処かで書かれていたしNE。

そして本題。

beta プログラムが公開されて半月余り。
数々の不具合も徐々に解消され、また、要望なりの機能追加もあったり、利用してみて新しく分かったことなどあったので、極一部ですが私自身が個人的に気になったことをまとめてみたいと思います。


beta でここが変わった

navbar(で合ってるのかな? このブログの上部についてるBloggerのバーね) の SEARCH THIS BLOG が変わった。 以前は、キーワードを入力して検索!ってやると、Blog Search の検索結果のページに飛んでいたのね。
でもそれが、beta 版ブログでは(Labelの表示のように)ブログページ上で検索結果が表示されるようになった。


古いテンプレートにおけるの Previous Posts が Recent Posts に。
# これは結構個人的に痛い変更点です。


改善点

Label の日本語に対応した(via. 静岡散歩: BloggerBeta Labelが機能)。


SEO 最適化・・・が図られたとは言い難いですが、テンプレートの
<meta name="robots" content="NOINDEX,NOFOLLOW" /> のタグが消されました。


新テンプレートの HTML 編集が可能に。
しかし、以前のものとはガラッと変わってます。

beta を利用していないヒトのためにテンプレートファイルを掲載します。 編集画面の (X)HTML テンプレートはこちら → Templete: Minima
Expand Widget Templates ってチェックボックスをオンにすると コチラ → Templete: Minima(Expand) (実際は XML 形式ね)

基本は Section での区分けに Widget と呼ばれるブロック単位での組み合わせ、更には Widget の編集になりそうね。

通常モードでは、Widget の配置替え程度にしか使えないから、見た目の印象を変える(フォントの変更や2カラム→3カラムにする)のであれば十分そうだけど、細かいHTML(例えば、Post のフッタにリンクスポットを追加するなど)の編集は Widget の編集は必須になりそう。

個人的には、ブログの記事 Posts の部分が

<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>

の一行で済まされていたことには愕然としました。
Ex~ とすると、いろいろ出てきますが、ちょっと理解するには骨が折れそう。

将来的には、Widget の編集用の画面とか、API が公開されて独自のWidgetを作るってことも想定されているのかな。
# 個人的には、セクション単位で表示非表示のオン/オフができたらよかったな~
# トップページに表示されるものとアーカイブページ、パーマリンクのページなどで表示されるものを変えたいとき、どうするんだろう。



注意

今度の HTML 編集では、<!-- コメント・アウト --> タグが生成されるページでは消されてしまう。 これは、beta を利用して作成されたブログのソースを見れば分かると思います。 コメントが一切なくなっていることに。

なぜ、これが注意かというと、Javascript などを HTML に埋め込むための <script> タグにおいて、そのタグに対応していないブラウザのために、
<script type="text/javascript">
<!--
 
// スクリプト・コード
 
// -->
</script>

とコメントアウトする習慣があるのだけれど、新 Blogger ではコード部分もろとも消されてしまいます。
Help にも特に記述されてなかったように記憶しますが・・・。
従って、ケータイの i-mode などの HTML ヴューワで見ると CSS コードや Javascript コードが丸見えで大変なことになります。

もともとそういう向けに作られてないとは思いますが、上位互換しかもたないソフトウェアは・・・。

! 追記
(x)html ページに CSS や script コードを内臓するときは、
<[!CDATE[ /* code */ ]]>
という CDATA セクションで囲みましょう。
これが新しい XML の仕様です。
# でもそんなこと知らないよねって話。


その他、雑感

新ダッシュボードがごちゃごちゃで一見すると分かりにくい。
前のに慣れてしまっていた所為でもあるのかな。 もうなれたけど。


Dynamic serving について。
Post 後や設定変更後の再構築がないことでこんなに感じが変わるとは。 考えてみれば色々工夫して Javascript をふんだんに使うよりもページ表示もスムーズだしストレスなくすむ。


追記at 2006.09.06

いま見てみたら、Label の表示するアドレスが変わってた。 フォルダ形式(?)になっていた。
前の検索形式の方がよかったのに、Google っぽくて。 ?label=○○|▲▲ て具合に拡張できるのではと思ってたのに。

Template Design. 2008 Jyun.