人生ケセラセラ: 試行錯誤

TOP / 試行錯誤

2008年04月06日

seesaablogカスタマイズ～一段落しました

午前中に書いた記事から
再びポチポチと変更しまして

どうやら一区切り付き
反映させました。

なので改めて変更点と
新機能の使用方法を説明させていただきます。

まずは左のサイドメニューを見てくださいな。

見慣れぬモノがあると思いますが
コチラが新機能

「画像タグ検索」

コレがやりたかった事でして

要するに

「そのblog内で画像から記事へJumpする方法が無いじゃないか！」
「じゃあ、作れーーー！」

と作ってみたものです。

元はデフォルトのタグクラウドですが
　文字サイズを固定にして
　リスト化＆ツリー化

んでもってタイトルの変更と軽い説明を加えました。

で、そこからタグページに移動すると

こんな風になりました。

変更点は
　ヘッダー内タグクラウドの文字サイズ固定
　ヘッダーの一部の削除
　　(「フォト」とか「記事」とか出るやつとそのアンダーバー)
　解説文の挿入
　画像名の削除
　そして
　画像をクリックする事で、その画像の記事ページが開く

この方法に至る過程で

"過去ログのツリー化"やらなんやらを試していたのですが
結局、当初のアイディア通り
かなりダイレクトな作りに出来ました。

これでblog内の検索に新しい方法を一つ加える事が出来ました。
大満足です。

で、使い勝手がいいように
サイドメニューの配置換えと
見た目を統一する為に全てツリー化しました。

昨日やったカレンダーの横置きと合わせて
ずいぶんユーザビリティが上がったと思いますが
いかがでしょうか？

posted by マーチン at 13:03| Comment(7) | TrackBack(0) | 試行錯誤 |

またまたblogレイアウトの変更

昨日の土曜日に奥様に見守られつつ
レイアウトの変更をしました。

なんと！
戦う事およそ10時間(おバカ)

仕事並みに労働力を使ってしまいました。。。

楽しかったしいいけどね。

で、変更点。

1：サイドメニューの"過去ログ"のツリー化

　　参考にしたのは
　　小粋空間さんのblog

この変更でまずはツリー化を行い
次に

年→月のツリー化

年の折りたたみ

年→月→日のツリー化

月の折りたたみ

とやっていくつもりだったのですが。。。
seesaaではarchivesを年→月のように
親子ツリー化するのはどうやら
キビしいようで
悪戦苦闘の末に断念しました。

どなたか素敵な方法をご存知の方がいらっしゃったら
教えていただけますか？

上記のツリー化がバッチリ上手くいったら
"カレンダー"を取っ払うつもりだったのですが

結局
"過去ログ"はツリー化しただけで
中身は変わらずでしたので

"カレンダー"は無くせない

という事態になりました。

そこで
次にやったのが

2："カレンダー"を横型に変更する。

　　seesaaブログカスタマイズ(シーサーblog)さんの記事を参考にさせてもらいました。

そのままではCSSが上手く効かなかったので
HTMLの

<% content.header -%>
<div id="cal">
<% if:previous_archive %><a href="<% previous_archive.page_url %>"><<</a><% else %> <% /if %><% date_format(now,content_calendar.datetime) %>
<% loop:list_calendar -%><% loop:list_data_month -%><% loop:list_data_week -%><% if:data.day %><% if:article -%>　<a href="<% article.page_url %>"><% article.createstamp | date_format("%e") %></a><% else -%>　<% data.day %><% /if %><% else %><% content_calendar.spc_text %><% /if %><% /loop %><% /loop -%><% /loop -%><% if:next_archive %><a href="<% next_archive.page_url %>">>></a><% else %> <% /if %>　</div>
<% content.footer -%>

を"class"に変更し
CSSを

.cal

に変えて、ついでに色々とCSS上で変更。

晴れて邪魔な"カレンダー"がスッキリしました。

3：サイドメニュー"最近の記事"の日付を後ろにしました。

