CSS ヘッドを画像に&クリックでトップページに
私のオリジナル タイトル画像のロールオーバー
ではなくて
有名人ブログのようにヘッド画像全体をクリックできるようにしたいって～場合のために覚書です
背景に指定する画像の大きさを800×300とした場合の例
例のごとく青字部分をCSSの下にコピペしてください
#header h1,
#header h2{
margin:0;
padding:0;
text-indent:-9999px;
}
#header h1 a{
display: block;
width: 800px;/*画像の横*/
height:300px;/*画像の縦*/
}
/* タイトル画像の配置 */
/* 画像によっては */
/* height:300px;画像の縦 */
/* background-repeat:repeat-x; */
/* background-position:center; */
/* ↓ の指定も必要になります ↓ */
#header {
background-image: url(画像のURL);
background-repeat:no-repeat;
}
↑これは私のオリジナルではありません
有名人ブログでは使われていますし、探せばほかでも説明されています
少し詳しく説明しなおしています
オリジナルスキンCSSの編集 ヘッド・タイトル2
オリジナルスキンCSSの編集 ヘッド・タイトル3
２枚のヘッド画像を使ってマウスをのせたとき別の画像になるロールオーバーは
CSS タイトル画像のロールオーバー・・・・
CSS タイトル画像のロールオーバー2
ＣＳＳ 記事の中でカンタンにマーカー ２
追加です
まさか・・・・
太字ボタンもいらないって方・・・・
/* マーカー */
.entry .contents strong{
padding: 2px 0;
background-color: #ffff66;
font-weight: normal;
}
太字ボタンをマーカーにした場合に、
太字を使いたい場合は
<span style="font-weight: bold;">文章</span> または <b>文章</b>
・・・・・
font-weightプロパティ
ちなみに、100～900までの100単位の数値で太さを指定することもできます（font-weight: 800;）
400＝normal、700＝bold ですがフォントにより対応するかどうか決まります
フォントが合えば細字が表示されるかも・・・・
ところで斜体ボタン押すと <em> が付きますが、コレは強調です・・・・
どちらも斜めにはなりますが斜体は <i> です
あっ斜体のもっとカンタン指定は <i>文章</i> でした
ついでに
<em> より、もっと強調は <strong> です・・・見かけは <b> と同じ太字です
・・・･･････・・・・・・・・・・・・・・・
i と em
b と strong
人の目ではまったく同じです
でも検索ロボットには別物なんです
かっこいいから斜めにした・・・この単語を強調したいから斜めにした
バランス的に太くしてみた・・・この単語は重要だから太くした
SEO的にどちらが重要か、どちらを使うべきかはわかりますよね・・・・
私、案外SEOも得意なんです？？
※12/24 Firefox、Netscapeで記事を書いている方は各ボタンで付くタグがちがっていますのでこの方法は使えません
ＣＳＳ 記事の中でカンタンにマーカー
記事中で文章、あるいは単語を強調させたいとき
なにを使いますか？
太字？ 色文字？ 下線？ ・・・・・・
カンタンにマーカーぽく出来る方法
文字装飾で斜体は使わないって方
例のごとく青字をＣＳＳにコピペ
/* マーカー */
.entry .contents em{
padding: 2px 0;
background-color: #ffff66; /*#00ff66,#00ffcc,#00ff7f,#ff00ff,#00ffff*/
font-style: normal;
}
タグの非表示で普通に文章を書いてマーカーしたいところを選択
「斜体」ボタンをクリックして斜体にしてしまいます・・・・・
・・・・・・ プレビューしてみると斜体のはずがマーカーが付いているんです
色は#ffff66（黄）になっていますが#00ff66,#00ffcc,#00ff7f,#ff00ff,#00ffffなど入れ替えて好きな色を使ってください
色はそれ以外でも何でもかまいません
バックを濃い色にしておいて color: #ffffff; を加えて 白字にしても面白いと思います
他にも 下線は使わないって方なら
/* マーカー */
.entry .contents u{
padding: 2px 0;
background-color: #00ff66;
text-decoration: none;
}
打ち消し線は使わないって方は
/* マーカー */
.entry .contents strike{
padding: 2px 0;
background-color: #ff00ff;
text-decoration: none;
color: #ffｆｆff;
}
あくまでカンタンにボタン1個でマーカーを指定するって方法です
マーカーを付ける文章の前後を
<span style="background-color: 色; ">文章</span>
で、いちいち指定しなくてもすむって～だけの方法です
※各ボタンをマーカーにした場合に、
斜体を使いたい場合は <span style="font-style: italic;">文章</span>
下線を使いたい場合は <span style="text-decoration:underline;">文章</span>
打ち消し線を使いたい場合は <span style="text-decoration:line-through;">文章</span>
で、指定してください
※12/24 Firefox、Netscapeで記事を書いている方は各ボタンで付くタグがちがっていますのでこの方法は使えません