ブログ記事に画像を貼り付けると、説明しやすくなって効果的になります。

ということで、ブログに貼り付けた画像に文字を回り込みさせるＨＴＭＬを覚えておくと、とても便利です。


特に無料ブログは、画像に文字を回り込みさせる機能がついていないこともありますので、役に立ちます。


ブログに画像を貼り付けると、画像のＨＴＭＬは下のようになっています。
↓

<img src="画像が保存されている場所（ＵＲＬ）">

この画像のＨＴＭＬのうしろに、画像に文字を回り込みさせるＨＴＭＬを追加します。

配置を指定するalign（アライン）を使います。
alignの意味は、一列に整列する・提携する・調節するです。.

画像のＨＴＭＬと配置を指定するalignを組合わせてみます。
↓

<img src="画像が保存されている（ＵＲＬ）" align="画像を回り込みさせる方向">

画像を回り込みさせる方向の場所に配置を指定する値を入力します。

画像の位置	入力する値	ＨＴＭＬ
右	right	<img src="画像が保存されている（ＵＲＬ）" align="right">
左	left	<img src="画像が保存されている（ＵＲＬ）" align="left">

画像が右で文字が左の場合

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ





画像が左で文字が右の場合

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ



ちゃんと、文字が画像に回りこんでいますね。
でも、なんとなく画像と文字がくっつきすぎていて見づらいですね。

画像のまわりに余白をつけるときに使うＨＴＭＬがあるんです。

marginです。

ここでは、marginを無料ブログでも簡単に使える方法を一覧にしました。

余白サイズ（値）	余白が入る場所	ＨＴＭＬ
値が１つ	上下左右	style="margin:値１;"
値が２つ	値１が上下、値２が左右	style="margin:値１ 値２;"
値が３つ	値１が上、値２が左右、値３が下	style="margin:値１ 値２ 値３;"
値が４つ	値１が上、値２が右、値３が下、値４が左	style="margin:値１ 値２ 値３ 値４;"

この中で、値を４つ入れるＨＴＭＬを覚えておけば迷いもなくなります。

時計回りに、上・右・下・左です。

<img src="画像が保存されている（ＵＲＬ）" align="画像を回り込みさせる方向" style="margin:値１ 値２ 値３ 値４；">

値は半角スペースでつないで、px（ピクセル）で入力します。


画像が左で文字が右の場合を使って、右に余白を作ってみます。

align="left" style="margin:0px 20px 0px 0px;"

ここでは、画像の右に20pxの余白をつくります。
上 右 下 左：0px 20px 0px 0px


ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ



画像と文字の間に余白ができました。

ぴったりと画像と文字がくっついているより、ちょっと余白が空いているほうが見やすいですね。



文字が画像に回り込むタイミングは、文字の行数が画像の高さ以上になったときです。

下の画像＆文字をみると、画像を小さくしたことで文字が回り込みが早くなっていますね。
↓
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ




画像に文字を回り込みさせたあとに、回り込みはここで終了というＨＴＭＬも忘れず入れましょう。

画像と文字の位置	ＨＴＭＬ
画像が左で文字が右	<br clear="left">
画像が右で文字が左	<br clear="right">
画像が左右で文字が真ん中	<br clear="all">

回り込み解除をしないと、そのあとの文章や画像の位置がぐちゃぐちゃになってしまいます。

allは、すべての回り込みを解除してくれるので<br clear="all">を覚えておくと便利です。



最後まで読んでいただき、ありがとうございます。

ブログの記事を書いていると、文字を横にズラズラ並べるより、縦に並べた方がスッキリして見やすくなることがあります。


箇条書きのが見やすいよな～と思うのがこれですね。
お馴染みのYahooのトップ画面です。
↓

出典:http://www.yahoo.co.jp/


これを横に並べてみると、

報道規制発言 幕引き狙う自民、ギリシャ議会 国民投票を承認、台湾爆発470人負傷 邦人2人も、紫式部像 パンフと実物大違い

見づらいしわかりづらいですよね。


ということで、ブログ記事の見やすさ・わかりやすさを追求してみたいと思います。


ＨＴＭＬタグで、箇条書きにする方法をまとめました。

ＨＴＭＬタグの箇条書き一覧

1. 箇条書き（番号なし）


2. 箇条書き（番号なし＋記号）


3. 箇条書き（番号あり）

箇条書き（番号なし）

<ul>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>

表示結果

• 項目１


• 項目２


• 項目３

箇条書き（番号なし）にするには、ulタグを使います。
ulは、Ｕｎｏｒｄｅｒｅｄ　List（アンオーダード　リスト）の略です。

番号の付かないリストという意味です。

<ul>～</ul>タグの中に、項目を記入する<li>～</li>タグを入れていきます。

上の例では、項目１～項目３になっていますが、それ以上の項目になるときは<li>～</li>タグを増やしていけばOKです。

liは、List　Item（リスト　アイテム）の略です。

箇条書き（番号なし＋記号）

<ul style="list-style-type:記号の種類">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>

記号の種類一覧