実は他にも変更点がありまして
ほぼ完成しているのですが
反映はもう少し後になります。

反映させたら詳しい記事を書こうと思います。

posted by マーチン at 10:18| Comment(0) | TrackBack(0) | 試行錯誤 |

2008年03月22日

背景画像も変えてしまいました

本日アイコンの変更をポチポチとやっていたら

「そういえば背景変えたいって言ってたよね」

と奥様から優しいお言葉が飛び出しました。

で
イメージはなんとなくあったので
webで無料の素材を見てみることに。

"漆喰壁"
か
"隙間の多い籐編み籠"
がいいんだけど
見つけられず。。。

自宅にある素材集を見てみることにしました。

その中で使えそうなもの発見。
(すでに"漆喰壁"でも"隙間の多い籐編み籠"でもありませんが。。。)
2パターンを使ってやってみることにしました。

パターン1

パターン2

どちらも背景全体に連続して表示させるつもりだったので
淡目に調整しました。

でパターン1でやってみたら

こんな感じでした。

悪くないのですが
想像よりも無機質な仕上がりだったので
バナーのフルーツとも相性がイマイチ。

元はコンナだったのですが

あんまり大差ない。
てか、元のほうがイイ。。。

結局パターン2を採用しました。
バナーとの相性もいいですし
全体的に温かい印象です。

当初の予定とは変わり
ランチョンマット風になってしまいました･･･

この段階までは
奥様に教えてもらいながら
どうにかやってこれたのですが

「blog本文の字が読みにくいので
本文だけ背景を半透明に出来ないかな？」

という私の一言から
奥様が本格的に参戦!!

CSS上のタブでは背景だけ
半透明にすることは(タブン)無理
　　　(文字まで半透明になってしまいます。)

半ば諦めかけたその時に
奥様に神の閃きが！

まんまとキレイに透かすことに成功！

やったー
満足満足！

一応IEでどう表示されるか確認しなきゃね、と
(我が家はFireFoxなのです。)
ポチッとクリックしたところ

FireFoxではちゃんと透けてた本文が
灰色一色になってしまっているではありませんか。

がっかり。

奥様いわく
「IEがバカだからダメなんだ～。わーん。」
ということですが
世間の大半はIEユーザーであることもまた事実。

泣く泣く"透かす"ことは諦めて
別の色に加工したパーツを
本文の背景に指定してみました。

ランチョンマットを重ねているような感じを狙ってみたのですが
上手くいったと思います。

何とかとっちらからずに
色々いじれてますよ。えへん。

posted by マーチン at 19:45| Comment(1) | TrackBack(0) | 試行錯誤 |

お気に入りアイコン追加

お気に入りアイコンを作成してみました。

まずは素材を用意します。
なるべく鮮度のいいものを。
目利きのポイントは"目"の輝きと"エラ"の艶。

では、素材の加工です。
iconは16×16ピクセルなのですが
32×32ピクセルで用意できれば
下記のジェネレータで変換できるので
32×32に合わせて加工します。

因みにphotoshopで加工しましたが
ペイントツールでも出来ますよ。

保存形式はgifでヨロシク。

出来たら変換。

アイコンの生成は
FavIcon from Pics
の自動生成を利用しました。

変換したらwebにアイコンをupします。
seesaaでは
ファイルマネージャーから上げておけばOK

参照したページは
1upホームページ作成
さんで手順を教わり

書き方としましては、下記の<link>をページ内の<head>～</head>の中に記述します。アイコン（favicon.ico）の位置は各ページの場所によって階層（パス）をあわせて下さい。
書き方は

<link rel="shortcut icon" href="./favicon.ico" >

上記のタグ内の"./favicon.ico"を
先程upしたicoファイルのURLに置き換えます。

seesaaのデザイン→HTMLで
<head>の後ろにペタッと貼れば出来上がり。

再構築かけるのを
忘れないようにしてくださいね。

