CSSの親要素と子孫要素や継承について理解する

CSSを覚える際に親要素と子孫要素という概念を理解する必要があります。

<body>
<div id=”main”>
<p>ここに文章が入ります。</p>
<p>ここに文章が入ります。</p>
</div>
<div id=”sub”>
<p>ここに文章が入ります。</p>
<p>ここに文章が入ります。</p>
</div>
</body>

例えばこのようなHTMLがある場合、pタグから見るとdiv id=”main”やbodyが親要素ということになります。divから見るとbodyが親要素ということですね。

bodyから見るとdivが子要素、pが孫要素ということになります。

body {
    font-size: 16px;
    }

例えばこのようにbodyに対してフォントサイズを指定した場合、body内の全てのフォントサイズが16pxになりますので、子孫要素にあたる#mainやpに対してもこの設定が効いてきます。親要素に設定したプロパティは子要素や孫要素にも引き継がれます。

#sub内のpタグのみのフォントサイズを変更したい場合は以下の様なCSSになります。

#sub p {
    font-size: 16px;
    }

subというidのdiv内のpタグを指定していますので、あくまでsub内のpタグのみにCSSが効いてきます。

このようにそのCSSをどの範囲まで反映させたいのかということを考え、どの要素に対してCSSを設定するのかが決まります。

後に書かれたCSSが優先される

CSSでは後に書かれたものが優先されますので、たとえば以下のように書くこともできます。

body {
    font-size: 14px;
    }

p {
    font-size: 16px;
    }

こうすることで、サイト全体のフォントサイズは14pxになりますが、pタグ内のフォントについては16pxになります。CSSを記述する時には、親要素から書いていくのが一般的です。

後から書かれた物によって上書きされていくような形になりますので、たとえば、h3のデザインをCSSで行い、サイト内の特定のh3については、他のデザインにするという事も可能です。

#main-contents h3{
    background-image: url(../../../img/05.jpg);
    background-repeat: no-repeat;
    border: 1px solid #666;
    padding-top: 8px;
    padding-bottom: 10px;
    padding-left: 25px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
    width: 585px;
    height: 28px;
    color: #fff;
}

#main-contents h3.rank {
    background-image: url(../../../img/rank01.jpg);
    background-repeat: no-repeat;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    padding-left: 55px;
    padding-top: 2px;
    padding-bottom: 7px;
    font-size: 24px;
    color: #000;
    }

サイト全体の設定としてh3に対してCSSを設定し、ページ内で特定のh3に対して異なるデザインを設定したい場合には、そのh3にクラス名を振って、そのクラスに対してCSSを設定します。

h3に対してボーダーを設定していますので、そのままではh3.rankに対してもボーダー設定が効いてしまいますが、「none」を指定することでボーダーを無くす設定になっています。

h3

h3.rank

どちらもh3タグですが、このようにデザインを変えることもできます。(サンプルで提示したCSSとは異なるプロパティになっています)

CSSのフォントの種類「font-family」について

CSSではフォントの種類を指定することができます。当サイトはWindowsで見た場合、メイリオかMS Pゴシックで表示されるようになっています。

image01

そのパソコンに存在するフォントでしか表現することができませんので、特殊な文字を指定しても、そのPCにインストールされていなければ、自動的に他のフォントに置き換えられてしまいます。

一般的に使われているフォントは以下のようになっています。

  • Windows・・・メイリオ、MS Pゴシック、MS P明朝
  • Mac・・・ヒラギノ

WindowsはVista以降は、デフォルトフォントがメイリオになっていますが、XP以前はMS Pゴシックです。XPにもメイリオをインストールすることはできますが、多くの人がMS Pゴシックのまま使用していると思います。

font-familyのルールについては、「いまさら聞けないCSS font-familyのまとめ」が参考になります。

font-familyの指定

body {
    font-family: メイリオ,Meiryo,”ヒラギノ角ゴ Pro W3″,”Hiragino Kaku Gothic Pro W3″,”MS Pゴシック”,sans-serif;
    }

フォントの指定は「font-family:」で行うことになります。先に指定したフォントが優先して表示されるフォントです。

この記述の場合、たとえばWindowsPCであれば、基本的にはメイリオで表示され、メイリオが入っていないPCの場合には、MS Pゴシックで表示されることになります。

font-familyを指定しなくても、自動的にそのPCのデフォルトフォントで表示されますので、絶対に設定が必要な項目ではありませんが、指定しているサイトが多いと思います。

フォントの違いによる横幅の違い

フォントによって文字の大きさが変わってきますので、指定したフォントによって一行に収まる文字数が変わってきます。横幅と縦幅に制限がないエリアであれば、どのフォントを指定しても良いのですが、横幅に制限があるグローバルナビゲーションや見出しなどでフォントを指定する時は注意しなければなりません。

フォントはPCやブラウザによっても多少見え方が異なりますが、大きく変わるのは、メイリオのような等幅フォントとMS Pゴシックのようなプロポーショナルフォントの違いです。

等幅フォントは、フォント毎の幅が一定ですが、プロポーショナルフォントは、フォントごとに幅が異なるため、どちらの文字で表示されるかによって横幅が大きく変わってきます。

基本的には等幅フォントの方が横幅が広くなりますので、等幅フォントで見た時に合わせてデザインしておけばデザインが崩れることは無いのですが、太文字(ボールド)を使う場合には、状況が変わってきます。

MS Pゴシックの漢字は幅が広くなりますので、漢字のみの太字で比較した場合、メイリオよりもMS Pゴシックの方が横幅が広くなります。

ですので、この記事で書かれているように、グローバルナビゲーションなどの横幅が制限される場所において、センタリング表示+太字で利用する場合には、最も広くなるMS Pゴシックの幅に合わせてデザインする必要があります。

全てのPCに同じフォントが入っていれば良いのですが、現在主流であるWindows7とWindowsXPでは、デフォルトフォントが異なっていますし、XPでもメイリオを入れている人と入れていない人がいるため、ブラウザチェックする際には、その辺にも気をつけなければなりません。

CSSの値の単位「px、em、pt、%」など

CSSの「width、height、margin、padding、font-size」といったプロパティにおいて「値」を入力しますが、その際に数値が0の場合を除き「単位」を指定する必要があります。

#main {
    width: 500px;
    font-size: 1.4em;
    padding: 10px;
    }

この場合、mainというエリア内では、横幅が500px、フォントサイズが1.4em、余白が10pxという事になりますが、この「px」や「em」というのが「単位」になります。

値として良く使われるのは、「px」「em」「pt」「%」などですが、他にも色々な値を指定することができます。

相対的な単位

  • px・・・ピクセルで表し、ディスプレイの解像度に依存する
  • em・・・フォントサイズを1とした時の倍率
  • ex・・・小文字のxの高さを1とした時の倍率

相対的な単位は、パソコンやブラウザの環境によって文字のサイズが変わります。

20pxの文字

2emの文字

3exの文字

絶対的な単位

  • cm・・・センチ
  • mm・・・ミリ
  • in・・・インチ
  • pt・・・ポイント
  • pc・・・パイカ

絶対的な単位は、パソコンやブラウザの環境に影響されず同じ大きさで表示されます。

1cmの文字

10mmの文字

0.3inの文字

30ptの文字

2pcの文字

パーセント指定

  • %・・・パーセント

値はパーセントで指定することもできます。パーセント指定した場合、他の値との相対的な大きさになります。

p {
    font-size: 20px;
}

p strong {
    font-size: 120%;
}

例えばこのようなCSSを設定した場合、pタグが20pxになり、pタグ内にあるstrongタグが20pxの1.2倍に当たる24pxになります。

フォントサイズのpxとem

フォントサイズをpxで指定した場合、ブラウザの文字サイズ変更をしてもフォントサイズが変わりません。そのため、フォントサイズはpxではなくemで指定するのが良いとされています。

しかし、最近のブラウザは文字サイズ変更ではなく、サイト全体を拡大縮小する機能が付いており、この機能を使った場合、px指定していてもフォントサイズが変わります。そういったこともあり、最近はフォントサイズをpx指定しても問題ないという意見が多くなっているようです。

ちなみに最近のホームページのフォントサイズは大きくなる傾向にあり、読んで貰いたい文章の場合、14pxや16pxが一般的になっています。サイトによっては、18pxや20pxというのも見かけます。