記号の種類	記号のスタイル
disc	黒丸
circle	白丸
square	黒四角
none	記号なし

記号のスタイルを黒丸にして箇条書きにしてみます。

<ul style="list-style-type:disc">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>

表示結果

• 項目１


• 項目２


• 項目３

黒丸の箇条書きが完成です。

この黒丸は、１の箇条書き（番号なし）のときと同じ黒丸です。

ということは、黒丸の箇条書きにするときは、<ul style="list-style-type:disc">と長々とＨＴＭＬタグを入力しないで<ul>だけで良いということですね。


別の箇条書き記号でやってみます。
白丸の場合

<ul style="list-style-type:circle">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>

表示結果

• 項目１


• 項目２


• 項目３

箇条書きの記号が白丸になりましたね。

箇条書き（番号あり）

<ul style="list-style-type:番号の種類">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>

番号の種類一覧

番号の種類	番号のスタイル
decimal	数字
decunal-leading-zero	桁を揃えた数字
lower-alpha，lower-latin	小文字のアルファベット
upper-alpha，upper-latin	大文字のアルファベット
cjk-ideographic	漢数字
hiragana	ひらがな
katakana	カタカナ
hiragana-iroha	いろは順（ひらがな表示）
katanaka-iroha	いろは順（カタカナ表示）

番号のスタイルを数字にして箇条書きにしてみます。

<ul style="list-style-type:decimal">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>

表示結果

• 項目１


• 項目２


• 項目３

番号のスタイルを数字にするときは、<ul style="list-style-type:decimal">ではなくて、もっと簡単なＨＴＭＬタグがあります。

<ol>タグです。

olは、Oｒｄｅｒｅｄ　List（オーダード　リスト）の略です。


<ul>～</ul>ではなくて<ol>～</ol>を使います。

箇条書きを数字で表示するときは、<ol>タグを使います。

<ol>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ol>

表示結果

1. 項目１


2. 項目２


3. 項目３

このように、ＨＴＭＬタグを使っての箇条書きは、記号・数字などいろいろな表示方法があります。

はじめにもお話ししましたが、記事の箇条書きには、見やすく・わかりやすくするという効果があります。

これは、読んでくれる方のことを考えてのことです。

さらに、箇条書きにするメリットがあります。

それは、検索エンジンに対しても効果があるということです。


箇条書きのＨＴＭＬタグは、リスト構造になっているので、検索エンジンが箇条書きのＨＴＭＬタグを見つけて、「おっ、箇条書きがあるな、何か大切なキーワードが書かれているんだな」と認識してくれるのです。




伝えたいことなど要点を書くときは、箇条書きにした方が良いということですね。

そうすることで、検索エンジンも「正しいＨＴＭＬ構文を使っているな」と評価してくれます。
ちょっとした、ＳＥＯ対策にもなるということです。


だからって、必要以上に箇条書きのＨＴＭＬタグを使わないようにしましょう。

ＨＴＭＬを使って箇条書きまとめ

1. 記号を使う場合は、<ul style="list-style-type:記号の種類">を使う
※黒丸のときは<ul>～</ul>でOK


2. 番号を使う場合は、<ul style="list-style-type:番号の種類">を使う
※数字のときは<ol>～</ol>を使う

最後まで読んでいただき、ありがとうございます。

アフィリエイトをはじめるためには、道具の環境が必要です。

インターネットに繋がっていること、パソコンがあること


たぶん、アフィリエイトをはじめようと決めたあなたはインターネットもパソコンも準備できているはずですね。


その次に、フリーメールやブログの準備をします。

慣れるまで、ちょっとストレスたまるけど、アフィリエイトをはじめるためには必要な環境です。

⇒　アフィリエイトで絶対必要なツール

ここまでの準備で、アフィリエイトをはじめる環境はそろいます。


ここら辺で、何もしなくてもお金が入ってくる、もしくは、何もしなくてもお金が入ってくる手法を探すことをやってしまうんですよね。


コピペするだけで、日給○○円みたいな、教材を買って勉強したけど、お金が稼げない。
そして、アフィリエイト教材サーフィン（次から次へと教材を買いまくる）をはじめることになります。


何で、こんなことになってしまうのか？

アフィリエイトをはじめるために、すごく大切な準備が抜けてしまったからです。

それは、ブログで何をするか？ということです。

⇒　アフィリエイト始めるなら絶対必要な３つの心得


アフィリエイトをはじめるための３つの心得が準備できないと、「お金にだけ執着してしまい」、その結果・・・

やっぱり、「アフィリエイトは稼げないじゃないか」とやめてしまうんです。



アフィリエイトをはじめるために道具を用意するのは必要です。
勉強するのに、ペンとノート、パソコンなどを用意するのと同じです。



そして、アフィリエイトをはじめる手順で一番重要なのは、
どんなブログを作るのか！？
です。


ブログのテーマが決まれば、あとはそのテーマに関係する記事を書くだけです（記事を書くだけといっても、慣れないとなかなか大変なんですが・・・）。


ブログ記事を書くことに、目標を決めると作業もやりやすくなります。




