ブログで記事投稿をする時に、
投稿記事で直接背景色や文字色を指定したりする人は
指定はシャープと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のバージョンでも綺麗に表示してみる
折角アルファ属性を持つファイルを指定しても
その下の画像は透けて見えません。
ファイアーフォックスやオペラ、IE7でご覧の方には
ちゃんと背景の漫画が透けて見えると思います。
IEの6以前の方には四角いスペースが
背景の漫画を見えなくしていると思います。 デザインウォーカー：透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる
それを解決するJavaScriptが上記リンクで
掲載されていたので紹介します。
こちらではIE6以下で御覧の方も背景の
漫画が文字の土台を通してご覧いただけると思います。
”韓流”プログラマのユンサンにより作成されたソースで
下記リンクに詳細が公開されています。 透過PNG と IE と IE7
掲載されていたので紹介します。
こちらではIE6以下で御覧の方も背景の
漫画が文字の土台を通してご覧いただけると思います。
”韓流”プログラマのユンサンにより作成されたソースで
下記リンクに詳細が公開されています。 透過PNG と IE と IE7
映画風タイトル・クローズアップ
一つ前のアーティクル「外部jQueryテスト」をH1タグにアニメーション適用しました。
このアーティクルが存在する間はブログタイトルが表示と同時に大きくなり始める筈です。
ブラウザがファイアーフォックスかオペラだと上手く動いたのですが、 IE6だと最初、何故か拡大の拡大から設定した拡大値へ縮小してしまう感じになりました。 これはCSSテンプレートで
.blogtitle{font-size:150%;}
と指定してある部分が影響してしまったようです。
上記部分を削除して、尚且つアーティクル内でフォントサイズを小さなものに指定するとIEでもアーティクルのタイトルに偽り無く済むようです。
いつも乍マイクロソフトの唯我独尊には泣かされます。
「IE8のベータ版は2008年前半に登場、標準準拠と互換性確保に注力」というニュースも穿って見てしまい勝ちになります。
参照サイト：高橋登史朗さん：jQueryの魔法
---2008/4/2追記--- 当記事がトップページからはみ出したため、 トップページのタイトル拡大機能は20箇遅れの記事 映画風タイトルズームアップ に譲り、当記事では、アクセスするとタイトル文字と色が変わることにしました。 前記事、 外部jQueryテスト での別機能の応用です。 こちらのスピードは以前の7割増しですので、よりダイナミックになっています。
このアーティクルが存在する間はブログタイトルが表示と同時に大きくなり始める筈です。
ブラウザがファイアーフォックスかオペラだと上手く動いたのですが、 IE6だと最初、何故か拡大の拡大から設定した拡大値へ縮小してしまう感じになりました。 これはCSSテンプレートで
.blogtitle{font-size:150%;}
と指定してある部分が影響してしまったようです。
上記部分を削除して、尚且つアーティクル内でフォントサイズを小さなものに指定するとIEでもアーティクルのタイトルに偽り無く済むようです。
いつも乍マイクロソフトの唯我独尊には泣かされます。
「IE8のベータ版は2008年前半に登場、標準準拠と互換性確保に注力」というニュースも穿って見てしまい勝ちになります。
参照サイト：高橋登史朗さん：jQueryの魔法
---2008/4/2追記--- 当記事がトップページからはみ出したため、 トップページのタイトル拡大機能は20箇遅れの記事 映画風タイトルズームアップ に譲り、当記事では、アクセスするとタイトル文字と色が変わることにしました。 前記事、 外部jQueryテスト での別機能の応用です。 こちらのスピードは以前の7割増しですので、よりダイナミックになっています。
外部jQueryテスト
DIVでtestClassです
DIVでtestClassです
DIVでtestClassです
DIVでnoTestClassです
PでtestClassです
ネタ元は高橋登史朗さんの「jQueryの魔法」です。
ブログ内にjQueryソースを置けないので外部においたソースを読み込めるか確かめました。
実際に駆動されるのでソース自体を外部ドメインにおくことによる支障は無いようです。
IEだと枠に収まり切らない大きさから段々枠の中に納まるように文字が縮小されるように表示されるかもしれませんが、本来の動きは普通の大きさの文字が段々大きくなるように想定しています。ファイアーフォックス、オペラでは想定通り表示されますが、一部IEは他部分でのフォント設定を拾ってしますようです。jQueryの試験運用自体には問題無い為、放置しました。
ブログ内にjQueryソースを置けないので外部においたソースを読み込めるか確かめました。
実際に駆動されるのでソース自体を外部ドメインにおくことによる支障は無いようです。
IEだと枠に収まり切らない大きさから段々枠の中に納まるように文字が縮小されるように表示されるかもしれませんが、本来の動きは普通の大きさの文字が段々大きくなるように想定しています。ファイアーフォックス、オペラでは想定通り表示されますが、一部IEは他部分でのフォント設定を拾ってしますようです。jQueryの試験運用自体には問題無い為、放置しました。
外部CSSテスト
メルトダウン
はまぞうブログでも圧倒的人気を誇るHibi日記さんの
あれ～～～！ページが壊れてく～～～～！
というページで興味深いjavascriptが紹介されていました。
効果が劇的で面白いのでこのページにも実装してみました。
元ネタは HTML崩壊 meltdown.js です。
この下の「ClickHere★」というボタンをクリックしてみて下さい。
見る見るうちにご覧のページが崩れ始めます。
ページはリロードすれば元に戻ります。
あれ～～～！ページが壊れてく～～～～！
というページで興味深いjavascriptが紹介されていました。
効果が劇的で面白いのでこのページにも実装してみました。
元ネタは HTML崩壊 meltdown.js です。
この下の「ClickHere★」というボタンをクリックしてみて下さい。
見る見るうちにご覧のページが崩れ始めます。
ページはリロードすれば元に戻ります。
JSテスト
初期設定
「桜」イラスト3カラム
【2008年3月6日～2008年4月13日】
摘要：映画風タイトルクローズアップ
CSSテンプレート
.blogtitle{font-size:150%;}
と指定してある部分が影響してしまうので削除。
カフェタイム (3カラム)
【2008年4月13日～】
「映画風タイトルクローズアップ」に関しては特に問題なしにより.blogtitleはデフォルト設定。