サイト完成後1~3年ぐらいたったサイトのアクセス数と更新の重要性

2011年からサイト作りを始めて、現時点で20サイトほど運営していますが、20サイト全ての更新を続けるのは大変なので、完成したサイトは更新がストップします。

メインサイトは毎日のように更新しますが、週一更新や月一更新、不定期更新、全く更新していないサイトなど様々です。

複数サイトを運営している人はだいたいこんな感じになっていると思います。新しいサイトを作り始めると、既存サイトの更新頻度は落ちます。自分で更新せずに、ランサーズやクラウドワークスなどで記事を買うこともできますが、私は基本的に全て自分で記事を書いています。

それが良いのか悪いのかはわかりませんが、ポリシーとして自分が納得いくサイトを作りたいので、どうしても自分で作ることになります。最近はスタッフが記事を書くこともありますが、全てチェックして情報が足りなければ追加してもらい、修正箇所があれば直してもらいます。

スタッフが作るサイトはスタッフのみが記事を書いています。自分で作るサイトは全て自分で記事を書きます。

そんな感じでやってきましたが、新サイトを作るのはしばらくやめて、これからは既存サイトの修正に入ります。過去に作ったサイトが死なないようにするためには、数年おきに修正や改修が必要になります。

修正を加えているサイト

自動車保険のサイト

はじめて自動車保険

2年半ほど前に作ったサイトです。

このサイトには自動車保険や交通事故に関するデータがあり、情報が古くなっているものがあるので、最新のデータに更新しました。

これにより自然リンクが増えたり検索エンジンの評価が上がれば、アクセスアップが期待できます。

SnapCrab_NoName_2015-7-18_18-33-25_No-00

直近一ヶ月の検索エンジン経由のアクセス数です。1日6000~7000のアクセス数です。

このサイトはあまり力を入れなかったサイトで、ページ数は400ページほどですが、思ったよりもアクセス数が増えました。

SnapCrab_NoName_2015-7-18_18-35-13_No-00

1年以上新しい記事を追加していませんが、アクセス数は増えています。ここ数ヶ月は横ばいですね。

FXのサイト

FXちゃお

FXのサイトです。1年半ほど前に完成したサイトです。完成後も少しずつ記事を追加していましたが、ここ数ヶ月は更新していません。

このサイトについては、完成してからまだ日が経っておらず、ここで改修を始めるともったいないので、記事の中で使っている画像やイラストのみを修正することにしました。

それで検索エンジンの評価が上がることはありませんが、ユーザーの評価は上がるので、自然リンクGETに繋がるかもしれません。

同時に誤字脱字のチェックや、おかしなところや気になったところは直していきます。

SnapCrab_NoName_2015-7-18_18-39-5_No-00

直近1ヶ月のアクセス数です。1日3000~4000ぐらいです。

FXのアクセス数は為替相場の影響を受けるため、円高になるとアクセスが減り、円安になるとアクセスが増えます。あと、相場が急変した時も増えます。

FXは円高でも円安でも稼げるので、相場とアクセス数は関係ないはずですが、日本人は買いが好きなので、円安の時の方がFXに注目が集まります。

SnapCrab_NoName_2015-7-18_18-37-7_No-00

これは1年間のアクセス数の推移です。FXジャンルは始めの1年ぐらいアクセス数が全然増えませんでしたが、徐々に増えてきました。1000ページ作ったので増えてくれないと困りますが、今まで最も苦労したサイトです。

2014年10月頃からアクセス数が増え、直近では5月ごろから増えています。

SnapCrab_NoName_2015-7-18_18-46-11_No-00

サイト評価が上がったことでアクセス数が増えたと思いたいところですが、ドル円が円安方向に進む時とアクセス数が増える時が同じなので、これは単純にFX関連ワードの検索数が増えたことによる影響のような気がします。

キャッシングのサイト

はじめてキャッシング

キャッシングのサイトです。はじめてレスポンシブデザインで作ったサイトで、シンプルなデザインですが、パソコンでもスマホでも見やすくなっていると思います。

キャッシングも競合が多くアクセス数を集めるのが比較的難しいジャンルですが、完成から半年ほどしてアクセス数も増えてきました。

このサイトは最近まで少しずつ記事を追加していましたが、更新をやめました。

このサイトも大幅な改修はしませんが、質が低いページも多いので、文章や画像の追加など細かい修正をしていくつもりです。

SnapCrab_NoName_2015-7-18_18-38-49_No-00

直近1ヶ月のアクセス数です。1日2000~3000ぐらいです。

記事を追加してもアクセスが増えない状態になってしまいました。

SnapCrab_NoName_2015-7-18_18-37-39_No-00

 5月以降はアクセス数が減っています。競合サイトが多く次から次へと新しいサイトが出てくるので、記事を追加してもアクセスを維持できなくなっています。

もうこのサイトはいいかなという感じになっていて、不定期更新になるのでアクセス数は右肩下がりになると思いますが、なんとか踏ん張りたい所です。

葬儀のサイト

葬儀案内人

今作っているサイトです。大部分の記事は追加できたので、あとはもう少し記事を足してトップページを作って完成です。

これから完成するサイトなので、まだ更新を考えていませんが、このサイトはテキトーに作ったページも多いので、少しずつ質を上げていこうと思っています。

SnapCrab_NoName_2015-7-18_18-54-42_No-00

1日200~300のアクセス数です。全然アクセスが増えません。

競合のアフィリエイトサイトはあまり多くありませんが、葬儀社のサイトや葬儀社紹介企業のサイトで強い所が多いので、意外とアクセスを集めるのは難しいです。

SnapCrab_NoName_2015-7-18_18-55-7_No-00

このサイトは着手から1年かかって完成したサイトです。しばらく放置していた期間が2回ほどあります。

直近2ヶ月ぐらいで150記事ほど追加したので、これからアクセスが増えてくれるのを期待しています。

まとめ

しっかりしたサイトを作ると更新が止まっても1~2年はアクセスが増えることが多いですが、それ以降も右肩上がりか横ばいにするためには、継続的に被リンクが増えないと難しいです。

継続的に自然リンクを増やすためには、数年おきに情報を更新する必要があります。情報がすぐに古くならないジャンルもありますが、デザイン面も含めサイトの評価を維持するのは簡単ではありません。

サイト数が増えると更新が難しくなっていくこともあり、これからは新サイトをどんどん増やすよりは、既存サイトの評価を落とさないようにしていこうと思っています。

ページ内の特定の場所へジャンプさせるリンクの張り方