サイトのデザインや横幅、行間、フォントの種類などによっても適切なフォントサイズは変わってきますので、一概にどのサイズが良いとは言えませんが、個人的に読みやすいと感じるのは、14pxや16pxです。

昔は12pxのサイトが多かったのですが、パソコンの画面サイズが大きくなり、サイトの横幅も1,000pxを超えることも珍しく無くなったことで、フォントサイズも大きめになっています。12pxでも特に問題はないのですが、ユーザーにストレス無く読んでもらうという意味では、14pxか16pxぐらいが良いと思います。

CSSの基礎の基礎を学ぶ

HTMLの基礎の基礎を学んだら、次にCSSの基礎の基礎を学びましょう。

個人的に、テーブルレイアウトからCSSレイアウトへ移行する時に、結構手こずった記憶がありますが、今はテーブルレイアウトを覚える必要がありませんので、意外とわかりやすいのかもしれません。

HTMLで書かれたページを装飾したり整形するのがCSSの役目です。サイトのデザイン担当がCSSというわけです。

まずはこの3つを覚えます。私自身、誰に教えてもらったわけでもなく、本を一冊買ってきて軽く読んだ後に、後は実践で覚えていったタイプなので、どのように覚えていくのが良いのかわからないのですが、あまり深く考えずにCSSはこういうものだという覚え方で良いのかもしれません。

CSSを書く場所

CSSの書き方は3つあります。

  1. 外部ファイルに書く
  2. head内に書く
  3. body内に書く

どの方法でも良いのですが、おすすめなのは外部ファイルに書く方法です。

たとえば、「main.css」と言ったファイルを作り、そこにサイト内で使うCSSを書いていきます。そのCSSを適用するページのhead内には、以下のように記述します。

<link rel=”stylesheet”href=”CSSファイルのURL” type=”text/css”>

当サイトであれば以下のようになっています。

<link rel=”stylesheet” href=”http://rensabanet.com/wp-content/themes/keni/style.css” type=”text/css”/>

これでstyle.cssというCSSファイルがそのページに適用されます。

»CSSの外部参照・内部参照・インラインの書き方

CSSの基本書式

CSSは「セレクタ」と「プロパティ」で構成されています。

p {
  color: #333;
  margin-bottom: 20px;
}

たとえば、ページ内のpタグに対して#333の色指定と、下マージンを20px指定するときのCSSはこのようになります。

この場合、セレクタにあたるのが「p」で、プロパティにあたるのが、「color」や「margin-bottom」です。

子孫セレクタ

#main-contents p {
  color: #333;
  margin-bottom: 20px;
}

このように書いた場合、「main-contents」というIDのDiv内のpタグに対してCSSが適用されます。

この場合、親要素にあたるのが「main-contents」で子孫要素にあたるのが「p」です。

「#main-contents .contents p」というようにどんどん子孫要素を増やすこともできます。

»CSSの親要素と子孫要素や継承について理解する

Class名とID名

Divやpタグなどの要素には、Class名やID名を振ることができます。CSSでClass名を指定する時は、名前の前に「.」を付け、IDを指定する場合は、名前の前に「#」を付けます。

<div id=”main-contents”>
<div class=”contents”>
<p>ここに文章が入ります。</p>
<p class=”red”>ここの文字を赤くしたい</p>
</div>
</div>

このようなHTMLがある場合に、「ここの文字を赤くしたい」という文章を赤いフォントにしたい場合は、

.red {
  color: #f00;
}

p.red {
  color: #f00;
}

.contents .red {
  color: #f00;
}

#main-contents .contents .red {
  color: #f00;
}

このように色々な書き方ができます。pタグに対して指定してしまうと全てのpタグが赤文字になってしまうので、赤くしたい文字のpタグにredというclass名を振り、そのclassに対して赤色である#fooを指定します。class名は好きな名前でOKです。

タグなどにclassやidを割り振ることで、細かい指定ができるようになります。なお、classは一つのタグに対して複数指定出来ますが、idは1つしか指定出来ません。また、idはそのページ内で同じ名前を付けることができません。

CSSで良く使うプロパティについては、挙げたらきりがないので、詳しい説明は、スタイルシートリファレンスをご覧ください。

»CSSのid名とclass名の付け方

CSSでデザインしてみる

HTMLの基礎の基礎で作ったサンプルページをCSSでデザインしてみたいと思います。

サンプルはこちら
image01

CSSのサンプルはこちら

超シンプルにデザインしていますので、HTMLとCSSを見れば初心者の方でも分かると思います。

このようにHTMLとCSSを使った簡単なデザインが出来るようになれば、あとは応用していけば良いだけです。

HTMLの基礎の基礎を学ぶ

最近はWordPressのような初心者でも扱いやすいCMSがあることで、HTMLが良くわからない人でも簡単に自分のオリジナルサイトが作れるようになっています。

ただ、HTMLでサイトを作る場合でもWordPressでサイトを作る場合でも、自分の好きなようにカスタマイズしていくにはHTMLやCSSの知識が必要になります。

HTMLのタグを全て覚える必要はないですし、タグ打ちでサイトを作る必要もないのですが、基本的なルールは頭に入れておいた方が何かと便利ですので、初心者向けにHTMLの基礎を学ぶための方法を解説していきます。

本当はHTMLの参考書を一冊購入して基礎を学ぶのが良いと思いますが、本は色々な情報が詰まっているため、難しいと感じて途中で挫折してしまうかもしれませんので、基礎の基礎を学び実践していくのが良いと思います。

»CSSの基礎の基礎はこちら

HTMLの基本構造を学ぶ

はじめにHTMLというものが何なのかという事を学んでも良いのですが、あまり難しく考えずにHTMLの「html」「head」「body」と言った骨格部分を覚えるのがいいでしょう。

まずは色々なサイトのHTMLを見てみましょう。ブラウザでサイトのHTMLソースを見ることができます。

Internet Explorerであれば、HTMLを表示したいサイトにアクセスして、ツールバーの「表示 ⇒ ソース」で見られます。FirefoxやChromeであれば、キーボードのCtrl+Uでソースが表示されます。

image01

これが当サイトのHTMLです。初めて見た方は全く意味がわからないと思いますが、こういった文字情報をブラウザが読み込んで人間が見やすいように整形しているのです。

HTMLの基本構造は、以下のようになっています。

<html>
<head></head>
<body></body>
</html>

htmlというタグの中にheadタグやbodyタグがあります。

headタグの中にはtitleタグやmetaタグが記述され、bodyタグの中にサイトのコンテンツなどが記述されています。headタグ内に書かれた情報はサイト上には表示されません。

良く使うタグを覚える

サイトに表示したい物はbodyタグ内に書いていくことになりますが、その際に必要になってくるのが以下のタグです。

  • h1、h2、h3タグ・・・見出し
  • p、brタグ・・・段落、改行
  • ul、olタグ・・・リスト
  • imgタグ・・・画像
  • aタグ・・・リンク

この5つが良く使うタグです。これだけ覚えておけば困ることはないと思います。

<h1>大見出し</h1>
<p>文章がここに入ります。</p>
<h2>見出し</h2>
<p>文章がここに入ります。</p>
<ul>
<li>リスト</li>
<li>リスト</li>
</ul>
<img src=”画像のURL” alt=”画像の説明”>
<a href=”リンク先のURL”>リンク先の説明</a>
<p>文章がここに入ります。</p>

body内では、このような感じでタグが並んでいきます。

見出しタグはh6まで使うことができますが、一般的にはh3やh4ぐらいまでしか使われていません。

ulタグとolタグはどちらもリストを表すタグですが、順列があるリストの場合はolタグを使います。

imgタグは画像を表すタグで、「src=””」の部分に画像のURLを指定します。altは無くても良いですが、画像の説明文を入れるのが一般的です。

aタグはリンクを表すタグで、「href=””」にはリンク先のURLを記述します。イメージリンクにしたい場合には、aタグでimgタグを囲います。

マークアップを練習する

最低限のタグを覚えたらマークアップの練習をしていきます。

image03

Windowsであればメモ帳などのテキストエディタを開きHTMLを書いていきます。完成したら、適当にファイル名をつけて、拡張子を「.html」にして保存します。

image04

作成したhtmlファイルをブラウザで見るとこのようになります。超シンプルですが、これをサーバーにアップすればインターネット上でこのページが見られるようになります。