☆ブログを作る目標を決める

1. 日常の生活で、ブログテーマに関係した記事ネタを考える（仕事中にふと思ったこともノートやスマホのメモなどに書き出す）


2. 思いついたネタについて調べて、記事を書いてブログを更新する


3. １と２を繰返す（大切なのはブログテーマに関係した情報を伝えるということです）


4. 記事が１０記事くらいになったら、ＡＳＰの登録をする


5. １ヶ月くらいしたら、記事もけっこう増えてくると思います。最初に書いた記事たちを読み返して、わかりやすい文章かどうか！？を自己チェックする

ふと思いついたことって、けっこう大切だったりします。
仕事中に「あっ、こんな記事どうだろう」と思って、家に帰ったら考えようとメモを取らないでいると、忘れてしまうことがあります。

メモに書かないことはすごくもったいないことなので、くだらないことだと思ってでも、必ずメモに残すようにしましょう。

メモに残したことを、あとで読み返して、記事にするしないを決めるだけでも目標になっていきます。

記事にするリストが１０個あれば、それが目標になりますからね。

１０個記事を書けば、目標達成です。


目標がないと、だらだらと何、書こうかな！？今日は書かなくいいや・・・となって、ブログ作成も進みません。


はじめてすぐに、お金の目標をたてるのはやめた方が良いです。
１ヶ月で１０万円とか・・・

まずは、今あなたができること（記事を書くということ）を目標にしましょう。

アフィリエイトで大切なはじめる手順

１、あなたの作りたいブログテーマを決める

２、ブログを作る目標を決める

最後まで読んでいただき、ありがとうございます。

アフィリエイトをはじめて、行き詰ってしまったところというと、何を書いたらいいんだろう！？ということでした。



ブログは開設したけれど、ブログのテーマの決め方、さらにブログ記事の書き方がわからないので、記事のないまっさらなブログ状態が続いたこともありました。



いろいろな商材は、アフィリエイトをはじめたばかりの初心者は、まずは日記ブログからはじめましょうと教えてくれます。


私は、この日記を書くということをしないで、いきなりアフィリエイトブログをはじめてしまったので、今思うと遠回りをしたなと思っています。


日記というと、「今日は天気が良いです。ランチはカツどんを食べました。」的なものを連想していました。

文章を書きなれていない私にとっては、この「今日こんなことがありました日記」でも毎日書くべきだったなと・・・


思ったことを文章にすることができないと、ブログ記事を書くこともできないですからね。



そして、日記を書くということで思ったのが、自分自身のことを見つめるというすごく大事な作業だったんだと。

• 自分は、何を知っているのか？


• 自分は、何を経験したのか？


• 自分は、何を教えることができるのか？


• 自分は、こんな考えを持っているんだ


• 自分は、こんなことをやってみたいと思っている

自分自身がわかっていないと、ブログテーマも思いつかないものなんですよね。



そこで、ブログテーマの決め方に悩んだときに使う３つの方法です。





１つ目は、商品を紹介するです。
商品についての説明や感想などを記事すれば、けっこう書けてしまうものです。

実際に、自分で商品を買って使えば、もっとリアルな記事も書けます。

自分で商品を買ったときにも、報酬がもらえるＡＳＰもあるので、使わない手はないですよね。

自分で商品を買って、報酬をもらう方法はこちらの記事を参考にしてみてください。

⇒　a8netの便利な機能、セルフバック利用方法を実際に使っています


さらに、商品を紹介するときのキーワード選定は、こちらの無料レポートが良いです。
えっ、こんなので良いの？なるほど・・・と、いろんな発見がありますよ。

＞＞キーワード無双





２つ目は、自分自身が知っていることや経験したことを基に情報提供するです。
これは、ある程度勉強や経験を積まないと難しいかもしれません。

ある商材では、「まず本を３冊読みましょう」と教えてくれました。

その道のプロになりましょうということですね。

私は、自分自身のたな卸しをしないまま、この商材を勉強して、見事挫折しました。

今、この教材を読むと「なるほど、その通りだ」といろんな気づきがあります。


自分のやりたいことがわかった方には、心強い教材になるでしょう。

＞＞１商品で942万円稼ぎ出す仕組み




３つ目は、今話題になっていることをテーマにするです。
これは、トレンドアフィリエイトといわれてます。

トレンドといっても、「今日、芸能人の誰々が誰々と手をつないで歩いていた」見たいな記事ではありません。
このような方法もありますが、私はやりませんでした（記事を大量に書かなければならないから・・・）。


テレビ番組を基に、未来の話題をテーマにするという今までにない方法です。

「今話題になっていることを今記事にしたらトレンドじゃなくなってしまう」ことも考えられますからね。


未来の話題をテーマにすることで、時間をかけて記事を書くこともできますからね。

＞＞毎月１０万円を稼ぐ為のトレンドブログアフィリエイト




自分自身と向き合って、この３つの方法のどれか１つを使えば、ブログテーマの決め方や記事を書くことに悩むこともなくなるでしょう。

