タグ:スタイルシート ( 9 ) タグの人気記事

エキサイトブログで地図を中央揃えする方法

エキサイトブログの記事に写真をアップロードするとき、ほとんどの人は写真を中央揃えしていると思います。(エキサイトブログでは中央揃えを指定するのがいちばんレイアウトしやすいので・・・)

でも、記事に地図を載せると地図は左揃えになってしまいますので、写真との配置のバランスが悪くなってしまいます。

そこで、記事に載せた地図を中央揃えする方法を紹介します。

ひとつの地図だけを中央揃えする方法

以下のように、地図を表示する記号の前後を <center> と </center> で囲んでやれば、その地図を中央揃えすることができます。
<center></center>
の部分は地図作成により挿入された地図を表示するための記号で、それに赤字の部分を追加すれば地図を中央揃えすることができます。

地図をいくつも使っていて上記の作業が面倒くさい場合は、以下の方法が便利です。

すべての地図を自動的に中央揃えする方法

エキサイトブログの記事に載せたすべての地図を自動的に中央揃えするには、スキン変更CSS編集画面で以下の行を追加するとよいです。
div.EXBLOGMAP {
margin: 15px auto;
}
15px の部分は上下の余白です。他の数値でもかまいません。


[PR]

by pc_klik | 2012-06-04 19:00 | ブログ TIPS

エキサイトブログで記事と広告を区別しやすくする方法

無料コースで利用しているエキサイトブログでは記事内に広告が表示されるようになっています。

この手の広告では、広告が表示されるブログの内容や閲覧状況などを解析して、そのブログを見に来た人が興味を持つ可能性があると思われる広告が自動的に表示される仕組みになっています。

悪いことに、エキサイトブログでは記事本文とコメントの間に広告が表示されるため、記事と広告の区別がつきづらいです。

そのため、このブログに表示されている広告の商品やサービスを私(ブログの持ち主)が紹介している、あるいは勧めているように思われてしまう心配があります。

そこで、記事と広告の区別がつきやすいように、スタイルシート(CSS編集)を使って、以下のようにしてみました。
  • 広告の上下に区切り線を表示する
  • 広告の上下に100ピクセルの余白を持たせる

具体的には、CSS編集画面で以下の行を追加しました。
div#im {
margin-top:100px;
margin-bottom:100px;
border-top:1px solid #dddddd;
border-bottom:1px solid #dddddd;
}

エキサイトブログの広告を目立たなくする方法も考えられるのですが、あまりやり過ぎてしまうのもうまくないでしょうから、このくらいがちょうどいいかと・・・。

【追記】 コメントを先頭に持ってきたらどうか・・・

上記の方法だと、本文とコメントの間がけっこう離れるので、試しにコメントの表示位置を先頭に持ってきてみました。

でも・・・

やっぱりコメントが記事の前にあると変なので、元に戻しました。
[PR]

by pc_klik | 2012-05-29 11:00 | ブログ TIPS

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

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

d0015124_1705922.jpg


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

影を表示するためにスキン編集でスタイルシートに追加したのは以下の行です。
box-shadow: 5px 5px 5px -3px #999
指定内容の説明は以下の通りです。
  • 1番目の 5px :右方向(x方向)にどれだけ影をずらすか
  • 2番目の 5px :下方向(y方向)にどれだけ影をずらすか
  • 3番目の 5px: 影をどれだけぼかすか
  • -3px: 影をどれだけ拡大・縮小するか (マイナスを指定すると縮小になる)
  • #999 : 影の色

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

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

関連記事


[PR]

by pc_klik | 2012-05-08 14:00 | ブログ 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 | ブログのこと・あれこれ

おすすめソフト:ホームページビルダー バージョン11

私は、ホームページ(ブログ以外)を作成するときに "ホームページビルダー" というソフトを使うことが多いです。

かなり高度なことをやろうとするとホームページビルダーは不満に感じる部分もありますが、一般的なホームページを作成するソフトとしては、使いやすいし、価格も手頃だし、腕前が上がっても使い続けることができるので、お勧めできるソフトです。