見出しタグは自動的に文字が大きくなり、リストタグは箇条書きのようになります。一応形になっていますが、そっけないページですので、見栄えを良くするためにCSSを使います。CSSで見出しタグやリストタグを装飾することで、綺麗なページが作れます。

作ったページをCSSでデザインするとこのようになります。

まとめ

これがHTMLのスタートです。一辺に色々と覚えようとすると頭がパンクしてしまいますし、ホームページビルダーのように安いホームページ作成ソフトもありますので、タグ打ちでサイトを作る人はあまりいません。

私はHTMLを覚える前に、Dreamweaverという作成ソフトの使い方を覚え、その過程でHTMLやCSSを理解して行きました。頭で考えるよりも体で覚えてしまった方が良いと思いますので、ホームページ作成ソフトを使う場合には、このページで紹介したHTMLの基礎の基礎がわかった時点で、作成ソフトの使い方を学ぶのが良いかもしれません。

自分の満足が行くサイトが作れるようになるまでには、ある程度の経験が必要になりますが、いくつかサイトを作っているうちにいつのまにか必要な知識やスキルは付いていきます。コツコツと続けていけばそれほど難しいものではありませんので、諦めずに頑張って行きましょう。

ボックスに影を付けるCSS・ボックスを角丸にするCSS

前回、「文字に影を付けるためのCSS」をご紹介しましたが、今回はボックスに影を付けるためのCSSをご紹介します。文字のCSSと同じようにブラウザのバージョンによっては確認することができませんが、画像を使わないので手間がかからずオススメです。

CSSでボックスに影を付ける

box-shadow:1px 2px 3px #000;

これがボックスに影を付けるためのCSSです。1pxが横方向のズレ、2pxが下方向のズレ、3pxがボカシ具合となっています。影の色は好きな色にすることができます。

.box-s {
    box-shadow:1px 2px 3px #000;
    height: 100px;
    width: 200px;
    border: 1px solid #999;
    padding: 10px;
    }

box-sというクラス名のdivに影を付ける設定はこのようになります。

上記の設定で以下のような影が付きます。

このボックスに影を付ける

最新のFirefox、Chrome、Internet Explorerは9以降であれば確認することができるはずです。

古いバージョンのFirefoxやChromeに対応するCSSは以下のようになります。

-moz-box-shadow: 1px 2px 3px #000; /* Firefox用 */
-webkit-box-shadow: 1px 2px 3px #000; /* Safari,Google Chrome用 */ 

IEの8以前のバージョンについては複雑になるので割愛します。

CSSでボックスを角丸にする

border-radius: 10px;

角丸を作るためのCSSはこのようになります。10pxというのは角丸の半径です。

.box-s{
    height: 100px;
    width: 200px;
    border-radius: 10px;
    border: 1px solid #999;
    padding: 20px;
    }   

box-sというクラス名のdivを角丸にする設定はこのようになります。

上記の設定で以下のような角丸ボックスを作ることができます。

このボックスを角丸にする

こちらも最新のFirefoxやChrome、Internet Explorerは9以降であれば確認することができるはずです。

古いバージョンのFirefoxやChromeに対応するCSSは以下のようになります。

-moz-border-radius: 10px;    /* Firefox */
-webkit-border-radius: 10px; /* Safari,Chrome */

IEの8以前のバージョンについては複雑になるので割愛します。

角丸にして影を付ける

影と角丸のCSSは併用することができますので、ボックスを角丸にして影を付けることもできます。

.box-s {
    box-shadow:1px 2px 3px #000;
    height: 100px;
    width: 200px;
    border-radius: 10px;
    border: 1px solid #999;
    padding: 20px;
    }

box-sというクラス名のdivを角丸にして影を付ける設定はこのようになります。

このボックスを角丸にして影を付ける

いずれのCSSも古いブラウザでは確認できない可能性がありますが、最新のブラウザでは対応しています。

CSSで文字に影をつける・マウスを載せると画像が変わる

当サイトではレンタルサーバーの紹介を行なっていますが、その中で以下のようなボタンを使っています。

全て画像のように見えるかもしれませんが、これはCSSでテキストに影をつけて、背景として画像を読み込ませていて、マウスを載せると背景画像が変わるようにしてあります。

特に難しいことをやっているわけではありませんが、初心者の方はどうやっているのか気になる部分かもしれません。文章に影があると読みづらくなりますので、見出しやバナー、強調したいテキストなどで使うのが良いと思います。

CSSで文字に影をつける

text-shadow: 1px 1px 1px #000; 

「text-shadow」が文字に影を付けるためのCSSプロパティです。「1px 1px 1px」という部分で影を表現しています。

始めの1pxが横方向のズレ、次の1pxが縦方向のズレ、次の1pxがボカシ具合です。最後に影の色を指定します。冒頭で載せたテキストリンクの影は、このままの設定になっています。

text-shadow: 0 -1px 1px #fff,  1px 1px 1px #000; 

このようにカンマで区切ることで、複数の影を指定することができます。

CSSで文字に影(ドロップシャドウ)を付けるというのは、2010年頃から行われるようになった手法ですが、これは、CSS3以降に利用できるようになった手法です。ですので、CSS3に対応していないブラウザで見ると影は見られません。

image01

上がFirefoxやGoogle Chromeで見た場合で、下がInternet Explorerで見た場合です。文字の影が付くだけでだいぶ印象が変わりますよね。今後はInternet Explorerでも影付き文字が見られるようになると思いますが、古いバージョンのブラウザを使っている人には見えませんのでご注意ください。

マウスを載せた時に画像を変更する

次に、マウスを載せた時に背景画像を変更する為のCSSです。

このボタンにマウスを載せると背景画像が変わるのが分かると思います。

a {background-image: url(/img/gazo.jpg);}    
a:hover {background-image: url(/img/gazo2.jpg);}

テキストリンクのaタグに対して、背景画像を設定し、マウスオーバーのa:hoverで、異なる画像を指定しています。これは良く使われるCSS設定ですので覚えておくと良いと思います。先に説明した影を付けるCSSと同時に使っても良いでしょう。

以上が、文字に影を付けるCSSとマウスを載せると画像が変わるCSSの設定例です。ホームページ制作初心者の方は、CSSが難しいと感じるかもしれませんが、基本的な部分を学んでしまえば後は応用ですし、使うCSSは決まってきますので、とにかく色々と使ってみるのが良いと思います。

記事を増やすことによるアクセスアップ効果【実践編】

以前、「サイトボリュームとテキスト量でロングテールSEO効果アップ」という記事の中で、ロングテールSEOでアクセスアップを図るためには、サイトボリュームや記事ごとのテキスト量が重要であることをお伝えしました。

ロングテールSEO=ページの量産というわけではなく、価値の無いページを沢山作っても意味が無いのですが、一般的なサイトであれば、ページ数が多くなれば自然とアクセス数も増えていくはずです。

そうは言ってもどれだけの効果が期待できるのか分からないという人が多いと思いますので、当サイトで行なったページの追加と、それによるアクセス数の変化をご紹介します。

ページ追加後のアクセス数の増加

昨年の11月頃当サイトに、初心者向けのホームページ制作に関する記事を40記事ほど追加しました。1日1~2記事の追加で合計で40ページほどの追加になりました。作成したページは、「ホームページ作成に役立つ情報」というページにまとめています。

image01

そして、これがホームページ制作カテゴリーのアクセス数の推移です。Googleアナリティクスのフィルタ機能を使って、「/hp/」というカテゴリに属する記事のみのアクセス数を抽出しています。

元々このカテゴリーに属する記事が10ページほどあったのですが、11月頃から記事を追加し始めてから、徐々にアクセス数が増えています。初心者向けですので、特に目新しいものはなく、過去に出尽くされた情報ですが、それでもこのようにアクセス数は伸びていきます。

image02

こちらは、12月に追加したSEO初心者向けカテゴリーのアクセス数です。「/seo/」というカテゴリでフィルタをかけています。

こちらも30記事ほど追加しています。まだ記事を追加してからあまり日が経っていないので、それほどアクセスは伸びていませんが、それでもアベレージは上がっています。SEO記事も「SEO対策に役立つ情報」というページに記事をまとめています。

意味のある記事を増やせばアクセスは自然に増える