ブログテーマの決め方、３つの方法

１、商品を紹介する

２、自分自身が知っていることや経験したことを基に情報提供する

３、今話題になっていることをテーマにする

最後まで読んでいただき、ありがとうございます。

ブログの文字サイズを決めるときに、px・emという記号が出てきます。

px・emをどのように使い分ければ良いのか？

px・emについて、調べてみました。



☆ pxとは

コンピュータで画像を表示するときの色情報を表す最も小さな単位のことをいいます。
パソコン、スマホなどの画面には小さな四角がいっぱい敷き詰められています。
画面の四角１マスを１pxといいます。

☆ emとは

文字の高さを基準にしている単位のことをいいます。
１文字分の単位のことをいいます。

emの由来は、大文字の『M』から来てるようです。
大文字の『M』はタテとヨコに均等にたくさんの空間を占めるということで、文字サイズの基準に使われてきたようです。

今は、emを文字の高さと同じ幅という使い方をしています。

☆ pxとemの変換について

１em＝１６px

pxとemの変換について調べるなら、このサイトが便利です。
⇒ http://pxtoem.com/

ブログでは、あらかじめCSS（スタイルシート）というところで、基準になる文字サイズを決めています。

ほとんどは、pxで設定してあるようです。

pxは、絶対単位といわれていて、どんな環境で見ても文字サイズが変わらないんです。

ブログの基準になる文字サイズが１６pxに設定されていれば、ブログで文字サイズを決めるときに、１emを選べば、１６pxになるということです。




ブログの基準になる文字サイズ

⇒ style="font-size:16px;"

px・em・100%のＨＴＭＬタグはそれぞれ下の通りです。

<span style=font-size:16px">１６px・１em・１００%はすべて同じ文字サイズ！</span>


<span style=font-size:1em">１６px・１em・１００%はすべて同じ文字サイズ！</span>


<span style=font-size:100%">１６px・１em・１００%はすべて同じ文字サイズ！</span>

表示結果

１６px・１em・１００%はすべて同じ文字サイズ！

１６px・１em・１００%はすべて同じ文字サイズ！

１６px・１em・１００%はすべて同じ文字サイズ！

px・em・100%、すべて同じ文字サイズになっていますね。




文字サイズや余白などの設定にはemを使ったほうがわかりやすいですね。



１emは一文字ですからね。





最後まで読んでいただき、ありがとうございます。

a8netにセルフバックというサービスがあります。


セルフバックは、a8netで扱っている商品を買うことができて、さらに報酬がもらえるという、とてもありがたい機能です。


物販（商品）をアフィリエイトするときに、本当に役立ちます。

やっぱり、商品を自分で使ってみないといろいろなことを実感することができませんからね。


a8netには、良い商品がたくさんありますから、その商品を普通より安く買うことができれば、それだけでもメリットがあります。




セルフバックの方法は、a8netに登録すれば、すぐに使うことができます。

＞＞a8net無料会員登録はこちら

a8netでセルフバックする方法

今回、ちょっと気になっているシャンプーがあるので、そのシャンプーをセルフバックで買ってみます。


右下の『セルフバック』をクリックします。







下のような検索窓が出てくるので、検索はこちらからと表示しているところに商品名やキーワードなどを入力します。




検索窓の右側にある『条件を指定』をクリックすると、さらに詳しく検索することができます。





私が気になっているシャンプーは「ハーブガーデン」という名前なので、検索窓に「ハーブガーデン」と入力して、検索をクリックします。




「ハーブガーデン」シャンプーが、出てきました。
『詳細を見る』をクリックしてみます。




実際に、「ハーブガーデン」シャンプーを使ってみて、紹介もしようと思っているので、すでに提携しています。

提携していると、このマークが出ます。
↓


『セルフバックを行う』をクリックします。




セルフバックの準備はこれで終わりました。

このあと、販売ページで商品を購入すれば、報酬がもらえます。


では、さっそく報酬を見てみましょう。

「セルフバック」をクリックします。






おっ、報酬が発生してますね。

今回、購入した「ハーブガーデン」シャンプー＆コンディショナーは、４，３２０円（税込）でした。

報酬が、２，９００円＋232円（消費税）＝３，１３２円です。

４，３２０円の商品を１，１８８円で買ったことになるので、大変お得な買物をしたことになります。


※報酬が表示されるまで、５分から１０分かかります


このように、a8netのセルフバックは、すごく便利な機能なのです。

a8netのセルフバックまとめ

• 人気の商品を安く買うことができる（報酬がもらえる）


• 商品を実際に使ってみての感想などを、記事にすることができる


• 自分が体験していることなので、商品をうまく説明することができる


• あなたのブログで商品の紹介をして、報酬をもらうことができる

a8netに登録すれば、商品が安く買えるので、お財布にも嬉しいですね。

＞＞a8net無料会員登録はこちら






最後まで読んでいただき、ありがとうございます。

ブログで表を作るときのＨＴＭＬタグがなかなか理解することができなかったので、あらためてまとめてみました。


