タグ:CSS ( 13 ) タグの人気記事

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

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

そのお客さんがお使いのスキン(スタイルシート)では、以下のようなやり方で写真に重ねた文字枠に透明度を設定していました。
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 以外の主要なブラウザでは透明度がうまく設定されます。)

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

by pc_klik | 2012-07-25 16:30 | ブログ TIPS

ブログのヘッダー画像を差し替えました

パソコン教室くりっくの裏の水無川の雪解けの写真を、このブログのヘッダー画像として3月12日から使用していました。

この画像に対して、南極大陸のようだペンギンが出てきそうだ、というようなご意見をいただき、失敗作だったと感じております。

その反省をふまえて、このブログのヘッダー画像をツバメのイラストを使ったシンプルなものにしてみました。

併せて、メニュー部分のCSS(スタイルシート)もちょっといじってみました。
[PR]

by pc_klik | 2008-03-30 17:24 | ブログのこと・あれこれ

ヘッダー画像を差し替えました - 雪化粧した駒ケ岳

今日は天気がよくて、雪化粧した駒ケ岳がきれいだったので、Exciteブログのスキン編集(CSS編集)を使って、このブログのヘッダーを初冬モードの画像に差し替えてみました。
d0015124_180760.jpg

[PR]

by pc_klik | 2007-11-30 18:00 | ブログのこと・あれこれ

背景画像を差し替えました

このブログの背景画像を冬バージョンに差し替えました。
d0015124_176345.gif

このように、ブログのデザインを自分好みのオリジナルのものにしたいときに、Exciteブログではスキン編集という機能を使います。Exciteブログ以外でも、オリジナルのデザインを作ることができるものは多いです。

パソコン教室くりっくでは、このような実習も行っていますので、ご希望の方は こちら からご連絡ください。

WordPress, Movable Type などの操作方法についての実習も行っています。

この背景画像は LITTLE HOUSE からいただきました。LITTLE HOUSE はそれぞれの月ごとの画像を提供してくれているので、季節に合わせた画像を使いたいときに重宝しています。
[PR]

by pc_klik | 2007-11-22 17:07 | ブログのこと・あれこれ

背景画像を差し替えました

d0015124_10301515.gifこのブログの背景画像を11月バージョンに差し替えました。

このように、ブログのデザインを自分好みのオリジナルのものにしたいときに、Exciteブログではスキン編集という機能を使います。Exciteブログ以外でも、オリジナルのデザインを作ることができるものは多いです。

パソコン教室くりっくでは、このような実習も行っていますので、ご希望の方は こちら からご連絡ください。

WordPress, Movable Type などの操作方法についての実習も行っています。

この背景画像は LITTLE HOUSE からいただきました。LITTLE HOUSE はそれぞれの月ごとの画像を提供してくれているので、季節に合わせた画像を使いたいときに重宝しています。
[PR]

by pc_klik | 2007-11-07 10:41 | ブログのこと・あれこれ

ヘッダー画像を差し替えました

Exciteブログのスキン編集を使って、このブログのヘッダーを晩秋モードの画像に差し替えてみました。
今まではコシヒカリの稲穂が写った写真でしたが、いまの季節の景色にすると、天気がいい日に撮っても、なんとなく寂しげですなぁ・・・。雪が降ったら早めにヘッダーを差し替えよっと。

ヘッダー部分がけっこうスペース(高さ)を使っていたので、この機会に小さめにしてみました。
d0015124_1011515.jpg

[PR]

by pc_klik | 2007-11-05 09:54 | ブログのこと・あれこれ

XHTMLとCSSによるホームページ作成コース - パソコン教室くりっく(新潟県)

パソコン教室くりっくで受講可能なコースをご案内します。

受講内容

  • ホームページを表示するための言語であるHTMLを直接記述する方法でホームページを作成するコースです。
  • HTMLの基本や画像の挿入、表やリストの作成、リンクの設定、ページのデザインを設定するXHTML/CSSなどを習得します。
  • HTMLの仕組みが分かれば、ホームページ作成ソフト(ホームページビルダーなど)では実現できない思い通りのホームページ作成が可能となり、ホームページ作成ソフトで作成したページの不具合の修正も容易に行えるようになります。


