2018
3
15
アフィリエイトにHTMLやCSS知識は必要?最低限知っておくコト



アフィリエイトを始めたばかりの頃はブログをカスタマイズするのが楽しいですよね。


特にプラグインを使うとブログの背景画像を気軽に変えられたり、テンプレートを入れるだけでブログのデザインを大きく変更することができたり。

ただ、自分の好きなように細かいデザイン変更をしようと思うと、HTMLやCSSの知識の壁により上手く行かないと思います。他の情報サイトを参考にしてみても、そこに書いてあることが分からなかったりですね。


僕も初心者時代にそんな思い出が…(笑)



もっとも、趣味ならともかくお金を稼ぐためにアフィリエイトをしているのであれば、ブログのカスタマイズのためにHTMLやCSSを学ぶ事に時間を費やすのはあまり賢いとは言えません。

そこで、今回はそもそもブログで稼ぐのにHTMLやCSSはどこまで必要なのかという話と、最低限知っておいてもらいたい知識についてお話をさせてもらいます。



そもそもHTMLやCSS知識って必要?



アフィリエイトで稼ぐのにHTMLやCSSの知識は不要です。

実際、僕はHTMLとかCSSってそれほど詳しいわけではないのですが、こうして5年以上アフィリエイトを続け、ブログからの収入だけで自分の生活を維持することができています。

ブログのカスタマイズやデザインを変更するにはそれなりの知識が必要ですが、そもそもアフィリエイトで稼ぐ上でデザインってそこまで必要ないですからね。



ただ…あくまで専門的な知識は必要ないという話であって、最低限のHTMLやCSS知識は知っておく必要があります。

もちろん、これは決して難しい話ではないので、1度覚えてしまえばブログ初心者さんだろうと関係なく利用できるテクニックです。


今回は僕が特に大事だと思うポイントである


①画像とリンクのHTMLだけは覚える
②ブログがおかしくなったらプラグイン無効化
③真っ白画面の復活はFTPソフトで
④single.phpとpage.phpとindex.php
⑤わからない時は総当たり
⑥HTMLやCSS変更前にバックアップを取る
⑦クロームの開発者ツールを使う




の7点についてお話をします。



アフィリエイトに最低限必要な7つのHTML知識とコツ



①画像とリンクのHTMLだけは覚える



HTMLやCSSの知識は必要ない!

…そう宣言したばかりで申し訳ないのすが、とりあえず画像とリンクの2つのHTML活用方法だけは覚えておきましょう。


どんな記事であっても1枚は画像を載せるでしょうから、画像をブログに表示させるためのHTMLは確実に知っておく必要があります。

また、他にも自分の記事の他のページに飛ばしたり、他のサイトに飛ばしたりするためには、リンクを貼るためのHTML知識がないといけません。


画像とリンクのHTMLだけは頻繁に使いますし、むしろこの2つのHTMLさえ覚えてしまえば、最低限のブログ運営は十分に可能です。


2つのHTMLタグは下記の通りですね。



画像HTML



<img src="画像リンク" width="画像サイズ">


画像リンク、画像サイズのところにそれぞれURLと数字を入れます。

こんな感じですね。画像サイズの数字は大きくすれば横幅が広がり、反対に小さくすれば画像の横幅も小さくなります。

<img src="https://naruhiko1111.com/wp-content/uploads/2017/03/merumaga.jpg" width="500">


さらに、画像を画面中央に表示させたいと思った時は、上記のタグを
タグで囲うことで中央寄せになります。

<center><img src="https://naruhiko1111.com/wp-content/uploads/2017/03/merumaga.jpg" width="500"></center>


リンクHTML



<a href="リンク先URL" target="_blank">テキストリンク</a>


リンク先URLに移動させたいページのURL、テキストリンクはどのような文字を表示させたいかの設定です。

また、「target=”_blank”」は新しいタブを開くかどうかなので、必要なければその部分はHTMLから削除してもらってOKです。


ちなみに画像をクリックして大きな画像を表示させたい場合は下記ですね。

<center><a href="画像URL" target="_blank"><img src="画像URL" width="500"></a></center>


②ブログがおかしくなったらプラグイン無効化



プラグインはワードプレスに色々な機能を追加できる反面、プラグイン同士が干渉して不具合やエラーが発生することがたまにあります。

するとブログの表示がおかしくなったり、最悪ブログが表示されない真っ白な画面になったり…エラーが起きると焦ってしまうかもしれませんが、案外CSSやHTMLに詳しくなくてもなんとかなります。


とりあえず絶対に覚えて頂きたいのは、

ワードプレスに異変が起きたらプラグインを全停止する

ということですね。


これでエラーが元に戻れば、少なくともいずれかのプラグインがエラーを引き起こしている事が分かります。その場合1つずつプラグインを有効化していけば、再びエラーが発生するところで原因となるプラグインを見つけられるはずです。

反対に、プラグインをすべて無効化してもエラーが解消しなかった場合、プラグインの問題ではないと判断できるため、HTMLやCSSの原因の可能性が高いです。



③真っ白画面の復活はFTPソフトで



たまーにですが、ワードプレスが一切表示されなくなってしまうことがあります。