ブログで表を作るためには、下のようなＴａｂｌｅタグを使います。

<table>ここに表の行列になるＨＴＭＬタグを入れる</table>

この<table>～</table>の中に行列を表示するＨＴＭＬタグを入れていきます。


行を表示するには下のように、trタグを使います。

<tr>ここに文字を書く</tr>

trは、Ｔａｂｌｅ　Ｒｏｗの略で、Ｔａｂｌｅ（表）の横方向のルールを決める役割があります。


Table（表）を作る場合、<tr>～</tr>の間に文字を書いただけでは、ちょっと足りません。

trは、Ｔａｂｌｅ（表）の行（横）方向のルールを定義しているだけなので、文字を入れるセル（箱）を作ってあげる必要があります。


セル（箱）を作るには下のように、tdタグを使います。

<td>ここに文字を書く</td>

tdは、Ｔａｂｌｅ　Ｄａｔａの略で、セルの中にある文字が｢データ｣となるようなセル（箱）を作ります。


Ｔａｂｌｅ（表）の基本（１行１列）となるＨＴＭＬタグは、下の通りです。

<table>
<tr>
<td>ここに文字を書く</td>
</tr>
</table>

１行１列のＴａｂｌｅ（表）を作ってみます。

ＨＴＭＬタグは、下の通りです。

<table> <tr> <td>１行目の１列目</td> </tr> </table>

結果はこんな感じです。
↓

１行目の１列目

文字は表示されましたが、線がありません。


Tableに線を引くには、別にＨＴＭＬタグを使う必要があります。

なんだか、こんがらかってきた・・・




Tableに線を引くHTMLタグは、borderを使います。

Tableタグの後ろに、半角スペースを入れてborderと入力します。

<table border="ここに数字を入れる">

<table border>は、<table border="1">を省略しています。

border="ここに数字を入れる"のここに数字を入れるの箇所に数字を入れることで、線の太さを選ぶことができます。

数字だけの入力ですが、単位はpxを使っています。

pxは、コンピュータで画像を表示するときに、色の情報を表す最も小さい単位です。




線の太さ「1」のTableタグは下の通りです。
↓

<table border="1">
<tr>
<td>１行目の１列目</td>
</tr>
</table>

表示結果は、こんな感じです。
↓

１行目の１列目

表らしくなってきましたね。



このborder=""に入れる数字が大きくなるにつれて、表の線も太くなります。





Tableタグの仕組みを図でまとめてみました。




行は<tr>で増やして、列は<td>で増やしていきます。


５行３列のTableのＨＴＭＬタグは、下の通りです。

<table border="1">
<tr>
<td>１行目の１列目</td>
<td>１行目の２列目</td>
<td>１行目の３列目</td>
</tr>
<tr>
<td>２行目の１列目</td>
<td>２行目の２列目</td>
<td>２行目の３列目</td>
</tr>
<tr>
<td>３行目の１列目</td>
<td>３行目の２列目</td>
<td>３行目の３列目</td>
</tr>
<tr>
<td>４行目の１列目</td>
<td>４行目の２列目</td>
<td>４行目の３列目</td>
</tr>
<tr>
<td>５行目の１列目</td>
<td>５行目の２列目</td>
<td>５行目の３列目</td>
</tr>
</table>

表示結果は、こんな感じ。
↓

１行目の１列目	１行目の２列目	１行目の３列目
２行目の１列目	２行目の２列目	２行目の３列目
３行目の１列目	３行目の２列目	３行目の３列目
４行目の１列目	４行目の２列目	４行目の３列目
５行目の１列目	５行目の２列目	５行目の３列目

table（表）にするためのＨＴＭＬタグの仕組みがわかれば、表を作ることも簡単ですね。




ブログの記事を書くことに集中できます＾＾




最後まで読んでいただき、ありがとうございます。

無料ブログの文字サイズ変更は簡単にできます。

大・中・小の３種類を簡単に選択できるようになっています。

文字サイズ変更のＨＴＭＬコードは、font-sizeを使います。



ＦＣ２ブログでは、このアイコンをクリックすれば簡単に文字サイズ変更ができます。
↓




実際の文字サイズは、下の通りです。
↓
大
中
小



この３種類で間に合ってしまうのですが、ちょっと慣れてくると記事の文字サイズを所々変えてみたいと思うことがあります。

無料ブログの文字サイズ変更ＨＴＭＬをちょっと変えるだけで、簡単に文字サイズを自由に好きな大きさに変更することができるようになります。





☆文字サイズ変更するためのＨＴＭＬ

<span style="font-size:ここに文字サイズの数値を入れる">ここに文字を書く</span>

ＦＣ２ブログの場合、上のＨＴＭＬコードの『ここに文字サイズの数値を入れる』に、次のような文字サイズ指定コートを入れます。

大の場合　⇒　x-large
中の場合　⇒　large
小の場合　⇒　x-small


実際に、入れてみましょう。



大のx-large

ＨＴＭＬコード
↓
<span style="font-size:x-large">x-largeを入れるとこのサイズになります</span>

