もぐらくんのブログ一覧

日付表示部にこんな画像を貼り付けてみました。＿＿＿＿＿＿＿＿＿＿＿↑

画像の加工にはPhotoshopを使って、
１．ユニオンジャックをグレースケールに
２．縦横サイズを変更
３．黒→白のグラデーションをかけたレイヤーを乗算
４．レイヤーを統合してJPEGで保存
という手順で作りました。

サイズは、日付表示部よりも若干小さめの550×20ピクセル。

スタイルシートの .BlogDate セレクタに、

background-image: url('アップロードした画像のURL');
background-repeat: no-repeat;

と加えると、元々の背景色のグレーが細いラインになって、日付の下まで伸び、いい感じに一体感が出ました。グラデーションをかける角度を何度も何度も試行錯誤しましたが、けっこういい出来でしょ♪

ありゃ・・・、IEだと日付部分までアンダーラインが伸びないなあ・・・。困ったなあ・・・。また調整してみます。

とりあえず、Firefoxではちょっと下線表示の幅が広すぎて気に入らないけど、下のように padding を調整しておきました。解決方法はほかにいくらでもあるんだろうけど、面倒なのでこれで妥協します。（笑）

padding: 2px 0 2px 3px;
　↓
padding: 2px 0 3px 3px;

MINIのモディファイは、そうそう進行させ続けられないし、ちょっぴり違うところで遊んでおります（笑）

グレースケールのユニオンジャック・サイドミラーカバーがほしいなあ・・・

　↑　ここにアイコンを設置してみました。PCで見てね♪

設置の方法などは、ごちゃごちゃ書きませんが、

.Title セレクタに
background-image: プロパティで

お好みのアイコンを指定して、padding を調整するだけです。

今度は、日付部分の表示を弄ってみよっと♪

私の常用ブラウザは、Firefoxです。みなさんのブログを拝見していると、ヘッダ画像がこの写真のようになっている方が結構あります。

IE6で見ると、きちんと表示されているのに、Firefoxで表示するとこうなってしまうのです。原因は、ブラウザによるボックスモデルの解釈の違いなのですが、面倒なので今まではFirefoxに合わせて表示していました。（IEの方には、MINIの足下の地面が切れていたはずです。)

でも、スタイルシートをちょっと弄ると、IEとFirefoxのスタイルシートの解釈の違いを吸収して、同じように表示することができます。今回はその紹介です。

まず、私の用意したヘッダー画像は750×320pxのJPEG画像です。縦幅は好みでいいですが、横幅は750pxにするのがいいでしょう。

画像のアップロードの仕方には触れません。100kbyteまでのサイズじゃないと受け付けてくれないので、Photoshopなどで、うまく調整してからアップしましょう。

私がこれから触っていくスタイルシートは、「カスタマイズ(上級用)」の「ブラック」を土台にしていきます。#Headerというセレクタのところを触ります。

標準状態は、以下のようになっています。

#Header
{
padding:15px;
margin-top: 5px;
background: #353535;
margin-bottom: 0px;
width: 750px;
height: 70px;
background-image: url('/styles/black/point.gif');
}

これを、以下のように修正します。

#Header
{
padding:15px;
margin-top: 5px;
background: #353535;
margin-bottom: 0px;
height: 290px;
background-image: url('アップロードした画像のURL');
}

* html #Header
{
padding:15px;
margin-top: 5px;
background: #353535;
margin-bottom: 0px;
width: 750px;
height: 320px;
background-image: url('アップロードした画像のURL');
}

これは、スターハックという技法なんですが、Firefox・Opera・Safariなどでは、#Header の方が適用され、IEでは * html #Header の方が適用されます。

IEのCSS解釈にはバグがあって、にも関わらずシェアは大きいから、こんな裏技が必要になります。

ポイントは、width と padding/border を同時に使用したときの解釈の違いなのですが、padding: 15px; の２倍に当たる30ピクセル分だけ縦横サイズをマイナスして、
width: 720px;
height: 290px;
と背景画像のサイズを指定することです。

今回の場合は、widthは省略しても大丈夫です。

heightを省略してしまうと、タイトル文字列の上下15ピクセル分しか画像が表示されなくなりますので、これは意図的に元の画像の縦幅－30ピクセルを指定しましょう。

なお、このハックはWindows版IE6以前とMacOS版IEのバグには対応できますが、IE7には効きません。IE7は標準仕様にかなり近づいたらしいですけど。。。

ヘッダ回りで、IE7対応のハックが必要かどうかわからないので、今は触っていませんが、IE7の方、情報をいただけたらうれしいです。

FireFoxとIEの表示の違いを吸収したいし、その他いろいろと試してみたいことが出てきたので、ぼちぼちとスタイルシート弄りをやってみようと思います♪

ご訪問のたびに、デザインがコロコロ変わったり、表示がくずれたりするかもしれませんが、ご了承のほどを。。。m(__)m

みんカラでは、トラックバックを使われる方は少ないですね。

ブログを持つようになって何年か経つのですが、ブログに出会っていちばん驚いたのは、このトラックバックという新しい考え方でした。

自分のドメインも取得して、みんカラ以前から自宅でLinuxサーバーを動かしたりしてきた経緯があります。今は、みんカラ以外にもレンタルサーバーでブログを開設していますが、ここの楽しさに出会ってからは開店休業状態ですけど・・・(笑)

自分のMINIは、バリバリにチューンされている方みたいに、有益な情報はあんまり発信できていないけど、お仲間のブログを拝見して、いつも勉強させてもらっています。だから、今までちょっと遠慮していたのですが、これからはときどきトラックバックも使ってみようと思います。

そうしたら、私の所属しているグループ以外の方が、私のブログをのぞいてくださったときに、私のブログを踏み台にして、もっと有益な情報にたどり着いてくださることになり、そのことがMINIの仲間の輪をどんどん広げていくことにちょっとは役に立つかも知れません。

みなさんも、トラックバック活用してみません？

---

この記事は、スピさんのMINI-Z に刺激を受けて書いています。

---
おおっ！　今気づいたんですが、我が尊敬するSADA氏も１月１２日付のブログ「トラックバックのテスト中です。」で、この件に触れておられるではないか!

みんカラの他車ユーザーの記事で拝見したのですが、トラックバックが送信されたとき、メールで通知する機能が、１２月から止まっているとのこと・・・

SADAさん、このトラックバックは通知されますか？