ホームページ作成浜松Tips – ページ 47

Ruby作者まつもとさんの英語講演

Ruby作者のまつもとゆきひろさんが
英語で講演しているヨウツベがありました。
割と長尺で50分ありますから余裕のあるときしか見られないので
何より自分の為にブログにリンクをはっておくことにしました。

最近じつに頻繁に利用するようになったiGoogleで「ウェブ履歴」の
「関心のあるアイテム」における「動画」に表示されていたもので
Googleが検索結果や表示画面の履歴に応じてパーソナライズ化された
リコメンドリンクを表示するシステムなのですけれど
「検索」についてはクエスチョンマーク付が多い中、
今回の動画はピンポイントでした。
Googleの技術においての意味でも、
iGoogleの利用頻度においての意味でも
日を重ねる毎に精度は上がっているようです。

冒頭部分を見ただけですけれどまつもとさんはハンドルネームの
Matzとして紹介されているのがちょっと興を惹きました。

背景色と文字色を投稿前に確認

ブログで記事投稿をする時に、
投稿記事で直接背景色や文字色を指定したりする人は
指定はシャープと16進数で表現されて実際の色はわかりませんから
よっぽど特殊な方で無い限り、（昔、私の周りには機械語を
直接読んで書き換える方が少なからず存在しました。)
難儀されているのではないかと思います。
私も実際当ブログで様々な色指定にホームページ作成エディターで
色を確認してから投稿して「実際の表示をプレビュー」で
再度確認という作業をしていましたが
わざわざブラウザ意外にホームページ作成エディターを立ち上げたり、
それ用にテーブルを作ったりと煩わしい事此の上ありませんでした。

堪りかねて具具って見た処、
それを解決してくれるサイトを見つけたのでご紹介します。
TAG＜index＞さんという
HTMLタグ・CSS・JavaScript - Web制作のインデックスサイトで
「ホームページ作成の各種リファレンス、作り方に関する初心者向けガイド、ちょっと便利なWebツール、色の早見表、困ったときの質問掲示板、などなど。」
とされているサイトのカラーチャートコンテンツ内の一コンテンツに
色の組み合わせチェックにおける背景色と文字色のコーナーがあります。

実際にこの投稿内のリンクの文字色にも利用しましたけどとても便利！
特にIEでの限定ですが左右のフレーム内の一番上に表示される
ダイアログを使用した色作成は秀逸です。
FireFoxを利用している方も一度IEで利用する価値有りです。

ブログ投稿時に困っている方、省力化したい方は
一度使ってみると即、お気に入り入り、
手放せなくなるかもしれません。

角丸

四角いコーナーを丸くするjavascript

この部分は四隅が丸く処理されます。
javascriptで実装されていますから画像の用意もいりませんし、 divタグを何重にも重ねる必要もありません。
此方で公開されています。
CurvyCorners

四角いコーナーを丸くするjavascript

コーナーの大きさも変えられます。
こちらは少し半径を大きくしています。
日本語では此方で詳しく説明されています。
Drupal.0829.info

jQueryのプラグインということですが、 jQueryを読み込まなくても動作するようです。

IE6で透過PNG

IE6では通常透過PNGは適用されないので
折角アルファ属性を持つファイルを指定しても
その下の画像は透けて見えません。
ファイアーフォックスやオペラ、IE7でご覧の方には
ちゃんと背景の漫画が透けて見えると思います。
IEの6以前の方には四角いスペースが
背景の漫画を見えなくしていると思います。デザインウォーカー：透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる

それを解決するJavaScriptが上記リンクで
掲載されていたので紹介します。
こちらではIE6以下で御覧の方も背景の
漫画が文字の土台を通してご覧いただけると思います。
”韓流”プログラマのユンサンにより作成されたソースで
下記リンクに詳細が公開されています。透過PNG と IE と IE7

映画風タイトル・クローズアップ

一つ前のアーティクル「外部jQueryテスト」をH1タグにアニメーション適用しました。
このアーティクルが存在する間はブログタイトルが表示と同時に大きくなり始める筈です。
ブラウザがファイアーフォックスかオペラだと上手く動いたのですが、 IE6だと最初、何故か拡大の拡大から設定した拡大値へ縮小してしまう感じになりました。これはCSSテンプレートで
.blogtitle{font-size:150%;}
と指定してある部分が影響してしまったようです。
上記部分を削除して、尚且つアーティクル内でフォントサイズを小さなものに指定するとIEでもアーティクルのタイトルに偽り無く済むようです。
いつも乍マイクロソフトの唯我独尊には泣かされます。
「IE8のベータ版は2008年前半に登場、標準準拠と互換性確保に注力」というニュースも穿って見てしまい勝ちになります。

参照サイト：高橋登史朗さん：jQueryの魔法

---2008/4/2追記--- 当記事がトップページからはみ出したため、トップページのタイトル拡大機能は20箇遅れの記事映画風タイトルズームアップに譲り、当記事では、アクセスするとタイトル文字と色が変わることにしました。前記事、外部jQueryテストでの別機能の応用です。こちらのスピードは以前の7割増しですので、よりダイナミックになっています。

外部jQueryテスト

DIVでtestClassです

DIVでnoTestClassです

PでtestClassです

ネタ元は高橋登史朗さんの「jQueryの魔法」です。
ブログ内にjQueryソースを置けないので外部においたソースを読み込めるか確かめました。
実際に駆動されるのでソース自体を外部ドメインにおくことによる支障は無いようです。
IEだと枠に収まり切らない大きさから段々枠の中に納まるように文字が縮小されるように表示されるかもしれませんが、本来の動きは普通の大きさの文字が段々大きくなるように想定しています。ファイアーフォックス、オペラでは想定通り表示されますが、一部IEは他部分でのフォント設定を拾ってしますようです。jQueryの試験運用自体には問題無い為、放置しました。

こんにちは

さようなら

私の名前は hanamaru です。
私のお兄ちゃんは honmaru です。

と指定してある部分が影響してしまうので削除。

カフェタイム (3カラム)
【2008年4月13日～】
「映画風タイトルクローズアップ」に関しては特に問題なしにより.blogtitleはデフォルト設定。

カテゴリー: ホームページ作成浜松Tips

Ruby作者まつもとさんの英語講演

背景色と文字色を投稿前に確認

角丸

四角いコーナーを丸くするjavascript

四角いコーナーを丸くするjavascript

IE6で透過PNG

映画風タイトル・クローズアップ

外部jQueryテスト

外部CSSテスト

メルトダウン

JSテスト

初期設定