リンクを張るためにはaタグを使いますが、同じページ内の特定の位置にジャンプさせたり、異なるページの特定の位置にジャンプさせる方法がわからないという方も多いと思います。

Web制作者であれば当然知っていることですが、初心者の方から質問を頂く事が多いテクニックの一つです。テクニックというほど難しくなく、すぐにマスターできますので、知らなかった方はこれを機に覚えてみましょう。

縦に長いページの場合、最後まで読んで貰えない事も多いですが、ページの冒頭に目次を付けてページ内リンクを張ることで、その人が気になった項目だけでも見て貰える可能性がでてきます。

この目次がまさにページ内ジャンプになっています。同じページ内のジャンプではなく、他ページの特定の場所へ飛ばすこともできます。ページ下部に「ページトップへ」というリンクを張り、ヘッダーに飛ばすのも同じ手法を使ったものです。

ページ内ジャンプのやり方

ページ内ジャンプのやり方は、飛ばす先の目印となるアンカーを作り、リンクにそのアンカー名を追加するだけです。

アンカーを作る

アンカーの作り方は2つありますので、好きな方を選んでください。

<a name=”アンカー名”>文字</a>
<要素 id=”アンカー名”>

要素というのは、ページ内の見出しになるh2やh3が使われることが多いです。具体的に書くと以下のようになります。

<h3><a name=”a01″>見出し</a></h3>
<h3 id=”a01″>見出し</h3>

私はidを指定する方法を良く使います。

アンカー名はそのページ内でユニークであれば何でも良いのですが、「a01」や「a1」といったようにa+数字を使っている人が多いようです。ページ内に同じアンカー名が無ければ何でもOKです。

アンカーへリンクを張る

ジャンプ先のアンカーができたら、次にそのアンカーへ飛ばすリンクを張ります。

<a href=”#アンカー名”>文字</a>

リンク先として「#+アンカー名」を指定するだけなので簡単ですね。イメージリンクのaタグにアンカーを指定しても大丈夫です。

<a href=”#a01″>見出し</a>

具体的にはこのようになります。

<a href=”http://rensabanet.com/blog/hp/12979/#a01″>見出し</a>

このように絶対URLの後にアンカー名を付けることで、特定のページの特定の場所に飛ばすことができます。私は同ページ内でも絶対URLでリンクを張るようにしています。

ブログなどでトップページに複数の記事を全文表示しているような場合、リンクの指定方法によっては、同じページ内に同じアンカー名が複数あるような状態になりますので注意しましょう。

目次をデザインする

文章の途中にあるテキストリンクで、ページ内の特定の場所へジャンプさせる場合は、上記で説明したやり方で普通にジャンプさせれば良いのですが、ページ内の目次として使う場合には、目次部分をデザインした方が良いかもしれません。

リンクをリストにしてただ並べるだけでも問題ありませんが、デザインすると一気にクオリティが上がったように見えます。

»記事内の目次の作り方とデザイン

アンカー名の指定やリンクの張り方までは同じ手順ですが、最後に目次のリストをdivで囲いそのdivに対してCSSの背景画像を設定しデザインしています。

リスト自体にclassを振ってデザインしても良いですし、liは特に何もしなくてもOKです。やり方はいくつかありますので、自分のやりやすい方法でやってみましょう。目次に背景画像を設定するだけで、だいぶクオリティが上がったように見えます。

ページ内リンクをスクロールで飛ばす

ページ内リンクをクリックした時に、ジャンプではなくスクロールする形にしたい場合は、jQueryを使うのが一般的です。

私自身、jQueryは良く分かっていないのですが、興味がある方は試してみてください。

CSSのz-indexの使い方

CSSの「z-index」は、重なりを変更するためのプロパティです。Y軸は縦方向、X軸は横方向ですが、Z軸は重なりを表しています。

<div class=”kasanari”>
<div class=”blue”>青</div>
<div class=”purple”>紫</div>
<div class=”green”>緑</div>
</div>

例えばこのようなHTMLがあるとします。

positionプロパティなどで要素を動かした場合、要素同士を重ねることができます。HTMLでは後から書いたものが上に来ますので、そのままでは「青⇒紫⇒緑」の順に重なっていきますが、z-indexを使うことで、この重なりの関係を変えることができます。

.kasanari {
    position: relative;
    z-index: 0;
    height: 250px;
    width: 500px;
}
.blue{
   position: absolute;
    top: 50px;
    left: 50px;
    z-index: 3;
    height: 120px;
    width: 200px;
}
.purple{
    position: absolute;
    top: 75px;
    left: 130px;
    z-index: 2;
    height: 120px;
    width: 200px;
}  
.green{
    position: absolute;
    top: 100px;
    left: 200px;
    z-index: 1;
    height: 120px;
    width: 200px;
}

例えばこのようにすることで、それぞれの位置は変わりませんが、重なりが変わり青が一番上に来ました。それぞれの要素に背景画像を設定していた場合、z-indexによって見える部分が全然変わってくることになります。

それぞれの要素をリンクにした場合、青は全ての部分がクリック出来ますが、紫と緑のクリックできる範囲は網目がかかっている部分になります。

今回は3つの要素で解説しましたが、5つでも8つでも好きなだけ要素を重ねて順番を変えることもできます。

z-indexのルール

  • positionプロパティで、relative、absolute、fixedのいずれかを指定する
  • z-indexの値は、「整数」または「auto」
  • 整数の値が大きいほど上に行く

position: staticではz-indexが使えません。positionプロパティで relative、absolute、fixedのいずれかを指定すると、z-indexは自動的にautoが指定された状態になります。

autoを指定すると、プロパティの指定がない場合と同じように、通常の順番の重なりになります。auto同士の重なりは、後に書いた要素が上に表示されます。基本的には整数を指定すると覚えておきましょう。-1や-2といった負の値を使うこともできます。

画像置き換えにz-indexが使える?

CSSの画像置き換えでテキストリンクを非表示にしたり、外に飛ばしたりする手法があります。「display:none」や「text-indent:-9999px;」が良く使われますが、これをz-indexでも実現できそうな気がしますよね。

しかし、z-indexでテキストを下に回り込ませた場合、リンク(aタグ)自体も下に回りこんでしまうため、その部分をクリックできなくなってしまいます。display:noneはaタグをそのままに、テキストのみを非表示にすることができますが、z-indexでは全ての要素が下に行ってしまうためクリックできないのです。