記事を見てもらえればわかりますが、オリジナリティ溢れる記事とは言えません。しかし、アクセス数は着実に伸びています。それだけの記事を追加してその程度のアクセス数しか獲得できないのかと思う人もいるのかもしれませんが、ロングテールSEOはそんなものです。

私の感覚としては、1記事あたり1日1セッションを運んできてくれればそれで良いと思っています。10記事追加すれば1日10アクセス増ということになります。効率が悪いように感じますが、安定して毎日1アクセス運んできてくれるというのは有難いものです。

流入キーワードはロングテールキーワードなので、全ての記事が毎日1アクセスというわけではありません。1日3アクセスの記事もあれば0アクセスの記事もあります。同じ記事でも日によって異なるキーワードでの流入になります。

流入キーワードは毎日全然違うのに、毎日のアクセス数にそれほど大きな変動はなく安定します。ビッグワードやミドルワードで上位表示した時の威力は凄いですが、ロングテールワードで地道にコツコツとアクセスを増やしていくのも悪くありません。

Windowsのペイントで写真や画像を縮小する方法

ホームページやブログに写真や画像を載せたいという方も多いと思いますが、初心者の方の場合、デジカメで撮った写真をそのまま載せてしまっているケースを良く見かけます。

無料ブログやWordPressを使う場合、通常は自動的に画像がリサイズされますので、ブログ上に表示されている画像は調度良い大きさで見えるのですが、実際には大きな画像がアップロードされていますので、画像の読み込みに時間がかかってしまうことと、サーバーの容量を使ってしまいます。

小さいサイズで載せたいけど、画像をどうやって小さくするのかわからない方もいると思いますので、今回はWindowsに標準搭載されているペイントを使って画像を縮小する方法をご紹介します。

ペイントで画像を縮小する

Windowsのバージョンにもよるのですが、「スタート ⇒ 全てのプログラム ⇒ アクセサリ ⇒ ペイント」でペイントを起動することができます。今回は、Windows7の場合で解説していきますが、どのバージョンでもそれほど大きな差はないはずです。

image01

左上のアイコンをクリックし、「開く」を選択し、縮小したい画像を選択します。

image02

画像が読み込まれたら、「サイズ変更」をクリックして、単位を選択し、数値を入力します。

「縦横比を維持する」にはチェックを入れておいてください。入れておかないと縦横比が崩れ、歪んだ画像になってしまいます。

image03

画像が縮小できたら、保存します。左上のアイコンをクリックし、「名前を付けて保存」をクリックし、保存形式を選択します。

写真であればJPEGで保存し、イラストであればPNGやGIFで保存します。グラデーションがかかっているような画像の場合は、JPEGが良いでしょう。

以上で、画像の縮小作業は終了です。慣れてしまえばすぐに出来ると思います。

一発保存ボタンの作成

毎回毎回、保存形式を選ぶのは面倒なので、保存用のボタンを作るのが良いかもしれません。

image04

通常通り保存の作業を行い、保存形式を選択する画面で、右クリックすると、「クイックアクセスツールバーに追加」という項目がありますので、それを選択します。

image05

わかりづらいですが、ツールバーに保存用のボタンが追加されますので、次回からはこのボタンをクリックすれば直ぐに同じ形式で保存することができます。

WordPressの場合

WordPressを使っている方であれば、画像の縮小はWordPressの管理画面上で行うことができます。

image07

画像を挿入した画面の右側の「画像を編集」をクリックします。

image11

編集画面に切り替わったら、「画像の拡大縮小」をクリックして、サイズを指定し「伸縮」をクリックし、最後に「更新」をクリックします。

image02

編集が終わったら、画像の挿入画面に戻り、サイズをフルサイズにして挿入すれば、縮小したサイズの画像が挿入されます。この画面に表示されるサイズが、縮小前のサイズになっているのですが、実際に挿入される画像は縮小後のサイズになります。リンク先を「なし」にしても良いと思います。

また、以下の方法でも挿入することができます。

image12

編集した画像の「ファイルのURL」をコピーします。

image13

投稿画面の画像挿入画面で、「URLから挿入」を選択し、先ほどコピーしたURLを貼り付けて、「投稿に挿入」をクリックします。

もっと簡単に編集した画像を挿入する方法があるはずですが、わかりませんでした・・・

サーバー停止等のリスクを考えてレンタルサーバーを分散する

最近のレンタルサーバーはマルチドメインに対応しているのが一般的で、1つサーバーを借りれば複数のドメインを設定することができます。設定できるドメインの数はサーバーやプランによって変わってきますが、無制限になっている事も珍しくありません。

無制限というこは、物理的には何百、何千というドメインでも設定できることになります。仮に100サイトを異なるドメインで展開する場合でも、サーバーを1つ借りれば良い事になります。

ただ、実際には大量のドメインでサイトを運営しようとすると色々な問題が出てきます。

こういった事を考えると、1つのサーバーである程度サイト数をセーブした方が良いのかもしれません。あくまで沢山のサイトを運営する人の場合ですが、1つのサーバーに詰め込みすぎると後で問題が発生する可能性があります。

503エラー

ドメイン数が多くなれば全体でのアクセス数も増えるはずです。1サイトで1日何万PVも稼ぎ出すサイトもありますが、一般的なサイトは数十~数千だと思います。仮に1日100PVだとしても100個サイトがあれば1万PVです。

1日1万PVぐらいであれば多くのサーバーが耐えられると思いますが、場合によっては503エラーが頻発するかもしれません。

503エラーが出るということは、そのページヘ訪問してくれるはずのユーザーを取りこぼすことになります。すぐにリロードした時に繋がったり、時間を空けて再度訪問してくれれば良いですが、一度503エラーが表示されただけで、二度と訪問してくれない人も多いです。

特にWeb初心者の場合、503エラーの存在や意味を理解していませんので、このサイトは存在しないと感じたり、良くわからないけど怖いからもう行かないと判断されてしまうかもしれません。

転送量オーバー

転送量もアクセス数が多くなるとオーバーする可能性が出てきます。転送量の計算方法については、「データ転送量とは」をご覧ください。

アクセス解析のアクセス数とサーバーの転送量の関係」でも書いたように、サイトやページの作りによっても転送量は変わってきますが、転送量をオーバーすると制限が加えられたり、プラン変更を勧められる可能性があります。

サーバー別転送量の目安

サーバー名 転送量 容量 月額料金
ヘテムル 1200G 150G 1500円
エックスサーバー 1500G 200G 1000円
X2サーバー 1500G 100G 1800円
シックスコア 1500G 50G 1800円
チカッパ 300G 60G 500円
さくらのレンタルサーバ 2400G 10G 500円
ファイアバード 200G 50G 500円
ロリポップ 150G 30G 250円
ミニバード 100G 30G 250円

基本的には転送量が100Gもあれば十分なのですが、アクセス数が多いサイトや画像などを多用しているサイトの場合、意外とすぐに目安の転送量に達してしまいます。

転送量をオーバーしても直ぐに制限が加えられるサーバーは少ないですが、オーバーした状態が続くと制限が加えられる可能性が高くなります。

当サイトでも使っているエックスサーバーは、転送量が1500G、ディスク容量が200Gの割に料金が安く重宝しています。格安レンタルサーバーで1500Gのサーバーはほとんどありません。

メモリ容量オーバー

転送量や容量に問題がなくてもメモリ容量が低いサーバーの場合、負荷がかかり過ぎることでエラーが出る可能性があります。

共用サーバーを借りる時にあまりメモリを気にしている人はいないのですが、複数サイト運営している場合には、メモリ使用量オーバーの可能性も出てきます。

さくらのレンタルサーバのように、同じプランでも契約した時によってメモリ容量が異なるサーバーもありますので、昔契約したプランの場合には注意が必要です。私が500エラーが頻発したサイトは、さくらのレンタルサーバで2009年頃借りたものでしたが、メモリが2Gしかありませんでした。

アカウント停止時の問題

»サーバーへの不正アクセスで海外へ大量のスパムメールを送信しアカウントが凍結される

これは、私自身初めて経験したことで、かなり焦ったのですが、サーバーへ不正アクセスがあり、スパムメールを大量送信するプログラムを仕込まれてしまいました。

このような状態になった時の対応方法は、サーバーによっても変わってきますが、エックスサーバーの場合は、問答無用でアカウント停止になります。アカウントが停止されると、そのサーバーで運用している全てのサイトが閲覧できなくなります。