私はこのソフトをバージョン 2001 のときに使い始め、その後、6 ⇒ 7 ⇒ 8 ⇒ 9 ⇒ 10 と発売されるたびにバージョンアップしてきました。

そして、昨年の暮れに最新バージョン 11 が発売になったので、とりあえず買っておいたんです。そして、つい最近になってからやっとパソコンにインストールして使ってみました。

バージョン11では、今までのバージョンアップでほとんど変化が見られなかった [ツール] メニューに、[CSSエディタの起動] というのが増えてました。
d0015124_1193642.gif

これには、かなり興味をひかれました。

今までのホームページビルダーには スタイルシートマネージャー という画面があり、スタイルシートをいじるときにこの画面を使うようになっていました。

この スタイルシートマネージャー という画面は、スタイルを追加するのは分かりやすくて楽なんですが、表示結果を確認しながらスタイルをいろいろと変えて調節したい・・・という使い方をすると、マウスの操作がやたらと多くて、すごくかったるく感じてしまうんですね。

今回追加された CSSエディタ を使ってみましたが、以下のような画面になっていて、実際のページでのプレビューをエディタ画面上で行うこともできるようになっていました。
d0015124_94176.gif

この新機能は私が不便に感じていたことを解決してくれるもので、バージョン11は私にとっては、今までのバージョンアップの中でいちばんありがたいです。

スタイルシートをよく使う方はこの機会にバージョンアップしてみてはいかがですか?
[PR]

by pc_klik | 2007-02-10 01:31 | おすすめソフト

ホームページ制作事例:わがた歯科医院様

d0015124_23593717.jpg

当教室でお手伝いさせていただいた、わがた歯科医院様 のホームページが Yahoo! JAPAN のカテゴリ "新潟県南魚沼市 > 歯科" に登録されました。サイトを公開したのは数ヶ月前ですが、その後に少しずつ手を加えて、年明けにほぼ完成しました。

わがた歯科医院様は、痛くない治療と予防歯科に力を入れている、南魚沼市(六日町)の歯科医院です。

SEO対策 - スタイルシートを活用して更新を容易に

このサイトは、SEOに配慮した作りにしてあり、検索結果での上位ランクインと多くのアクセスを実現しています。そして、スタイルシートを用いて、サイト全体のデザインを一元的に管理し、お客様の側でコンテンツの更新を容易に行っていただけるように配慮してあります。

Exciteブログもお使いになっていますが、メインのサイトと同じデザインになるように、Exciteブログでスキンのカスタマイズを行い、統一感を持たせてあります。

 ⇒ 新潟県南魚沼市の歯医者 ~ わがた歯科医院
    http://wagata.jp/
[PR]

by pc_klik | 2007-02-02 00:00 | ホームページ制作事例

ブログのデザインを変えてみました

スタイルシートをいじって、このブログのデザインを少し変えてみました。

メニューと記事のタイトル部分の背景画像の色がちょっときつかったので、地味目のデザインが好みの私としては、前から気になってました。そこで、このブログの背景と同じ色の薄いグレーを使った背景画像を作って、画像を差し替えてみました。

ウン、こっちの方がいいな!(ワタクシとしては・・・)

ちなみに、差し替え前の画面はこんなかんじでした。
d0015124_16562171.jpg

[PR]

by pc_klik | 2006-11-15 16:59 | ブログのこと・あれこれ

ホームページ制作事例:南魚沼市議会議員 関常幸様

d0015124_0392128.jpg

平成17年10月に南魚沼市議会議員に初当選された関常幸様のサイトです。「地域の活力と元気を呼び興す」を公約にがんばっておられます。

スタイルシート(CSS)の活用により容易な更新を実現

スタイルシート(CSS)を用いて、お客様ご自身で近況報告や議会報告などを掲載しやすいように配慮してあります。ホームページ制作ツールとしては、初心者の方でも扱いやすいホームページビルダーを使用しています。

南魚沼市議会議員 関常幸
URL: http://www18.ocn.ne.jp/~tunezou/
[PR]

by pc_klik | 2006-10-01 17:00 | ホームページ制作事例

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