今回は自分でやったよ。
(一人ではありませんが。
隣に奥様がいてちゃんと教えてくれました。)

posted by マーチン at 13:27| Comment(0) | TrackBack(0) | 試行錯誤 |

2008年03月20日

flashでblogタイトルを作りました

そもそもseesaa blogを使う事にした理由が

「自由度が高い」

という事だったので
(まぁ、最初はblogパーツを自由に貼りたいとか
その程度だったのですが)

色々やってみようと言う事で

Flashで動くバナーを作ってblogタイトルにしてみよう

ということになりました。

幸運な事に奥様がSEなので
教わりながらやれば何とかなるんじゃん
なんて軽いノリではじめてみました。

で、まずはデザイン決め。
コレがまた難しい。

そもそも

"flashを使って何かをしよう"

がはじめに有りきなので
デザインのアイディアなんてありません。

散々悩んだ結果
適当に決めました。(Ｏ型ですから)

コンセプト
--タイトルが回る--
以上

んでもって
どうにか素材も用意して(ココまではちゃんと自力です。)

で、いざflashを作る段になって
奥様の~~ダメ出し~~講義開始です。

「やりたいイメージはわかったけど
そもそもflashって2D表現のソフトなんだから
擬似的にしか3Dは表せないよ。
その辺わかって言ってる？」

はい。スイマセン。
でも、擬似的表現の限界や
その難易度なんかが全くわからないので
やってみたいのです。

それからなんとか自分でやろうとするも
何一つ形に出来ず。。。

結局、殆ど奥様にやってもらう羽目に(ゴメンね。ありがとう。)
そいでもって
妥協の連続の果てに出来上がった
(当初のイメージとは相当遠くに行ってしまった)flashをupしました。

上げてみて思ったのですが

サイト全体のデザインとまるで合わん

奥様の懇切丁寧な指導のおかげで
同じようなモノを
自力で作れるとは思いますが
せっかく作ったものを破棄するのも忍びない。

単体で見たら、結構カワイクできたと思うし。。。

仕方ないので

リフォームにリフォームを繰り返して
とっちらかってどうしようも無くなる危険を冒すことにしました。

今後は勉強だと思って
色々いじり始めます。

全体をはじめからデザインするわけではないので
対処療法的な作業になりますが
(仕事だったら、こんなやり方は嫌ですなぁｗｗｗ)
何とか頑張って出来る限り自力でやってみます。

posted by マーチン at 16:58| Comment(0) | TrackBack(0) | 試行錯誤 |

2008年02月17日

ちょいと面白そうなので試してみました。

"Issuu"
というサイトを見つけました。

要するにpdfをweb上で簡単に
そして、ちょいと素敵に見せられるヴューアーと言う事でしょう。

サイト内ではSNSチックな事もやっていますが
ヘルプを見る限りEnglish（UK）メインのようで
今のところ気にしない!事にして

メインのpdfヴューアーを使ってアルバム作ってみました。

去年の７月に伊勢神宮の式年遷宮行事である川曳きに参加してきた時の画像です。

どうです？
ずいぶんカワイク見せられるでしょう。

このようにblogにはることもOK。

ただし、
もっといい感じにするには

　　元のpdfファイルの時点で
　　ページ内の画像位置や枚数などデザインする必要がある。

そして、使い勝手的には
　やっぱり、というか、しょせんというかpdfのuploadは時間がかかる。
　さらに、アルバム形式に変換するのにもさらに時間が…

どうなんでしょう？
大量に何かを見せたい人には最適なのはわかりますが、
一般人には必要ないかも。

また、Issuuのサイトにuploadする為、社外秘の社内pdfには使えないですよね。
情報の流出経路は極力押さえなければいけませんし。

となると、ビジネスユースに使える職種は限られてくるなぁ。

ふむふむ。

気になる方は
Issuu
お試しあれ。

posted by マーチン at 17:53| Comment(0) | TrackBack(1) | 試行錯誤 |