表示結果
↓
x-largeを入れるとこのサイズになります




中のlarge

ＨＴＭＬコード
↓
<span style="font-size:large">largeを入れるとこのサイズになります</span>

表示結果
↓
largeを入れるとこのサイズになります




小のx-small

ＨＴＭＬコード
↓
<span style="font-size:x-small">x-smallを入れるとこのサイズになります</span>

表示結果
↓
x-smallを入れるとこのサイズになります




ｓｉｚｅ:の後ろを変えるだけで、簡単に文字サイズを変更することができますね。



ＦＣ２ブログでは、x-large・large・x-smallを使っていますが、mediumとかsmallを入れるとまた違った文字サイズになります。




mediumを入れたときの文字サイズ

ＨＴＭＬコード
↓
<span style="font-size:medium">mediumを入れるとこのサイズになります</span>

表示結果
↓
mediumを入れるとこのサイズになります




smallを入れたときの文字サイズ

ＨＴＭＬコード
↓
<span style="font-size:small">smallを入れるとこのサイズになります</span>

表示結果
↓
smallを入れるとこのサイズになります




文字サイズの大きい順に並べると、

○　x-large
⇒　ＦＣ２ブログでは『大』

○　large
⇒　ＦＣ２ブログでは『中』

○　medium

○　small

○　x-small
⇒　ＦＣ２ブログでは『小』


になります。


下に、文字サイズ大きい順にＨＴＭＬコードを表示してみました。
ＨＴＭＬコードを、コピーして『ここに文字を書く』の箇所を変えれば、使えます。


＜x-large＞
<span style="font-size:x-large">ここに文字を書く</span>

＜large＞
<span style="font-size:large">ここに文字を書く</span>

＜medium＞
<span style="font-size:medium">ここに文字を書く</span>

＜small＞
<span style="font-size:small">ここに文字を書く</span>

＜x-small＞
<span style="font-size:x-small">ここに文字を書く</span>





コピーすれば、large、medium、smallと横文字を覚える必要もないのですが、コピーしなくても良い方法があります。


それは、文字サイズの数値に『○○％』と入力する方法です。



普通に入力する文字サイズは１００％です。


ということは、１５０％にすると、

ＨＴＭＬコード
↓
<span style="font-size:150%">１５０％の文字サイズはこれです</span>

表示結果
↓
１５０％の文字サイズはこれです


パーセント表示にすれば、文字サイズを大きくしたければ、数字を大きくすれば良いだけなので、横文字を覚える必要がありません。



文字サイズの変更は、これで自由自在にできるようになりました。


上のＨＴＭＬコードをコピーして活用してみてくださいね。




最後まで読んでいただき、ありがとうございます。

ほとんどの場合、ＡＳＰからの成果報酬は振込手数料が差引かれて入金されます。

a8netも振込するときに、振込手数料を差し引いています。


この振込手数料も積もれば大きな金額になってきます。

できれば、少ないほうが良いですよね。
そうすれば、成果報酬が増えることになりますからね。


a8netの振込手数料を攻略していきましょう。



a8netの振込手数料について

a8netの取扱銀行は、三井住友銀行の渋谷駅前支店です。
ということは、成果報酬の入金口座を三井住友銀行の渋谷駅前支店にするのが、一番振込手数料が安いはず。


口座別、成果報酬入金時の振込手数料について

○三井住友銀行、渋谷駅前支店の場合

３０，０００円未満　⇒　１０８円
３０，０００円以上　⇒　２１６円

○三井住友銀行、渋谷駅前支店以外の場合

３０，０００円未満　⇒　２１６円
３０，０００円以上　⇒　４３２円

○三井住友銀行以外の場合

３０，０００円未満　⇒　５４０円
３０，０００円以上　⇒　７５６円

○ゆうちょ銀行の場合

一律　⇒　３０円

なんと、a8netの取扱銀行の三井住友銀行、渋谷駅前支店よりもゆうちょ銀行口座のほうが圧倒的に振込手数料が安いんです。


ゆうちょ銀行の振込み手数料が安い理由は、ゆうちょ銀行に大口専用の自動払出預入という送金方法があるからだそうです。


ゆうちょ銀行は、全国にＡＴＭもあるのでa8net用に作っておいても良いかもしれませんね。



＞＞a8net無料会員登録はこちら






成果報酬の集計期間は？

a8netの成果報酬の集計期間は、毎月１日から末日です。




成果報酬はいつ支払われるのか？

a8netの成果報酬の支払日は、翌々月の１５日です。
１５日が土日祝日のときは、次の日になります。




成果報酬の支払方式は？

a8netの支払方式は３種類あります。

５，０００円支払い方式、１，０００円支払い方式、キャリーオーバー方式（繰越方式）



○５，０００円支払方式の場合

毎月末日の支払対象の成果報酬残高が５，０００円未満のときは、次月以降に支払を繰越します。
毎月末日の支払対象の成果報酬残高が５，０００円以上のときは、翌月の１５日に指定口座に入金されます。

○１，０００円支払方式の場合