なお、画像置き換えをする際に、「display:none」と「text-indent:-9999px;」のどちらが良いのかということですが、どちらでも大丈夫です。隠しテキストは検索エンジンからペナルティを受けるという話もありますが、正しい使い方をしている限りペナルティを受けることもありません。(text-indent-9999pxによる画像置換えと隠しテキスト

CSSのfloatプロパティの基本

CSSのfloatプロパティは、初心者の方が覚えるのに苦労する部分かもしれません。仕組みがわかってしまえば難しいことはないのですが、floatを使うことでレイアウトが崩れてしまったり、親要素の背景が無くなってしまったりと問題が発生しやすい部分です。

floatプロパティはその要素を左右どちらかに寄せたり、画像に文章を回り込ませる時などに使用します。CSSでWebサイトを作る時には良く使うプロパティですので必ず覚えておきましょう。

floatの基本

image02

グレー背景の部分が親要素でその上にAとBのBoxがあります。Aは「float:left;」Bは「float:right;」を指定しています。「float:left;」は左寄せ、「float:right;」は右寄せになります。

.box_a {
    width: 200px;
    height: 100px;
    float: left;
    }  
.box_b {
    width: 200px;
    height: 100px;
    float: right;
    }

実際にCSSを書くとこのようになります。aとbはどちらを先に書いてもOKです。

image01

AもBも「float:left;」を指定した場合はこのようになります。

image03

HTMLはそのままでも、AとBのfloatを逆にするとAとBが入れ替わります。

今回は2つのBoxしかありませんが、ABC3つのBoxに対して「float:left;」を指定することもできます。

ABCの3つのBoxを横に並べ、それぞれの余白を均等にしたい場合は、AとBを「float:left;」にして、Cを「float:right;」にして、AとBに対して、「margin-right」で余白を取るなどの方法を使います。

親要素の高さを指定しない場合

image04

子要素となるABの高さが一定ではなく、グレー背景部分の親要素の高さを指定できない場合、このように親要素の高さがなくなり背景が表示されなくなってしまいます。

floatというのは左右に寄せているだけではなく、浮かせて寄せているイメージです。内包する子要素にfloatがかかると内包する要素が浮いている状態になり、親要素の高さが無くなります。

対処法としては、親要素に高さを指定してたり、親要素にもfloatを指定することで高さがある状態になりますが、floatを解除する事も可能です。

»floatを解除する方法のまとめ

やり方は色々とありますので、自分のやりやすい方法を選択してください。ちなみに私は、floatを解除せずに親要素にもfloatをかけてしまいます。

画像に文章を回りこませる方法

image04

こんな感じに、画像に文章を回り込ませる時にもfloatを使います。

<div class=”gazo”>
<p><img src=”../img/01.jpg” width=”200″ height=”150″>今日は4/1なのでエイプリルフールということで・・・・</p>
</div>

このようなHTMLになっている場合、imgに対してfloatをかければOKです。

.gazo img{
    float: left;
    }

これだけで、画像の後に書いた文章が画像の横に回り込むようになります。floatをrightにすれば文章は左に回り込みます。

floatをかけることで、その前後の関係のない要素が回りこんできてしまうことがありますが、回りこませたくない要素がある場合には、その下の要素に対して「clear: both;」を指定するのが便利です。

h3{
    clear: both;
    }

例えばこのように書けば、h3は「width」を指定しなくても他の要素に回り込みません。「clear: both;」もfloatと共に良く使うプロパティですので覚えておきましょう。

overflow: auto;でBOXにスクロールバーを付ける

トップページに新着情報を載せているサイトも多いですが、新着情報は数が増えてくるので載せる数を制限するか古い情報は見えないようにする対策が必要です。

10個ぐらいであれば全て見えるようにしておいても良いと思いますが、あまり場所を取りたくないという場合には、CSSの「overflow: auto;」が便利です。

image01

これは、当サイトの新着情報ですが、横にスクロールバーが付いているのが分かると思います。今回新着情報を5個表示にしていますが、20個でも30個でも高さが固定され、見えない部分はスクロールして確認できるようになっています。

SEOを目的としてこのようなスクロールBOXを作る人もいるのですが、HTMLソースには表示されるのに、ユーザーには見えない状態は、検索エンジンから嫌われる可能性があります。以前、このような形でリンクを無数に掲載しユーザーにはほとんど見えないようにしていたサイトがペナルティを受けた事があります。

SEO目的のリンクボックスとして使うのはやめた方が良いと思いますが、あくまでデザイン的に縦長になるのが嫌だという場合に一部を隠すのは問題ありません。私も色々なサイトで使用しています。

スクロールBOXの作り方

<dl class=”box”>
<dt>2013/03/27</dt>
<dd><a href=””>記事タイトル</a></dd>
<dt>2013/03/25</dt>
<dd><a href=””>記事タイトル</a></dd>
<dt>2013/03/18</dt>
<dd><a href=””>記事タイトル</a></dd>
<dt>2013/03/11</dt>
<dd><a href=””>記事タイトル</a></dd>
<dt>2013/03/04</dt>
<dd><a href=””>記事タイトル</a></dd>
</dl>

これが先ほど紹介した新着情報のHTMLです。dlで作っていますがulで作っても良いと思います。自分のやりやすい方法でやってください。

dl.box{
    height: 120px;
    overflow: auto;
}
dl.box dt{
    float: left;
    width: 120px;
}
dl.box dd{
    margin: 0 0 10px 0;
    padding: 0 0 10px 120px;
    border-bottom: 1px dotted #aaa;
}

CSSはこのようになっています。

スクロールBOXにする為のポイントは、BOXの外枠になる部分に高さを設定して「overflow: auto;」を指定する所です。ulで作る場合にはulに対して「overflow: auto;」を指定します。また、大外にdivを作りそのdivに対して「overflow: auto;」を指定しても構いません。

外枠の高さはいくつでも構いませんが、ユーザーがスクロールしなくてもある程度の情報が見える状態にしてください。

「overflow: auto;」は色々な場面で使うことができるので、憶えておいた方が良いCSSの一つです。

<dl class=”box”>
<?php $posts = get_posts(‘numberposts=5’); global $post;?>
<?php foreach($posts as $post): ?>
<dt><?php the_time(‘Y/m/d’); ?></dt>
<dd><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a></dd>
<?php endforeach; ?>
</dl>

ちなみにWordPressで新着情報を載せるためのPHPはこのようになります。「numberposts=5」という部分が新着記事の掲載数です。

CSSの疑似クラスの使い方

CSSには擬似クラスと呼ばれるセレクタが用意されています。擬似クラスというのは、閲覧者のアクションに合わせてスタイルを適用させる仕組みのことです。

サンプル

このサンプルというリンクにマウスを載せると文字の色が変わり、クリックすると訪問済みということで色が変わります。この動きのことを擬似クラスと呼びます。

リンクで使われる擬似クラスは以下の4つです。

aタグの擬似クラス

a:link { color: #00f; } 未訪問リンク
a:visited { color: #90c; } 訪問済みリンク
a:hover { color: #f90; } ホバー時のリンク
a:active { color: #ff0; } 選択中のリンク

必ず全ての擬似クラスを指定しなければ行けないわけではありませんが、指定する場合はこの順番で記述します。「:hover」はaタグで良く使われますが、aタグ以外にも使うことができます。

この枠にマウスを載せると背景色が変わる。

このようにaタグ以外の要素に「:hover」を指定することもできます。

.kono:hover { background-color: #d9ecff; }

classやidの後に「:hover」を付けるだけです。今回は背景色を変えてみましたが、もちろん他のプロパティにしてもOKです。

他の擬似クラス

:focus テキスト入力のフォーカス
:first-child 親要素の最初の子要素

先ほどのaタグの擬似クラスとこの2つがCSS2でサポートされていた擬似クラスです。

CSS3から新たにサポートされた擬似クラスがありますが、数が多く初心者の方は使う機会が少ないと思いますので割愛します。以下のサイトで解説されていますので、興味のある方はそちらをご覧ください。

個人的にCSS3については、まだ必要性を感じておらず擬似クラスについても、始めに紹介したaタグで使う擬似グラスぐらいしか使っていません。CSSを憶えたばかりの人はとりあえずaタグ用の擬似クラスが頭に入っていれば十分だと思います。

CSSのclassとidの基本ルール・id名とclass名の付け方

特定のHTMLタグに対してCSSを適用させたい場合には、そのタグにclass名やid名を付けます。

p {
    line-height: 20px;
    }

たとえばこのように書いた場合、サイト内の全てのpタグに対して行間が指定されますが、特定のpタグのみ行間を指定したい場合には以下のように記述します。

p.gyo {
    line-height: 20px;
    }

これで、「gyoというクラス名が付いたpタグ」に対してのみCSSが適用されます。「.gyo」という記述にしてもOKです。この場合、pタグに関わらず「.gyo」というクラス名が付いたタグにCSSが適用されます。

classとidとは

タグにはclassとidを使うことができます。どちらを使っても良いですし、両方使うこともできます。

<p class=”gyo1″>pタグにクラスを指定</p>
<p id=”gyo2″>pタグにIDを指定</p>
<p class=”gyo1″ id=”gyo2″>pタグにクラスとIDを指定</p>
<p class=”gyo1 mainp”>pタグに複数のクラスを指定</p>

このように書くことができます。

基本ルール

  1. class名やid名の頭文字は英字
  2. ページ内に同じid名は1回しか使えない
  3. ページ内に同じclass名は何度でも使える
  4. classは1つのタグに複数指定できる
  5. classとidを同時に指定できる

初心者がやってしまいがちなのが、class名やid名を数字で始まる名前にしてしまうことですが、頭文字は英字にしなければなりません。英字+数字の組み合わせはOKです。また、ハイフンやアンダースコアを使うこともできます。

1つのページ内で、同じidを複数指定しても問題が発生しないことも多いですが、基本ルールとしては、id名はそのページ内でユニークな状態にします。class名は同じ名前を何度も使うことができます。

class名とid名の付け方

全てidで指定しても良いですし、全てclassで指定しても良いのですが、色々なサイトを見ていると、サイトのテンプレートに当たる部分はidで、他の部分はclassで指定する事が多いです。当サイトもそのようになっています。

<div id=”wrapper”>
<div id=”head”></div>
<div id=”main”>
<p class=”red”></p>
<ul class=”mokuji”>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id=”side”>
</div>
</div>

こんな感じになります。

class名やid名はどういった名前をつけても構いませんが、要素ごとに良く使われている名前がありますので、他のサイトを参考にしても良いと思います。

»コーディングの際のclass名、id名で悩んだ時に参考にしたい記事

私の場合、超適当に名前を振ってしまうので、他の人が見たら名前付けのルールが良くわからないと思いますが、基本的に自分しか見ないのであまり気にしていません。ホームページ制作会社などであれば、名前付けに一定のルールが必要だと思いますが、個人レベルであれば気にする必要はないと思います。

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

CSSを使うことでサイトデザインや修正作業が非常に楽になりました。HTMLを修正する必要はなく、たとえばh1に対して外部CSSでデザインしていた場合、CSSの一部を修正するだけで全てのページのh1のデザインを変えることができます。

ただ、それはCSSを外部参照にしているケースで、内部参照やインラインにしている場合、一つ一つ修正して行かなければなりません。どの書き方でも構わないのですが、個人的には後で修正する時の事を考えて外部参照にしておいた方が良いと思っています。

  • 外部参照・・・CSSファイルを外部化
  • 内部参照・・・CSSをhead内に記述
  • インライン・・・CSSをタグ内に記述

簡単に説明するとそれぞれの違いはこのようになります。WordPressのテーマは基本的にはCSSが外部ファイル化されているはずです。

なお、外部参照、内部参照、インラインを全て使うことも可能で、CSSは後から記述された物が優先される性質があるため、「インライン>内部参照>外部参照」という図式になります。

外部参照のやり方

外部参照では、CSSファイルを作成し、そのファイルにCSSを記述し、そのCSSを参照するための記述を各ページのhead内に行います。

CSSファイルサンプル

冒頭に文字エンコードを記述し、続けて主要部分のCSSを書いていきます。1つのCSSファイルに全て書いても良いですし、複数のCSSを用意しても構いません。

<link rel=”stylesheet” href=”URL/style.css” type=”text/css” />

CSSファイルを作成したら、そのファイルを参照するために、このようにhead内に記述します。hrefの部分にCSSファイルのURLを記述します。

複数のCSSファイルがある場合は、全てのCSSファイル用のタグを追加しても良いのですが、CSSファイル参照用のCSSファイルを作成する方法もあります。

CSSファイルサンプル

@import “cssファイル名”;

このような形で複数のCSSを記述するCSSファイルを用意します。

そして、CSSをまとめたCSSファイルのURLをページのheadに記述すれば、全てのCSSファイルが適用された状態になります。このやり方のメリットは、たとえばデザインレイアウトに崩れが出た時に、特定のCSSファイルだけ適用させないでどうなるのかチェックする事ができます。

内部参照のやり方

内部参照では、そのページに適用するCSSをhead内に記述します。CSSは、当然そのページにしか反映されません。

<style type=”text/css”>
p {
   font-size: 20px;
  color: red
}
a:link {
    color: #666;
    }
</style>

このように、styleタグの中に指定するCSSを書いていきます。ページごとに異なるCSS設定を行うことができますが、修正はページごとに行うので手間になります。WordPressサイトの場合には、single.phpとpage.phpで分けて書くということも可能です。

インラインのやり方

インラインはCSSが外部ファイル化できない場合や、headが変更できない無料ブログなどのデザイン修正でも利用できる方法です。

<p style=”color:red;”>ここの文字が赤くなる</p>
<p style=”font-size:18px;color:#f00;”>フォントサイズが18pxで赤文字で書く</p>

このように、一つ一つのタグに対してCSSを指定していきます。作業としてはかなり面倒で修正する場合でも一つ一つ修正する必要があり、なおかつHTMLが汚くなりますので、あまりオススメの方法ではありませんが、他の方法が選択できない場合には、インラインで書くしかありません。

UTF-8、Shift_JIS、EUC-JPなどの文字コードの指定

HTML文書を作成する際に、その文書がどの文字コードで書かれているのかという事を宣言する必要があります。文字コードを宣言することで、ブラウザはその文字コードで書かれた文章であることを理解します。

文字コードを指定しなくても多くの場合、問題は発生しませんが、ブラウザによっては文字化けを起こしてしまう可能性があります。また、Googleのクローラーがアクセスする際にも文字化けする可能性があり、仮に文字化けしたサイトとして捉えられると、そのサイトはまともな評価を受けることができません。

image02

当サイトの文字コードはUTF-8になっており、ブラウザがUTF-8と認識することで、正しく表示されます。

image01

これが例えばShift_JISと認識されてしまうと、このように文字化けすることになります。日本語部分の文字を読むことができません。こういった自体を避けるために、HTMLの始めに文字コードを宣言します。

文字化けした場合でもブラウザの文字コード選択で、正しい文字コードに切り替えれば文字化けが直る事が多いですが、ページを読み込む度に文字コードを変更しなければならず、パソコン初心者は文字エンコードを変更する方法を知りませんので、サイト制作者側で対応するのが基本です。

文字コードの種類

文字コードは以下の4つを指定することができます。

UTF-8

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

Shift_JIS

<meta http-equiv=”Content-Type” content=”text/html; charset=shift_jis”>

EUC-JP

<meta http-equiv=”Content-Type” content=”text/html; charset=euc-jp”>

JIS

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-2022-jp”>

他にも文字コードはありますが、日本語サイトで良く使われている文字コードはこの4種類です。

現在はUTF-8が主流

以前は、Shift_JISが良く使われており、その後EUC-JPが見られるようになり、現在はUTF-8が主流になっています。世界的にもUTF-8が主流でWordPressもUTF-8になっています。

これから作るサイトについては、基本的にはUTF-8で作るのが良いと思いますが、サイト内でフリーCGIなどを使う際に、文字コードがShift_JISやEUC-JPでないと動かなかったり、文字化けしてしまう時があります。

UTF-8で機能するシステムを使うのがベストですが、代替品がない場合には、Shift_JISやEUC-JPを使っても良いでしょう。サイト内で異なる文字コード指定が混在していても特に問題はありませんので、例えば問い合わせフォームで使うCGIがShift_JISという場合には、そのページのみShift_JISを指定して他のページはUTF-8という形でも構いません。

文字コードはSEO対策に影響する?

UTF-8が使用されるようになった頃に、文字コードをUTF-8にするとGoogleやYahooからの評価が上がるという事を言っていた人がいましたが、文字コードによってサイト評価が変わることはありません。

冒頭で述べたように、検索エンジンのクローラーがサイトにアクセスした時に文字化けしていると、まともにサイト評価がされない事になりますが、クローラーが文字を読める状態であれば、どの文字コードにしてもOKです。

image03

ちなみにクローラーがそのサイトをどのように見ているのかというのは、GoogleウェブマスターツールのFetch as Googleで確認することができます。

ブラウザで見た時に問題がなくてもFetch as Googleで文字化けしていれば、そのサイトは文字化けした状態で評価されているという異なります。検索順位が上がらない原因が文字化けの可能性もありますので注意しましょう。

WordPressが高速化するという噂のwpXサーバーを使ってみた

エックスサーバーが、WordPressサイトの高速化に特化したサーバーを開始したので試しに使って見ることにしました。

wpX – WordPress専用の超高速レンタルサーバー
image05

先に仕様などの話をすると、独自の高速化システムと高性能サーバーで高速化を実現しています。

料金はエックスサーバーと同じですが、色々と制限があります。ドメインの追加は10個まで出て、1ドメイン1WordPress、1WordPressごとにMySQLの容量が300Mまでとなっています。

なお、FTPでアクセスできるのは「/wp-content」以降となっており、上位階層にアクセスすることはできません。当然wp-config.phpにもアクセスできません。.htaccessは管理画面から編集できるようになっていますが、ルートディレクトリへのファイルのアップはできません。robots.txtは・・・

ただ、サポートに質問した所、ルートディレクトリへのファイルアップについては検討するとのことでした。なお、データベースへのアクセス権がなくphpMyAdminも使えません。

wpXサーバーの速度を体感する

14日間の無料期間で利用したため、現在は見ることができませんが、WPSEOブログのデータで試してみました。

image02

このドメインでwpXサーバーを使っていました。

プラグインも含めほぼ同じ環境を再現していますが、細かいチェックはしていませんので、一部問題が発生しているかもしれません。

なお、wpXサーバーではキャッシュ系のプラグインが上手く動かなかったので使用していません。ちなみに、wpXでは、wpX Cache Controllerという専用プラグインが用意されています。

体感的にかなり早くなったような印象があり、特に管理画面内の遷移は、今までのサーバーでは体感したことがないほどの早さなのですが、速度チェックツールで調べてみると・・・

GTmetrixで比較

GTmetrix

image01

これがエックスサーバーで運営しているサイトです。

image02

これがwpXで運営しているサイトです。あれ?遅くなってますね・・・

画像が多い他のページで試してみましょう。

image03

こちらがエックスサーバー。

image04

う~ん。こちらもほぼ差はありません。

wpXの方はキャッシュ系プラグインを入れていませんので、それが影響しているのかもしれません。インストールできるのかもしれませんが、私の環境では、キャッシュプラグインを入れると画面が真っ白になってしまいました。

pingdomで比較

pingdom

image09

これがエックスサーバー。

image08

これがwpX。

う~む。多少早くなっていますが、体感とはかなり差を感じます。

WebWaitで比較

WebWait

image07

左がエックスサーバーで、右がwpXです。こちらも多少早くなっています。

テーマを変更してチェック

wpXの方だけテーマをTwenty Twelvにして再度チェックして見ることにしました。

image01

トップページです。10記事を全文表示にしています。

image02

個別記事です。遅いですね・・・

プラグインを全て外して試してみます。

image03

トップページは、ほぼ変わりません。

image04

個別記事は少し早くなりました。

まとめ

データベースをインポートするのに手こずり一度諦めたのですが、なんとかインポートすることができました。wpXではwp-config.phpファイルをいじることができません。接頭辞を「wp_」以外にしているサイトを移転する場合には、インポートするsqlファイルを「wp_」に変更しておく必要があります。

どんだけ早くなるのか気になっていたので、超高速が体感できて良かったのですが、速度チェックツールの数値としては???な結果になってしまいました。

早くなっているのが気のせいな可能性もありますが、サイトによっても変わってくると思いますので、気になる方は14日間の無料お試し期間で試してみてください。

»wpXサーバーの使い方はこちら

私が、今後wpXサーバーを使うのかという点ですが、今の所使う予定はありません。速度が早くなるとしても、エックスサーバーと同料金で色々と制限される事を考えるとエックスサーバーのままで良いかなという気がしています。

本当にWordPressを高速化させたいのであれば共用サーバー以外で考える必要があるのかなと思っています。

HTMLとXHTMLの違いとDOCTYPE宣言

ホームページを作るためにはHTMLを理解しなければなりませんが、正直しっかり憶えてなくても自分のサイトは作れます。タグ打ちで作る場合は別ですが、多くの人が一般的な部分のコードは既存サイトのコピペで対応しています。

いきなり難しいことを憶えようとしても脳が拒否反応を起こし、勉強する気をなくしてしまいますので、HTMLの基礎の基礎を学んだら後は実際にサイトを作りながら、わからないことを調べていく感じでいいと思います。

HTMLとXHTML

HTML言語には、HTMLとXHTMLがあります。始めのうちは2つの種類がある程度の認識で大丈夫です。

現在の主流はXHTML1.0ですが、以前はHTML4.0が主流で、これからはHTML5.0が主流になると言われています。どれもHTML言語であることに違いはないのですが、HTML5.0は今までのタイプとかなり違いが見られます。

時代の流れとしては、「HTML4.0 ⇒ XHTML1.0 ⇒ HTML5.0」という順番になっており、現在は、XHTML1.0からHTML5.0に移行している最中なのですが、主流が変わるまでに5年以上はかかりますので、まだHTML5.0で書かれたサイトは多くありません。

私自身まだXHTML1.0で書いていますし、その前のHTML4.0で書いても特に問題はなく、初心者の方はどれで書けばいいのか悩んでしまうかもしれませんが、これから始めるという事であれば、HTML5.0のタグを憶えるのが良いかもしれません。

DOCTYPE宣言

HTMLとXHTMLのどちらを使うのかは制作者の判断に委ねられていますが、そのサイトがHTMLとXHTMLのどちらで作られているのかということはサイト上に記述しなければなりません。それが「DOCTYPE宣言」というものです。

DOCTYPE宣言は、主にそのHTML文書を読み取るInternet ExplorerやFirefox、Chromeなどのブラウザに対して行うものです。DOCTYPE宣言しなくてもサイトは問題なく表示されるのですが、基本的には書くと憶えておきましょう。

HTML4.0の場合

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”   “http://www.w3.org/TR/html4/loose.dtd”>

色々なサイトのhead部分を見ているとこのような記述があると思いますが、HTMLの冒頭部分でDOCTYPE宣言を行うのが正しいHTMLの書き方です。トランジショナルという部分は、ストリクト型やフレームセット型の場合に記述が変わるのですが、基本はトランジショナルです。

XHTML1.0の場合

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”   “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

XHTMLの場合、このHTML文書はXML文書であるという事を表すために行頭に以下の記述を行います。

<?xml version=”1.0″ encoding=”UTF-8″?>

<?xml の下にDOCTYPE宣言を書きます。ただ、<?xml を書くと古いバージョンのInternet Explorerでデザインが崩れる問題があったため、私は書いていません。

HTML5.0の場合

<!DOCTYPE html>

HTML5の場合、このようなシンプルなDOCTYPE宣言になります。HTML5では書いてもあまり意味が無いとされていますが、DOCTYPE宣言が無いとブラウザのレンダリングモードが互換モードになってしまいます。

互換モードというのは、CSSが普及する前の古いバージョンのブラウザとの互換のために、標準とは異なる解釈でサイトを表示するものです。標準モードで表示させるためにはDOCTYPE宣言が必要ということになります。

XHTMLサンプル

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”   “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title>レンサバネット</title>
<link href=”main.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<h1>おすすめのレンタルサーバー</h1>
<p>レンタルサーバーは沢山ありますので、その中からオススメのレンタルサーバーをご紹介します。</p>
</div>
</body>
</html>

このように、DOCTYPE宣言はHTMLの始めに書くことになります。

WordPressやデータベースの初期化

wpXサーバーでWordPressファイルやデータベースを個別に削除することはできませんので、不具合が発生した場合には、WordPressを初期化する必要があります。

初期化の作業をすることで、サーバーにアップしてあるファイルが全て削除されていますので、テーマファイルやプラグイン、イメージファイルなど必要なファイルは事前にダウンロードしておきましょう。

image44

「WordPress一覧・設定 ⇒ 設定」をクリックします。

image03

「アプリケーションの初期化」をクリックします。

image04

初期化するにチェックを入れ「アプリケーションを初期化する(確認)」をクリックします。

image05

初期化の最終確認画面です。「アプリケーションを初期化する(確定)」をクリックすると初期化されます。元に戻せませんので注意しましょう。

image06

初期化が完了するとWordPressにログインするための新しいパスワードが発行されます。これで、WordPressをインストールした直後の状態に戻りました。

サーバー障害・サーバー停止時に検索順位が落ちる?

レンタルサーバーを借りていると、障害やトラブルが発生しサーバーが停止したり、サイトの設定を間違えてサイトが表示できなくなってしまうことがあります。

間違えてファイルを削除してしまう事もあるでしょうし、ドメインやサーバーの契約更新を忘れていてサイトが表示されなくなることもありますよね。

そういった時に、サイトにアクセスすると500エラー、503エラー、404エラーなどが表示されますが、Googleなどの検索エンジンのクローラーがサイトにアクセスした時にサイトの評価を下げる(検索順位を下げる)のではないかと思っている人も多いと思います。

ただ、数時間~1日ぐらいサイトが表示できなかったぐらいでは特に問題はありません。ファイルを間違えて削除してしまい404エラーを返したとしても、Googleがすぐにサイト評価を下げるようなことはありません。

サーバー移転の際にDNSが浸透する前に、旧サーバーのデータを削除してしまった時も最大で48時間サイトにアクセス出来ない可能性がありますが、丸2日間アクセスできなくても検索順位には影響しないでしょう。

※サイトのメンテナンスで一時的にアクセス出来ない場合には、404エラーではなく503エラーを返すようにしましょう。404と503ではクローラーの認識が変わってきます。

クローラーがサイトにアクセス出来ないとメッセージが届く

Googleウェブマスターツールにサイトを登録していると、クローラー(Googlebot)がサイトにアクセスできなかった時に接続エラーのメッセージを送ってくれます。

image01

これは、私が管理するサイトに届いた接続エラーのメッセージですが、エラー率が一定数を超えるとメッセージが送られてくるようです。

このサイトは特にサーバー障害が発生したり、サイトに問題があったわけではないのですが、使っているサーバーのスペックがあまり高くなく、複数のWordPressをインストールしていることで、一時的に接続に不具合が出たようです。

このメッセージを受け取ったとしても、現時点でサーバーやサイトに問題が発生していないということであれば特に何もする必要はありません。頻繁にメッセージを貰うようだと問題ですが、1、2回貰ったぐらいではなんてことはありません。

長時間サイトにアクセス出来ない場合

短時間であればクローラーがサイトにアクセスできなくても気にする必要はないのですが、長期間アクセス出来ない状態が続くと、検索順位に影響を与えます。何日以上アクセス出来ないと評価を下げるのかはわかりませんが、経験上数週間放置すると影響が出る可能性が高いです。

ただ、一度順位が落ちた場合でも、またサイトにアクセスできるようにすれば、順位はすぐに戻ってきます。この場合の順位の下落は一時的に検索ユーザーの視界から消されているような状態です。

»Googlebotが長期間サイトにアクセス出来ないとトラフィックが激減する

こちらのサイトで紹介されている事例が、まさにクローラーがサイトにアクセスできなくて検索順位を落とされたケースですが、アクセス数がほぼゼロになるというのは中々厳しいですね。ただ、表示されないページを検索上位に残しておくことはGoogleの信頼度を落とすことになるので当然の措置とも言えます。

このサイトでもクローラーがアクセスできるようにしたらすぐにアクセス数が戻ってきたようですね。ペナルティを受けたわけではないので、そのサイトにアクセスできるようになったら元に戻すということですね。

私の知り合いもドメインの更新を忘れていて、2~3週間サイトにアクセスできなくなっていた時に、アクセス数が激減したと言っていました。その時もドメインを更新したらすぐに元に戻っていました。ちなみにドメインは期限が切れても1ヶ月ほどは猶予期間があります。

MySQLデータベースのインポート・エクスポート

wpXサーバーはphpMyAdminなどのツールがなくMySQLデータベースのインポートやエクスポートは管理パネルから行います。

image44

「WordPress一覧・設定 ⇒ 設定」と進みます。

image45

「データベースのバックアップ」をクリックします。

データベースのエクスポート

image46

圧縮の有無を選択し「エクスポートを実行」をクリックします。

データベースのインポート

image47

「参照」をクリックし、インポートするsqlファイルを選択し、「インポート実行」をクリックします。

インポートするsqlファイルの接頭辞は「wp_」にする必要がありますので、他の接頭辞を利用していたサイトの場合には、インポートする前にsqlファイルをサクラエディタなどで開き、置き換えを行いましょう。ドメインを変更する場合にも同じようにsql内のURLの変更が必要になります。

FTP設定

wpXサーバーのFTPでは、サーバーの全てを見ることはできず、ユーザーが見られるのは「/wp-content」以下になります。

テーマファイルやプラグイン、アップロードした画像ファイルなどは、全て「/wp-content」に入っていますので、特に問題はないと思いますが、このサーバーの特徴ですので憶えておきましょう。

FTPアカウントの作成を行なったらFTP設定を行います。

image42

Dreamweaverの場合はこのようになります。

image41

サーバーの中をみてみるとこのようになっています。「/wp-content」の中なので、WordPress本体のファイルなどはありません。

FTPアカウントの作成

wpXサーバーはインストールしたWordPressごとに設定する形になります。契約申込時に送られてくるアカウント設定完了メールにはFTP情報が書かれていません。

FTPアカウントを作成するためには、先にWordPressのインストール作業が必要になりますので、まだの方は先にそちらを行いましょう。

image30

「WordPress一覧・設定 ⇒ 設定」と進みます。

image31

「FTPアカウント設定」をクリックします。

image32

「設定変更」をクリックします。

image33

「設定変更(確認)」をクリックします。

image34

「設定編集(確定)」をクリックします。

image35

FTPアカウントIDとパスワードが表示されますのでメモします。

パスワードを変更する場合

パスワードを変更する場合にも同じ流れになります。

image36

「FTPアカウント設定」をクリックします。

image37

「設定変更」をクリックします。

image38

お好きなパスワードを入力し、「設定変更(確認)」をクリックします。

image39

「設定編集(確定)」をクリックします。

image40

この画面が表示されたパスワードの変更は完了です。

WordPressの自動インストール

wpXではWordPressのインストールは管理パネルから行うことになります。FTPでWordPressファイルをアップするようなことはできません。

image19

「WordPress管理 ⇒ 新規インストール」を選択し、ドメインとWordPressID、ブログタイトル、メールアドレスを入力します。WordPressIDはWordPressにログインするためのIDです。

image20

「入力されたWordPressIDは、既に使われているため利用できません。」と表示された場合には、IDを変更しましょう。

image21

入力内容を確認し、「確定(WordPressをインストール)」をクリックします。

image22

この画面が表示されたらWordPressのインストールは完了です。パスワードが表示されますのでメモしておきましょう。

image28

サイトにアクセスするとWordPressのデフォルトテーマで表示されます。

image29

WordPressの管理画面へのログインは、wpXの管理パネルの「WordPress一覧・設定 ⇒ ダッシュボード」へをクリックするか、アドレスバーに「http://ドメイン名/wp-login.php」でアクセスします。

パスワードを忘れた場合

ログインID(WordPressID)は後で確認することができますが、パスワードはWordPressをインストールした時にしか表示されませんので、パスワードを忘れてしまった場合には、変更が必要になります。

image23

メニューの「WordPress一覧・設定」を選択肢、インストール済みWordPress一覧の中から、パスワードを変更したいIDの「設定」をクリックします。

image24

「管理者パスワードの初期化」をクリックします。

image25

「パスワードを初期化する(確認)」をクリックします。

image26

「パスワードを初期化する(確定)」をクリックします。

image27

変更後のパスワードが表示されます。

ドメイン設定

サーバーの申し込みが済んだらドメイン設定を行います。

ドメインを追加する際に確認方法がいくつかありますが、最も簡単な方法が、指定ネームサーバーによる確認ですので、ドメイン追加を行う前に、ドメイン登録事業者の管理画面でネームサーバーの変更を行いましょう。

wpXのネームサーバーは以下の3つです。

ns1.wpx.ne.jp
ns2.wpx.ne.jp
ns3.wpx.ne.jp

ドメイン設定

image15

メニューから「ドメイン追加設定 ⇒ ドメイン追加」を選択しドメイン名を入力し、「ドメインの追加(確認)」をクリックします。

image16

「ドメインの追加(確定)」をクリックすればドメインの追加は完了です。

image17

ドメイン一覧を見ると追加したドメインが確認できます。

wpXサーバーの契約申し込み方法

image01

wpXにアクセスし、「お申込み」をクリックします。

image02

メールアドレスの登録という項目の「お申込みフォーム」をクリックします。

image03

利用規約を読み「同意する」をクリックします。

image04

登録メールアドレスを入力し、「確認メール送信」をクリックします。

image05

この画面が表示されたら、登録メールアドレス宛に「お申込みメールアドレス確認の送信」メールが届いているので確認します。

image06

メールには、お申込URLが書かれていますので、それをクリックします。

image08

サーバーIDを決めます。好きな名前を入力し検索をかけて申し込み可能な場合には、「申し込む」をクリックします。

image10

image11

会員登録情報を入力し、最後に「確認画面へ進む」をクリックします。

image12

登録情報を確認し、間違いがなければ「会員登録を確定する」をクリックします。

image13

この画面が表示されたら申し込みは完了です。登録メールアドレスに会員IDなどが書かれた「会員登録完了のお知らせ」と「サーバアカウント設定完了のお知らせ」メールが届いています。

image14

メールに書かれている会員IDとパスワードでログインします。

!importantによる優先度の変更とコメントアウトによる無効化

WordPressの無料テーマや、無料配布されているCSSテンプレートなどをカスタマイズして使うような場合、CSSを編集することになりますが、元々書かれているCSSを修正するのではなく、新たなCSSを追加していくような形で編集するのが良いかもしれません。

CSSを書く時に既に書かれているものを修正しても良いのですが、削除してしまうと元の設定に戻すことができなくなります。それでも特に問題はないのですが、「!important」や「コメントアウト」という技を覚えると、始めから書かれていた物はそのままで、新たな指定を追加していくことができます。

!importantの使い方

「!important」はそのCSSのプロパティが重要であることを伝えるための記述です。

p {
    line-height: 20px;
    }

p {
    line-height: 18px;
    }

たとえば1つのCSSファイルに、このようにpタグに対する行間設定のCSSが2つ以上書かれていることがあります。このように並んで書かれていれば、不要な方を削除すれば良いのですが、CSSファイルには色々な指定が書かれており、特定の要素に対するものを見つけるのが難しいことがあります。

自分で書いたCSSでも過去に指定した要素と同じ要素に対して、異なるCSSを指定してしまうということは良くあるものです。Dreamweaverやテキストエディタの検索機能を使って、過去の記述を見つけて修正するのも良いですが、上手く見つからないこともあります。

CSSは、後から書かれたもの(下に書かれたもの)が優先されますので、先ほどの記述であればpタグの行間は18pxになるのですが、こんなに単純なものばかりではないですし、CSSの修正を繰り返していると、その要素に対してどのCSSが効いているのかわからなくなってしまうことがあります。

そんな時に役立つのが、優先度を上げる「!important」です。

.no1{
    padding: 0 0 0 30px!important;
    font-size: 1.2em!important;
    font-weight: bold;
    color: #ff0000;
}

プロパティの後に「!important」という文字を追加することで、どこに書かれたものであってもそのプロパティが優先されるようになります。なお、!importantはプロパティごとに指定する必要がありますので、そのクラス全体に効かせるようなことはできません。

この場合、.no1の余白とフォントサイズについては、ここに書かれているものが優先されるということになります。

コメントアウトの使い方

CSSはHTMLと同じようにコメントを書くことができます。

#main {
    margin: 0px auto;/* 中央に揃える */
    width: 900px;
    padding-top: 20px;
    padding-left: 20px;
  }

これは、中央揃えを表すCSSを伝える為のコメントです。「/*  */」の中に書かれた事はコメントとして処理されますので、CSS設定には影響しません。このCSSを見た人にどのような設定なのかを伝えるために使用します。

「margin: 0px auto;」というのを見れば中央揃えということはわかりますので、このようなコメントを書くことはあまり無いと思いますが、どのような内容のコメントを書いてもOKです。そのCSSを自分しか見ないとしても、時間が経つとどのような事を書いたのかを忘れてしまいますので、重要なことはコメントとして残しておくのが良いかもしれません。

このコメント機能を使って特定のプロパティを無効化することができます。

#main .right{
    /*width: 280px;
    height: 440px;*/
    width: 252px;
    height: 410px;
    padding-top: 30px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 28px;
    }

このように書くことで、元々記述してあった高さと幅の設定が無効になり、その後に書かれているものが優先されます。コメントアウトするのではなく、その部分を削除しても良いのですが、コメントアウトすることで、以前はどのような記述になっていたのかを残しておくことができます。

あくまで、無料テーマのCSSを修正したり、誰かが作ったテーマを修正する時に良く使われる方法ですが、特定のプロパティの記述を残したまま無効化する方法として憶えておいた方が良いと思います。

サブコンテンツ

このページの先頭へ