JUGEMカスタマイズメモ。現在0からテンプレートを組み立てる試みのため、CSS真っ白です。
経過を注視したい方、WIN系ブラウザでCSSバグチェックしてくださる方募集中〜〜〜(笑)
スポンサーサイト

一定期間更新がないため広告を表示しています

|- | - | -
Web拍手…どのページからの拍手かを知る方法
どのページからの拍手か?を知る方法メモ。で、patipati設置の場合をご紹介しましたが、実は「Web拍手」のサービスでもページを知る方法がありました。(もしかして?と思ってやってみたらできてしまった^^;)

<form action="拍手ページへのURL" method="post"target="_blank"><input type="image" src="ボタン画像URL" onmouseover="this.src='マウスオン時のボタン画像URL';" onmouseout="this.src='マウスアウト時のボタン画像URL';"/><input type="hidden" name="mesbody" value="({entry_title})"></form>

これでメッセージ内に、拍手をしてくれたページタイトルが表示されるようになります。
ためしてみて下さい!
|jugemカスタマイズ | comments(0) | trackbacks(0)
カスタマイズ途中。
まだカスタマイズ途中です。
Firefoxで作っているのですが、他のブラウザではまだ見ていませんし。
微調整も残っています。
一番悩んでいるのが、カテゴリーをどうするか。
やはりサイドバーとして設置した方がいいかなあ…。

私のマシンはMacOSXなのですが、OSXの「ダッシュボード」にはブログのカラーコントロールに重宝する便利なウィジェットがあります。
それがこのget Colours
ウィジェット
クリックするだけで色を表す6桁の数字をコピーできます。しかも、右上にキーカラーを入力すると、その色の色相・彩度・明度のお仲間が出てくるのです。必要な時にダッシュボードをクリックするだけで使えるので、とても便利。MacOSXをお使いの方におすすめです。
|jugemカスタマイズ | comments(0) | trackbacks(0)
Coolなサイトデザインって?
ブログやサイトのテンプレート見ていると、かっこいいものやかわったもの、いろいろありますよね。
でもこの間、かわいいデザインのサイトに入って、ちょっと(いや、かなり)困ったことがありました。
探している物がどこにあるのか、さっぱりわからないのです…

ちょっと待て、と。
目的を果たせない(内容が伝わらない)デザインって、どうなんでしょう?

商品企画の仕事をしているとわかるのですが、いいデザインというのは、モノの目的や機能とバッチリ合った瞬間に、すっごくいいデザインになるんですよね。だから、使いやすさや機能がデザインより後になってしまうというのは、ちょっと違うんじゃないかなあ?と。

Webの世界では、わかりやすいナビゲーションを持ち、知りたい情報がより少ない動作(クリック数がより少ない)で得られるほど、デザイン的に優れているとされるようです。サイトで迷子になったことのある私にとっては、本当に頷ける話です。

ネットの世界が長いと、デザインに惑わされることもあまりなくなります…。
変わっててかっこいいデザインでもナビゲーションがわかりづらかったり、意味のないFlashを使っていたり、100KB超の大きくて重い画像をページに山ほど貼り付けていたりすると、
「見るなと言ってるんだな?」
と思います。
逆に、画像を最小限にして、HTMLとCSSの技術を駆使してかっこよく仕上げているサイトにあこがれます。