サーバーの安全性や他のユーザーへの影響を考えての処置ですので、こういった事を行うサーバーは信頼出来ると言えるのですが、アカウントが止められてしまった側のダメージは計り知れません。

アカウントが停止されることは滅多にないと思いますが、これを機に私はサーバーを分散するようになりました。今では多くても1サーバー5サイトまでにしています。容量的にはまだまだ入れられますが、止められた時のリスクを考えて分散するようになりました。

アカウント停止処置でなくても、サーバー側のトラブルなどで全サイトアクセスできなくなる事もありますし、沢山のサイトを運営するのであれば、ある程度サーバーは分散しておいたほうが良いと思います。

大きいサイズのMySQLがphpMyAdminにインポートできない

WordPressサイトを移転する場合、phpMyAdminを使いMySQLのエクスポートとインポートを行う形での移行が多いと思いますが、phpMyAdminでインポートできるデータファイルの容量はサーバーによって決められています。

インポートできるファイルサイズの確認方法

image02

これはエックスサーバーのphpMyAdminの画面ですが、インポートできるファイルサイズが205kKiBとなっています。1KiB=1,024バイトなので、205×1024×1024 =約210Mということで、エックスサーバーであれば相当大きなサイトでない限り容量オーバーになることはないでしょう。

image04

これはロリポップのphpMyAdminの画面ですが、16Mまでしかアップロードすることができません。さくらのレンタルサーバも16Mとなっています。

サイズオーバーの時のエラー画面

image05

古いバージョンのphpMyAdminの場合、サイズオーバーのMySQLをインポートすると、トップページに飛ばされてしまいます。エラー画面が表示されませんので、一瞬何が起こったのかわからなくなるのですが、何度やってもこの画面に飛ばされます。

image06

「インポートするデータを受信できませんでした。ファイル名が送信されていないか、ファイルサイズが PHP の設定で許可された最大値を超えています。FAQ 1.16 をご覧ください。」

新しいバージョンのphpMyAdminの場合は、このようなエラー画面が表示されます。要するにファイルサイズが大きすぎるということです。

対処法1 ファイルの圧縮

対処法として最も簡単なものが、エクスポートする際にファイルを圧縮する方法です。

image01

圧縮形式がいくつかありますが、どれを選んでも大丈夫です。zipとgzipはそれほど圧縮率が変わりませんが、bzipはzipよりも小さいサイズになるはずです。

試しに圧縮してみたところ、ノーマル状態で31.8MあったMySQLが、zipにしたら5.64M、gzipにしたら5.66M、bzipにしたら3.75Mになりました。これだけ小さくなれば最大16Mまででも多くのサイトで大丈夫だと思います。

image07

新しいバージョンのphpMyAdminの場合は、詳細をクリックした後に、圧縮という項目で形式を選択します。

対照法2 php.iniの編集

ローカル環境にインストールしたphpMyAdminやレンタルサーバーによっては、php.iniが編集できますので、php.iniでアップロードできるファイルサイズの上限を広げる方法もあります。

memory_limit = 32M
post_max_size = 32M
upload_max_filesize = 32M

このように指定できるファイルサイズを大きくすればphpMyAdminでアップロードできるファイルサイズが大きくなるはずです。

この3つのサイズは、
memory_limit ≧ post_max_size ≧ upload_max_filesize
にする必要があります。

対処法3 BigDumpの利用

個人的に利用したことがないのですが、BigDumpというツールを使うと超巨大なMySQLファイルでもインポートすることができるようです。

»超巨大な MySQL のデータを共用サーバーにインポートできる BigDump の使い方

対処法4 SSHで接続

そもそもphpMyAdminを使用せずにSSHで移行する方法もあります。レンタルサーバーの場合、SSHが利用できない場合もありますが、たとえばエックスサーバー、さくらのレンタルサーバ、ロリポップのチカッパプランなどでSSHが利用できます。

SSHによるWordPressサイトの移転方法については、以下のサイトがとても参考になります。

»WordPress の引っ越し方法色々

レンタルサーバー各社のメモリ容量を比較

レンタルサーバーを借りる時に確認するポイントは、「料金」「容量」「転送量」「MySQLの数」等だと思いますが、以外に重要なのが「メモリ」です。CPUも気になる所ですが、個人的には複数のWordPressサイトを運営する時に影響が出るメモリが気になります。

以前、「さくらのレンタルサーバ+WordPressで500エラーが多発」という記事を書いていますが、500エラーの原因がメモリ使用量の上限に達した為のプロセスの強制終了でした。

2サイト運営していて、アクセス数が1日3000PVと1000PVのサイトだったので、それなりに負荷はかかっていたと思いますが、もっと沢山のサイトを運営しているサーバーや、アクセス数が多いサーバーでもこのような事は発生していなかったので、もう少しメモリ容量を増やして欲しいと思いました。

レンタルサーバー各社のメモリ容量

メモリ容量は公開しているサーバーが少ないのですが、エックスサーバーグループとネットオウルグループはメモリ容量を公開しています。

レンタルサーバー名 メモリ容量
エックスサーバー 16GB
X2 16GB
シックスコア 16GB
ファイアバード 12GB
ミニバード 12GB
クローバー 12GB
さくらのレンタルサーバ 2GB、3.25G、5G
ヘテムル 非公開
ロリポップ 非公開

※いずれも標準的なプランのメモリ容量です。プランによって異なる可能性があります。
※さくらのレンタルサーバは契約した時によって同じプランでも容量が異なるようです。

エックスサーバー、X2、シックスコアがエックスアーバーグループです。容量や転送量も他社と比べて大きいですが、メモリも大きめです。当サイトもエックスサーバーを使っていますが、ほんと安定感抜群です。

ファイアバード、ミニバード、クローバーがネットオウルグループですが、ネットオウルも12Gと大きめですね。

さくらのレンタルサーバの2Gというのがあまりに小さい気がしますが、最近契約したサーバーはもっと大きくなっているはずです。私の契約では同じスタンダードプランなのですが、2Gと3.25Gになってました。でも同じプランなのに契約時期によってメモリ容量が変わるというのは一般的なやり方なんですかね。

さくらはディスク容量が10G、マルチドメインが20個までと、全体的に容量が小さめです。転送量は300Gと十分なので、あとはメモリとディスク容量ががもう少し大きければ使い勝手が良い気がしますが、私の契約だとメモリ2Gなのでかなり厳しいです・・・

MySQLが1個から20個に増量した時に、他の部分も増強するのかと思ったのですが、MySQL以外の部分は変わりませんでした。現在、さくらのレンタルサーバーは、メインサイトでは使っていないのですが、1サイト運営ということであれば結構好きなサーバーなので、なんとかもう少しスペックを上げて欲しい所です。

ヘテムルにメモリについて聞いたところ、非公開との回答を頂きました。

恐れ入りますが、お問い合わせいただいておりますような内容やサーバーのスペック及びOS、収容人数などにつきましては非公開とさせていただいております。

なお、メモリのご利用の上限に達した場合は、制限を行わせていただく場合がございます。何卒ご了承をいただきますようお願いいたします。

また、ヘテムルの機能につきましては、下記ページをご一読いただけますと幸いです。
■機能一覧http://heteml.jp/service/function/

ロリポップはコントロールパネルでメモリ情報が公開されておらず、問い合わせても教えてもらうことができませんでした。

ロリポップ!で使用しておりますサーバーのスペックにつきましては下記URLにて、ご案内いたしております。

■ロリポップ! – サーバー環境について
http://lolipop.jp/service/server/

こちらでご案内している項目以外につきましては、非公開とさせていただいておりますので、大変申し訳ございませんが、お尋ねいただきましたメモリにつきましても、非公開とさせていただいております。

都道府県型JPドメインの取得とSEO効果

私も利用しているムームードメインで、都道府県型JPドメインサービスが開始されました。

都道府県型JPドメイン | ムームードメイン
image01

都道府県型JPドメインって何?という方も多いと思いますが、都道府県型JPドメインとは、ドメイン名に都道府県の名前が入ったドメインのことです。

  • .tokyo.jp(東京都)
  • .kanagawa.jp(神奈川県)
  • .saitama.jp(埼玉県)
  • .chiba.jp(千葉県)
  • .ibaraki.jp(茨城県)
  • .gunma.jp(群馬県)
  • .tochigi.jp(栃木県)