ブログが閲覧できないのはもちろん、管理画面に入ることができずブログをもとに戻すこともできない。初心者のうちはこうなるとブログが消えたと大パニックになると思います。


一概には言えませんが

・プラグインやワードプレス本体のアップデート
・function.phpのカスタマイズ失敗


このあたりが真っ白画面の原因になりやすいですね。



でも、これはFTPソフトを使うことで復活できます。

そもそもワードプレスのファイルはサーバーに有るわけで、普段はサーバーの内容を管理画面を通じて変更しているだけです。

それならFTPソフトで直接サーバーにアクセスすれば、ワードプレスが真っ白画面だろうとなんだろうと関係なく変更できます。


仮にfunction.phpが原因ならそれを上書きすればOK。

もしくはプラグインが原因なら、この記事の方法でFTPソフトから全プラグインを無効化すればOKです。

ワードプレス管理画面にログインできない時のプラグイン無効化方法


④single.phpとpage.phpとindex.php



ワードプレスのHTMLを変更するにあたり、特に利用することが多いのが「single.php」「page.php」「index.php」の3つです。


それぞれ

single.php:個別記事ページの変更

page.php:固定記事ページの変更

index.php:トップページの変更

とだけ覚えておけば良いですね。


だから例えばですが、個別記事(普通の記事ページ)だけにアドセンス等の広告が自動で表示されるようにしたければ、まずはsingle.phpを見れば良いことになります。

またトップページだけに特定の画像を表示したい場合などは、index.phpを見れば良いことになります。この3つを覚えておくだけでデザインのカスタマイズなどもスムーズです。



⑤わからない時は総当たり



仮に記事ページ(single.php)の記事本文が終わったところにアドセンス広告を表示したいとしましょうか。

その場合、アドセンスタグをsingle.phpの中に記入しなければいけないのですが、正直こんな長ったらしいHTMLのどこに挿入すべきか検討もつきませんよね。


ただ、HTMLって割と総当たりでなんとかなります。


例えば、個別記事ページを変更するにはsingle.phpの編集しかない事は分かっているわけですから、それなら最悪、広告タグを1行ずつ順番に試してみれば良いですよね。

上から1行ずつ順番に試していけば、どこかで必ず正解のポジションへたどり着きます。


…実を言うと、今でも僕はたまにこの手法でカスタマイズしたりしますね(笑)



⑥HTMLやCSS変更前にバックアップを取る



ブログのカスタマイズをするにはHTMLやCSSを触る必要があるわけですが、初心者のときほど変なソースコードをいじってしまい、ブログが崩壊してしまう危険性が高まります。


なので、必ず編集前にバックアップをとりましょう。

別に、バックアップと言っても難しいことではありません。編集前のHTMLやCSSの文字を全てコピペして、メモ帳に保存してどこかに置いておく。



たったそれだけです。


メモ帳にバックアップをとっておけば、仮にワードプレス側でへんな操作をしてブログがおかしくなっても、バックアップしたメモ帳のコードをそのままコピペすれば元に戻ります。

これをやっておかないと、ブログが壊れて直せないという状況も起こりうるので、面倒くさがらずに必ずHTMLやCSS編集前にはバックアップをとっておきましょう。


⑦クロームの開発者ツールを使う



ブログの基本となる文字のサイズ、フォントの種類、その他デザインなどはCSSによって設定されていることが多いです。

ただ、仮にブログ本文の文字を変えたいと思っても、アフィリエイト初心者のうちはCSSのどこを見れば良いのか検討もつかないですよね。


そこで活用してもらいたいのがグーグルクローム(Chrome)です。

Chromeで自分のブログを開いて「F12」を押してみてください。


すると下記のように画面の右側に開発者ツールが表示され、部分ごとに対応するCSSの箇所を教えてくれるようになっています。





例えばこの例だと、フォントの種類はcommon.cssの348行目で指定されていると表示されているので、そこを変更すればフォントの種類が変更できることになります。


F12を使うことでCSSのどの部分に変更が必要なのか、ある程度目星をつけることができるわけです。



まとめ



7の最低限知ってもらいたいHTMLやCSS知識について紹介しました。

(HTML関係ない知識もいくつかありましたが…)


もちろんこれ以外のHTMLやCSS知識もあるに越した事はないのですが、この7つを知っているだけでもとりあえず通常のブログ運営はできるはずです。

逆に言えば、アフィリエイトブログで稼ぐことを最優先に考えるのであれば、これ以上の知識を学ぶことに時間をかけすぎるのは効率が悪いと言えます。


①画像とリンクのHTMLだけは覚える
②ブログがおかしくなったらプラグイン無効化
③真っ白画面の復活はFTPソフトで
④single.phpとpage.phpとindex.php
⑤わからない時は総当たり
⑥HTMLやCSS変更前にバックアップを取る
⑦クロームの開発者ツールを使う


この7つをしっかりと頭に入れて、自分のできる範囲でブログのデザインをカスタマイズしてみましょう!




このエントリーをはてなブックマークに追加
※メルマガはいつでも解除可能です

コメントを残す

CAPTCHA


サブコンテンツ
特商法

このページの先頭へ