スタイルシート

写真に重ねた文字枠にスタイルシートを使って透明度を設定する方法

先日、パソコン教室くりっく のお客さんからエキサイトブログスキン編集に関するある質問を受けたとき、その場ではよい解決方法が見つからなかったので、あとから調べてみました。

そのお客さんがお使いのスキン(スタイルシート)では、以下のようなやり方で写真に重ねた文字枠に透明度を設定していました。

background: #fff;
filter: alpha(opacity=60); -moz-opacity:0.6; opacity:0.6;

この方法だと、透明度が子要素(文字)に継承されるために ↓ こんなふうに文字色までうすくなってしまいます。

我が家の ちゃむ です。

そこで、文字色に影響を与えない透明度の設定方法があるかどうか調べてみました。

ひとつ見つかったのは、以下のようにスタイルシートを設定する方法です。

background: #fff;
background: rgba(255, 255, 255, 0.6);

この方法だと、透明度が子要素(文字)に継承されませんので ↓ このように文字色を濃くすることができます。

我が家の ちゃむ です。

ただし、この方法の場合は Internet Explorer 8 以前のブラウザだと文字枠に透明度が設定されません。(Internet Explorer 以外の主要なブラウザでは透明度がうまく設定されます。)

どっちの方法も一長一短ですなぁ・・・。

ブログの記事内の写真にぼかした影をつける方法

スタイルシートを使って、このブログの記事に載せてある写真に自動的にぼかした影をつけて立体感を出すようにしました。

今朝の らら ~ においを嗅ぎながらお散歩 - FinePix A330

通常、画像編集ソフトでこのような影をつけるためには、ドロップシャドウなどと呼ばれる加工をしますが、そういった加工をせずにスタイルシートによって自動的に写真に影をつけてみよう・・・ということです。

影を表示するためにスタイルシートに追加したのは以下の行です。

box-shadow: 5px 5px 5px -3px #999

指定内容の説明は以下の通りです。

  • 1番目の 5px :右方向(x方向)にどれだけ影をずらすか
  • 2番目の 5px :下方向(y方向)にどれだけ影をずらすか
  • 3番目の 5px: 影をどれだけぼかすか
  • -3px: 影をどれだけ拡大・縮小するか (マイナスを指定すると縮小になる)
  • #999 : 影の色

4月28日の記事に書いたブログタイトルに枠を表示する方法と同じ box-shadow を使っていて、Internet Explorer 8 までだと影は表示されません。

Internet Explorer 9 や他のブラウザで見ると写真にぼかした影が表示されます。

ブログのヘッダーを春モードに変更しました

新潟県南魚沼市はすっかり春になり桜の開花がどんどん進んでいますが、このブログのヘッダー画像は駒ケ岳の雪景色のままでしたので、春らしく桜のヘッダー画像に差し替えてみました。

また、今までは画像編集ソフトを使ってブログタイトルが表示される位置に枠を合成したものをヘッダー画像として使用していましたが、ヘッダーの差し替えのたびに枠を合成するのは手間がかかるので、今回からスタイルシートを使って枠を表示するやり方に変更しました。

枠を表示するためにスタイルシートに追加したのは以下の行です。

box-shadow: 0px 0px 10px #999;

指定内容の説明は以下の通りです。

  • 1番目の 0px :右方向(x方向)にどれだけ影をずらすか
  • 2番目の 0px :下方向(y方向)にどれだけ影をずらすか
  • 10px : 影をどれだけぼかすか
  • #999 : 影の色

ちなみに、Internet Explorer 8 までだと box-shadow による影は表示されません。

Internet Explorer 9 や他のブラウザで見ると、以下のような枠が表示されます。

CSS3 の box-shadow によりブログタイトルに枠を表示

ツイッターのプロフィールウィジェットのレイアウトのくずれを修正しました

このブログのサイドバーに ツイッターのプロフィールウィジェット を表示していますが、レイアウトが以下のようにくずれてしまっていました。

ツイッターのプロフィールウィジェットのレイアウトがくずれています

上記のレイアウトの問題点は以下の3つです。

  1. 名前「魚沼情報サービス 対馬」の位置が下にずれている
  2. その名前の下によけいなボーダーが表示されている
  3. その名前のフォントが小さい

そのうちに直さなければ・・・と気にしつつも、とりあえずこのままでも問題ないし・・・とそのままにしてあったのですが、今日時間がとれたので、レイアウトの修正作業を行って以下のようになりました。

ツイッターのプロフィールウィジェットのレイアウトのくずれを修正しました

調べたところ、この名前部分は <h3> タグで囲まれていることが分かりました。
ちなみに、その下の pc_klik の部分は <h4> です。

このブログで <h3> のスタイルを設定してあるのですが、そのスタイルがプロフィールウィジェットに反映されてしまったことがレイアウトがくずれた原因でした。

今回行った修正作業は以下の通りです。

まず最初に、プロフィールウィジェットのソースコードを貼り付けた部分を以下のように <div> タグ(赤字の部分)で囲みます。

<div id=”side_twitter”>

プロフィールウィジェットのソースコード

</div>

そして、スタイルシートに以下の行を追加しました。

div#side_twitter h3 {
 clear: none;
 border: none;
 font-size: 12px !important;
}

フォントサイズについては、ツイッター側でも設定しているみたいで(たぶん・・・未確認ですが)、!important をつけてやらないといけませんでした。

ようやくきれいにレイアウトされて、気分すっきりですゎ。

もっと詳しく調べていけば、プロフィールウィジェットをオリジナルデザインにカスタマイズできそうですので、そのうちにやってみたいと思います。