脱サラしたいサラリーマンがアフィリエイトを実践、気ままにネットビジネス

無料レポート

  • hamigaki00.png
  • wasa_san.png
  • daipon000.png

記事一覧

無料ブログ困ったときのHTML
ブログ記事に画像を貼り付けると、説明しやすくなって効果的になります。ということで、ブログに貼り付けた画像に文字を回り込みさせるHTMLを覚えておくと、とても便利です。特に無料ブログは、画像に文字を回り込みさせる機能がついていないこともありますので、役に立ちます。ブログに画像を貼り付けると、画像のHTMLは下のようになっています。↓<img src="画像が保存されている場所(URL)">この画像のHTM...

記事を読む

無料ブログ困ったときのHTML
ブログの記事を書いていると、文字を横にズラズラ並べるより、縦に並べた方がスッキリして見やすくなることがあります。箇条書きのが見やすいよな~と思うのがこれですね。お馴染みのYahooのトップ画面です。↓出典:http://www.yahoo.co.jp/これを横に並べてみると、報道規制発言 幕引き狙う自民、ギリシャ議会 国民投票を承認、台湾爆発470人負傷 邦人2人も、紫式部像 パンフと実物大違い見づらいしわかりづらいですよね。というこ...

記事を読む

no-image

アフィリエイト
アフィリエイトをはじめるためには、道具の環境が必要です。インターネットに繋がっていること、パソコンがあることたぶん、アフィリエイトをはじめようと決めたあなたはインターネットもパソコンも準備できているはずですね。その次に、フリーメールやブログの準備をします。慣れるまで、ちょっとストレスたまるけど、アフィリエイトをはじめるためには必要な環境です。⇒ アフィリエイトで絶対必要なツールここまでの準備で、ア...

記事を読む

no-image

アフィリエイト
アフィリエイトをはじめて、行き詰ってしまったところというと、何を書いたらいいんだろう!?ということでした。ブログは開設したけれど、ブログのテーマの決め方、さらにブログ記事の書き方がわからないので、記事のないまっさらなブログ状態が続いたこともありました。いろいろな商材は、アフィリエイトをはじめたばかりの初心者は、まずは日記ブログからはじめましょうと教えてくれます。私は、この日記を書くということをしな...

記事を読む

アフィリエイト用語集
ブログの文字サイズを決めるときに、px・emという記号が出てきます。px・emをどのように使い分ければ良いのか?px・emについて、調べてみました。☆ pxとはコンピュータで画像を表示するときの色情報を表す最も小さな単位のことをいいます。パソコン、スマホなどの画面には小さな四角がいっぱい敷き詰められています。画面の四角1マスを1pxといいます。☆ emとは文字の高さを基準にしている単位のことをいいます。1文字分の単位の...

記事を読む

ブログに貼った画像に文字を回り込みさせるHTML

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

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


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


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

<img src="画像が保存されている場所(URL)">



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

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

画像のHTMLと配置を指定するalignを組合わせてみます。

<img src="画像が保存されている(URL)" align="画像を回り込みさせる方向">


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

画像の位置入力する値HTML
right<img src="画像が保存されている(URL)" align="right">
left<img src="画像が保存されている(URL)" align="left">





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

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





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

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



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

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

marginです。

ここでは、marginを無料ブログでも簡単に使える方法を一覧にしました。
余白サイズ(値)余白が入る場所HTML
値が1つ上下左右style="margin:値1;"
値が2つ値1が上下、値2が左右style="margin:値1 値2;"
値が3つ値1が上、値2が左右、値3が下style="margin:値1 値2 値3;"
値が4つ値1が上、値2が右、値3が下、値4が左style="margin:値1 値2 値3 値4;"


この中で、値を4つ入れるHTMLを覚えておけば迷いもなくなります。

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

<img src="画像が保存されている(URL)" align="画像を回り込みさせる方向" style="margin:値1 値2 値3 値4;">


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


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

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

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


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



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

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



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

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

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




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

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




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

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



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





HTMLを使って箇条書き、記号・数字を表示する方法

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


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

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


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

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

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


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


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


HTMLタグの箇条書き一覧


  1. 箇条書き(番号なし)

  2. 箇条書き(番号なし+記号)

  3. 箇条書き(番号あり)




箇条書き(番号なし)


<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>


表示結果

  • 項目1

  • 項目2

  • 項目3




箇条書き(番号なし)にするには、ulタグを使います。
ulは、Unordered List(アンオーダード リスト)の略です。

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

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

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

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





箇条書き(番号なし+記号)


<ul style="list-style-type:記号の種類">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>


記号の種類一覧

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



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

<ul style="list-style-type:disc">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>


表示結果

  • 項目1

  • 項目2

  • 項目3



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

この黒丸は、1の箇条書き(番号なし)のときと同じ黒丸です。

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


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

<ul style="list-style-type:circle">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>



表示結果

  • 項目1

  • 項目2

  • 項目3



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




箇条書き(番号あり)

<ul style="list-style-type:番号の種類">
<li>項目1</li>
<li>項目2</li>
<li>項目3</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>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>



表示結果

  • 項目1

  • 項目2

  • 項目3



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

<ol>タグです。

olは、Ordered List(オーダード リスト)の略です。


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

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

<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>


表示結果

  1. 項目1

  2. 項目2

  3. 項目3





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

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

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

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

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


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




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

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


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

HTMLを使って箇条書きまとめ
  1. 記号を使う場合は、<ul style="list-style-type:記号の種類">を使う
    • ※黒丸のときは<ul>~</ul>でOK

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


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



アフィリエイト初心者がやりたがらない、大切なはじめる手順

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

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


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


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

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

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

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


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


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


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

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

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

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


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

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



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



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


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


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




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

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

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

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

  4. 記事が10記事くらいになったら、ASPの登録をする

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







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

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

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

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

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


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


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

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


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

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

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




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



ブログテーマの決め方に悩んだときに使う3つの方法

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



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



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


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


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

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


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



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

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

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

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

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

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




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



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





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

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

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

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

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


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

>>キーワード無双





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

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

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

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

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


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

>>1商品で942万円稼ぎ出す仕組み




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

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


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

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


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

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




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



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

1、商品を紹介する

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

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




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



pxとemの違いと使い方

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

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

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



☆ pxとは

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

tani.png





☆ emとは

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

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

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





☆ pxとemの変換について

1em=16px

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





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

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

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

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




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

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

px・em・100%のHTMLタグはそれぞれ下の通りです。

<span style=font-size:16px">16px・1em・100%はすべて同じ文字サイズ!</span>


<span style=font-size:1em">16px・1em・100%はすべて同じ文字サイズ!</span>


<span style=font-size:100%">16px・1em・100%はすべて同じ文字サイズ!</span>




表示結果

16px・1em・100%はすべて同じ文字サイズ!

16px・1em・100%はすべて同じ文字サイズ!

16px・1em・100%はすべて同じ文字サイズ!





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




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



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





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



Copyright © 脱サラしたいサラリーマンがアフィリエイトを実践、気ままにネットビジネス All Rights Reserved.

テキストや画像等すべての転載転用販売を固く禁じます