オススメ記事★☆

知らなきゃ損する! 今オススメの記事はコレ↓
【CSSでスタイル変更】背景を変えてみる
【CSSでスタイル変更】背景を変えてみる・2
Yahoo!ブログ検索(Beta)にPingを打て!

これからもオトク情報&コネタ満載でお届けします。初心者必見ですよ〜☆

2006年04月09日

【CSSでスタイル変更】背景を変えてみる

こんばんは、ハコです。

なにやら、スタイルシートの小技に興味がある方がいらっしゃるようなので
今日はそのネタを〜。

スタイルシートを変更する、その前手順

スタイルシートの変更ができるブログなら、簡単に変更できます。
もしくは、HTMLタグの打ち込みを許可しているブログなら対応可能です。

どこでスタイルシートを変えるか、については
お使いのブログサービスのヘルプでご確認くださいね。

たとえば、seesaaの場合、ログインして、メニューの
「デザイン」→「スタイルシート」で
変更画面が出てきます。

分かりやすくするために、
今設定されているスタイルシートの部分をエディタ(ノートパッドとか、Wordでもいいです。テキストを編集できるソフト)に全て貼り付けてください。
Windowsをお使いの方なら、スタイルシートが書き込まれているボックスにカーソルを移動して、
Ctrl + A(CtrlキーとAキーを同時に押す)で全て選択できます。
Ctrl + C でコピーできますので、それをそのままエディタに貼り付け(Ctrl + V)してくださいね。(Macの方のショートカットは知らないので、「全て選択」「コピー」「貼り付け」をしてください。以下同様)

これで見やすくなりました。
(どうしてこれをするかというと、検索しやすいからです)

※明らかに今から書きたい部分が書かれていないと分かっているときは、そのまま書き込んでもいいですが、そうでないときは、この作業を行う方が上書きの危険を逃れられるので無難です。

スタイルシートで文字の背景を変えてみよう

リンク文字にカーソルを当てたとき

まず、エディタ上に、対象のものが存在していないか、確認します。
エディタの一番はじめにカーソルを置いて、Ctrl + Fで検索画面を立ち上げます。
「a:hover」と入力して、「検索」ボタンを押してください。
もしどこかにそれがあれば、今からその箇所を書き換えるか、またはその場所に追加してください。
なかった人は、どこでもいいので、新規に書き込みます。

新しく書く内容はこんなかんじです。

a:hover{
 background-color:#008000;
 padding:2px;
}

「background-color:」の後ろに、色コードを入力します。この場合はgreenが出てきます。色コードは「色コード」と検索したら調べることができますし、また、好きな色の色コードが何かを知るためのフリーソフトもあります。
ちなみに私はFE - Color Paletteを使ってます。

その次の行にあるのは、文字と背景色の外枠の間の空白をどのくらいとるかを指定しています。書かなければデフォルトの値が採用されるので、わざわざ変えたいとき以外は書かなくていいです。

対象の場所が一カ所だけのとき

ところで、上記の変更を加えると、ブログナイのリンクのことごとく全てが背景緑になってしまいます。

えー、それは嫌〜!と思われる人もいますよね。
でも、記事が長くなってしまうので、この続きはまた次回♪

スタイルシートを変更する、その後処理

エディタ上で書き換えたスタイルシートは、またCtrl + Aで全て選択して、Ctrl + Cでコピーします。
それから、置き換えたい古いスタイルシートの画面で問題の場所にカーソルをあて(クリックして)、またCtrl + Aで全て選択し、Ctrl + Vで今さっきコピーした内容を貼り付けます。

※別にショートカットキーが不慣れな人は使わないでいいですので、マウスを右クリックしてメニューから操作してくださいね。

それから設定を保存します。

スタイルシートの変更のみの場合は、「再構築」は行わなくても構いません。

以上、ハコでした☆
気になる人は明日もまた読んでね。

------
今回の記事は

posted by ハコ at 00:29| Comment(7) | ■コネタ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
ハコさん
また来ちゃった (*⌒∇⌒*)テヘ♪
私が購入するのは情報起業+○○向けの商材です。
その手の買ったことないのでw
そろそろ寝ないとお肌に悪いですね(笑)
また応援にきまーす♪

おやすみなさい★
Posted by nanakoです〜 at 2006年04月09日 01:20
nanakoさん>
うわ、早すぎですよ〜
私、まだ自分のブログのコメント返しを完了させてなかったんですよ〜(今完了しました)
確かにお肌に悪い時間です。
再生時間終了の2時まで、タイムリミット20分!
・・・ムリです。今日は諦めます。うぅ

情報起業ですか。
それはほったらかししたい私には不向きな商材の模様です。
頑張ってくださいね!
Posted by ハコ@ぱっくん!情報商材 at 2006年04月09日 01:40
おはようございます。
CSSは怖がらずにまずやってみることですよね。
意外と簡単にできますから。
応援してきます、ポチッ。
Posted by danna【革命的収入構築ブログ】 at 2006年04月09日 06:54
ボラーチョです。

昨日はコメント、応援有難うございました。

今日の記事参考になりました。

応援して帰ります。
Posted by 【ビギナーのホームページ制作奮戦記】ボラーチョ at 2006年04月09日 10:39
こんばんは、ハコさん。

狐雨です。

リンクありがとうございます。


スタイルシートのカスタマイズって

やりだすと面白いですよね。

今も検証用ブログで色々ためしてます。


で質問いいですか?

記事やコメントに表示される時間のタグってどれなんでしょう?

いじってもちっともヒットしないんで未だに分からないんですよ。



では、応援して帰ります♪
Posted by 『☆情報商材の本音☆実践成果を暴露しちゃいます』の狐雨です。 at 2006年04月09日 18:11
dannaさん>
そうですよね〜
ただ、各ブラウザ対応にしようと思うと大変なんですけどね。
IEだけとか限定なら楽ちんなんですが〜

ボラーチョさん>
色々試してみてくださいね

狐雨さん>
seesaaなんですよね。
時間は、コメントやトラックバックのリンク、そして記述者と同じ要素になっているので、時間だけにスタイルを施すことはできません。全部まとめてならできます。
class="posted"というのがそれです。
ちなみにコメントの時間とかは、class="comments-post"ですね。

時間だけに別のタグを与えるというのはできません。そこはseesaaが変えられないようにしていていじることができないからです。
投稿時間を操作したいなら、記事の編集でするしかないですね。
Posted by ハコ@ぱっくん!情報商材 at 2006年04月09日 22:08
こんばんは、ハコさん。

狐雨です。

丁寧な回答ありがとうございました。

良く分かりました。


応援♪ポチ 応援♪ポチ  応援♪ポチ
Posted by 『☆情報商材の本音☆実践成果を暴露しちゃいます』の狐雨です。 at 2006年04月11日 03:25
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

ぱっくん!情報商材−初心者必見の丸秘情報★トップページへ戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。