memloc.aoiice
This memo has been updated occasionally by the authors of the website aoiice.


aoiice logo

Google Broggerのテーマに似せた体裁でテンプレートを作る


linking

もう既に没案になったらしいGoogle Broggerのテーマに似せて、ソックリさん頁でテンプレートを作る修行をしてみました。背景テーマ画像のシズル感や、スクロールさせた時に連動する透過具合から、いわゆるラッパーと呼ばれるボディ背景の壁紙を上手に作れるかどうかが鍵でした。


見た目のイメージを左右する本文記事挿入ラッパー部分や、タイトル枠などを禁断の角マル仕上げにする、というのがハードルが高そうだったんですが、CSS3で便利なタグができたので俄然実行することにしたものです。


わたしは、自作のサイトには必ず、その時までに学習できたタグ書きTipsを忘れないように実装したページを、後になってすぐに参照できるようリンクさせることにしています。そうすれば、いろんなケースで興味深い演出を提供できるからです

iphone image

Operaブラウザのスピードダイヤルでサムネールを変更する


オペラの得意技"スピードダイヤル"で、リンクしている先を表示するサムネール画面を、
自分の好きな画面に差し替えるには、ちょっと面倒な作業をしなくてはいけません。何故
簡単に変更できるようにしていないのか不明です。。。。。忘れないようにメモしました。


C:\Documents and Settings\LogonName\Local Settings\Application Data\Opera\Opera\thumbnails
にある画像をW180×H112のサイズで自分が貼り付けたい内容にする___
というものです。


オペラ本体は差し替え後にリロードではなく、再起動させないとちゃんと表示しません。
これは結構重要で、リロードすると差し替え前の初期画像に勝手に戻っちゃいます。
オペラ側では何もせず、単純に再起動をかけるだけで差し替わってくれます。

なお、このサムネール画像は、デフォルトで定期的に更新設定されています。更新しない
オプションを選択していない場合、オリジナルサムネール画像を”読み取り専用”に変更します。

y

リロード毎に別の画像をランダムに表示します


hr wide

左側に12種類、右側に9種類の異なる画像を準備しました。頁を読み込むたびに違う画像が出ますが、おん馬さんのレース風景を両方に1枚ずつ入れました。確率的には 108回に1回だけおん馬さんだらけの壮絶叩き合いシーンが表れる筈でしたっけ?、、、、


A type : 12piecesB type : 9pices


y

web標準でhtmlをタグっているのに、MSのieだけはNG!のケースって多過ぎません?

そういう訳で、わたしのwebサイトを閲覧するときのブラウザは、ieさんじゃなくFireFoxとかChromeとかOperaとかSafariとかがお勧めです。ieさんに合わせるのはとっても面倒臭いので最近ではieチェックをしていません。一時期はieでもちゃんと見えるようにおかしなスキルをあてがっていましたが、どう考えてもオカシイし、インタラクティブな表現導入を増やそうとするたびに裏技も増やさざる得ないので、もう何もするつもりはありません。ie ng

管理者プロフ紹介用裏サイト/Editor's note 的意味合いで上記を表明していましたが、格好のサンプルケースを思いついたのでここで紹介します。境界線の修飾プロパティでCSS3から採用になった「border-radius」は、角マル枠を一発で書けるようになったとっても魅力的なタグです。例によってFireFoxもChromeもOperaもSafariも採用しています。ところがieだけ対応していません。このページではこの便利なタグを5箇所(記事を書くベースフィールド、ヘッダーとフッター、このコーナーの見出しタイトル、それにこの下に書いたサンプル枠)で使っていますが、ieからはただの長方形が見えるだけです。

text shadow sample! by CSS3

どうですか? この↑サンプル? とってもクールですよね? CSS3の新しいプロパティ角マルと text-shadow と box-shadow を使って、タグだけで書いてあります、画像は使っていません。んでもって、ieさんだけが未対応。それってもうブラウザと呼べないと思いません?


Ymds-Marvin Skyhigh template. Template images come from Marvin's cabinet. Powered by P-cabCrawler.