関東の都道府県では、このようなドメイン名になります。たとえば、「rensaba.tokyo.jp」というような名前を取得することができます。

以前から、市区町村の公式サイトがこういった名前が入ったドメイン名を使用していましたが、少し前から一般の人でも取得できるようになっています。

ドメイン取得費用は、日本語ドメインで1,250円、ローマ字で2,980円ということで、comやnetなどよりも料金が高くなっているのですが、地域限定サービスなどをやっている場合には、利用価値があるのかもしれません。

ドメイン名によるSEO効果

ドメイン名を決める時にSEOのことを考えて、ドメインにキーワードを含める人も多いと思います。都道府県名が含まれるドメイン名であれば、「地域名+キーワード}の複合キーワードで上位表示しやすくなるのではないかと思う人も多いのかもしれません。

しかし、都道府県型JPドメインを使ったからと言ってSEOで有利になることは、まずないでしょう。

image02

Googleは「東京=トウキョー=tokyo」というように異なる表記でも、同じ単語であることを認識します。そういった事からもドメイン名にキーワードを含めることで、SEOに効果があると言われるのですが、実際にはドメイン名にキーワードを含めた所で大したプラスにはなりません。全くプラスにならないとは言い切れませんが、考慮するほどのものではありません。

ドメイン名はサイトのブランディング重視で決めるべきものです。キーワードを含めるかということもサイトをブランド化させる為の名前を考えましょう。その上で、ドメイン名にキーワードを含めた方が良いのであれば含めても良いでしょう。キーワードを含めるとマイナスになるというわけではありません。

ただし、キーワードを含めることでドメイン名が長くなり、覚えづらい名前になってしまうのはブランディングにマイナスになります。

当サイトのドメイン名は「rensabanet.com」ですが、これが仮に「rentalservernet.com」や「rental-server-net.com」だったらどうでしょうか。

これぐらいであれば特に問題ない範囲とも言えるのですが、覚えづらくなることは間違いありません。

直接ドメイン名をブラウザのアドレス欄に入力して、サイトに訪れるようなことは滅多に無いのですが、なるべく短くわかりやすくというのがドメイン名の基本ルールです。

意図せぬ中古ドメインに要注意

短いドメインの場合、過去に誰かが取得したことがあるドメインの可能性があります。多くの場合、それで何か問題が発生することはないのですが、過去に運営されていたサイトがGoogleからペナルティを受けている可能性がありますので、注意が必要です。

過去に受けたペナルティが有効で、新規取得したあなたのドメインもペナルティを受ける可能性もありますので、そういった場合にはGoogleウェブマスターツールで再審査リクエストを行いましょう。

過去に手動ペナルティを受けている場合、ウェブマスターツールに登録した時点で、Googleからのガイドライン違反のメッセージが届いているかもしれません。アルゴリズムによるペナルティを受けている場合でもドメインをリセットしてもらうことが可能です。

サイトを公開してもインデックスされなかったり、全くアクセス数が増えないという場合には、過去の所有者が何か悪さをしていたのかもしれません。なお、過去のドメインの運営歴については、Internet Archiveで確認することができます。

アクセスアップに最適なWordPressブログを活用する

どの分野のサイトを作る場合でも活用できるのが「ブログ」です。TwitterやFacebookなどのSNSやLINEなどのコミュニケーションツールが豊富にある時代に、いまさらブログと思うかもしれませんが、SEOやアクセスアップという事を考えた時に最も効果的なのがブログです。

TwitterやFacebookなどのSNSを活用するのもいいですが、同時にブログを運営していると相乗効果で大きなチカラを生み出します。

ブログと言った場合、アメーバブログやライブドアブログなどの無料ブログをイメージする人も多いと思いますが、SEOに役立つのは独自ドメインブログです。サイトのドメイン内にブログを構築します。

そうすることで、サイトボリュームとテキスト量が増えてロングテールSEOの効果を上げることができます。

WordPressでブログを作ってみよう

ブログを作るシステムとしては、WordPressとMovable Typeが有名ですが、完全にWordPressの一人勝ち状態ですので、これから新しいブログを構築する場合には、WordPressを活用するのが良いでしょう。

Web初心者の方には少し難しいかもしれませんが、一からHTMLを憶えてサイトを作るよりもずっと楽ですので、サイト自体をWordPressで作りその中にブログを作っても良いと思います。

当サイトもWordPressで作っていますが、その中でレンサバブログを運営しています。blogディレクトリに別WordPressをインストールしてもいいですし、当サイトのようにWordPress内の一つのカテゴリをブログにしても良いでしょう。

WordPressのデフォルト状態では、カテゴリのURLにCategoryが含まれてしまいますので、カテゴリURLからcategoryを消す為にWP No Category Baseというプラグインを使います。そうすることで、ブログカテゴリトップのURLが、「http://ドメイン/blog/」という形になります。

あとは、blogカテゴリに記事をどんどんアップしていくだけです。blogカテゴリに子カテゴリを設けても良いと思います。当サイトでも「/blog/seo/」や「/blog/hp/」という形で子カテゴリを作っています。

ブログは更新頻度が重要

ブログを作っても更新しなければ意味がありません。ブログの評価は更新されているかどうかで決まると言っても過言ではないぐらい、ブログにとって更新はとても大切です。

単に記事を追加することが更新というわけではなく、その記事を見た人にとってメリットがあるような記事を書いて行かなければなりません。始めのうちは難しいかもしれませんが、何本も記事を書いているうちに慣れていきます。

できればブログを開設した当初は毎日記事を更新して、100記事ぐらいになったら、週2~3回の更新にして、300記事ぐらいになったら週1更新といったように徐々に減らしていく形が良いと思います。

何年間も毎日更新してもいいですが、そんなに書くこともないでしょうし、中身の薄い記事を大量に作ってしまうとGoogleのパンダアップデートが怖いので、中身のある記事が書けないのであれば更新しない方が良いでしょう。

最終的に週1更新であれば何年間も続けられるはずです。週に1回であればその間にブログ記事のネタも出てくるでしょう。私もSEOブログを5年以上続けていますが、今でも週1更新を継続しています。なんどか更新が止まりそうな事がありましたが、結構続けられるものです。

サイトボリュームとテキスト量でロングテールSEO効果アップ

内部SEOで重要になってくるのが、「タイトルタグ」と「内部リンク構造」ですが、ロングテールSEOを実践する時に重要になるのが「サイトボリューム」と「テキスト量」です。

ロングテールSEOとは、検索数の少ないキーワードを沢山獲得するSEOのやり方の事です。

ロングテールSEOのまとめ~ロングテールSEOって何?という方へ~

検索回数が多い、いわゆるビッグキーワードと呼ばれるものは、上位表示できれば大きなアクセスアップ効果が期待できますが、上位表示するのが大変な上に、一度上位表示できてもそれを維持するのに一苦労です。

その点、ロングテールキーワードは、被リンク対策などを行わなくてもある程度のアクセスを集めることができますし、SEOの知識がなくても大丈夫です。

ロングテールSEOを成功させるための秘訣

  1. 十分なサイトボリューム
  2. ページごとの豊富なテキスト量
  3. その分野に精通した専門的な文章

この三点を守ってサイトを作っていけば、自然にロングテールキーワードが拾えるサイトになるはずです。

サイトボリュームが大きくテキスト量が豊富でも、中身の無い文章になっていては意味がありません。専門的な人が書いた記事は、色々な言葉が含まれており、素人が使わない言葉も使われているでしょう。

専門用語ばかりの文章では専門知識がある人にしか伝わらないので、それが良い文章なのかという問題はありますが、素人が書いた文章と専門家がわかりやすく書いた文章は明らかに違うので、これをGoogleが判断できるのかという部分がポイントです。

現時点では、Googleがそこまで日本語を分析する能力があるとは思えないのですが、専門家の方が語彙が豊富な事は間違いないので、ロングテールSEOを実践するのであれば、その分野の専門的な知識をつけるのが近道です。

»ロングテールSEOの為のブログの活用

文章は沢山書いて慣れる

私自身、ブログを沢山書いていることもあって、文章を書くのは得意な方なのですが、始めからスラスラと書けた訳ではありません。ブログを始めたのが2005年頃だったと思いますが、そこから8年ぐらいかけて平均すると年間1,000記事以上は書いてきましたので、トータルでは1万記事ぐらいは書いていると思います。