毎月末日の支払対象の成果報酬残高が１，０００円未満のときは、次月以降に支払を繰越します。

毎月末日の支払対象の成果報酬残高が１，０００円以上のときは、翌月の１５日に指定口座に入金されます。

○キャリーオーバー方式（繰越方式）の場合

毎月末日の支払対象の成果報酬残高の多い少ないに関係なく、自動的に次月以降に支払を繰越します。

キャリーオーバーしている場合に、そろそろ口座に入金してもらいたいと思ったときには、その月末日の支払対象の成果報酬残高が１，０００円以上あることと、翌月支払申込をしていることの２つの条件を満たしているときに、翌月の１５日に指定口座に入金されます。

指定口座に振込されると、翌月支払申込は解除されるので、再び、キャリーオーバー方式（繰越方式）が復活して成果報酬の繰越が続きます。

まとめ

• a8netの振込手数料は、ゆうちょ銀行が一番


• a8netの成果報酬集計期間は、毎月１日から末日


• a8netの成果報酬支払日は、翌々月の１５日


• a8netの支払い方式は、５，０００円支払方式・１，０００円支払方式・キャリーオーバー方式（繰越方式）の３種類から選べる

＞＞a8net無料会員登録はこちら





最後まで読んでいただき、ありがとうございます。

無料で使えるブログにも、いろんな機能がついているので記事を書くとき文字をアレンジすることが簡単にできます。

でも、文字に背景色をつける機能がないブログもたくさんあります。


文字の背景色を、ちょっと変えるだけでもブログ記事にメリハリが出て強調する文字などがわかりやすくなり見やすくなります。



文字の背景色を検索窓で調べると、スタイルシートを使うのが良いということにたどり着くんですが、ブログを始めたばかりだと、スタイルシートについての勉強に時間を取られてしまって、肝心の記事を書く時間がなくなることになってしまいますので、ＨＴＭＬコードをコピーして簡単に文字背景色を変更する方法を使ったほうが良いです。



私が、そうだったので・・・




では、さっそくＨＴＭＬコードを使って文字の背景色を変更してみましょう。



☆文字の背景色を変える

<span style="background-color:#カラーコード;">ここに文字を書く</span>

上のＨＴＭＬコードをコピーして、#カラーコードとここに文字を書くのところを変えます。



spanタグの後ろに、styleを使ってbackground-color（背景色）を指定します。


ＨＴＭＬコードで指定すると、
span style="background-color:#カラーコード"

記号を説明すると、
＜span （半角スペース）style=（半角イコール）"（ダブルクォーテーション）background-color:（コロン）#（シャープ）カラーコード;（セミコロン）"（ダブルクォーテーション）＞


カラーコードはこちらを参考にしてください。
⇒　htmlのカラーコードを検索して確認、すぐに使いたい色に変換



これで、文字の背景色をいろいろ変えることができるようになりました。



さらに、もうちょっと記事中の文字アレンジをしてみましょう。

文字の背景色と文字の色を変えたいときもあると思います。

そんなときは、ブログの機能にある文字の色を変更したあとで、その文字変更のＨＴＭＬコードに背景色のＨＴＭＬコードを付け加えるだけでOKです。




☆文字の背景色を変えて、さらに文字色を変える

<span style="color:#カラーコード;background-color:#カラーコード;">ここに文字を書く</span>

ここでも、上のＨＴＭＬコードをコピーして、#カラーコードとここに文字を書くのところを変えます。



ちょっと前ならば、fontタグを使っていたのですが、今は廃止されています。
ｆｏｎｔタグは使わないようにしましょう。




spanは文章のひとかたまりを表すＨＴＭＬコードです。

<span>ここに文章を書く</span>

実際に、文字背景と文字色を変えてみましょう。

文章
⇒　『文字色と文字背景色をいっぺんに変更』

文字色
⇒　『赤』
※赤のカラーコードは、「#FF0000」

文字背景
⇒　『薄い緑』
※薄い緑のカラーコードは、「#90EE90」

<span style="color:#FF0000;background-color:#90EE90;">文字色と文字背景色をいっぺんに変更</span>

このように表示されます。
↓
文字色と文字背景色をいっぺんに変更




いかがでしたか？

ちょっと、ややこしいですが、上の四角で囲ったコードをそのままコピーして#カラーコードとここに文字を書くのところを変えればすぐに文字の背景色と文字の色をアレンジすることができます。



この２つのコードを、メモ帳や付箋などに保存しておいて、すぐに使えるようにしておきましょう。

<span style="background-color:#カラーコード;">ここに文字を書く</span>

<span style="color:#カラーコード;background-color:#カラーコード;">ここに文字を書く</span>

最後まで読んでいただき、ありがとうございます。

Ａ８ｎｅｔは、日本で一番大きなＡＳＰで常に５，０００件にも及ぶアフィリエイトプログラムを扱っています。

それもそのはず、Ａ８ｎｅｔに登録している広告主は累計で１０，０００件を超えているんです。



有名なものから、えっこんなものもあるのというものまでバラエティーにとんだアフィリエイトプログラムが揃っています。