受講時間の目安

  • 16~20時間
    お客様のご希望内容やレベルに合わせたマンツーマン講習ですので、個人差があります。


ご受講にあたって

  • ビデオ教材等を使用した実習形式の個別指導ではなく、お客様のためにインストラクターが100%専任で担当させていただく完全個別指導ですから、分かりやすさと効率が違います。
  • マンツーマン講習ですので、スケジュールは自由です。土日・祝日のご受講も可能です。都合が悪くなったら、日程の変更が可能です。
  • 友だちやご家族といっしょに2名以上で受講される場合は、受講料が割引になります。詳しくは こちら をご覧ください。
  • 当教室では、受講費用とテキスト代以外の代金(入校金・パソコン使用料・冷暖房費・etc)はいただいておりません。
  • 会社やご自宅にうかがっての出張講習も行っています。

[PR]

by pc_klik | 2007-10-07 15:08 | パソコン教室:コースのご案内

エキサイトブログで写真に枠を表示させる方法

毎度ながら、久々のブログTIPSです。

このブログの記事に載せた写真に、自動的に枠を表示させるように設定してみましたので、そのための手順を紹介します。

手順1.マイスキンを登録

まだマイスキンを登録していない場合は、以下の手順を参考にして登録してください。
 ⇒ エキサイトブログのマイスキン登録方法 http://klik.exblog.jp/5950106/

手順2.枠を表示するための設定を [CSS編集] 欄に追加

現在使用中のスキンの編集画面を開いて、[CSS編集] の入力欄のいちばん最後に以下の4行を追加して、[保存] ボタンをクリックします。
.post img{
padding:5px;
border: #ccc solid 1px;
}

注意事項:

・エキサイトブログのすべてのスキンでこの方法が使えるかどうかは試していません。
・写真以外の記事中の画像(イラストなど)にも枠が表示されます。
・写真のサイズが縦横10ピクセルずつ大きくなるので、お使いのスキンによっては画像が部分的に欠けてしまうかもしれません。

関連記事





追記:

上記の書き方だとコメント部分の画像にも枠が表示されてしまいますので、.post の部分を .story と書き換えて、以下のようにしました。
.story img{
padding:5px;
border: #ccc solid 1px;
}

スキンによっては、.story と書くとうまく動作しないものもあります。




さらに追記:

上記の書き方にしてもまだ不都合があることがわかりました。

具体的には、エモーティコン(顔文字)の画像にも枠が表示されてしまいます。

対策として、以下のようにしました。
img.IMAGE_MID, img.IMAGE_RIGHT, img.IMAGE_LEFT {
padding:5px;
border: #ccc solid 1px;
}

設定対象のそれぞれの意味は以下の通りです。
img.IMAGE_MID・・・記事内の中央揃えされた画像
img.IMAGE_RIGHT・・・記事内の右寄せされた画像
img.IMAGE_LEFT・・・記事内の左寄せされた画像

[PR]

by pc_klik | 2007-10-03 11:16 | ブログ TIPS

ヘッダー画像を差し替えました

このブログのヘッダー画像を差し替えました。

今回もまた、変更前との違いが分かりづらいかと思いますが、田植え直後の田んぼの風景から、コシヒカリの稲が育ってきた田んぼの風景に変わっています。
d0015124_1612120.jpg

このようにヘッダー画像を変更するためには、スタイルシートという仕組みを使います。

具体的な操作について、パソコン教室くりっくで実習できますので、興味がある方は こちらのフォーム またはお電話(025-779-2843)でご連絡ください。
[PR]

by pc_klik | 2007-06-17 16:14 | ブログのこと・あれこれ

ヘッダー画像を差し替えました

このブログのヘッダー画像を差し替えました。

以前との違いが分かりづらいかと思いますが、雪解け直後の田んぼの風景から、現在の田植えが済んだあとの田んぼに変わっています。
d0015124_1714463.jpg

このようにヘッダー画像を変更するためには、スタイルシートという仕組みを使います。具体的な操作について、パソコン教室くりっくで実習できますので、興味がある方は こちらのフォーム またはお電話でご連絡ください。
[PR]

by pc_klik | 2007-05-21 17:16 | ブログのこと・あれこれ

魚沼情報サービスのホームページへ | パソコン教室くりっくのホームページへ | ブログトップ   昨日:   今日:   合計:
AX