Tag : CSS
1 - 7 of 9
リデザイン・2008春バージョン
４月になったのでかなり久しぶりにリデザインしてみました。今回はこれまで当Blogをオープン以来ずーっと基調としていた「黒＆白」を止めて、思い切ってブラウン系にしてみました。
察しのとおり、Ubuntu Linuxのテーマカラーをイメージしてます。トップのブラウンからちょっと浮いてるモニタの中のブルーの画面はあえてOS Xのままです。最近の私の好みのスタイルである「Ubuntu & OS X」という意味合いもあります。
アイコンも、Loggixで標準スタイルで採用しているオープンソースのアイコンプロジェクト「Tango Desktop Project」のアイコンを使わせていただいてます。
あと、レイアウト手法としては「イラスティック・レイアウト」を使ってます。
参考：Fixed or fluid width? Elastic!
FixedとFluid(Liquid)レイアウトの中庸レイアウトで有名な手法ですが、最近これが気に入ってます。ちなみにたまに「エラスティック」と書いてるのを見かけますが、「Mr.インクレディブル」の「イラスティック・ガール」と同様、発音は「イラスティック」だと思います。
ヘッダとフッタの背景指定にはbodyとhtmlも巻き込んで使ってます。他に良い方法があるかもしれませんが今のところ思いつかないので。まだ完全ではないので使いながら微調整していきます。
インターネットマガジンが無料PDF化
タイトル通り、PDF化されて無償配布されています。
インターネットマガジン バックナンバーアーカイブ | All-in-One INTERNET magazine 2.0
コーナーごとに分けられてPDF化されているのは私のScanSnapを使ったPDF整理方法と同じなのでこれはうれしい配布方式です。（雑誌はまるごと一冊PDFにしても後からぜったい読まない）
今回のインターネットマガジンのPDF化で何が嬉しいのかというと、私が愛読していた、2004年の112号から連載されていた長谷川恭久氏の「イケイケBefore After CSSテクニック」がまとまった形で入手出来たからです。この連載は保存版と言っても良いくらい、良いTipsがあるのでCSSに興味がある人にはおすすめです。
SafariのRSS用カスタムCSS「Blackie」v.2.0
SafariのRSS用カスタムCSS「Blackie」をバージョン2.0にバージョンアップしました。
JAM LOG : Downloads : Safari RSS用CSS「Blackie」v.2.0
バージョン1.0との違いは、タイトルや引用句(blockquote)などがカラーで表示されるようにしたところです。インデント目的でblockquoteを使うという謝った(X)HTMLの使い方をしている記事などはおかしな表示になってしまうかもしれませんので注意。
SafariのRSS用カスタムCSS「Blackie」
なつみかん。 | SafariのRSSのデザインをカスタマイズする方法経由でヘチマ_BLOG : Safari 2.0 の feed のテーマを変更する方法を元に、SafariのRSS用カスタムCSSを作ってみました。
適用するとSafariのRSSの見た目が以下のようになります。(クリックすると実寸で画像を表示)
ダウンロードはこちらから。
JAM LOG : Downloads : Safari RSS用CSS「Blackie」
デフォルトのRSS用CSSを使っていて「フォントが小さくて大量に文字を読むと目が疲れる」と感じる方は是非お試し下さい。ちなみにネーミングは、黒を基調に作っていて「黒と言えばクラプトンのブラッキーだな」と意味も無く何気に頭に浮かんだのでそのまま何も考えずに命名しました。
Feed Icon
先日の「時期IE7はFireFoxのRSSアイコン採用」を受けてかFeed Iconsなるサイトがオープン(Via: sutero choice : Feed Icons)していたので、早速DL。試しに当サイトのRSSリンクボタンもカスタマイズしました。(↓)
今回のこれは画像を埋め込んでいるのではなくXHTML側には手を入れずCSSで16px*16pxのPNGを背景画像として表示するようにしてみました。コードはこのような感じ。
.rss:link, .rss:visited {
margin: 0.2em 1em;
padding: 2px 8px 2px 22px;
border: 1px solid #999999;
background: #545454
url(./resources/feed-icon-16x16.png)
no-repeat 2px 50%;
color: #ffffff;
font-size: 90%;
text-decoration: none;
} .rss:hover {
border: 1px solid #99cc66;
background: transparent
url(./resources/feed-icon-16x16.png)
no-repeat 2px 50%;
color: #FF9933;
text-decoration: none;
text-shadow: #ff6600 0.2em 0.2em 0.2em;
} .rss:active {
border: 1px solid #ff9933;
background: transparent
url(./resources/feed-icon-16x16.png)
no-repeat 2px 50%;
color: #99cc00;
text-decoration: none;
text-shadow: #669900 0.2em 0.2em 0.2em;
}
(うーんホントはこの背景画像指定のコードを３回も書いてしまってるのがスマートじゃないです。「background-image:〜」とかでは無く「background:」を使った短縮形での背景指定コードを元に書いたのでこう書かざるを得なかったのですが、もう少しスマートな書き方があるかもしれません)
このFeed Iconが全てのブラウザで標準になるかどうかは分かりませんがデザイン的にも良い感じに仕上がってますし、どの環境でみても一見してRSSリンクが分かるのは良い事だと思います。(まぁ、これがMozillaではなくMSが提唱したものだったら見方が変わるかもしれませんが...)
CSSを微妙に更新
CSSを少し更新してみました。表示がおかしくなっている場合は例によってブラウザをShift(or Ctrl) + リロードでよろしくお願いします。
変更したのは、トップのタイトル画像。Coherenceさんで紹介されていたTips(参照↓)
にちょっと感化されたので、z-indexを使って背景を二枚重ねして「超高解像度のスクリーンでも画像が途切れない」＆「画像サイズを小さくしてロード時間を短縮」するように対応してみました。(つもり)
今現在WinIEでは未チェックなのでちょっと心配ですが、とりあえずSafariとGecko系(最近はFirefoxではなくてCaminoを愛用中)でチェック済。WinIE、あるいは他の環境で閲覧の方で「CSS、ズレてるよ〜」という場合はご教示下さい。
当サイトをiPhone対応してみた。・・・と言ってもサイトのデザインはそのままに、iPhoneでアクセスしたらコンテンツの本文を読み易いよう横のナビゲーションメニューをページ下に移動させてフォントを調整させるようにしただけ。
「iphone.css」は、@importでデフォルトのcssを読み込んで、その上にiPhone対応に必要な部分だけオーバーライドして書き換えて表示するようにしてみた。
こういう時代のためのXHTML+CSS完全分離デザインなので、メディアタイプを判別させてCSSを切り替えて読み込ますだけで対応する、というのは重要ポイント。RSSで読むも良し、サイトに直接アクセスするもよし、という状況に対応するのにコンテンツを直接変更しないってのはスゴく楽だ。（というか、楽じゃないといけない、と思う。）
Webkit特有のプロパティはまだまだ研究が足りないが、今のところは特に強い必要性を感じないし、とりあえず見苦しくならない程度で対応しておくことにする。
今回追加してみたWebkit専用プロパティは以下の二つ。
html { -webkit-auto-text-size-adjust: none; } a { -webkit-tap-highlight-color: rgba(00,33,99,0.60); }二番目のやつはリンクをタップしたときに色がグレーになるやつ。これがあるだけでなかなかiPhoneっぽい。
関連：