Ａ８ｎｅｔのカテゴリーはこんな感じです。

↓↓↓




これだけあれば、あなたのブログにぴったりな商品やサービスも絶対に見つかります。


Ａ８ｎｅｔに登録して、アフィリエイトプログラムを探して見ましょう。

■Ａ８ｎｅｔのセルフバックはPC＆スマートフォンに対応！

　◇ 自分で購入・申込みをするだけで報酬をゲットできます
　◇ ほしい商品も報酬も、両方獲得できてお得なサービスです
　◇ 申込みするだけ！手間な作業はありません
　◇ 自分のサイトを持っていなくても大丈夫です
　◇ A8.netに入会すれば、すぐに利用できます
　◇ もちろん会員登録は無料。その後も費用はかかりません

＞＞無料会員登録はこちら



Ａ８ｎｅｔのすごいところは、アフィリエイトプログラムがたくさんあるというだけではありません。

Ａ８ｎｅｔに登録すれば、ブログも作れるんです。


アフィリエイトを始めたいんだけど、どうすればいいの？という方にはピッタリです。

ブログ開設とＡＳＰ登録が一度にできてしまうからです。


無料ブログでアフィリエイトを始めたいけど、どのブログがいいの？と悩んでいる方はＡ８ｎｅｔのファンブログを使ってみてはいかがでしょうか。

＞＞無料会員登録はこちら





最後まで読んでいただき、ありがとうございます。

アフィリエイトの一番の魅力は、お金をかけなくても準備ができてしまうことです。
アフィリエイトを始めるなら、まずツールの準備をします。

勉強を始めるのに、ノートとシャープペンと消しゴム・・・を揃えるのと同じですね。

すべて、インターネットとパソコンがあればそれ以外のお金を使うことはありません。

アフィリエイトで必要なツールについてはこちらの記事を参考にしてください。
⇒アフィリエイトで絶対必要なツール


アフィリエイトを始めるには、ツールはなくてはならないものです。

でも意外と、ツールを準備すれば、お金がザクザク入ってくると勘違いしてしまうことがあります。
ツールの準備も、慣れないと結構面倒で時間がかかってしまいます。


こんなにたいへんな思いをしているのに、何で稼ぐことができないんだろう！？



こんな風に思うようになって、ある行動をしてしまいます。

簡単に稼ぐ方法はないのかな！？


ブログを始めたけど、稼げない。

ツイッターでツイートするだけで○○万円みたいな商材を見つけて即購入！

でも、稼げない。


こうならないための、アフィリエイト始めるなら絶対必要な３つの心得を、ぜひ実践してくださいね。



アフィリエイト始めるなら絶対必要な３つの心得


その１、ブログのテーマを決める

ブログのテーマを決めることは、一番重要なことかもしれません。

なぜならば、ブログのテーマを決めることで、そのテーマに関心のある読者が集まりやすくなり、商品も売れやすくなるからです。

ブログのテーマが「健康」なのに、突然、「車の査定が無料です」いかがですか？と紹介されても、「えっ？」と思われてしまうでしょう。
まれに、興味を持ってくれる読者もいるかもしれませんが・・・

自然な流れは、やっぱりテーマが「健康」だったら、「この商品を使ったら健康になりますよ」のがしっくりいきます。
読者も、興味を持ってくれるでしょう。

そして、テーマはより絞った方が効果的です。

「健康」だと、テーマが広すぎて、「どんな記事を書けば良いのか？」と悩んでしまうし、読者も集まりづらくなります。


例えば、テーマを「健康サンダル」にすれば、健康サンダルについてブログ記事を書いていけばいいし、読者も集まりやすくなります。


その２、ブログを楽しむ

ブログは、読者のためになる情報を発信して、その情報に関連のある商品を読者に紹介して、読者に喜びを提供することを目的としています。


でも、何よりも、あなた自身がブログをやっていて楽しくなければ意味がありません。


このような意味でも、「その１、ブログのテーマを決める」ことは大切になってきます。

商品を紹介しやすくするためにテーマを決めること、そして、あなたがそのテーマについてのブログを楽しくやれること


その３、ブログを続ける

その１、ブログのテーマを決める
その２、ブログを楽しむ
これらが、できるようになって、ブログを続けることができるのだと思います。

ブログを続けるということは、大切です！

やめたら、そこでおしまいだからです。

アフィリエイトで成功している人は、全体の５％以下とか良く聞きますが、継続することのできる人のことなのかもしれません。


アフィリエイトは、正直、楽ではありません。

でも、「楽しくやること」は絶対にできるはずです。



ブログを楽しんでやることができれば、続けることもできます。



ブログを始めてすぐだと、テーマが見つからないので、「まずは、日記を書きましょう」などと、いろいろな商材で書かれています。

これは、記事を書くことに慣れるためにすることです。


テーマを見つけることは難しいことかもしれません。



あなた自身と向き合って、あなたがブログを楽しみ、読者にとって有益な情報を提供できるテーマを見つけましょう。


最後まで読んでいただき、ありがとうございます。