気に入らなかった | 評価特典.確実に稼ぐ商材評価アフィリハローワークゆずまる評価特典.確実に稼ぐ商材評価アフィリハローワークゆずまる

まんつ、これみてけれ。

サイトのページ。

いや、記事は見るな、読むな、書きなぐってるだけだから。
つか、書きなぐってからさ、プレビューしてみたんよ。
これ、クールでかっこいいワードプレステーマの9042を
使ってるのね？

他のサイトでも90系を使ったんだけど、dsかな？
こんな感じなのよ。

まぁ、硬い文章ってことだとこれでいいのかもって、
そっちのサイトは、そのまま使ってるんだけどね。
なんか、今回は気になったわけ。

何？って・・・おっと！ごめん！見出しのところね？

見出しの文字って太くて大きくなって・・・
まぁ、立派だこと・・・　ってシモネタかよ！＞自分

飾りがなんにもついてない。
これが気に入らない。

なんかこう、見出しの前にお鼻が付くとかさぁ〜。

そそ、ぞぉ〜さん、ぞぉ〜さん、お鼻が長いのね〜、
そ〜よ、かあさんも〜・・・　ってる場合やない！

まちがった、お花がつくとかさ。
アイコン？つくとかさ、アンダーラインがつくとかさ、
欲しいじゃん？

たぶん、そうだと思うんだ。
まぁクールでかっこいいワードプレステーマに
限ったことじゃないけどね。

見出しの飾りはどうやってつけるのか？

普通に、img タグの後ろに文字をいれると
微妙にずれて気持ち悪い。

ゆずまるは、背景に画像をおいて、
文字の開始位置を右にずらす方法をやってる。

どうするか？
うん、教える。　覚えておくと便利。

アイコンの画像を22ｘ22としよう、画像のＵＲＬを ht:x.jpg で
表現しよう。

そしたら、こうかく。（不等号記号は半角にしてね）
＜style type=”css/text”＞
h2{
background-image:url(‘ht:x.jpg’);
background-repeat:no-repeat;
margin:0 0 0 26px;
}
＜/style＞

CSSを乗り越えるときに覚えておくといいのが、
margin , border , padding
外側から順番にね？

margin があって、border があって、 padding がある。
それぞれ３つの余白と考えるといい。
border は、色付きの余白ね？

中身が表示されるまでに３つの余白を指定できるってことだ。
border に色をつけると、線が表示される。
その線から文字までの間にどれだけの余白をあけるか。
それが padding もちろん、 border にも幅がある。

こんな感じ。
http://www.ib-youkari.com/pchan/public/･･･

それともう一つ。 margin と padding の余白の指定の仕方。
値は１つ〜４つ指定できる。それぞれの意味が
margin:value;　１つの場合、上下左右に value 分余白があく。
２つの場合、上下、左右
３つの場合、上、左右、下
４つの場合、上、右、下、左。ようするに時計回り。

だから、前述したこれは
＜style type=”css/text”＞
h2{
background-image:url(‘ht:x.jpg’);
background-repeat:no-repeat;
margin:0 0 0 26px;　←これ
}
＜/style＞

表示する文字の左にだけ 26px 余白をあけてくれって
言う意味だ。

background-image 〜は、背景表示する画像ＵＲＬを指定してる。
background-repeat 〜は、繰り返すなって指定してる。

その結果、
[アイコン] 文字
つまり、

って感じになるわけだ。

で、9042 は、スタイルシートをこう直した。
h2 {margin: 0 0 0.6em 0; padding: 0.4em 0; font-size: 138%; font-weight: 600; line-height: 1.3em; }
これに、
background-image:url(‘myimg/boxses_blue.png’);
background-repeat:no-repeat;
background-position:left center;
border-bottom:1px solid #00c;
を追加したわけね。

つまり、こう。
h2 {margin: 0 0 0.6em 0; padding: 0.4em 0; font-size: 138%; font-weight: 600; line-height: 1.3em;
background-image:url(‘myimg/boxses_blue.png’);
background-repeat:no-repeat;
background-position:left center;
border-bottom:1px solid #00c;
}

ワードプレスのスタイルシートのＵＲＬは、
スタイルシートを基準にしてどこにあるかを
指定すればいい。

だから、9042 のフォルダーの中に myimg ってフォルダーを
作ってそこに boxses_blue.png という画像を置いた。

border-bottom:1px solid #00c; は、
下のボーダー領域にだけ、色を入れてくれって指定ね？
これを border:1px solid #00c; って書くと枠で囲う指定になる。

それとカラーコード。
普通は、 #0000cc って書き方だけどＣＳＳは、
これを２桁づつを１桁で書ける。
だから、#00c ってのは、#0000cc と同じ意味。

つーことで、ゆずまるの今使ってる書下ろしのアイコンを
追加特典に入れておいたので、使ってください。

・・・だせーとかいうな！
こんなやつ⇒

　↓　↓　↓
カスタマイズが面白い、クールでかっこいいワードプレステーマ