投稿日:

canonical の意味、使い方

Webサイト作成 TIPS

canonical（カノニカル） の意味、使い方

canonicalをググると「URL正規化のために必要」などと出てきて、
「正規化？？ふぇ～　意味がわからないよぅ～」
ってなってしまう人もいると思います。

正規化とは、ここでは2つ以上のものがある場合に、どちらが正しいのかを示すことです。

htmlだけで作っているサイトは、あまりそういうことがありませんが、システムで作られているサイト、ネットショップなどは、次のような場合が考えられます。

 次の3つのURLは両方ともアディダスの白いスニーカーを表示する
 ① http://hogehoge.com/adidas/sneaker/1
 ② http://hogehoge.com/index.php?maker=adidas&type=sneaker
 ③ http://hogehoge.com/sneaker/white/2

というような、同じ内容を表示するのに、二つ以上のURLができてしまうことです。
このような二つ以上のURLが、同じ内容を示す場合、Googleの公式見解では
「ペナルティにならない」
と表現しているようですが、経験則ではSEO的にやっておいた方がよいようです。

上記の例でいくと、②、③のURLで表示されるページに、次のようにcanonicalを設定します。

 <link rel="canonical" href="http://hogehoge.com/adidas/sneaker/1" />

href=””の中身は、相対リンクでもOKです。

投稿日:

cakePHP トランザクションを使う

MySQL
PHP
CakePHP2.3.1

CakePHPでMySQLのトランザクションを使う方法は下記公式ページに書いてありますが、ちょっと補足を。

http://book.cakephp.org/2.0/ja/models/transactions.html

実際に利用する際は、コントローラーから利用したい場合も多いですよね。

しかし、

 $dataSource = $this->getDataSource();

はModelに書かないと動作しません。

Modelに記述して、コントローラーから呼び出せばいいだけなんですが、サンプルを書いておきます。

 //モデルファイル（Model>Examination.php)
 class Examination extends AppModel {
    public $name = 'Examination';
 
    function startTransaction(){
    	$dataSource = $this->getDataSource();
 		$dataSource->begin();
    }
 
    function commitTransaction(){
 		$dataSource = $this->getDataSource();
 		$dataSource->commit();
    }
 
    function rollbackTransaction(){
 		$dataSource = $this->getDataSource();
 		$dataSource->rollback();
    }   
 }

 //コントローラー(Controller>ExaminationController.php)
 class ExaminationsController extends AppController {
  
   public function use_transaction(){
    
    	//データベースでのトランザクション開始
    	$this->Examination->startTransaction();
       
         //処理を書く
        
       	$this->Examination->commitTransaction();
 
     }
  }
  • $this->Model->getDataSource();と書けばいいんですよ。 — {2014-06-27 (金) 16:05:18}
投稿日:

borderの色がIE6で反映されない

Webサイト作成 トラブル
css

テーブルの枠線（border）の色がIE6で反映されない

CSSでtableを作ったとき、tableにborderの色指定を次のように指定しても、Firefoxでは#FF0000（赤）になりますが、IE6ではなりません。

 
 CSSでの記述
 .test{	 
 	border:#FF0000 1px solid;
 	border-collapse:collapse;
 	background-color:#F9CEE1;
 }
 
 HTMLでの記述
 <table class="test"><tr><td >…以下略

IE6では、tableのborderの指定は、一番外枠のborderのことだけを指定しているようです。内側の表の中の枠線は、別途指定する必要があるんですね。
そのため、この問題を解消するには、tableのtdにborderのスタイルを記述してあげる必要があります。

 (適用後）
 CSSでの記述
 .test{	 
 	border:#FF0000 1px solid;
 	border-collapse:collapse;
 	background-color:#F9CEE1;
 }
 
 .thread td{padding:5px;
 border:#FC65A8 1px solid;}
 }

　※HTMLのほうを変更する必要はありません。

投稿日:

bodyタグ直後のキーワード記述　css+html

Webサイト作成 TIPS
SEO対策概要
SEO対策　bodyタグ直後のキーワード記述

bodyタグ直後のキーワード記述　css+html

ここでは前項目で確認したサンプルのうちCssとhtmlで実現する場合のソースを解説します。
基本的なCss+htmlでのサイト作成方法を理解している事を前提として記載いたします。

ポイントは以下のような構造でCSSを利用したページ設計を行い。
div id=headerタグ内に記述される各種要素をCSSから制御させてしまう点です。

以下は一番簡単なpaddingを利用した記述としています。
別の方法として、以下の表記と同様にcssからpositionを指定して記述する方法もあります。

同様の手法で

要素の直後に更に

要素などを記述して、検索キーワードを沢山網羅させる事も可能です。

【htmlソース】
単純にbody直後の内容としては、h1要素以前にはdiv要素だけとしている。

h1要素は、見出しであると同時に一番最初に記述されているテキストであることから検索エンジンロボットには最重要キーワードとして認識される。

 <body>
 <div id="container">
 <div id="header">
   <h1>検索エンジンキーワード対策用に最適化された文章</h1>
 </div> <!-- div id headerの終了-->
 ・
 ・
 ・
 ・
 ・
 ・
 ・
 ・
 </div> <!-- div id containerの終了-->
 <body>

【Cssソース】
　上位のdiv要素としてcontainerを指定しておく事により、div要素headerが扱いやすくなる。また、以下のように記述する事でdiv要素header以外のh1要素には影響を与えない。

 /* div id   */
 div#container{
    width:788px;
    padding:0 1px 0 1px;
    margin:0 auto;
 }
 /* div id header   ヘッダーでロゴのイメージなどを指定しておく
 高さなどはサイトに合わせて記述*/
 div#header {
    height:100px;
    background:url(images/logo.jpg) no-repeat left top;
 }
 /* このサンプルでのポイントは、div id header中のh1要素に対して
    paddingを指定して表示位置を制御している点です。
    このやり方を使えばheader中のどこでも自由な位置で検索エンジン用の
    キーワードを挿入する事ができます。*/
 div#header h1 {
    font-size:13px;
    font-weight:normal;
    color:#000000;
    padding:4px 0 0 15px;
 }

投稿日:

body.onload などの初期読み込み関数を複数設定する

Ajax
Javascript

window.onload やbody.onloadなどを使って、サイトが表示された時に読み込ませたい関数があると思います。

それを複数設定するのに、prototype.jsを使うと簡単にできてしまいます。

先にprototype.jsのサイトからprototype.jsをダウンロードしてきましょう。

・prototype.jsの本家サイト
http://www.prototypejs.org/

使い方
先にprototype.jsを読み込んでおきます。
下記はwindow.onloadの例で、”test”と、”test2″いう関数を呼び出したい時の例です。

 <script type="text/javascript">
 Event.observe(window, "load", test, false);
 Event.observe(window, "load", test2, false);
 </script>

簡単ですよね～。prototype.jsさん、ありがとう！！[smile]