子猫にも貼れる Tag Cloud 2.1 [s k i n]
apple archives art beatles bjork blog books brazil calendar catalog cats cats cradle clearance com comic comments culture cyber-chat cyborg favorites french garage hagio moto horror index indie rock ishinomori kanai mieko kittens list miyabe miyuki mori hiroshi movies murakami haruki music mylene mystery necord nw original skin oshima yumiko page view palindrome palta rewind roald dahl sf scraps sknynx soccer surrealism tezuka osamu tv tower visual world cup world music xtc youtube (sknys tag cloud)
本物の雲のように動いたり、虹のように色鮮やかだったり‥‥ネット上には色々な「タグクラウド」（Tag Cloud）が浮かんでいる。ソネ風呂の無味乾燥で愛想のない「タグクラウド」も素敵にカスタマイズしたいけれど、なかなか難しい。とりあえず「カテゴリー」の色別に合わせてサイドバーだけでもカラー化してみた。しかし、自作した「カラークラウド」（Color Cloud）は自動更新されるわけではない。もう少し汎用性の高くて簡単なカスタマイズ方法はないかしらと思っていたところ、Manaさんの「コピペでできる！CSS3の素敵効果でテキストリンクを装飾する小技あれこれ」を見つけた。「CSSのみで実装できる小技」なので、これならば誰にでも‥‥子猫にも出来そうだ。サイトには「文字色をふんわり変える」「背景色をふんわり変える」「文字をぼかす」など全９種類のエフェクトが紹介されているが、「タグクラウド」と相性の良さそうな２つの小技を使ってみた。
「文字色をふんわり変える」はマウスオーヴァ時のリンク色の変化を「transition」プロパティで遅延させるエフェクト。デジタル・スイッチのように瞬時に切り替わらず、アナログ風にふんわりと優しく変わります。「拡大・縮小」は「transform」プロパティでリンク文字の大きさを変える効果。「transition」と併用することで、Dock（Mac OS X）のギミックのようにニョロッとしたような感じになる。下記のCSSをサイドバーの「サイドコンテンツ」内にコピペするだけで「タグクラウド」にも反映されるようになります。外観は変わり映えしないけれど、オンマウスすると？‥‥「文字をぼかす」や「光を放つグロー効果」も面白いかもしれません。「#tag_cloud_0000000」の「0000000」には各ブログの固有番号が入ります。
<style>
#tag_cloud_0000000{border:solid 3px #cccccc; padding:3px; margin:3px 0px 5px}
#tag_cloud a:hover, #tag_cloud_0000000 a:hover{-webkit-transform:scale(1.5,1.5); -moz-transform:scale(1.5,1.5); -o-transform: scale(1.5,1.5); -ms-transform:scale(1.5,1.5); transform:scale(1.5,1.5); -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; transition:0.5s}
#tag_cloud_0000000 a{display:inline-block}
a._tag{display:inline-block; text-transform:lowercase}
#side_tag{text-align:left}
#tag_cloud a, #side_tag a{text-transform:lowercase}
#tag_cloud{border:solid 3px #cccccc !important}
.tag-word{display:none}
.tag-article-title{font-weight:bold}
.tag-article-posted{font-weight:normal}
</style>
#tag_cloud_0000000{border:solid 3px #cccccc; padding:3px; margin:3px 0px 5px}
#tag_cloud a:hover, #tag_cloud_0000000 a:hover{-webkit-transform:scale(1.5,1.5); -moz-transform:scale(1.5,1.5); -o-transform: scale(1.5,1.5); -ms-transform:scale(1.5,1.5); transform:scale(1.5,1.5); -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; transition:0.5s}
#tag_cloud_0000000 a{display:inline-block}
a._tag{display:inline-block; text-transform:lowercase}
#side_tag{text-align:left}
#tag_cloud a, #side_tag a{text-transform:lowercase}
#tag_cloud{border:solid 3px #cccccc !important}
.tag-word{display:none}
.tag-article-title{font-weight:bold}
.tag-article-posted{font-weight:normal}
</style>
＊
＊
ネット・サーフィン中に手軽にメモを取れるアプリが欲しかった。ブラウザ（Firefox）には「Adblock Plus」や「Video DownloadHelper」を入れているので、これ以上余計なアドオン（拡張機能）は入れたくないなぁ‥‥と逡巡していたら、「Macの便利技」に「SafariなどのWEBブラウザを即席メモとして使う」というティップスがあった。新規ウインドウや新規タブを開いて「data:text/html, <html contenteditable>」という文字列をURL欄にコピペするだけ。URLを入力して「return」キーを押すと、文字入力可能な白いページが現われる。これならば新たな拡張機能をインストールする必要もないし、「TextEdit」を起動させなくても良い。このURLをブックマーク（ツールバー）に登録しておけば、瞬時に「メモ帳」として使えるようになる。更にカスタマイズも可能とのことなので、「オリジナル・メモ・パッド」を作ってみた（「｢たった一行でブラウザをシンプルなメモ帳に変える方法｣を使いやすい様にカスタマイズしてみた」を参照しました）。
data:text/html;charset=utf-8,<title>memo</title><textarea style="font-family:'Hiragino Kaku Gothic Pro',sans-serif;font-size:90%;background-color:rgb(245,255,250);line-height:1.5;width:42em;height:95%;border:2px solid rgb(204,204,204);margin:1em;padding:3px" autofocus />
＊
tag cloud for kittens 1.1 / 2.1 / sknynx / 448
- 著者：Mana
- 出版社：工学社
- 発売日：2011/12/24
- メディア：単行本
- 目次：今求められているWebクリエイターとは / 計画をたてよう / デザインの基礎 / Photoshopの基礎 / 細部にこだわったWebデザイン / 実際に作ってみよう！(1) Photoshop編 / HTMLの基礎 / 実際に作ってみよう！(2) HTML編 / CSSの基礎 / 実際に作ってみよう！(3) CSS編 / Webサイトを公開しよう！
2013-05-16 00:10
コメント(0)
トラックバック(0)
コメント 0