文章は書けば書くほど上手くなっていきますし、記事を書くスピードも早くなっていきます。習うより慣れろという言葉がありますが、物書きもまさにそのとおりです。初心者の方はとにかく沢山の記事を書いて体で覚えるしかありません。

始めのうちは1記事書くのに何時間もかかると思いますが、慣れてくれば20~30分もあればまともな記事が1つ書けるようになります。ちなみにこの記事も30分ほどで書き終わりました。

いくつも記事を書くことで、自分のスタイルが確立されていきます。あとは、書いているうちに次に書く文章が頭の中で浮かんでくるようになりますので、ほとんど止まることなく記事が書き終わると思います。

画像の加工などを行うと時間がかかってしまいますが、それでも1時間もあればそれなりにクオリティの高い記事が書けるようになります。検索エンジンが評価してくれるのはテキストです。被リンクがなくてもアクセスを集められるのはテキストのパワーですので、とにかく文章を書きまくりましょう。

【実践編】記事を増やすことによるアクセスアップ効果

サイトタイトルはキーワードとブランド名を含ませる

SEOの事を考えると、サイトのタイトルタグにはキーワードを入れたい所ですが、サイト名がないサイトはブランディングの面で問題があります。Googleは、サイトのブランド力もサイト評価に加えていると言われています。

当サイトのターゲットキーワードは、「レンタルサーバー 選び方」「格安レンタルサーバー」の2つです。「レンタルサーバー比較」というキーワードの方が検索回数が多いのですが、レンタルサーバー比較はライバルサイトが多いので避けました。

  1. レンタルサーバー比較.website | ホスティングの評価と口コミ情報サイト
  2. Exciteレンタルサーバー比較 – サービスの比較&総合情報サイト
  3. レンタルサーバー比較のつぼ!無料 格安ホスティング
  4. レンタルサーバー比較 – 比較.com
  5. レンタルサーバー比較 – あなたのサイトに最適なレンタルサーバー教えます
  6. レンタルサーバー比較-比較検討する情報源
  7. 価格.com – レンタルサーバー比較 | ホスティングサービス比較
  8. レンタルサーバーを徹底比較:100社レンタルサーバー比較
  9. レンタルサーバー完全ガイド | 共用・専用・VPSホスティングを比較検索
  10. レンタルサーバー比較・口コミサイト – レンタルサーバーデータベース

これは2012年12月11日現在の「レンタルサーバー比較」というキーワードの上位10位のサイトのタイトルタグです。「レンタルサーバー比較」をタイトルタグの頭に持ってきているサイトが多いですね。

正直サイト名が前面に出ているサイトがありません・・・そもそもユニークなサイト名が無いサイトばかりですね。20位まで見てもちゃんとしたサイト名が付いているサイトはありませんでした。

完全にSEO対策のみを考えたタイトルタグということになりますが、現時点ではブランディングを意識しなくても何の問題もないということなのかもしれません。ただ、ブランド名があることは大きなメリットになります。

ブランド名がある事によるメリット

  1. ブランド名でリンクが張られる
  2. クチコミで紹介される可能性がある
  3. リピーターが再訪問しやすい

これは当サイトのサイト名である「レンサバネット」での流入数です。月に20回しか検索されていないので、まだまだブランディングができていないという形ですが、訪問別ページビューが3.8と高く、平均滞在時間も2:25と長めです。

サイト名で検索して訪問してくる人は、自分のサイトを見ることを目的にして検索している人です。こういったファンを増やすことで、自然リンクが張られることもありますし、クチコミで紹介される可能性もあります。

また、コンバージョンについても新規訪問者よりもリピーターのほうがコンバージョン率が高くなる傾向があります。新規訪問が無ければリピートもないので、新規訪問者を増やすことは大切なのですが、それと同じくらいリピーターを増やすことも大切です。

リピーターが再訪問しやすくする為にもブランド名は重要になってきます。ブラウザのお気に入りやオンラインブックマーク、RSSなどから再訪問するユーザーも多いですが、実は毎回検索で訪問してくるユーザーも多いのです。

アフィリエイト野郎は、当サイトと同じ時期に作ったのですが、こちらは、月に800回もブランド名での検索があります。ジャンルの違いによる差もありますが、明らかにアフィリエイト野郎の方が、ユーザーに好まれているサイトということなのでしょう。

※Googleアカウントでログインしているユーザーの場合、検索キーワードはnot providedになってしまいますので、実際にはもっと多くの検索回数があるかもしれません。

被リンクのアンカーテキストの自然な形とは

Googleの検索順位を上げるために重要なのが被リンクです。現在、GoogleとYahooの検索エンジンは同じですので、Yahooの検索順位を上げるためにも被リンクが重要ということになります。

被リンクとは他ドメインから張られた外部リンクのことですが、第三者が自然発生的に張ったリンクと、自分で人工的に張ったリンクでは評価が異なります。人工リンクの場合、ペナルティを受ける場合もありますので注意が必要です。

Googleがどうやって自然なリンクと人工リンクを見極めているのかはわかりませんが、人工的にリンクを張る場合、どうしてもアンカーテキストに偏りが見られたり、リンクの増え方が怪しいものになってしまいます。

人工的な臭いがする怪しいリンク

  • アンカーテキストが全て同じ
  • 単一キーワードでリンクが張られている
  • 全てのリンクにキーワードが含まれている
  • リンクの増え方が異常または一定
  • リンク元のサイトやページに多様性がない
  • サイトが更新されていないのにリンクが増えていく
  • SNSで拡散していないのにリンクが増えていく

SEOを勉強したばかりの人の場合、アンカーテキストにはキーワードを含めた方が良いと学んだと思いますが、自然に張られるリンクの場合、圧倒的にキーワードが含まれない事のほうが多いのです。

Googleに評価されるリンクにするために、なるべく人工的な臭いは消したい所ですが、人工的に自然なリンクを作り出すのは非常に難しいと思います。個人運営の非IT系の無料ブログなどのリンクの貼り方が参考になりますが、真似するのは難しいでしょう。

ではどうするのかということですが、Googleに人工リンクだとバレても良い状態にするのが一番だと思います。Googleは全ての自作自演リンクをスパム扱いしているわけではありません。ページランクを渡すことだけを目的にしたり、リンク先に誘導することだけが目的のリンクをスパムと言っているのです。

ユーザーにとって必要なリンクであれば、自分のサイトへ向けてリンクを張っても何の問題もありません。私も自分が運営するサイトに頻繁にリンクを張っていますが、それでペナルティを受けたことはありません。

リンク元とリンク先の質を上げる

リンクのアンカーテキストをどうするのかという事を考えるよりも、リンク元とリンク先のページの質を上げて、意味あるリンクを張ることが大切です。そのページを見たユーザーにとって必要なリンクであれば、Googleに評価されるリンクになるはずです。

SEOを学んでいくと、どうやってGoogleを騙して人工リンクを自然なリンクに見せるのかという考え方が芽生えてしまいますが、その考え方がペナルティを生みます。自演リンクでサイト評価を上げることは大切ですが、不自然リンク警告やペンギンアップデートによるペナルティのリスクを考えると、やるべきことは自ずと絞られてきます。

コンテンツのあるサイトを複数作り、それらのサイト同士でリンクを張り合う分には全く問題ありません。もちろんリンク評価を上げるためではなく、そのページに必要なリンクを張るようにします。それだけでも十分なアクセス数を得るだけの効果は期待できます。

アフィリエイトサイトで気になるファーストビューの広告

Googleは広告やアフィリエイト広告を嫌っているわけではありませんが、サイトが作られた目的が広告であると判断した場合、サイト評価を下げる可能性があります。

最近はブログにAdSense広告を貼るのが一般的になっていますが、AdSenseも広告です。AdSenseをやっているとAdSenseチームから、サイトの目立つ位置に大きな広告を載せるように勧められることがありますが、広告配置によってはGoogleの検索順位を下げることになるかもしれません。

パンダアップデートやページレイアウトアルゴリズム

パンダアップデートページレイアウトアルゴリズムは、低品質なページや広告中心のサイトの評価を下げるアルゴリズムです。どういったサイトが評価を下げられるのかをGoogleが発表しているわけではありませんが、ファーストビューが広告ばかりになっていると危ないと言われています。