そんなブログデザインになるかどうかは今のところ微妙ですが。っていうか、レイアウトの基礎から地道にやる人間が何言ってる、という感じですか(^^;

とりあえず、テンプレートを作る側も選ぶ側も、見た目だけじゃなく、目的や機能のことをちゃんと考えるようになってくれたらいいな、と思います。
|jugemカスタマイズ | comments(0) | trackbacks(0)
0からテンプレートを組み立てる試み。
今ここは、「テンプレートの編集」の「スタイルシート」に、何も書かれていない状態です。ここから、テンプレートを徐々に組み立てていこうという試みです。

このページ、デザインは全くありませんが、このままでも文書としての構造を一応成しているのがおわかりでしょうか。
タイトルは大きく。
説明は小さく。
リストには箇条書きの「・」が入っていますよね。

ある意味、この文書構造が正しくできていれば、どんなブラウザでも(古いブラウザでも携帯でも)見られる、いわゆる「ブラウザフレンドリー」な状態なんですよね。

古いブラウザは、CSSへの対応が完全ではありません。
どんなブラウザでも同じデザインになるようにしよう、と思ったら、昔みんながやっていたような、「テーブルタグ」によるデザインレイアウトになります。

しかし、今はそういった「後方互換」(古いブラウザの能力に合わせる)の考え方よりも、「前方互換」(新しいブラウザ・Web標準に合わせる)の考え方になっています。

レイアウトやデザイン・装飾要素をHTMLに入れず別ファイル(CSS)にし、HTMLは正しい文書構造にすることで、古いブラウザにも検索ロボットにも携帯にも、内容「だけ」は正確に伝えられる。本来はデザインよりも、「内容が伝わる」ことを優先して考えるべきでしょ?発想を転換しましょう。
…という流れになってきている、というのを本で読んだとき、本当に頭がひっくり返ったようでした。

私は、MovableTypeのテンプレートをカスタマイズするために、CSSをちょこちょこ部分的にはいじってきたのですが、0からレイアウトを組み、デザインを作ったことがありません。

というわけで、CSSでページレイアウトを組み立てる修行を、今から積みたいと思います。
その経過も載せていきたいと思います(^^;。

しかし問題は、私の環境が「MACOSX」であるということです。
一応、Mac版ブラウザ「IE、Opera、Firefox、Camino」は入れてありますが、WindowsOSでの見え方の検証ができません(^^;
最大の問題は、WinIE6にあるというのに!
WinIE6は、CSSのバグの多さで有名なのです。ご自分でテンプレートをカスタマイズされている方は、WinIE6で確認して合わせてはいけません。IE7で確認した上で、IE6でおきているバグを消す、という作業をしなければいけません。IE6に合わせて作っちゃって、他のブラウザで見たらヘンになってた〜〜という声をよく耳にします。
そんなわけで、もしここをご覧の方がいらっしゃって、WinIE6で見て、ここがおかしくなっている、ということがあれば、今後教えていただければうれしいです。

というわけで、今現在の当ブログの姿のスクリーンショット。

|jugemカスタマイズ | comments(0) | trackbacks(0)
どのページからの拍手か?を知る方法メモ。
記事毎に拍手を設置する場合、どのページからの拍手か知りたい場合。
外部のサーバーに拍手(patipati)を設置することで、それが可能になります。

まずpatipatiを設置する。
CGIが設置できるところなら多分大体どこでもできると思うのですが・・・

次に、formタグを使い、拍手ボタンのスクリプトを作成します。ついでにオンマウス・アウトでボタン画像を変えてみる。以下のような記述。

<form action="拍手ページへのURL" method="post"target="_blank"><input type="image" src="ボタン画像URL" onmouseover="this.src='マウスオン時のボタン画像URL';" onmouseout="this.src='マウスアウト時のボタン画像URL';"/><input type="hidden" name="sub1" value="ページ名"/></form>

このvalue="ページ名"の部分が、コメントとして入ってきます。何かキーワードのようなものを埋め込むもヨシ。
テンプレートに拍手を埋め込むならば、valueの値に独自タグが使えます。
こんな感じ。

<form action="拍手ページへのURL" method="post"target="_blank"><input type="image" src="ボタン画像URL" onmouseover="this.src='マウスオン時のボタン画像URL';" onmouseout="this.src='マウスアウト時のボタン画像URL';"/><input type="hidden" name="sub1" value="{entry_permalink}"/></form>

これでページのパーマリンク(URL)がコメントとして吐き出されてくるようになります。本当は記事タイトル({entry_title})の方がわかりやすいんですが、文字コードが違っていると拍手の管理画面で文字化けする場合があるので、URLの方がよろしかろうと思います(^^;

もし複数のブログを持っていたりする場合(独自タグやformタグが使える別システムのブログでもきっと同じようなことは可能かと)、拍手の管理が一つのシステムでできるのでとっても便利だと思います。

拍手ボタンを使わせていただいた素材サイトさま:
フリー素材web*citron - シンプルな壁紙,アイコン,テンプレート
|jugemカスタマイズ | comments(7) | trackbacks(0)