ダリの雑記：WEBプログラム版

今回は、角丸・ドロップシャドウ・グラデーションを行います。

※印刷にて重大なバグあり。使用にはご注意を！

※印刷バグは「version1.0 beta4」においてある程度解消されましたが、その代わり、印刷においてPIEは実行されません。（試しに当サイトをIEで印刷プレビューをご覧ください。角丸の効果がなくなっています。）

「PIE」を利用する方法。（参考サイト：コリスさんのサイト）

PIEでできるCSS3機能は以下のとおりです。

• border-radius：角丸
• box-shadow：ドロップシャドウ
• linear-gradient：グラデーション
• border-image：ボーダー画像
• multiple background images：１つのクラス・IDに複数の画像を設定

※「ボーダー画像」について、あまりピンとこない方はこちらのサイトをご参照ください。非常にわかりやすく説明されています。 「PXT255;さん」のサイト

手順

１．まずはこちらのサイトから「PIE」をダウンロードしてください。

２．次にスタイルにて、各設定を行います。（今回ははじめからbehavior: url(PIE.htc);を入力しておきます。）

.box {

padding:10px;

/*角丸*/
-moz-border-radius: 15px; /*FireFox*/
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, IE */

/*ドロップシャドウ*/
-moz-box-shadow: 5px 5px 15px #000; /* Firefox */
-webkit-box-shadow: 5px 5px 15px #000; /* Safari and Chrome */
box-shadow: 5px 5px 15px #000; /* Opera 10.5+, IE */

/*グラデーション*/
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFFF), to(#999999));
background: -moz-linear-gradient(#FFFFFF, #999999);
-pie-background: linear-gradient(#FFFFFF, #999999);

behavior: url(PIE.htc);
}

/*border-image*/
.bi_text{

padding:10px;

border: 1px solid #a3a3a2;
-moz-border-image: url(img/scotch-tape.png) 2 8 2 8 / 2px 8px 2px 5px;
-webkit-border-image: url(img/scotch-tape.png) 2 8 2 8 / 2px 8px 2px 5px;
border-image: url(img/scotch-tape.png) 2 8 2 8 / 2px 8px 2px 5px;

behavior: url(PIE.htc);
}

/*Multiple background images*/
.multiple_box{

width:600px;
height:400px;

/*Firefox等用*/
background:
url(img/Winter.jpg) no-repeat top left,
url(img/Waterlilies.jpg) no-repeat center center,
url(img/Blue_hills.jpg) no-repeat 100% 100%;

/*PIE用*/
-pie-background:
url(img/Winter.jpg) no-repeat top left,
url(img/Waterlilies.jpg) no-repeat center center,
url(img/Blue_hills.jpg) no-repeat 100% 100%;

behavior: url(PIE.htc);
}

※2010/11/09 : PIE用のMultiple background imagesの記述を追記しました。

各クラスの最後に、１．でダウンロードした「behavior: url("PIE.htcへのパス");」を記述するのを忘れないよう注意してください。

※なおグラデーションは、Firefoxの場合3.6以上でないと表示されませんのでご注意ください。

３．スタイルの設定は

• 「角丸」「ドロップシャドウ」「グラデーション」はclass「box」
• 「border-image」はclass「bi_text」
• 「Multiple background images」はclass「multiple_box」

というclass名にしていますので、body内にそれぞれを含んだタグを記述してください。（以下例）

<h2>border-radius/box-shadow/linear-gradient</h2>
<div class="box">角丸とドロップシャドウ、グラデーション</div>

<h2>border-image</h2>
<p class="bi_text">border-imageとはボーダーに画像を適応させるもの</p>

<h2>multiple background images</h2>
<div class="multiple_box"></div>

これで、IE8でも対応できるようになります。

サンプル [新しいウィンドウで開く]

※サンプルでは見やすいようにタグのスタイルをあらかじめ設定しています。

※サンプルの「border-image」の背景に使用している画像「scotch-tape.png」は「2xup.org blog」さんのサイトから借用しました。正常に表示されればなかなかかっこいい背景になります。

と言いたいところなんですが、「border-image」と「multiple background images」（※１）はなぜか、IEで正常に動作しませんでした。できるはずなんですけどねぇ・・・;

こちらについてはもうしばらく調べてみます。

• PIEバグレポートを追加しました。（上記の件ではありませんが・・・）
• （※１）multiple background imagesのやり方、わかりました！

今回参考にさせていただいたサイト

• コリス ： 該当記事「たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE」
• 2xup.org ： 該当記事「border-image を利用したボックスデザイン」
• PXT255; ： 該当記事「【CSS3】 border-image を試してみた。」

CSS3では、ブロックの角丸やグラデーション、ドロップシャドウなど非常に便利なスタイルがあるのですが、残念なことにIEでは対応しておりません。

しかし、IEでもそれらのスタイルを使用できるプログラムがいくつか存在しています。

「ie-css3」を利用する方法。（参考サイト：コリスさんのサイト）

「ie-css3」でできるCSS3機能は以下のとおりです。

• border-radius：角丸
• box-shadow：ドロップシャドウ
• text-shadow：テキストシャドウ

手順

１．まずはこちらのサイトから「ie-css3」をダウンロードしてください。

２．次にスタイルにて、角丸・ドロップシャドウ・テキストシャドウの設定を行います。

.box{

padding:10px;
background-color:#FFFFFF;

/*角丸*/
-moz-border-radius: 15px; /*FireFox*/
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, IE */

/*ドロップシャドウ*/
-moz-box-shadow: 5px 5px 15px #000; /* Firefox */
-webkit-box-shadow: 5px 5px 15px #000; /* Safari and Chrome */
box-shadow: 5px 5px 15px #000; /* Opera 10.5+, IE */

}

.text{

/*テキストシャドウ*/
text-shadow: 2px 2px 2px #000000;

}

３．ブロックの角丸・ドロップシャドウについてはclass「box」、テキストシャドウについてはclass「text」という名前で設定しています。これらのclassを含んだ内容をbodyタグ内に記述してください。（以下例）

<h2>border-radius/box-shadow</h2>
<div class="box">角丸・ドロップシャドウ</div>
<h2>text-shadoww</h2>
<p class="text">テキストシャドウ<p>

４．これでFirefoxやSafariで正常に表示されるようになります。しかし、IEではまだ角丸・ドロップシャドウが表示されません。

そこで、１．でダウンロードしてきた「ie-css3.htc」をbehaviorで呼び出します。

.box{

padding:10px;
background-color:#FFFFFF;

/*角丸*/
-moz-border-radius: 15px; /*FireFox*/
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, IE */

/*ドロップシャドウ*/
-moz-box-shadow: 5px 5px 15px #000; /* Firefox */
-webkit-box-shadow: 5px 5px 15px #000; /* Safari and Chrome */
box-shadow: 5px 5px 15px #000; /* Opera 10.5+, IE */

behavior: url(ie-css3.htc);

}

.text{

/*テキストシャドウ*/
text-shadow: 2px 2px 2px #000000;

behavior: url(ie-css3.htc);

}

behavior: url("ie-css3.htcへのパス");
この一行をそれぞれの最後に付けるだけでＯＫです。これで「box-shadow」や「text-shadow」の記述が有効になります。

サンプル [新しいウィンドウで開く]

※サンプルでは見やすいようにタグのスタイルをあらかじめ設定しています。

なお、テキストシャドウ（text-shadow）を扱う場合は注意が必要です。

text-shadowの３番目の値を10pxにしてみてください。

text-shadow: 2px 2px 10px #000000;

通常ではtext-shadowの設定は

text-shadow:x軸 y軸 ぼかし値 色

となっているので、３番目の値を増やすと影のぼやけ方が広がるはずなのですが（現にFirefoxなどはそうなります）、IEの場合はなぜか右斜め上に影が飛んでしまいます。

Firefoxでの結果

IEでの結果

どうやらIEでは、ぼかし方があらかじめ設定されていて、３番目の値は別の役割を果たすようです（なんの役割かはわからないんですが^^;）

自分がいろいろと調整した結果、すべて2pxが、どのブラウザでみてもバランスが取れているように感じました。

text-shadow: 2px 2px 2px #000000;

ie-css3のバグレポート

• 角丸にしたブロックの中で、さらにブロックを角丸にしようとしても効果がなく、しかもbackground-colorの効果がなぜか無くなる。
  before / after
  beforeは「ie-css3.htc」適応前、afterは適応後。本来ならグレーのブロックも角丸になるはずが、ならないどころか背景色が無効化してしまっている。
  解決方法
  どうやら後ろに隠れてしまっているようなので、内部の角丸のブロックのスタイルに

  position:relative;
  z-index:1;

  を追加してください。after2

• ドロップシャドウ（ボックス）の色が設定できない。
  サンプルのドロップシャドウの記述は
  box-shadow: 5px 5px 30px #000000;
  ですか、仮に
  box-shadow: 5px 5px 30px #FF0000;
  としても、影の色が変わりません。after3
  
  色はともかく、せめて影の濃さだけでも変更したい場合は「ie-css3.htc」の86行目
  shadow.style.filter = 'progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=true,shadowOpacity='+ element.opacity +')';
  の部分の「opacity」を
  shadow.style.filter = 'progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=true,shadowOpacity=0.5)';
  という風に調整してみてください。（有効数値：0～1.0）
  とりあえず濃さだけは何とかなります。after4
  ※ただし、当然ですがすべてのドロップシャドウ（ボックス）に適応されるので、ボックスごとに濃さの調整をするというのはこの方法では無理です。

今回参考にさせていただいたサイト

• コリス ： 該当記事「[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3」

HTML5自体新しい仕様ですから、まだまだタグの対応が全ブラウザには行きわたっておりません。

その中でもブラウザによって仕様がばらばらなのがvideoタグ。

videoタグで扱える動画形式がブラウザによって対応が異なるようで、せっかくすっきりと記述できるようになったのに、全ブラウザに対応させようとしたら結局はFlash形式も用意しなくてはならないのが現状のようです。

各ブラウザの動画形式対応表はこちらをご参照ください：マイコミジャーナル

videoタグでは（canvasタグもそうですが）、これらのタグで囲んだ部分はnoscriptタグのように、「対応していないブラウザの場合のみ表示する」という仕組みになっています。

<video width="640" height="360" src="sample.ogg" autobuffer controls poster="whale.png">
<p>このブラウザでは対応しておりません。</p>
</video>

上記のように書くと、たとえばIE6で見た場合「このブラウザでは対応しておりません。」が表示されます。もちろんこれでは不親切なので、この中にflashのobjectタグ等を埋め込むことで対応するわけですね。

ただ、flash用動画を用意するくらいなら、もうそれだけでいいじゃんということにもなりかねないので、このタグについてはもうしばらく様子見かもしれません。（iPadにも対応させたい場合は便利ですが）

それでも先んじてさまざまなクリエイターがプレイヤーを作ってくれています。

参考サイト：Blitzさん

「Flashモードあり」になっているのプレイヤーは、確認した限り「IE8」「FireFox」「Chrome」「Safari」で動作しました。

HTML5のCanvasを利用すると、棒グラフを表示することができます。（Javascriptが必要ですが）

やり方はこちら　JavaScript ライブラリー – HTML5.JP

上記のサイトから「graph_vbar_1_0_4.zip」をダウンロードして解凍すると、そのフォルダの中に「examples」フォルダがありますので、その中のサンプルを実行してみてください。棒グラフが表示されるかと思います。

ただこのサンプルでは、スクリプト内に直接パラメータを配列で入力しなくてはなりません。

var items = [
    ["商品A", 20, 58, 40, 14, 38, 20, 40],
    ["商品B", 10, 14, 58, 80, 70, 90, 20],
    ["商品C", 10, 14, 58, 80, 70, 90, 20],
    ["商品D", 10, 14, 58, 80, 70, 90, 20],
    ["商品E", 10, 14, 58, 80, 70, 90, 20]
 ];

てことで、tableに入れたパラメータを吸い出してグラフ化するように変更しました。

とはいえ、jsファイルを直接変更する必要はありません。

あくまでhtmlファイルの中に記述するスクリプトを編集しただけです。今回は「sample_graph_vbar_4.html」を改良して使用しました。（まずはサンプルを見たい方はこちら）

手順

１．bodyタグ内に、パラメータが入ったテーブルを記述してください。

※tableタグにid="graph"を忘れずに記述してください。

※theadタグとtbodyタグを忘れないよう注意してください。（theadタグはグラフのx軸の項目に使用します）

<table id="graph">
    <thead>
        <tr>
            <th>商品名</th>
            <th>商品概要</th>
            <th>日</th>
            <th>月</th>
            <th>火</th>
            <th>水</th>
            <th>木</th>
            <th>金</th>
            <th>土</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>商品Ａ</th>
            <td>商品概要</td>
            <td>20</td>
            <td>58</td>
            <td>40</td>
            <td>14</td>
            <td>38</td>
            <td>20</td>
            <td>40</td>
        </tr>
        <tr>
            <th>商品Ｂ</th>
            <td>商品概要</td>
            <td>10</td>
            <td>14</td>
            <td>58</td>
            <td>80</td>
            <td>70</td>
            <td>90</td>
            <td>20</td>
        </tr>
        <tr>
            <th>商品Ｃ</th>
            <td>商品概要</td>
            <td>10</td>
            <td>14</td>
            <td>58</td>
            <td>80</td>
            <td>70</td>
            <td>90</td>
            <td>20</td>
        </tr>
        <tr>
            <th>商品Ｄ</th>
            <td>商品概要</td>
            <td>10</td>
            <td>14</td>
            <td>58</td>
            <td>80</td>
            <td>70</td>
            <td>90</td>
            <td>20</td>
        </tr>
        <tr>
            <th>商品Ｅ</th>
            <td>商品概要</td>
            <td>10</td>
            <td>14</td>
            <td>58</td>
            <td>80</td>
            <td>70</td>
            <td>90</td>
            <td>20</td>
        </tr>
    </tbody>
</table>

２．headタグ内のwindow.onload=function()の関数は、丸ごと削除して、以下のvbar_graphという関数を追記してください。

※sample_graph_vbar_4.htmlでは「window.onload」で実行していますが、今回は関数化してbodyのonloadで読み込むことにしました。これは後々複数のグラフを表示する際、imgタグのonloadなどでも対応できるようにするためです。

<script type="text/javascript">
function vbar_graph(table_id, output_id, title_num, value_start_num, value_end_num, x_title, y_title){
   
    /*初期化*/
    var get_tr_array = new Array();
    var get_table_innerTag = new Array();
    var items = new Array();
    var x_title_array = new Array();
    var y_title_array = new Array();
   
    /*表のパラメータを取得*/
    graph_table = document.getElementById(table_id);
    get_tr_array = graph_table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
   
    for(i=0; i<get_tr_array.length; i++){
        get_table_innerTag = get_tr_array[i].getElementsByTagName("*");
       
        items[i] = new Array();
        items[i][0] = get_table_innerTag[title_num].innerHTML;
       
        num = 1;
        for(j=value_start_num; j<=value_end_num; j++){
            items[i][num] = parseInt(get_table_innerTag[j].innerHTML);
            num++;
        }
    }
   
    /*表のX軸・Y軸項目を取得*/
    //配列をリセットする
    delete get_tr_array;
    delete get_table_innerTag;
   
    //X軸
    x_title_array[0] = x_title;
    get_tr_array = graph_table.getElementsByTagName("thead")[0].getElementsByTagName("tr");
    get_table_innerTag = get_tr_array[0].getElementsByTagName("*");
   
    num = 1;
    for(j=value_start_num; j<=value_end_num; j++){
        x_title_array[num] = get_table_innerTag[j].innerHTML;
        num++;
    }
   
    //Y軸
    y_title_array[0] = y_title;
   

    /*グラフ出力*/
    var g = new html5jp.graph.vbar(output_id);
    if( ! g ) { return; }
    var params = {
        x: x_title_array,
        y: y_title_array,
        barShape: "line"
    };
    g.draw(items, params);
};
</script>

３．bodyタグは以下のように「onload="vbar_graph('graph', 'sample',0, 2, 8, '曜日', '注文数（個）')"」を実行するように記述してください。

<body onload="vbar_graph('graph', 'sample', 0, 2, 8, '曜日', '注文数（個）')">

※vbar_graph関数の引数について
function vbar_graph(table_id, output_id, title_num, value_start_num, value_end_num, x_title, y_title)

• table_id：パラメータが入っているtableタグのID（今回の例では「graph」）
• output_id：グラフ出力先のcanvasタグのID（今回の例では「sample」）
• title_num：「項目名」が入っている、テーブルの列番号（今回の例では１列目）
• value_start_num：「値（数値）」が入っている、テーブルの開始列番号（今回の例では３列目）
• value_end_num：「値（数値）」が入っている、テーブルの終了列番号（今回の例では９列目）
• x_title：グラフX軸の項目名（今回は「曜日」）
• y_title：グラフY軸の項目名（今回は「注文数（個）」）

列番号について：javascriptでは一番始めが0になるので、１列目は「0」、３列目は「2」、９列目は「8」になります。

以上でサンプルの様に表示されます。（サンプルではテーブルがしょぼかったので少しスタイルを追加しています）

サンプル [新しいウィンドウで開く]

ざっくりと改造なので粗があるかもしれませんが、ご了承ください。

※追記：グラフ出力について考慮されていなかったので、引数にoutput_idを付け足しました。(2010.07.21)

HTML5のCanvasを利用すると、円グラフを表示することができます。（Javascriptが必要ですが）

やり方はこちら　JavaScript ライブラリー - HTML5.JP

上記のサイトから「graph_circle_1_0_2.zip」をダウンロードして解凍すると、フォルダの中に「examples」フォルダがありますので、その中のサンプルを実行してみてください。円グラフが表示されるかと思います。

ただこのサンプルでは、スクリプト内に直接パラメータを配列で入力しなくてはなりません。

var items = [
    ["sample01", 150],
    ["sample02", 100],
    ["sample03", 80],
    ["sample04", 60],
    ["sample05", 30],
    ["sample06", 20],
    ["sample07", 10],
    ["sample08", 10],
    ["sample09", 10],
    ["sample10", 10],
    ["sample11", 10],
    ["sample12", 10]
];

これはちょっと面倒。

てことで、tableに入れたパラメータを吸い出してグラフ化するように変更しました。

とはいえ、jsファイルを直接変更する必要はありません。

あくまでhtmlファイルの中に記述するスクリプトを編集しただけです。今回は「sample_graph_circle_1.html」を改良して使用しました。（まずはサンプルを見たい方はこちら）

手順

１．bodyタグ内に、パラメータが入ったテーブルを記述してください。

※tableタグにid="graph"を忘れずに記述してください。

※tbodyタグを忘れないよう注意してください。（thead内のデータはグラフに影響を与えません。）

<table id="graph">
    <caption>アンケート結果</caption>
    <thead>
        <tr>
            <th>項目名</th>
            <th>概要</th>
            <th>値</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>sample01</th>
            <td>description</td>
            <td>150</td>
        </tr>
        <tr>
            <th>sample02</th>
            <td>description</td>
            <td>100</td>
        </tr>
        <tr>
            <th>sample03</th>
            <td>description</td>
            <td>80</td>
        </tr>
        <tr>
            <th>sample04</th>
            <td>description</td>
            <td>60</td>
        </tr>
        <tr>
            <th>sample05</th>
            <td>description</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

※「sample_graph_circle_1.html」は「sample12」までありますが、今回は「sample05」までにしました。

２．headタグ内のwindow.onload=function()の関数は、丸ごと削除して、以下のcircle_graphという関数を追記してください。

※sample_graph_circle_1.htmlでは「window.onload」で実行していますが、今回は関数化してbodyのonloadで読み込むことにしました。これは後々複数のグラフを表示する際、imgタグのonloadなどでも対応できるようにするためです。

<script type="text/javascript">
function circle_graph(table_id, output_id, title_num, value_num){
    //初期化
    var get_tr_array = new Array();
    var get_table_innerTag = new Array();
    var items = new Array();
   
    //パラメータを取得
    graph_table = document.getElementById(table_id);
    get_tr_array = graph_table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");

    for(i=0; i<get_tr_array.length; i++){
        get_table_innerTag = get_tr_array[i].getElementsByTagName("*");
      
        get_title = get_table_innerTag[title_num].innerHTML;
        get_value = parseInt(get_table_innerTag[value_num].innerHTML);
      
        items[i] = [get_title, get_value];
    }
   
    //グラフ出力
    var cg = new html5jp.graph.circle(output_id);
    if(!cg) { return; }

    cg.draw(items);
}
</script>

３．bodyタグは以下のように「onload="circle_graph('graph', 'sample', 0, 2)"」を実行するように記述してください。

<body onload="circle_graph('graph', 'sample', 0, 2)">

※circle_graph関数の引数について
circle_graph(table_id, output_id, title_num, value_num);

• table_id：パラメータが入っているtableタグのID（今回の例では「graph」）
• output_id：グラフ出力先のcanvasタグのID（今回の例では「sample」）
• title_num：「項目名」が入っている、テーブルの列番号（今回の例では１列目）
• value_num：「値（数値）」が入っている、テーブルの列番号（今回の例では３列目）

 列番号について：javascriptでは一番始めが0になるので、１列目は「0」、３列目は「2」になります。

以上でサンプルの様に表示されます。（サンプルではテーブルがしょぼかったので少しスタイルを追加しています。）

サンプル [新しいウィンドウで開く]

ざっくりと改造なので粗があるかもしれませんが、ご了承ください。

プログラムの加算において、一般的には以下のように記述します。

• num = num + 1;
• num++;
• num += 1;

しかしJavascriptで数値を引数渡しにして上記のような加算をすると、とんでもない結果が返ってくることがあります。

失敗例のソース（再起処理）

<script>
   function changeInt_false(num){
      if(num >= 100){
         document.getElementById("text_false").innerHTML = num+"：以上失敗例でした。";
         return;
      }else{
         num = num + 1;
         document.getElementById("text_false").innerHTML = num;
         setTimeout("changeInt_false('"+num+"')", 20);
      }
   }
</script>

<h1>加算</h1>
<p><input type="button" onclick="changeInt_false(0)" value="加算スタート（失敗例）" /></p>
<p id="text_false"></p>

失敗例のサンプル　[新しいウィンドウで開く]

いかがでしょうか？

「111」となってしまいました。

要するに、文字列として繋いでしまっているわけですね。（javascriptの「+」は加算の他に文字列をつなぐという役割も果たします。）

こういうときは、parseInt()を利用して、引数から得た情報をInt型にキャストしてあげましょう。

成功例のソース（再起処理）

<script>
   function changeInt_success(num){
      num = parseInt(num);
      if(num >= 100){
         document.getElementById("text_success").innerHTML = num+"：成功！";
         return;
      }else{
         num = num + 1;
         document.getElementById("text_success").innerHTML = num;
         setTimeout("changeInt_success('"+num+"')", 10);
      }
   }
</script>

<h1>加算</h1>
<p><input type="button" onclick="changeInt_success(0)" value="加算スタート（成功例）" /></p>
<p id="text_success"></p>

成功例サンプル [新しいウィンドウで開く]

これで正常に加算されたかと思います。

ちなみに小数点を使う場合はparseFloat()を利用してください。

インストール方法はすべからく以下の手順で行います。

• プラグインをダウンロードした後解凍
• 解凍したフォルダごと「wp-content/plugins」フォルダにアップロード
• WordPressの管理画面にログインし、メニュー「プラグイン＞プラグイン」にて有効化する

ほぼ必須だと思われるプラグイン

• カテゴリーの並び替えを行う「My Category Order」
  MTもそうですが、なぜデフォルトで並び替えがないのかが不思議です。
  とりあえずこれをインストールすればメニューの「投稿」に「My Category Order」が増えますのでそこで並び替えを行ってください。
  ダウンロードサイト
• コメント・トラックバックを分けてくれる「Trackping Separator」
  WordPress独特の仕様のせいで、ごっちゃ混ぜになっているコメントとトラックバックを切り分けてくれます。
  ダウンロードサイト
  使用例はこちらのサイトをご参照ください。日々是好日さんのサイト

あったら便利なプラグイン

• あらかじめカスタムフィールドの設定を行える「Custom Field GUI Utility」
  アップロードの前に、解凍したフォルダの中に「conf.ini」というファイルがありますので、そちらでフィールドの設定をした後、アップロードしてください。（ダウンロードサイトにも設定方法が記述されていますのでそちらをご参照ください。）
  ダウンロードサイト
• ユーザのプロフィール画面でもフィールドを作れる「Cimy User Extra Fields」
  カスタムフィールドのように、プロフィール画面でも入力フィールドを追加できます。使用方法についてはこちらのページをご参照ください。 「WordPressの「ユーザ」管理画面にてフィールドを増やす方法」
  ダウンロードサイト
• 自動的にGoogleサイトマップを作ってくれる「Google Sitemap Generator」
  インストールすると、メニューの「設定」に「XML-Sitemap」が追加されますので、そちらから設定をします。なお設置直後は設定画面の上部にある書き出しリンクを押さないと、サイトマップが書き出されませんのでご注意ください。
  ダウンロードサイト
• 携帯版サイトを自動的に作ってくれる「Ktai Style」
  インストールするだけで、携帯サイトが自動的に作られます。
  ダウンロードサイト
• (追記)　記事やページ投稿でもPHP記述が使える「runPHP」
  ダウンロードサイト
  使用方法については、こちらをご参照ください。「power source：WP Plugin: 記事内でphpを使うrunPHP」。
• (追記)　キャッシュを生成する「WP Super Cache」
  あるのと無いのとでは表示速度が段違いです。ただ他のプラグインとの干渉で不具合が起こる場合がありますのでご注意ください。なお設置直後は設定画面にてステータスを「オン」または「ハーフオン」にしないと実行されません。あと注意点として「オン」または「ハーフオン」にした状態で「テーマ」を編集してもキャッシュが優先されて更新が反映されないので、テーマ編集時には必ずステータスを「オフ」にしてください。
  ダウンロードサイト
• （追記） 記事内の文字を一括置換できる「Search Regex」
  設置後、「メニュー」＞「ツール」に「Search Regex」が追加されますので、そこから置換を行ってください。
  ダウンロードサイト
• （追記）コメントスパム対策用プラグインその１「Akismet」
  信頼のナンバー１アンチスパム用プラグイン。ただし商用の場合は有料になります。ちなみにwordpressのバージョン2.0以上であれば始めから入っていますので、有効化し、「Akismet API key」を入力すれば使えるようになります。
  Akismet API keyは、WordPress.comでアカウントを作成すると使えるようになります。
  アカウント作成はこちら
  ※作成時、「ブログのアドレス」を入力するところがありますが、これは無視してユーザ名フィールドの下にある「ユーザアカウントのみ取得」を押してから登録してください。
  
• （追記）コメントスパム対策用プラグインその２「WP-SpamFree」
  スパム対策用プラグインその２です。ほかのブログ曰く「強力すぎる」とのことｗ
  商用のため、Akismetが利用できない場合などはこちらをご利用ください。
  ダウンロードサイト
• （追記）メールフォーム用プラグイン「Contact Form 7」
  おどろくほど簡単にメールフォームを設置できます。
  ダウンロードサイト
• （追記）WYSIWYGエディタ「TinyMCE Advanced」
  言わずもがなの超有名WYSIWYGエディタ「TinyMCE」が設置できるプラグインです。WordPressの場合、デフォルトでも使いやすいエディタが用意されてるんですけどね～。それでも物足りないという方はどうぞ。
  ダウンロードサイト

WEBプログラム版ブログの設置完了しました。

不具合があるかもしれませんが、それは出たときにということで。

メインページにも記述しておりますが、こちらはWEBプログラムに関しての覚書やソースを記述していく予定です。

これまでのアニメや漫画に関する記事は「趣味・日常版」をごらんください。

それにしても広告が無いってのはいいですね～^^

やたらと長いタイトルになりましたが、書いたとおりです。

wordpressでは半角で記述されたシングルクォート（'）、ダブルクォート(")が勝手に全角に変換されてしまいます。普通のブログを書く分には問題ありませんが、プログラムのソースを載せるときなどは非常に困ります。

というわけで、解決方法。いろいろなブログにも紹介されていますが、覚書ということで。

1. まず「wp-includes」フォルダの中にある「formatting.php」というファイルをダウンロードしてください。
2. テキストエディタで「formatting.php」を開き、wptexturize()関数の中のにある
   $curl = preg_replace($dynamic_characters, $dynamic_replacements, $curl);
   という記述をコメントアウトして保存してください。
3. 最後に「formatting.php」を元のフォルダにアップロードしてください。

これで半角クォートのまま出力されるようになります。なおあくまで表示の時サニタイズされているので、記事を書き直す必要はありません。

今回はこちらのサイトを参照させていただきました。You Look Too Coolさんのサイト

ウィジェットを使用せずに、カテゴリ一覧を表示させたい場合は

wp_list_categories()

が一番簡単な方法ですが、自動的にリスト形式で書き出されるため、デザインによっては不便なことがあります。MTのように<MTCategories>～</MTCategories>で囲んだ部分をループさせたりする関数があるといいのですが、残念ながらWordPressでは存在しません（プラグインならあるかもしれませんが）

そこで結局はデータベースから取り出してくる必要があります。
しかしわざわざ、$wpdb->get_resultsを使う必要はありません。

今回はget_terms()を利用します。（参考サイト：とりさんのソフト屋さんサイト）

<?php
    $cat_all = get_terms( "category", "fields=all&get=all" );
    foreach($cat_all as $value):
 ?>
<p><a href="<?php echo get_category_link($value->term_id); ?>"><?php echo $value->name;?></a></p>
<?php endforeach; ?>

get_termsで取得されるフィールドは

• term_id
• name
• slug
• term_group
• term_taxonomy_id
• taxonomy
• description
• count

となっていますので、foreachでループさせて「$value->term_id」という風に取得してください。

なおURLについては、get_terms()では取得できませんので、

get_category_link(カテゴリID)

で取得してください。（カテゴリIDはforeach中に「$value->term_id」で取得できます。）

なお、自分のやり方ではキャッシュが考慮されていませんので、考慮されたい方はこちらのサイトをご参照ください。とりさんのソフト屋さんサイト