ファーストビューとは、ユーザーがサイトに訪れた時にスクロールせずに見られる範囲の事です。海外では、Above the foldと呼ばれています。

パソコンのモニターサイズによってもファーストビューは変わってくるのですが、当サイトのファーストビューはこのようになっています。

以前は、この位置にアフィリエイト広告を沢山貼っていたのですが、パンダアップデートが導入された時にアクセス数が落ちてからは、AdSenseやアフィリエイト広告は一切貼っていません。サイドバーの上部にバナーが一つありますが、これはアフィリエイト広告を貼っているページヘの内部リンクです。

内部リンクのバナーも広告と判断される可能性はありますが、nofollowを付けていますし、これぐらいはGoogleも許してくれるでしょう。

アフィリエイト広告を貼る時に注意すること

アフィリエイトサイトは全体的に質が低い場合が多いので、Googleがアフィリエイトサイトを嫌っていると思っている人も多いのですが、コンテンツを用意して広告の貼り方を間違えなければ、アフィリエイトサイトでもちゃんと評価されます。

  1. 広告を貼るページを限定する
  2. 意味ある形で広告を貼る
  3. 広告を貼るページをnoindexにする
  4. 広告ページヘのリンクをnofollowにする

アフィリエイトで稼ぐためには広告をクリックしてもらえなければなりませんので、クリック数を増やすためにサイト全体に広告を貼ってしまう人も多いのですが、広告を貼るページを限定したほうが良いでしょう。

サイトのテンプレート部分に広告を貼る場合でも、サイドバー下部やページ下部などのあまり目立たない位置に貼ります。当サイトではサイドバーの一番下と、記事の最後に貼っています。記事の最後に貼っている広告は、iframeで読み込ませて、元のページはnoindexにしています。

iframeにしている目的は、SEOのためではなく、並べ替えを行うためのtablekitというツールがWordPressのPHPファイル上で機能しなかったため、HTMLに貼って、それをiframeで読み込んでいます。

広告ページをユーザー目線の良いページにすれば、noindexやnofollowを付ける必要はないように思いますが、広告ページをインデックスさせる必要がないので、私は念のためnoindexを挿入しています。

ドメイン移転時のSEOとペナルティ回避のためのドメイン移転

 ドメイン移転とはドメイン名を変更することです。ドメイン移転することで、旧ドメインが受けたサイト評価がリセットされてしまいます。

ドメイン名が気に入らないというような理由で、安易にドメイン移転してしまう人も多いのですが、SEOのことを考えると、今はなるべくドメイン移転しないほうが良いと思っています。

ドメイン移転した時の評価の移行方法

  1. 301リダイレクト
  2. canonical設定
  3. meta refreshによる転送
  4. 移転案内リンクの掲載
  5. Googleウェブマスターツールの移転処理

主な移転方法としてはこの4つがあります。Googleが推奨しているのは301リダイレクト+Googleウェブマスターツールの移転処理の組み合わせです。

この方法であれば旧ドメインが受けたリンク評価を、最も効率良く新ドメインに移行させることができます。301リダイレクトが利用できない場合には、canonicalやmeta refreshを使うことになります。canonicalやmeta refreshゼロ秒で、301と同等の効果が期待できると言われています。

移転案内リンクとは、旧ドメインのサイトを全ページ削除して、トップページにドメインを移転したことを伝えるリンクを張っていくことです。初心者の方が良くやる方法ですが、最近のGoogleはこの方法でもドメインが移転された事を認識するようになっています。

いつからGoogleがこのような処理をするようになっていたのかは分かりませんが、なかなか面白いと思います。

これによってウェブマスターツールのサイトへのリンクに、旧ドメインサイトが受けたリンクが表示されるのですが、それでリンク評価が移っているのかは分かりません。単にリンクの表示が移っただけということも考えられます。

無料ブログや無料ホームページなどで、metaが修正できない場合には、最終手段としてこの方法を使っても良いと思いますが、基本的には通常の移転方法を実行したほうが良いでしょう。

ペナルティ回避のためのドメイン移転方法

ペナルティを受けたドメインを移転する為に、ドメイン移転案内の方法が使えるという話もありますが、最近のGoogleは、リンクが張られていなくてもペナルティ回避のためのドメイン移転と判断した場合には、新ドメインにペナルティを与えるような動きもありますので、個人的にはペナルティ回避の為にドメイン移転するのはやめたほうが良いと思っています。

どうしてもペナルティを解除することが出来ないという場合には、一度旧ドメインのページを全て削除し、インデックス削除されたあとで、新ドメインにページを移行して、旧ドメインからは一切リンクを張らずにインデックスされるのを待ったほうが良いと思います。

その後、新ドメインに新たにリンクを張る場合でも、旧ドメインで使ったリンク元サイトは使わないようにします。新ドメインのサイトをリニューアルしたり修正するのが一番なのですが、リニューアルが難しい場合には、こういった方法が良いかもしれません。

ただ、どのように移転してもGoogleにはバレるという話もありますので、あまり期待せずにやるのが良いと思います。何年前に削除したサイトでもその記録はGoogleのデータベースに残っています。過去コンテンツの使い回しは特に問題ありませんが、ペナルティを受けたサイトのコンテンツは使い回さないほうが良いでしょう。

上手くいかないことを前提に、試しにペナルティ回避のためのドメイン移転を実施するのは構いませんが、大事なドメインや企業サイトドメインがペナルティを受けた場合は、まずはそのドメインでペナルティを回避することが先決です。

»WordPressサイトのドメイン移転+サーバ移転の方法

SEOの為の間違ったサイト更新と更新頻度を上げるメリット

SEOにおいて「更新頻度」というのは良く取り上げられる事です。「更新頻度を上げると検索順位が上がる」という話を聞いたことがある人も多いと思います。

個人的には、更新頻度を上げた所でGoogleの評価は変わらないと思うのですが、ブログについては、更新されてこそ価値があるとも言えるので、更新頻度がブログ評価の一つになっている気がしています。

»ブログは更新頻度を上げる事でSEO対策・アクセスアップになる

ブログだけではなく普通のサイトでも更新されている事で、しっかり管理されているサイトと判断されますので、サイトの信頼度は上がるかもしれません。ただ、更新を勘違いしている人も多いと思います。

間違ったサイトの更新

  1. 更新日付を最新にする
  2. 修正せずにHTMLファイルをアップする
  3. Twitterウィジェットを導入する
  4. タイトルタグを修正する
  5. ページ内の数文字だけ修正する

こういったものは更新とは言いませんし、検索エンジンも更新されたとは判断しないでしょう。これらの行為がマイナスに働くことは無いと思いますが、プラスになることもないでしょう。やるだけ無駄ということですね。

サイトの更新は検索エンジンのために行うものではなく、訪問してくれるユーザーのために行うものです。新たに伝えることが無いのであれば更新する必要はありません。

また、完成されたサイトで、常に新しい情報が無いようなジャンルであれば、1年以上更新されていなくても特に問題はないでしょう。古くなった情報が放置されている事は問題がありますが、古いページでも価値ある情報がそこにあれば、自然リンクは公開から時間が経っても増えていくはずです。

更新することのメリット

  1. サイトボリュームが増える
  2. クローラーの訪問頻度が上がる
  3. インデックス速度が上がる
  4. リピーターが増える

SEOの為に更新する必要はないのですが、サイトを更新することで色々なメリットがあります。特に大きいのがサイトボリュームアップです。あくまでページを追加する更新の場合ですが、ページ数が増えることで、ロングテールSEO対策になり、アクセスアップが期待できます。

検索エンジンのクローラーの訪問頻度が上がったり、インデックス速度が上がるというのもSEOの一つとも言えるのですが、更新頻度を上げたことで結果的にSEOにも役に立ったということです。

また、頻繁に更新していることで、何度もサイトに訪問してくれるリピーターが増える可能性があります。更新が止まっているサイトの場合、いつ行っても情報が変わっていないため、気になる情報を見終えたら、ユーザーはもうサイトには来てくれません。

しかし、定期的に更新していれば、更新されたページを見に来てくれます。リピーター(ファン)が増えることで、他の人に紹介してくれたり、ブログなどからリンクを張ってくれる可能性もありますので、アクセスアップには欠かせない要素です。

サブコンテンツ

このページの先頭へ