<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>STAFF_01 [KYS-LAB]</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/" />
    <link rel="self" type="application/atom+xml" href="http://www.kys-lab.com/sasaki/atom.xml" />
    <id>tag:www.kys-lab.com,2008-03-10:/sasaki//2</id>
    <updated>2010-02-26T09:24:53Z</updated>
    
    <generator uri="http://www.sixapart.com/movabletype/">Movable Type Pro 4.23-ja</generator>

<entry>
    <title>Indesign「JavaScriptで表組作成」（XMLの関連付け編）</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2010/02/indesignjavascriptxml.php" />
    <id>tag:www.kys-lab.com,2010:/sasaki//2.146</id>

    <published>2010-02-22T07:31:29Z</published>
    <updated>2010-02-26T09:24:53Z</updated>

    <summary>  スクリプト関連は、ちょっと触ってなかったら、すぐに忘れてしまいますな。左脳の...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="Indesign" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="indesign" label="Indesign" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="javascript" label="javascript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="xml" label="XML" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[ <span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="indesign_tablemain.gif" src="http://www.kys-lab.com/sasaki/img/indesign_tablemain.gif" width="500" height="270" class="mt-image-none" style="" /></span>

<p>スクリプト関連は、ちょっと触ってなかったら、すぐに忘れてしまいますな。左脳のリハビリがてら、IndesignのテキストをXMLに関連付け（紐付け）させる練習をしてみました。</p>

<p>前回、<a href="http://www.kys-lab.com/sasaki/2010/01/indesignxhtmldreamweaverjavasc.php" title="Indesign「XHTML/Dreamweaverへのコンテンツの書き出し」（Javascript編） - STAFF_01 [KYS-LAB]" target="_blank">「XHTML/Dreamweaverへのコンテンツの書き出し」</a>について調べてみたけど、Indesignのコンテンツを元にXHTML化するというのは、ある意味「ワンソース・マルチユース」っぽいけど、Flashなどに読み込めないなど、用途に限界があります。</p>
<p>今後の展開を考えると、最終的にはXMLとしてコンテンツを書き出せたほうがベストですよね。</p>]]>
        <![CDATA[<h3>テキストフレームの関連付けサンプル（Indesign CS3）</h3>

<p>まず、テキストフレームを新たに構造のXMLに関連付け。「xmlElements.add()」メソッドを使用。</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_59/relation-paragraphstyle.gif" alt="段落スタイル" class="Slash"  style="margin-left:116px"  />
<p class="captxt">「段落スタイル」を適用させるためには、あらかじめスタイルを作成しておく</p>

<pre>
////////////////////////////////////
//テキストフレームの関連付けの練習//
////////////////////////////////////

var myDoc = app.activeDocument;
var myPage = myDoc.pages.item(0);
var myRootXMLElement = myDoc.xmlElements.item("Root");

//テキストフレームに入れるテキスト
var myTxt = "TextFrame Sample"

//テキスト配置
var myTextFrame = myPage.textFrames.add();
myTextFrame.visibleBounds = ["98.5mm","55mm","141mm","155mm"];
myTextFrame.contents = myTxt;

//1番目の引数にタグ名、2番目の引数にテキストフレームのオブジェクト
myRootXMLElement.xmlElements.add("tfName",myTextFrame);

//段落スタイル適用（スタイルはあらかじめIndesignで作成しておく）
myTextFrame.paragraphs.item(0).appliedParagraphStyle = "段落スタイル 1"; 
</pre>
<br />
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_59/relation-1.gif" alt="テキストフレーム" class="Slash" />
<p class="captxt">任意のテキストが入ったテキストフレームが作成される</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_59/relation-2.gif" alt="構造" class="Slash" />
<p class="captxt">テキストフレームがXMLに関連付けされる</p>

<h4>【メモ】</h4>
<p>なお、XMLを読み込んで、そのXMLにテキストフレームの内容を関連付けさせる場合は、「markup()」メソッドを使用。</p>
<pre>
TextFrame.markup(XMLElement);
</pre>
<br />
<h3>表組みの関連付けサンプル（Indesign CS3）</h3>

<p>以前に作成した<a href="http://www.kys-lab.com/sasaki/2008/11/indesign-cs3-javascript.php" title="Indesign CS3 JavaScriptで表組作成 - STAFF_01 [KYS-LAB]" target="_blank" >「Indesign CS3 JavaScriptで表組作成」</a>をさらに発展させて、表の中のテキストをXMLに関連付けさせてみました。</p>
<p>表の関連付けは「convertElementToTable()」メソッドを使用。</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_59/relation-table-cellstyle.gif" alt="表スタイル・セルスタイル" class="Slash" />
<p class="captxt">「表スタイル」と「セルスタイル」を適用させるためには、あらかじめスタイルを作成しておく</p>

<pre>
//////////////////////////
//表組みの関連付けの練習//
//////////////////////////

var myDoc = app.activeDocument;
var myPage = myDoc.pages.item(0);
var myRootXMLElement = myDoc.xmlElements.item("Root");

//タグはあらかじめIndesginで作成しておいたものを参照（「xmlTags.itemByName()」）
//ちなみにタグを追加する場合は、「xmlTags.add()」
var myTableTag = myDoc.xmlTags.itemByName("table");
var myRowTag = myDoc.xmlTags.itemByName("row");
var myCellTag = myDoc.xmlTags.itemByName("cell");

//表に入れるテキストの配列作成
var txtArray = new Array();
txtArray[0] = ["1","2","3"];
txtArray[1] = ["4","5","6"];
txtArray[2] = ["7","8","9"];

//XML elementsの追加
var myTableXMLElement = myRootXMLElement.xmlElements.add(myTableTag);
for(var i = 0; i < 3; i++){	
	myTableXMLElement.xmlElements.add(myRowTag);
	for(var j = 0; j < 3; j++){	
		myTableXMLElement.xmlElements[i].xmlElements.add(myCellTag);
		myRootXMLElement.xmlElements.item(0).xmlElements[i].xmlElements[j].contents =txtArray[i][j];
		myRootXMLElement.xmlElements.item(0).xmlElements[i].xmlElements[j].contents =txtArray[i][j];
		myRootXMLElement.xmlElements.item(0).xmlElements[i].xmlElements[j].contents =txtArray[i][j];
	}
}

//XML要素を表に変換して関連付ける
var myTable = myTableXMLElement.convertElementToTable(myRowTag, myCellTag);

//テキスト配置
var myTextFrame =myPage.textFrames.add();
myTextFrame.visibleBounds = ["98.5mm","55mm","198.5mm","155mm"];
var myStory = myTextFrame.parentStory;
myStory.placeXML(myRootXMLElement);

//表・セルスタイル適用（スタイルはあらかじめIndesignで作成しておく）
myTable.appliedTableStyle = "表スタイル 1"; 
with(myTable){
	for(var k = 0; k < 3; k++){	
		//セルの幅と高さ
		rows[k].width = "33mm"; 
		rows[k].height = "33mm"; 
		
		//セルスタイル適用
		rows[0].cells[k].appliedCellStyle = "セルスタイル 1";
		rows[1].cells[k].appliedCellStyle = "セルスタイル 1";
		rows[2].cells[k].appliedCellStyle = "セルスタイル 1";
	}
}
</pre>
<br />
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_59/relation-3.gif" alt="表組み" class="Slash" />
<p class="captxt">表組みが作成される</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_59/relation-4.gif" alt="構造" class="Slash" />
<p class="captxt">表の中のテキストがXMLに関連付けされる</p>


<p>表組みの関連付けは、ググってもほとんど作例記事がなかったので、ちょっと苦労しました。約二日間、「InDesign CS3 スクリプティング ガイド JS」とにらめっこ。もっと論理的な発想ができる脳みそが欲しいな。</p>
<p>なお、表組みに関しては、読み込んだXMLに直接関連付けさせるのは難しいっぽい。新たに書き出し用のXMLを自動作成して関連付けさせるのがベターかもしれないっす。</p>
<p>通りがかりの偉い方、ご存じでしたらアドバイスお願いします！</p>]]>
    </content>
</entry>

<entry>
    <title>Indesign「XHTML/Dreamweaverへのコンテンツの書き出し」（Javascript編）</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2010/01/indesignxhtmldreamweaverjavasc.php" />
    <id>tag:www.kys-lab.com,2010:/sasaki//2.145</id>

    <published>2010-01-27T10:15:10Z</published>
    <updated>2010-01-27T23:58:09Z</updated>

    <summary>  前回のIndesign「XHTML/Dreamweaverへのコンテンツの書...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="Indesign" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="JAVA SCRIPT" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="indesign" label="Indesign" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="javascript" label="javascript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="xhtml" label="XHTML" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[ <span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="xhtml_export_main.jpg" src="http://www.kys-lab.com/sasaki/img/xhtml_export_main.jpg" width="500" height="270" class="mt-image-none" style="" /></span>

<p>前回の<a href="http://www.kys-lab.com/sasaki/2010/01/indesignxhtmldreamweaver.php" title="Indesign「XHTML/Dreamweaverへのコンテンツの書き出し」 - STAFF_01 [KYS-LAB]" target="_blank" >Indesign「XHTML/Dreamweaverへのコンテンツの書き出し」 </a>からのつづき。</p>
<p>「メディア間の書き出し」機能は、確かに便利なんですが、何百ページもあるデータを各ページずつに手動で書き出すのは面倒。ファイル名の付け方も間違う可能性もあります。</p>
<p>なんとかJavascriptで自動化できないかとググッてみたら、海外で同じようなコードが見つかったので、ドイツ（Ichとか書いてあったので多分）のIndesignのフォーラムから拾ってきました。</p>
<p>どこの国でも同じようなことを悩んでいる方は、いらっしゃいますなw</p>]]>
        <![CDATA[<h3>JavascriptでInDesignコンテンツのXHTMLの書き出し</h3>

<pre>
app.scriptPreferences.version = 5.0; 
var outputFile = File('/c/test/test.html'); 
 
var document = app.activeDocument; 
 
var scriptPath = Folder.startup + '/Scripts/Export as XHTML/'; 
var scriptFile = File(scriptPath + 'XHTMLExport.jsxbin'); 
if (scriptFile.exists) { 
scriptFile.open(); 
var script = scriptFile.read(); 
scriptFile.close(); 
eval(script); 
 
var opts = new XHTMLExportOptions(); 
 
opts.styleHandling = XHTMLExportOptions.extStyleSheet; 
opts.styleSheet = 'template.css'; 
 
opts.formatted = true; 
 
app.exportForWebPreferences.gifOptionsInterlaced = true; 
 
var exporter = new XHTMLExporter(scriptFile); 
 
var success = exporter.doExport(document, undefined, opts, outputFile); // check the results: 
if(success) 
{ 
/*if(exporter.outOfDateLinks.length > 0) 
{ 
alert('Exporting ' + document.name + ' succeeded\nHowever ' + exporter.outOfDateLinks.length + ' links were out of date.'); 
} */ 
} 
else 
{ 
alert('Exporting ' + document.name + ' failed with this error message:\n' + exporter.error.message); 
} 
}
</pre>

<p>via:<a href="http://www.hilfdirselbst.ch/foren/Javascript_XHTML_Export_P384974.html" title="Javascript XHTML Export - Adobe InDesign - HilfDirSelbst.ch - Forum" target="_blank" >Javascript XHTML Export - Adobe InDesign - HilfDirSelbst.ch - Forum</a></p>


<p>アプリケーションフォルダ内のScriptsフォルダの中の「export as xhtml」に入ってる「.jsxbin」ファイルを読み込んで、ゴニョゴニョしているようです。</p>

<p>ただ、これだとドキュメント全体をXHTMLに書き出すので、全ページがつながったXHTMLができあがるだけ。それでは<strong>【ファイル＞メディア間の書き出し】</strong>で、ドキュメントを書き出しているのと同じ結果ですね。</p>

<p>ボクがやりたいのは、Javascriptでページごとに分割、または選択範囲のみの書き出しを自動化したいんやけど。</p>

<p>ちなみに上記のコードで書き出す対象（var documentの箇所）をページに変えたら、エラーが出てページごとに書き出せない。選択範囲のみを書き出す設定も出来ないっぽい。</p>

<p>多分、XHTMLExportOptionsでなんとかするんだろうけど、読み込んでいる「.jsxbin」がコンパイル済みのファイルなので、中身をみることもできない。どうなってるんだろう？？今のボクの脳みそでは解明は無理っす。</p>

<p>やりたいことは解決していないけど、XHTML Exportはモジュール化した外部スクリプトを読み込んで動かすってことが分かりました。</p>

<p>下記のPDFも参考になりそうなのでリンク。</p>

<p><a href="http://www.adobe.com/jp/support/kb/ds/511/511744/511744_feature-development-with-scripting.pdf" target="_blank" class="allow" >FEATURE DEVELOPMENT WITH SCRIPTING（日本語版）（PDF）</a></p>]]>
    </content>
</entry>

<entry>
    <title>Indesign「XHTML/Dreamweaverへのコンテンツの書き出し」</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2010/01/indesignxhtmldreamweaver.php" />
    <id>tag:www.kys-lab.com,2010:/sasaki//2.144</id>

    <published>2010-01-27T10:12:27Z</published>
    <updated>2010-01-27T23:56:59Z</updated>

    <summary> IndesignのXHTMLの書き出しがスゴイっすね。知りませんでした。 We...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="Dreamweaver " scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Indesign" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="dreamweaver" label="Dreamweaver" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="indesign" label="Indesign" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="xhtml" label="XHTML" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="xhtml_export_main.jpg" src="http://www.kys-lab.com/sasaki/img/xhtml_export_main.jpg" class="mt-image-none" style="" height="270" width="500" /></span>

<p>IndesignのXHTMLの書き出しがスゴイっすね。知りませんでした。</p>

<p>Webオンリーの制作されている方は、あまり関係ないと思いますが、IndesignでDTPをされている方は、組版したデータをそのままhtml化してWebにも流用する機会も今後増えてくるでしょう。</p>

<p><strong>【メディア間の書き出し】</strong>機能を使えば、InDesignコンテンツをXMLやXHTMLなどのファイルへと、そこそこええ感じに書き出してくれます。</p>

<p><a href="http://help.adobe.com/ja_JP/InDesign/5.0/help.html?content=WS82C401A9-E844-40d5-B9B4-540CA374B0C6.html" title="InDesign CS3" target="_blank" class="allow">XHTML / Dreamweaver へのコンテンツの書き出し（CS3）</a></p>]]>
        <![CDATA[<h3>InDesignコンテンツのXHTMLの書き出し（CS3）</h3>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_58/xhtml_export_01.jpg" alt="Indesignで作成したコンテンツ" class="Slash" />
<p class="captxt">「Indesignで作成したコンテンツ」</p>
<ol>
<li value="1"><strong>InDesignで印刷用のデータを作成。</strong><br />
※表組みの方がいい感じになります。</li>
</ol>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_58/xhtml_export_02.gif" alt="段落スタイル、セルスタイルなどを設定" class="Slash"/>

<ol>
<li value="2"><strong>【段落スタイル】や【セルスタイル】などを適用。</strong><br />
※後にXHTMLで書き出した時に自動でクラス名が追加されます。</li>
</ol>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_58/xhtml_export_03.gif" alt="メディア間の書き出し" class="Slash" />
<ol>
<li value="3"><strong>【ファイル＞メディア間の書き出し＞XHTML・Dreamweaver】を選択。</strong></li>
</ol>

<ol>
<li value="4"><strong>HTMLドキュメントの名前と保存場所を指定。</strong></li>
</ol>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_58/xhtml_export_04.gif" alt="一般設定" class="Slash" />
<p class="captxt">「一般設定（選択範囲のみの書き出しも可能）」</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_58/xhtml_export_05.gif" alt="画像設定" class="Slash" />
<p class="captxt">「画像設定（PNGの設定もほしいところ）」</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_58/xhtml_export_06.gif" alt="詳細設定" class="Slash" />
<p class="captxt">「詳細設定（書き出されたクラス名にあわせて外部CSSをつくっておくと便利）」</p>
<ol>
<li value="5"><strong>オプションダイアログから、「一般」「画像」「詳細」セクションで各設定後、書き出し。</strong><br />
※画像はhtmlのファイル名に「-web-images」がついたフォルダに自動的に保存されます。</li>
</ol>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_58/xhtml_export_07.gif" alt="書き出されたXHTML" class="Slash" />
<p class="captxt">「書き出されたXHTML」</p>
<ol>
<li value="6"><strong>書き出されたXHTMLをCSSで調整して完成。</strong><br />
テキストフレームは「div」、画像は「img」、表は「table」、セルは「td」にそれぞれ自動で置き換わります。工程2でスタイルを適用した箇所に自動的にクラスが追加されるので、CSSの指定がしやすいです。</li>
</ol>

<h4>■サンプル</h4>
<p><a href="http://www.kys-lab.com/sasaki/sample/xhtml_export_sample/xhtml_export_sample.html" title="xhtml_export_sample" target="_blank"  class="allow" >InDesignコンテンツをXHTMLの書き出したサンプルページ</a></p>

<p>何十ページあっても、外部CSSを一つ設定しておけば便利です。ただし、Indesignで選択範囲を作成し、1ページずつ書き出さなければいけないのが面倒なので、Javascriptで自動化できかいか思案中。</p>

<p><a href="http://www.kys-lab.com/sasaki/2010/01/indesignxhtmldreamweaverjavasc.php" title="Indesign「XHTML/Dreamweaverへのコンテンツの書き出し target="_blank" 」（Javascript編） - STAFF_01 [KYS-LAB]">Indesign「XHTML/Dreamweaverへのコンテンツの書き出し」（Javascript編） </a>へと続く。。。</p>]]>
    </content>
</entry>

<entry>
    <title>IE6用透過png対応策「DD_belatedPNG.js」</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2010/01/ie6pngdd-belatedpngjs.php" />
    <id>tag:www.kys-lab.com,2010:/sasaki//2.143</id>

    <published>2010-01-18T02:53:32Z</published>
    <updated>2010-01-18T02:56:44Z</updated>

    <summary> コーディングで頭を悩ませるのが、IE6対策。 cssは当然として、画像で透過p...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="JAVA SCRIPT" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="dd_belatedpngjs" label="DD_belatedPNG.js" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="javascript" label="javascript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="png" label="png" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="DD_belatedPNG.jpg" src="http://www.kys-lab.com/sasaki/img/DD_belatedPNG.jpg" class="mt-image-none" style="" height="270" width="500" /></span>

<p>コーディングで頭を悩ませるのが、IE6対策。</p>

<p>cssは当然として、画像で透過pngを多用させたい場合、苦労します。</p>

<p>そんなとき便利なjavascriptが結構ありますが、オススメなのが<strong>「DD_belatedPNG.js」</strong>（最新版0.0.8a、2010.1.18現在）。</p>

<p><a href="http://www.dillerdesign.com/experiment/DD_belatedPNG/" target="blank" class="allow">DD_belatedPNG</a></p>

<p>img要素、pngを含んだdivなどのIDやクラスを参照し、ピンポイントで使用できるので超重宝します。ありがたいですな。</p>

<p>先日、バージョンアップした「jQuery 1.4」ともぶつかってエラーが出ることもなく機能しております。</p>


<p>「DD_belatedPNG.js」については、下記のサイトさんが、丁寧に解説されており、参考にさせていただきました。</p>
<h3>参考サイト</h3>
<p><a href="http://smkn.xsrv.jp/blog/2009/04/postscript_dd_belatedpng_js/" title="ITキヲスク | IE6用透過png対応策、DD_belatedPNGの使用法と注意点" target="_blank" class="allow" >ITキヲスク | IE6用透過png対応策、DD_belatedPNGの使用法と注意点</a></p>]]>
        
    </content>
</entry>

<entry>
    <title>WordPressの勉強-06「カスタムテンプレート作成」</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2009/12/wordpress-06.php" />
    <id>tag:www.kys-lab.com,2009:/sasaki//2.142</id>

    <published>2009-12-22T07:31:18Z</published>
    <updated>2009-12-22T07:44:21Z</updated>

    <summary> 今回は、カスタムテンプレートをつくる練習。 記事やカテゴリー、広告などを詰め込...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="WordPress" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="wordpress" label="WordPress" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="テンプレート" label="テンプレート" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="プラグイン" label="プラグイン" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="custom_tpl_main.jpg" src="http://www.kys-lab.com/sasaki/img/custom_tpl_main.jpg" class="mt-image-none" style="" height="270" width="500" /></span>

<p>今回は、カスタムテンプレートをつくる練習。</p>
<p>記事やカテゴリー、広告などを詰め込んだブログのトップページではなく、いわゆる「ホームページのトップページ」っぽいシンプルなテンプレートにしてみました。</p>]]>
        <![CDATA[<h3>■テンプレートの作成手順</h3>

<ol>
<li value="1"><strong>index.phpを複製・修正</strong></li>
</ol>
<p>メインインデックスのテンプレート「index.php」をローカル上で複製し、「toppage.php」と名称を変更。いらない部分を削除したり、記事一覧のコードを追加後、FTPで現在使用しているテーマのディレクトリにアップ（index.phpやheader.phpなどが入ってるディレクトリ）。</p>

<ol>
<li value="2"><strong>テンプレート名作成</strong></li>
</ol>

<p>ダッシュボードの【外観＞編集】で、テーマの編集ページを開き、右側のテンプレート一覧から、「toppage.php」を選択。</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_56/custom_tpl_01.gif" alt="テンプレート名" class="Slash" />
<p class="captxt">「テーマの編集画面-テンプレート名追加」</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_56/custom_tpl_02.gif" alt="テンプレート名" class="Slash" />
<p class="captxt">「テンプレート一覧に表示される」</p>
<p>toppage.phpの一番上に</p>

<pre>
&lt;?php
/*
Template Name: トップページのサンプルテンプレート
*/
?&gt;
</pre>

<p>と記述すると、テンプレート一覧にテンプレート名が表示される。</p>

<ol>
<li value="3"><strong>ページを追加し、テンプレート選択</strong></li>
</ol>
<p>サイトのトップーページとブログのトップページ用にページを追加。</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_56/custom_tpl_03.gif" alt="ページを編集(タイトル）" class="Slash" />
<p class="captxt">「サイトのトップページ用のタイトル入力」</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_56/custom_tpl_04.gif" alt="ページを編集(テンプレート名）" class="Slash" />
<p class="captxt">「サイトのトップページは、トップページのサンプルテンプレートを選択」</p>
<p>【ページ＞新規追加】でページを追加すると、右下の「テンプレート」に、先ほど作成した「トップページのサンプルテンプレート」を選択可能になる。ページのタイトルは「HOME」に。</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_56/custom_tpl_05.gif" alt="ページを編集(タイトル）" class="Slash" />
<p class="captxt">「ブログのトップページ用のタイトル入力」</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_56/custom_tpl_06.gif" alt="ページを編集(テンプレート名）" class="Slash" />
<p class="captxt">「ブログのトップページは、デフォルトのテンプレートを選択」</p>
<p>さらに、元のブログのトップ用に新規ページを追加して、タイトルに「ブログ」と入力し、「テンプレート」は、「デフォルトのテンプレート」を選択。</p>

<ol>
<li value="4"><strong>表示設定の変更</strong></li>
</ol>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_56/custom_tpl_07.gif" alt="表示設定" class="Slash" />
<p class="captxt">「表示設定の変更画面」</p>

<p>【設定＞表示設定】から、フロントページの表示を「固定ページ」にチェックを入れ、</p>
<ul>
<li>フロントページ：<strong>HOME</strong>（トップページのサンプルテンプレートで作成したページ）</li>
<li>投稿ページ：<strong>ブログ</strong>（デフォルトのテンプレートで作成したページ）</li>
</ul>
<p>を選択するとトップページが入れ替わる。</p>

<ol>
<li value="5"><strong>Vicunaのグローバルナビ修正</strong></li>
</ol>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_56/custom_tpl_08.gif" alt="除外ページ" class="Slash" />
<p class="captxt">「Vicuna設定画面」</p>
<p>【外観＞Vicuna設定】で、グローバルナビから「トップページのサンプル」のID番号を入力して除外する。こういう設定もあるので、Vicunaは、いたせりつくせりですな。</p>


<h3>■トップページの外観</h3>

<p>トップページの外観は、シンプルにしたかったので、最新記事のタイトルと日付だけを一覧表示させることに。</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_56/custom_tpl_10.gif" alt="記事のタイトルにロールオーバーすると概要とサムネイル画像表示" class="Slash" />
<p class="captxt">「記事のタイトルにロールオーバーすると概要とサムネイル画像表示」</p>
<p>記事のタイトルをロールオーバーすると、title属性で記事の概要を表示させるようにしたけど、見た目がもひとつだったので、<a href="http://www.kys-lab.com/sample/jquerydetukuru/" title="jQueryで作ろう! - 広友社" target="_blank" >スタッフUEDA氏に教えてもらったJQuery</a>をアレンジして、概要と記事中のサムネイル画像を表示するようしてみた。</p>


<h3>■プラグイン</h3>

<p>サムネイル画像を表示させるのは、下記のサイトを参考に「Post Thumb Revisited」というプラグインを利用。</p>

<h4>●参考サイト</h4>
<p><a href="http://mono-stock.com/pages/?p=1137" title="mono-stock? Blog Archive ? wordpressで記事のサムネイルを表示する" target="_blank" class="allow" >mono-stock? Blog Archive ? wordpressで記事のサムネイルを表示する</a></p>


<p>最新記事一覧のループ内に</p>
<pre>
&lt;?php the_thumb(); ?&gt;
</pre>
<p>を挿入するだけ。便利。</p>

<p>MTでは、プラグイン使わわないで<a href="http://www.kys-lab.com/sasaki/2008/04/mt.php" title="MTのサムネイル画像を利用してブログ記事にリンク - STAFF_01 [KYS-LAB]" target="_blank">必死こいてサムネイル画像を作ってた</a>のを思い出します。</p>

<h3>■WordPressの練習用ページ</h3>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_56/custom_tpl_11.jpg" alt="sample" class="Slash" />
<p class="captxt">「ホームページのトップっぽいHOME（2009.12.22現在）」</p>
<p><a href="http://www.kys-lab.com/sasaki/wp/" title="KYS-WP*" target="_blank"  class="allow" >KYS-WP*</a>（WordPressの練習用トップページ）</p>
<p><a href="http://www.kys-lab.com/sasaki/wp/blog/" title="KYS-WP*" target="_blank"  class="allow" >KYS-WP*</a>（元のブログトップページ）</p>

<p>とりあえず、Movable Typeでやっていたことが、WordPressでも少しずつできるようになってきました。</p>]]>
    </content>
</entry>

<entry>
    <title>GIMPテクニック「大正ロマン漂う加工」</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2009/12/gimp-3.php" />
    <id>tag:www.kys-lab.com,2009:/sasaki//2.141</id>

    <published>2009-12-10T00:54:33Z</published>
    <updated>2009-12-10T01:09:24Z</updated>

    <summary> GIMP Perfect Technique (INFOREST MOOK) ...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="GIMP" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="gimp" label="GIMP" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="graphic" label="GRAPHIC" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="gimp_perfect_tech_main.jpg" src="http://www.kys-lab.com/sasaki/img/gimp_perfect_tech_main.jpg" class="mt-image-none" style="" height="270" width="500" /></span>

<p><a href="http://www.amazon.co.jp/gp/product/4861905036?ie=UTF8&tag=kyslab01-22&linkCode=as2&camp=247&creative=7399&creativeASIN=4861905036" target="_blank" >GIMP Perfect Technique (INFOREST MOOK)</a><img src="http://www.assoc-amazon.jp/e/ir?t=kyslab01-22&l=as2&o=9&a=4861905036" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
に作例を1点寄稿しました。</p>
<p>この前、執筆させていただいた<a href="http://www.kys-lab.com/sasaki/2009/11/gimp-2.php" title="GIMPテクニック「一枚の写真からクールな画像を作成」 - STAFF_01 [KYS-LAB]" target="_blank">「GIMPデジタルフォトテクニック2010」</a>を含めGIMP関連のムックがいっぱい出てますね。</p>]]>
        <![CDATA[<h3>「大正ロマン漂う加工」作例</h3>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_55/gimp_perfect_tech_sample.jpg" alt="大正ロマン漂う加工の作例" class="Slash" />
<p class="captxt">「素材画像（左）を加工して、大正ロマン漂う画像（右）に」</p>
<p>素材画像を少し古びた加工をしてコラージュしていきます。</p>
<p>ノスタルジーを感じさせる色調整がポイントです。</p>

<h4>素材画像</h4>

<ul>
<li>人物の画像：<a href="http://sozai-free.com/" title="2000ピクセル以上のフリー写真素材集" target="_blank" >2000ピクセル以上のフリー写真素材集</a>さん</li>
<li>街並みの画像：<a href="http://www.yunphoto.net/" title="ゆんフリー写真素材集" target="_blank" >ゆんフリー写真素材集</a>さん</li>
<li>花の画像：<a href="http://www.yunphoto.net/" title="ゆんフリー写真素材集" target="_blank" >ゆんフリー写真素材集</a>さん</li>
</ul>

<p>詳細は、ムックにて・・・</p>

<iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=kyslab01-22&o=9&p=8&l=as1&m=amazon&f=ifr&md=1X69VDGQCMF7Z30FM082&asins=4861905036" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>]]>
    </content>
</entry>

<entry>
    <title>WordPressの勉強-05「プラグイン」</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2009/12/wordpress-05.php" />
    <id>tag:www.kys-lab.com,2009:/sasaki//2.140</id>

    <published>2009-12-08T07:13:26Z</published>
    <updated>2009-12-08T07:41:30Z</updated>

    <summary> WordPressの練習用サイトにいくつかプラグインを設定しました。 以下、簡...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="WordPress" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="wordpress" label="WordPress" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="プラグイン" label="プラグイン" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="plugin_main.gif" src="http://www.kys-lab.com/sasaki/img/plugin_main.gif" class="mt-image-none" style="" height="270" width="500" /></span>

<p><a href="http://www.kys-lab.com/sasaki/wp/" title="KYS-WP*" target="_blank"  >WordPressの練習用サイト</a>にいくつかプラグインを設定しました。</p>
<p>以下、簡単な概要。</p>]]>
        <![CDATA[<h3>■Akismet</h3>

<p>WordPress最強のコメントスパム対策プラグイン。WordPressに標準で同梱されています。</p>
<p>コメントスパムやトラックバックスパムを大きく減らすか完全に排除してくれるそうです。</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_54/plugin_akismet.gif" alt="Akismet" class="Slash" />
<p class="captxt">「APIキーをペースト」</p>
<p>設定を有効にするには、<a href="http://en.wordpress.com/signup/" title="WordPress.com" target="_blank" >WordPress.comのユーザー登録画面</a>で登録後、「WordPress.com API キー」を取得して、貼り付けるだけ。</p>

<h3>■Contact Form 7</h3>
<p>コンタクトフォームを作成してくれるプラグイン。</p>
<h4>●プラグインのサイト</h4>
<p><a href="http://contactform7.com/ja/" title="Contact Form 7: WordPress のお問い合わせフォームプラグイン。シンプル、でも柔軟。"  target="_blank"  class="allow">Contact Form 7: WordPress のお問い合わせフォームプラグイン。シンプル、でも柔軟。</a></p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_54/plugin_contactform7.gif" alt="Contact Form 7" class="Slash" />
<p class="captxt">「設定したコードをコピー」</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_54/plugin_contactform7_2.gif" alt="Contact Form 7" class="Slash" />
<p class="captxt">「固定ページの本文にペースト」</p>
<p>設定したコードをお問い合せ用のページの本文に貼り付けるだけ。簡単。カスタマイズもできるようです。</p>

<p>なお、お問い合せページのような固定ページは、コメントとトラックバックなどををcssで表示させないようにしました。</p>
<pre>
body#entry2 #comments,body#entry2 #trackback,
body#entry2 .entry ul.info{
	display:none;
}
</pre>

<h3>■Google Analytics for WordPress</h3>
<p>Google Analyticsの設定が簡単にできるプラグイン。</p>
<h4>●プラグインのサイト</h4>
<p><a href="http://yoast.com/wordpress/google-analytics/#utm_source=wordpress&utm_medium=plugin&utm_campaign=google-analytics-for-wordpress" title="Google Analytics for WordPress - Yoast - Tweaking Websites" target="_blank" class="allow">Google Analytics for WordPress - Yoast - Tweaking Websites</a></p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_54/plugin_google_analytics.gif" alt="Google Analytics for WordPress" class="Slash" />
<p class="captxt">「IDを入力するだけ」</p>
<p>設定画面のAccount IDにGoogle Analyticsでウェブサイトを登録した際に発行されるIDを入力するだけです。</p>

<p>まぁ、footerに直接トラッキングコードを挿入してもいいんですが、とりあえず入れてみました。</p>


<h3>■Ktai Style</h3>
<p>日本の携帯対応プラグイン。</p>
<h4>●プラグインのサイト</h4>
<p><a href="http://wppluginsj.sourceforge.jp/ktai_style/" title="WordPress Plugins/JSeries ? Ktai Style (携帯対応プラグイン)" target="_blank" class="allow">WordPress Plugins/JSeries ? Ktai Style (携帯対応プラグイン)</a></p>

<p>【ダッシュボード＞設定＞携帯表示】から設定画面へ。</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_54/plugin_ktai_style.gif" alt="Ktai Styl" class="Slash" />
<p class="captxt">「各キャリアに対応してます。スゴイ！」</p>

<p>PC用と同じアドレスで、携帯用に表示してくれるので便利ですね。細かいカスタマイズは、また時間のあるときにでも。</p>

<h3>■Similar Posts</h3>
<p>エントリーの関連記事を表示させるプラグイン。</p>
<h4>●プラグインのサイト</h4>
<p><a href="http://rmarsh.com/plugins/similar-posts/" title="All Things Seen and Unseen ? Similar Posts" target="_blank" class="allow">All Things Seen and Unseen ? Similar Posts</a></p>

<p>MTでは、関連記事を表示させるのに、苦労してテンプレートタグを作ってたんですが（それもタグしか反応しないし）、このプラグインは、ダッシュボードから各設定が簡単におこなえます。</p>

<p>設定は下記のサイトを参考にしました。</p>

<p><a href="http://www.yukun.info/blog/2008/10/wordpress-plugin-similar-posts.html" title="WordPress: Similar Posts の紹介と設定例 - 関連記事[投稿|エントリ]を表示するプラグイン - Yukun's Blog" target="_blank" class="allow" >WordPress: Similar Posts の紹介と設定例 - 関連記事[投稿|エントリ]を表示するプラグイン - Yukun's Blog</a></p>


<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_54/plugin_simlar_posts.gif" alt="Similar Posts" class="Slash" />
<p class="captxt">「関連記事の表示設定」</p>
<p>ちなみに、Output templateは</p>
<pre>
&lt;li&gt;&lt;a href="{url}" title="『{title}』もご覧ください"&gt;{title}&lt;?/a&gt;&lt;/li&gt;
</pre>
<p>にしました。</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_54/plugin_simlar_posts2.gif" alt="Similar Posts" class="Slash" />
<p class="captxt">「関連記事の表示画面」</p>
<p>ロールオーバーすると、こんな感じ。</p>

<h3>■WordPressの練習用ページ</h3>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_53/skin_sample.jpg" alt="sample" class="Slash" />
<p><a href="http://www.kys-lab.com/sasaki/wp/" title="KYS-WP*" target="_blank"  class="allow" >KYS-WP*</a>（WordPressの練習用ページ）</p>

<p>まだまだ、便利そうなプラグインがいっぱいありますが、プラグイン同士のバッティングにより正常に表示されない可能性もあるようなので、一つ一つ確認しながら、導入していこうと思います。</p>]]>
    </content>
</entry>

<entry>
    <title>WordPressの勉強-04「Vicunaテーマのスキンを変更」</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2009/12/wordpress-04vicuna.php" />
    <id>tag:www.kys-lab.com,2009:/sasaki//2.139</id>

    <published>2009-12-05T07:29:36Z</published>
    <updated>2009-12-05T07:39:39Z</updated>

    <summary> Vicunaテーマの中に標準で入っている「style-vega」をローカルにダ...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="WordPress" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="vicuna" label="Vicuna" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="wordpress" label="WordPress" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="スキン" label="スキン" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="skin_main.jpg" src="http://www.kys-lab.com/sasaki/img/skin_main.jpg" class="mt-image-none" style="" height="270" width="500" /></span>

<p>Vicunaテーマの中に標準で入っている「style-vega」をローカルにダウンロードして、ディレクトリ名を変更後（style-kysとした）、中身のcssを修正しました。</p>

<p>cssの構造を理解するのに少し時間はかかりましたが、慣れればとてもカスタマイズしやすいですね。</p>]]>
        <![CDATA[<h3>■カスタマイズしたところ</h3>
<p>元々シンプルでよく出来たテーマですが、ちょっぴり窮屈な感じがしたので、少し余白を入れて落ち着いた佇まいにしてみました。</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_53/skin_sample.jpg" alt="sample" class="Slash" />
<p class="captxt">「Vicunaテーマのスキンをカスタマイズ<span style="font-weight:normal">（09.12.05現在）</span>」</p>
<p><a href="http://www.kys-lab.com/sasaki/wp/" title="KYS-WP*" target="_blank"  class="allow" >KYS-WP*</a>（カスタマイズしたページ）</p>

<h4>●主なカスタマイズ</h4>
<ul>
<li>リキッドデザインをやめて固定幅に</li>
<li>トップページ（HOME）にイメージ画像追加</li>
<li>サイドバーに余白</li>
<li>フッターの変更</li>
<li>投稿日やカテゴリー一覧にアイコン追加</li>
</ul>

<p>アイコンは、「DOTS DESIGN」さんのアイコンを使用させていただきました。ありがとうございます。</p>

<p><a href="http://dots-design.com/" title="フリーWEB素材サイト「DOTS DESIGN(ドッツ・デザイン)」" target="_blank" class="allow" >フリーWEB素材サイト「DOTS DESIGN(ドッツ・デザイン)」</a></p>

<h4>●Vicuna Adaptor</h4>
<p>「Vicuna Adaptor」プラグインも入れたので、「はてな」と「del.icio.us.」のボタンを追加。</p>
<p>あと、「Fontsize Switcher」もアクティブにしましたが、cssが効いてなかったので、下記のページを参考にしてcssを追加しました。</p>

<p><a href="http://vicuna.jp/forum/viewtopic.php?t=873&sid=aa41867205eb9bf30028c7e1740cd6e0" title="Vicuna :: トピックを表示 - wp.Vicuna Excで　Vicuna　Adaptor　fontsizeswicherを使いたい" target="_blank" class="allow" >Vicuna :: トピックを表示 - wp.Vicuna Excで　Vicuna　Adaptor　fontsizeswicherを使いたい</a></p>


<h3>■WordPressのテンプレートタグ</h3>

<p>MT同様、WordPressにも独自の「テンプレートタグ」があります。</p>


<p>たとえば、ブログのアドレスは</p>

<pre>
&lt;?php bloginfo('home'); ?&gt;
</pre>
<p>となります。MTでは「&lt;$mt:BlogURL$&gt;」ですね。</p>


<p>テンプレート内の画像を参照させるには</p>

<pre>
&lt;?php bloginfo('template_url') ?&gt;/画像のパス/画像名.jpg
</pre>

<p>です。</p>
<p>と、偉そうに書いてますが、まだこの二つぐらいしか覚えてませんw</p>
<p>テンプレートタグは、触っていくうちに少しずつ覚えていければと思います。</p>


<h3>■WordPressのテンプレート</h3>

<p>phpに関しては、ほぼ初心者っていうのもあるけど、テンプレートの修正が非常にやりづらい。</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_53/skin_tpl_wp.gif" alt="WordPressのテンプレート設定画面" class="Slash" />
<p class="captxt">「WordPressのテーマ編集画面」</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_53/skin_tpl_wp2.gif" alt="WordPressのテンプレート設定画面" class="Slash" />
<p class="captxt">「WordPressのテンプレート」</p>

<p>テキストも色分けされてないので、どれがテンプレートタグなのかhtmlなのか、一目でわかりにくいし、ダッシュボード内で、テンプレートタグの検索ができないので、どこで使用しているのか探すのが大変。</p>
<p>また、よく使用するものは、もっとモジュール化しておいてほしい気がしました。自分ですればいいのですが。</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_53/skin_tpl_mt.gif" alt="Movable Type5のテンプレート設定画面" class="Slash" />
<p class="captxt">「Movable Type5のテンプレート編集画面」</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_53/skin_tpl_mt2.gif" alt="Movable Type5のテンプレート設定画面" class="Slash" />
<p class="captxt">「Movable Type5のテンプレート」</p>

<p>その点、MTは、テキストもタグごとに色分けされおり、テンプレートも整理されているので、やはりわかりやすいなぁ。その分、重たいけど。</p>


<h3>■WordPressのウィジェット</h3>

<p>MT同様、WordPressのウィジェットもサイドバーの項目をドラッグアンドドロップで簡単に変更することができます。</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_53/skin_tpl_widget.gif" alt="WordPressのウィジェット設定画面" class="Slash" />
<p class="captxt">「WordPressのウィジェット設定画面」</p>

<p>「テキスト」ウィジェットは、HTMLも自由に書き込むことができるので、プロフィールやバナーなども簡単に追加できて便利ですね。</p>


<h3>■WordPressの練習用ページ</h3>
<p><a href="http://www.kys-lab.com/sasaki/wp/" title="KYS-WP*" target="_blank"  class="allow" >KYS-WP*</a>（WordPressの練習用ページ）</p>

<p>だいたいのカタチができたので、プラグインも一つ一つ理解していこう。</p>]]>
    </content>
</entry>

<entry>
    <title>WordPressの勉強-03「テーマの変更」</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2009/12/wordpress-03.php" />
    <id>tag:www.kys-lab.com,2009:/sasaki//2.138</id>

    <published>2009-12-02T02:53:10Z</published>
    <updated>2009-12-04T10:50:58Z</updated>

    <summary>  WordPressの「テーマ」の種類は、MTよりも多そうですね。 調べてみる...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="WordPress" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="vicuna" label="Vicuna" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="wordpress" label="WordPress" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="テーマ" label="テーマ" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[ <span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="theme_vicuna_main.gif" src="http://www.kys-lab.com/sasaki/img/theme_vicuna_main.gif" width="500" height="270" class="mt-image-none" style="" /></span>

<p>WordPressの「テーマ」の種類は、MTよりも多そうですね。</p>
<p>調べてみると「Vicuna」がカスタマイズしやすくて便利そうなので、拡張版「wp.Vicuna Ext」をさらにカスタマイズした「wp.Vicuna Ext. Custom」を導入してみました。</p>
]]>
        <![CDATA[<h3>■Vicunaのダウンロード</h3>

<p>Vicuna（WordPress用）のテーマは、3種類あります。</p>
<h4>●「wp.Vicuna」Vicuna.jp 純正 UTF8版</h4>
<a href="http://wp.vicuna.jp/download/" title="WordPress テーマ Vicuna - ダウンロード" target="_blank"  class="allow" >WordPress テーマ Vicuna - ダウンロード</a>

<h4>●「wp.Vicuna Ext」拡張版</h4>
<p><a href="http://ma38su.org/projects/vicuna-ext/" title="ma38su.org - wp.Vicuna Ext" target="_blank" class="allow" >ma38su.org - wp.Vicuna Ext</a></p>

<h4>●「wp.Vicuna Custom」カスタマイズ版</h4>
<p>↓こちらのカスタマイズ版をダウンロードさせていただきました。ありがとうございます。<br />
<a href="http://fos.uzusionet.com/wordpress/vicuna" title="the Fang of Sky - wp.Vicuna Ext. Custom" target="_blank" class="allow" >the Fang of Sky - wp.Vicuna Ext. Custom</a></p>

<h4>●「Vicuna Adaptor」wp.Vicuna Ext.専用のプラグイン</h4>
<p>あと、wp.Vicuna Ext.機能を拡張するためのプラグインも入れました。ありがとうございます。<br />
<a href="http://ma38su.org/projects/vicuna-adaptor/" title="ma38su.org - Vicuna Adaptor" target="_blank"  class="allow" >ma38su.org - Vicuna Adaptor</a></p>

<h5>「Vicuna Adaptor」の対応している拡張機能</h5>
<ul>
	<li> はてなスター</li>
	<li> はてなブックマーク</li>
	<li>hatena-bookmark-anywhere.js / はてなブックマークコメントの表示</li>
	<li> del.icio.usへの登録</li>
	<li>フォントサイズの切り替え / Fontsize Switcher</li>
</ul>


<h3>■テーマの変更</h3>

<p>WordPressのテーマの導入は実に簡単で、ダウンロードしたZIPファイルを展開して、<br />
/wp-content/themes/<br />
にアップロードするだけで、【外観＞テーマ】から選択できます。</p>
<p>これはMTもいっしょですが、実に簡単です。</p>

<h4>●Firefoxでテーマのcssが反映されない</h4>
<p>で、テーマをVicunaに変更したけど、IE8では、きちんと表示しているのに、Firefox3.5では、なぜかcssが反映されませんでした。</p>

<p>キャッシュをクリアしてもダメ。</p>

<p>そこで、cssを読み込んでいるヘッダー (header.php)を調べてみて</p>
<pre>
&lt;?php $css = get_bloginfo('template_url') .'/style.php'; ?&gt;
</pre>
<p>を</p>
<pre>
&lt;?php $css = get_bloginfo('template_url') .'/style.css'; ?&gt;
</pre>
<p>に変更するとcssが反映されました（「style.php」→「style.css」）。</p>
<p>「style.php」は、「style.css」を書き出すプログラムになっているようですが、うまく読み込めてなかったっぽい。これは、ボクだけの環境のせいかもしれないので、あんまりアテにしないでください。</p>
<ul>
<li>WordPressのバージョン：2.8.6</li>
<li>PC：Windows Vista SP2</li>
<li>ブラウザ：Firefox 3.5</li>
</ul>

<h3>■Vicunaテーマのカスタマイズ</h3>

<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://www.kys-lab.com/sasaki/assets_c/2009/12/theme_vicuna_01-92.php" onclick="window.open('http://www.kys-lab.com/sasaki/assets_c/2009/12/theme_vicuna_01-92.php','popup','width=871,height=659,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img src="http://www.kys-lab.com/sasaki/assets_c/2009/12/theme_vicuna_01-thumb-480x363-92.gif" width="480" height="363" alt="theme_vicuna_01.gif" class="Slash"   /></a></span>

<p>テーマを「Vicuna」に設定すると、【外観＞Vicuna 設定】から、スキンやタイトルまわり、グローバルナビゲーションなどの設定ができます。便利！</p>

<h4>●Vicunaのスキン</h4>
<p>スキンも数種あります。</p>
<p><a href="http://wp.vicuna.jp/customize/switch/" title="WordPress テーマ Vicuna - Layout Pattern" target="_blank" class="allow" >WordPress テーマ Vicuna - Layout Pattern</a></p>

<p>「Vicuna」で配布しているスキンは、HTMLのbodyタグのclass属性値を編集することで数十通りのレイアウトに簡単に変更できる設計になっているそうです。</p>

<h3>■Vicunaレイアウトのカスタマイズ</h3>

<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://www.kys-lab.com/sasaki/assets_c/2009/12/theme_vicuna_02-93.php" onclick="window.open('http://www.kys-lab.com/sasaki/assets_c/2009/12/theme_vicuna_02-93.php','popup','width=871,height=659,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img src="http://www.kys-lab.com/sasaki/assets_c/2009/12/theme_vicuna_02-thumb-480x363-93.gif" width="480" height="363" alt="theme_vicuna_02.gif" class="Slash"  /></a></span>

<p>【外観＞レイアウト】から、各ページのレイアウト変更が可能になっています。いたせりつくせりですね。便利すぎて勉強にならないかも。</p>


<h3>■WordPressの練習ページ</h3>
<p><strike>KYS-VOICE（Wordpressの練習用サイト）</strike>※アドレス変更しました。</p>

<p><a href="http://www.kys-lab.com/sasaki/wp/" title="KYS-WP*" target="_blank" class="allow"  >KYS-WP*（Wordpressの練習用サイト）</a>

<p>まだ、テーマを変えただけなので、本格的なカスタマイズはこれから。</p>
<p>まず、WordPressのテンプレートタグを理解しないと。</p>]]>
    </content>
</entry>

<entry>
    <title>WordPressの勉強-02「ユーザー名変更と画像のアップロード」</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2009/11/wordpress-02.php" />
    <id>tag:www.kys-lab.com,2009:/sasaki//2.137</id>

    <published>2009-11-30T06:23:02Z</published>
    <updated>2009-12-04T10:50:11Z</updated>

    <summary> 初期設定も終わったので、WordPressの画像アップロードを試してみる。 そ...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="WordPress" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="wordpress" label="WordPress" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="wp_uploads_main.jpg" src="http://www.kys-lab.com/sasaki/img/wp_uploads_main.jpg" class="mt-image-none" style="" height="270" width="500" /></span>

<p>初期設定も終わったので、WordPressの画像アップロードを試してみる。</p>

<p>その前に、ユーザー名の「admin」をどうしても変更したかったので、下記のサイトを参考にして変更しました。</p>]]>
        <![CDATA[<h3>■ユーザー名変更</h3>

<p><a href="http://haaya.net/3170" title="Wordpressでユーザー名『Admin』をやめてみる。 - HAAYA" target="_blank" class="allow" >Wordpressでユーザー名『Admin』をやめてみる。 - HAAYA</a></p>

<p>以下のような問題もあるので、ユーザー名は、最初にきちんと設定しておきたいですね。</p>

<blockquote><p>Microsoftはおとり用のFTPサーバを通じ、ありがちなユーザー名とパスワードの組み合わせを順番に試してパスワードを破ろうとする攻撃について情報を収集した。その結果、過去数カ月の攻撃で狙われたユーザー名は「Administrator」と「Administrateur」を筆頭に、<strong>「admin」</strong>「andrew」「dave」「steve」などの人名をそのまま使ったものが多いことが分かった。</p>

<cite><a href="http://www.itmedia.co.jp/news/articles/0911/30/news011.html" title="安易なユーザー名とパスワードのワースト10、Microsoftが発表 - ITmedia News" target="_blank" >安易なユーザー名とパスワードのワースト10、Microsoftが発表 - ITmedia News</a></cite></blockquote>


<h3>■画像のアップロード</h3>

<p>普段からMTで画像をアップロードしてるし、簡単やろうと思ってたんですが、</p>

<p><strong>「アップロードしたファイルを*****/wp-content/uploads/に移動できませんでした。」</strong></p>

<p>って表示。</p>

<ul>
<li><a href="http://www.kys-lab.com/sasaki/2009/11/wordpress-01.php" title="WordPressの勉強-01「インストールと設定」 - STAFF_01 [KYS-LAB]" target="_blank" >前回</a>、「wp-admin」に「.htaccess」も追加したし、セーフモードの制限のせいではなさそう。</li>
<li>「wp-content」のパーミッションを「777」に変更してもダメ。</li>
</ul>

<p>そもそも、アップロードしたファイルはどこに保存されるのか、調べてたら、【設定＞その他の設定】にあった。</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_51/wp_uploads.gif" alt="アップロードするファイルの保存場所" class="Slash" />
<p>この「アップロードするファイルの保存場所」がデフォルトで「wp-content/uploads」になっているはずが、「wp-content」になっていた。</p>

<p>で、「/uploads」を追加してデフォルトの設定にしてあげると、画像が表示されました。アドレスのディレクトリ設定をいじってて、おかしくなってたみたい。</p>

<h3>■複数の画像をまとめてアップロード</h3>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_51/wp_uploads_2.gif" alt="ファイルを選択" class="Slash" />
<p class="captxt">「複数のアップロードする画像を選択できる」</p>

<p>WordPressでは、複数の画像をまとめてアップロードできます。</p>
<p>MTでは、一枚の画像しかアップロードできないので、これは便利。</p>

<h3>■WordPressの練習ページ</h3>
<p><strike>KYS-VOICE（Wordpressの練習用サイト）</strike>※アドレス変更しました。</p>

<p><a href="http://www.kys-lab.com/sasaki/wp/" title="KYS-WP*" target="_blank" class="allow"  >KYS-WP*（Wordpressの練習用サイト）</a>

<p>WordPressの練習レポートをMTで更新してるのも変な感じですが、比較しながらしばらく続けます。</p>

<p>てか、画像のアップロードで、つまずいてる場合とちゃうねんけど。</p>]]>
    </content>
</entry>

<entry>
    <title>GIMPテクニック「一枚の写真からクールな画像を作成」</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2009/11/gimp-2.php" />
    <id>tag:www.kys-lab.com,2009:/sasaki//2.136</id>

    <published>2009-11-28T01:48:00Z</published>
    <updated>2009-11-28T01:50:43Z</updated>

    <summary> GIMPデジタルフォトテクニック2010 (100%ムックシリーズ)に作例を3...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="GIMP" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="gimp" label="GIMP" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="gimp_main.jpg" src="http://www.kys-lab.com/sasaki/img/gimp_main.jpg" class="mt-image-none" style="" height="270" width="500" /></span>

<p><a href="http://www.amazon.co.jp/gp/product/4863910266?ie=UTF8&tag=kyslab01-22&linkCode=as2&camp=247&creative=7399&creativeASIN=4863910266">GIMPデジタルフォトテクニック2010 (100%ムックシリーズ)</a><img src="http://www.assoc-amazon.jp/e/ir?t=kyslab01-22&l=as2&o=9&a=4863910266" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />に作例を3点執筆させていただきました。</p>
]]>
        <![CDATA[<h3>「一枚の写真からクールな画像を作成」作例</h3>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_50/gimp_sample01.jpg" alt="GIMP作例" />
<p class="captxt">「建物の写真（左）からクールな画像（右）に」</p>
<p>なんでもない建物の写真を加工し、クールな画像が作成できます。</p>
<p>別に建物でなくても、デジカメで撮ったどんな画像でも面白い効果ができると思います。</p>

<h4>素材画像</h4>

<ul>
<li>建物の画像：<a href="http://www.yunphoto.net/" title="ゆんフリー写真素材集" target="_blank" >ゆんフリー写真素材集</a>さん</li>
</ul>

<p>詳しくは、ムックを見てくださいね～（ゴメンなさい）</p>
<p>上記を含め、GIMPの写真加工に役立つ50の作例が載ってます。</p>
<iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=kyslab01-22&o=9&p=8&l=as1&m=amazon&f=ifr&md=1X69VDGQCMF7Z30FM082&asins=4863910266" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>]]>
    </content>
</entry>

<entry>
    <title>WordPressの勉強-01「インストールと設定」</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2009/11/wordpress-01.php" />
    <id>tag:www.kys-lab.com,2009:/sasaki//2.135</id>

    <published>2009-11-27T09:26:25Z</published>
    <updated>2009-12-04T10:49:40Z</updated>

    <summary> CMSは、ずっと「Movable Type」を利用してたんですが、仕事で必要に...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="WordPress" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="wordpress" label="WordPress" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="インストール" label="インストール" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="wp_main.jpg" src="http://www.kys-lab.com/sasaki/img/wp_main.jpg" class="mt-image-none" style="" height="270" width="500" /></span>
<p>CMSは、ずっと「Movable Type」を利用してたんですが、仕事で必要になる気配を感じ、いい機会だし、「WordPress」も始めてみることにしました。</p>]]>
        <![CDATA[<h3>■WordPressのインストール</h3>

<p>インストールは簡単だって聞いてました。</p>
<p>早速、WordPress 日本語ローカルサイトにてダウンロード（現時点　WordPress 2.8.6）。</p>

<p><a href="http://ja.wordpress.org/" title="WordPress | 日本語" target="_blank" class="allow" >WordPress | 日本語</a></p>

<p>解凍して、FTPでアップロード。<br />
インストール手順は下記ページを参考に。</p>

<p><a href="http://ja.wordpress.org/install/" title="WordPress | 日本語 | インストール" target="_blank" class="allow" >WordPress | 日本語 | インストール</a></p>

<p>なるほど。簡単。でも、最近のMTもインストールはこんな感じですね。</p>

<h3>■WordPressの設定</h3>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_49/wp_00.jpg" alt="ダッシュボード画面" class="Slash" />
<p>ログインしてダッシュボードに入る。やっぱりMT5の画面に似てますね。ていうか、MT5がWordPressに似ているというほうが正しいか。</p>
<p>「取りあえずパスワード変えなさい」みたいなことを言われるので、プロフィールページに移動してパスワードや表示名など変更。「ユーザー名」はデフォルトでは変更できないんですね。</p>
<p>一応ここまでなんなくクリア。</p>
<p>続いて、ブログのタイトルやアドレスなどを設定する「一般設定」に移動。</p>
<p>WordPressのアドレスとは別のディレクトリにブログを設定したかったので、下記ページを参考。</p>

<p><a href="http://wpdocs.sourceforge.jp/Giving_WordPress_Its_Own_Directory" title="Giving WordPress Its Own Directory - WordPress Codex 日本語版" target="_blank" class="allow" >Giving WordPress Its Own Directory - WordPress Codex 日本語版</a></p>

<p>「パーマリンクの設定」にちょっとつまずきかけたけど、なんとかクリア。</p>

<h3>■プラグインのインストール</h3>

<p>ついでなんで、豊富で便利といわれるプラグインをインストールしてみることに。ここからちょっと、つまずきだす。</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_49/wp_01.jpg" alt="ダッシュボードからプラグインのインストール" class="Slash" />
<p class="captxt">「プラグインのインストール画面」</p>
<p>「プラグイン」ページに移動し、「新規追加」でおすすめや人気のプラグインをインストールできる。これ、便利っすね。</p>
<p>で、一つ目をインストールしようとしたけど、どうしてもインストールできない。ホスト名がちがうのか？FTPの設定でええんちゃうんか？とつまずく。</p>
<p>調べてみると、コアサーバーでは、セーフモードが有効、ユーザー名が自分ではないなどの制限があり、エラーがでるとのこと。</p>

<p>対処法は、「.htaccess」ファイルに</p>
<pre>
AddHandler application/x-httpd-phpcgi .php
</pre>
<p>と記述しwp-adminディレクトリにアップする必要があるとのこと。<br />
こういうサーバーによる問題は避けられないですな。</p>

<p>つづいて「All in One SEO Pack」というプラグインをインストールしたら、ダッシュボードの上部に</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_49/wp_02.jpg" alt="All in One SEO Pack must be configured. Go to the admin page to enable and configure the plugin." class="Slash" />
<p class="captxt">「All in One SEO Pack must be configured. Go to the admin page to enable and configure the plugin.」</p>

<p>と、表示される。意味わからへんし。</p>

<p>調べてみると、プラグインの管理ページではなく、直接、設定の「all-in-one-seo」ページで「Plugin Status：のEnabled 」にチェックして、オプションの更新すればよいとのこと。</p>

<p>うーん。なんだかんだややこしいっすね。</p>

<p>上記の設定で無事インストールできたんで、調子に乗ってどんどんプラグインをインストールしていると、ダッシュボードの表示がおかしくなった。cssがまったく効いていない状態。</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_49/wp_03.jpg" alt="cssが効いてない画面" class="Slash" />
<p class="captxt">「cssが効いてない画面」</p>
<p>なんか、いらんプラグインをインストールしたんかなと、へこみながら調べてみると</p>
<pre>
define( 'CONCATENATE_SCRIPTS', false ); 
</pre>
<p>という記述を「wp-config.php」の上部に追加するとのこと。</p>
<p>簡単っていってもやっぱり一筋縄ではいかないですね。</p>
<p>後半はなんか一つやるごとに、つまずきましたが、さすが人気の「Wordpress」。先人のみなさんがきちんと問題を解決されているので、探せば対処法がみつかります。</p>

<h3>■インストールしたプラグインのメモ</h3>

<dl>
<dt>All in One SEO Pack</dt>
<dd>SEOに効果的なメタタグを細かく設定できる</dd>
<dt>Google XML Sitemaps</dt>
<dd>sitemap.xmlを生成してくれる</dd>
<dt>WP-DBManager</dt>
<dd>データベースをバックアップ</dd>
<dt>Contact Form 7</dt>
<dd>コンタクトフォームを作成</dd>
<dt>Google Analytics for WordPress</dt>
<dd>Wordpress用のGoogle Analytics</dd>
<dt>My Category Order</dt>
<dd>カテゴリーを任意の順番にできる</dd>
<dt>WP-PageNavi</dt>
<dd>ページングのナビゲーション追加</dd>
<dt>Ktai Style (携帯対応プラグイン)</dt>
<dd>日本の携帯用プラグイン</dd>
<dt>Breadcrumb NavXT</dt>
<dd>パンくずリストを生成</dd>
</dl>

<p>Ktai Style (携帯対応プラグイン)は、プラグインの検索しても出てこなかったので、提供サイトからダウンロードしてアップ。ありがとうございます。</p>
<p><a href="http://wppluginsj.sourceforge.jp/ktai_style/" title="WordPress Plugins/JSeries ? Ktai Style (携帯対応プラグイン)" target="_blank" class="allow" >WordPress Plugins/JSeries ? Ktai Style (携帯対応プラグイン)</a></p>


<h3>■WordPressの練習サイト</h3>
<p>WordPressの練習はこっちでやっていこうかと。</p>
<p><strike>KYS-VOICE（Wordpressの練習用サイト）</strike>※アドレス変更しました。</p>

<p><a href="http://www.kys-lab.com/sasaki/wp/" title="KYS-WP*" target="_blank" class="allow"  >KYS-WP*（Wordpressの練習用サイト）</a>

<p>まだ、インストールしただけなんで、細かい設定はこれから。そして「After effects」の勉強は、また遠のく。。。</p>]]>
    </content>
</entry>

<entry>
    <title>After Effectsの勉強-05「パペットツールでラジオ体操」</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2009/11/after-effects-05.php" />
    <id>tag:www.kys-lab.com,2009:/sasaki//2.134</id>

    <published>2009-11-17T00:42:55Z</published>
    <updated>2009-11-17T00:51:44Z</updated>

    <summary> 今回は、「パペットツール」の勉強。静止画に命を吹き込むことができます。 同僚の...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="After Effects" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="aftereffects" label="After Effects" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="パペットツール" label="パペットツール" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="puppet_main.jpg" src="http://www.kys-lab.com/sasaki/img/puppet_main.jpg" class="mt-image-none" style="" height="270" width="500" /></span>

<p>今回は、「パペットツール」の勉強。静止画に命を吹き込むことができます。</p>
<p><a href="http://www.kys-lab.com/maeda/mt-maeda/" title="mt-gallery" target="_blank" >同僚の3Dの達人、MAEDA氏</a>からウサギちゃんの画像を借りて、ラジオ体操をさせてみました。ありがとう！</p>

<h3>参考サイト</h3>

<p>今回は、宇都宮ウエブ制作さんの「パペットツール」を参考にさせていただきました。ありがとうございます。</p>

<p><a href="http://utweb.jp/blog/archives/488" title="宇都宮ウエブ制作所&raquo; ブログアーカイブ &raquo; 【Flasherが始めるAE】パペットツール" target="_blank"  class="allow">宇都宮ウエブ制作所【Flasherが始めるAE】パペットツール</a></p>]]>
        <![CDATA[<h3>サンプル</h3>

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','500','height','380','title','Puppet_sample','src','http://www.kys-lab.com/sasaki/swf/Puppet_sample','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','http://www.kys-lab.com/sasaki/swf/Puppet_sample' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="500" height="380" title="Puppet_sample">
  <param name="movie" value="http://www.kys-lab.com/sasaki/swf/Puppet_sample.swf" />
  <param name="quality" value="high" />
  <embed src="http://www.kys-lab.com/sasaki/swf/Puppet_sample.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="500" height="380"></embed>
</object>
</noscript>
<p>（After Effects CS3）</p>
<p>手が上にいったとき、ちょっと変形がかかりすぎやけど。</p>

<h3>パペットツール</h3>
<p>以下のパペットツールを使用して、ピンの配置と重なりなどを変更します。</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_48/puppet_01.gif" alt="パペットツール" class="Slash" />
<dl>
<dt>パペットピンツール</dt>
<dd>変形ピンを配置および移動します。</dd>
<dt>パペット重なりツール</dt>
<dd>重なりピンを配置します。変形によってイメージが重なった場合に前面に表示する部分を定義します。</dd>
<dt>パペットスターチツール</dt>
<dd>スターチピンを配置します。イメージの一部に粘度を設定し、変形の影響を受けにくくします。</dd>
</dl>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_48/puppet_02.jpg" alt="パペットツールでピンを打つ" class="Slash" />
<ol>
<li>切り抜いた画像をレイヤーに配置。</li>
<li>「パペットピンツール」で動かしたい箇所にピンを打つ。</li>
<li>「パペット重なりツール」で身体の重なりを設定。サンプルでは、両手の重なりを胴体より上に。</li>
<li>「パペットスターチツール」で変形させたくない箇所を設定。足元や胸など。</li>
<li>「タイムライン」を進めながら、それぞれの「パペットピンツール」を動かすと自動でキーフレームが追加される。</li>
</ol>

<p>いやぁ、おもしろいっすねパペット。直感的に動かせるから初心者でも簡単に操作できます。</p>


<h3>自分用のメモ</h3>
<ul>
<li>アニメーションは、実際の動きを参考に。</li>
<li>「パペットツール」でちょっとした画像の修正も可能。</li>
<li>キーフレームを「コマンド」キー＋クリックするとフレームの切り替え。</li>
<li>「キーフレームの補助」で速度の調整（Flashでいえばトゥイーン）。</li>
</ul>]]>
    </content>
</entry>

<entry>
    <title>After Effectsの勉強-04「雲と旗の動画ループ」</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2009/11/after-effects-04.php" />
    <id>tag:www.kys-lab.com,2009:/sasaki//2.133</id>

    <published>2009-11-14T03:31:17Z</published>
    <updated>2009-11-14T06:24:29Z</updated>

    <summary> 今回は、ループの勉強。 ただ動画をループさせるだけではつまんないので、来日され...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="After Effects" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="aftereffects" label="After Effects" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="flv" label="FLV" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="roop_main.jpg" src="http://www.kys-lab.com/sasaki/img/roop_main.jpg" class="mt-image-none" style="" height="270" width="500" /></span>

<p>今回は、ループの勉強。</p>
<p>ただ動画をループさせるだけではつまんないので、来日されたオバマ氏をあしらいで入れてみました。世界平和のために頑張っていただきたいものです。</p>

<h3>参考サイト</h3>
<p>今回は、ayato@webさんの「ループ可能な旗の表現」を参考にして、旗のムービーを作成しました。ありがとうございます。</p>
<p><a href="http://www.ayatoweb.com/ae_tips/ae02.html#" title="ayato@web" class="allow">ayato@web</a></p>]]>
        <![CDATA[<h3>サンプル</h3>

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','500','height','380','title','Loop_sampl','src','http://www.kys-lab.com/sasaki/swf/Loop_sampl','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','http://www.kys-lab.com/sasaki/swf/Loop_sampl' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="500" height="380" title="Loop_sampl">
  <param name="movie" value="http://www.kys-lab.com/sasaki/swf/Loop_sampl.swf" />
  <param name="quality" value="high" />
  <embed src="http://www.kys-lab.com/sasaki/swf/Loop_sampl.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="500" height="380"></embed>
</object>
</noscript>
<p>（After Effects CS3）</p>
<p>旗の動きはいまいちだけど、ま、練習ってことで。</p>

<h3>雲のループ</h3>
<p><a href="http://www.kys-lab.com/sasaki/2009/11/after-effects.php" title="After Effectsの勉強-01「流れる雲」 - STAFF_01 [KYS-LAB]" target="_blank" >01「流れる雲」</a>で作成した雲の動画をループ。</p>
<p>動画をつなぎ合わせて不透明度で調整する<a href="http://www.ayatoweb.com/ae_lab/lab02.html" title="ayato@web" target="_blank" >ayato@webさんの「ディゾルブループ」っていう手法</a>が、とても参考になりました。</p>

<h3>旗のループ</h3>
<p>進めていくうちに、作例にある<a href="http://www.flashbackj.com/digieffects/freeform/index.html" title="After Effects用3Dメッシュワーピングプラグイン：FreeForm AE（フリーフォーム AE）" target="_blank" >FreeForm</a>というプラグインが標準でついていないことに気がついた。</p>
<p>仕方がないので、旗のカタチがゆらめく表現は、「ゆがみ」でなんとかしました。ほかに「パペット」や「メッシュワープ」でもそれっぽく出来そう。</p>
<p>しかし、メモリを多く消費するせいか途中で何度も落ちる。</p>

<ol>
<li>「フラクタルノイズ」で、はためかしたループ動画「Flag_Loop」レイヤーの上に、「アメリカ国旗」レイヤーを配置。</li>
<li>「アメリカ国旗」レイヤーに【エフェクト＞ディストーション＞ディスプレイスメントマップ】を適用させ、「マップレイヤー」を「Flag_Loop」レイヤーを選択。</li>
<li>「アメリカ国旗」レイヤーに【エフェクト＞ディストーション＞ゆがみ】を適用し、「ディストーションメッシュ」のタイムライン上にキーフレームを打つ。</li>
</ol>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_47/roop_02.jpg" alt="ツールやブラシサイズを変えながら" class="Slash" />
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_47/roop_01.jpg" alt="ゆがみで変形" class="Slash" />
<ol>
<li value="4">「ブラシのサイズ」を適当に変えながら、キーフレームごとに旗のカタチをゆがめていく。このとき、最初のキーフレームをコピーして最後のキーフレームにペーストする。</li>
</ol>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_47/roop_03.jpg" alt="旗のタイムライン" class="Slash" />
<ol>
<li value="5">「アメリカ国旗」レイヤーモードを「乗算」、「Flag_Loop」レイヤーのトラックマットを「アルファマット」に変更。</li>
</ol>

<p>プラグインがなくても、エフェクトだけでなんとかしようと試行錯誤してると、色んな機能をいじるので勉強になりますな。</p>

<h3>FLVのループ再生</h3>
<p>ちなみに、FlashにFLVを読み込んだだけでは、自動でループはしません。フレームに下記のActionScriputを書いておけばループします。</p>
<pre>
//FLVPlaybackのインスタンス名を「loop」とした場合
loop.addEventListener(Event.COMPLETE, completeHandler);
function completeHandler(event) {
    loop.play();
}
</pre>

<h3>自分用のメモ</h3>
<ul>
<li>不透明度を変化させてループさせる「ディゾルブループ」。</li>
<li>「アルファマット」は、動画で切り抜きができる。</li>
<li>「ゆがみ」を多用するとメモリ不足になる。</li>
<li>ループ素材を複数使うとき、それぞれタイムラインの秒数を合わせておく。</li>
</ul>]]>
    </content>
</entry>

<entry>
    <title>After Effectsの勉強-03「煙のように出現するロゴ」</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2009/11/after-effects-03.php" />
    <id>tag:www.kys-lab.com,2009:/sasaki//2.132</id>

    <published>2009-11-12T08:27:48Z</published>
    <updated>2009-11-12T08:58:11Z</updated>

    <summary> シリーズ化するつもりはなかったんですが、After Effectsに結構はまっ...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="After Effects" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="aftereffects" label="After Effects" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="smoke-logo_main.jpg" src="http://www.kys-lab.com/sasaki/img/smoke-logo_main.jpg" class="mt-image-none" style="" height="270" width="500" /></span>

<p>シリーズ化するつもりはなかったんですが、After Effectsに結構はまっており、これからも空いた時間にいじっていきたいので、自分があとで見直しやすいようにタイトルに番号入れました。</p>
<p>エフェクトだけでもいっぱいあり、何をどういじったらいいのかほとんど理解できていませんが、「これはPhotoshopにあるわ」とか、「Flashでいうと●●●やな」みたいな感じで進めています。</p>
<p>今回は、煙のように出現するロゴを作成。</p>
<p>といっても、作例のどろっとした感じが出なくて、色々いじってたら、なんか煙っぽくなったというだけです(^_^;</p>

<h3>参考サイト</h3>

<p>今回は、ayato@webさんの「とけて出現するロゴ」を参考にして、少し手を加えてみました。ありがとうございます。</p>
<p><a href="http://www.ayatoweb.com/ae_tips/ae21.html" title="ayato@web" target="_blank" class="allow" >ayato@web</a></p>]]>
        <![CDATA[<h3>サンプル</h3>

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','500','height','380','title','Smoke_sampl','src','http://www.kys-lab.com/sasaki/swf/Smoke_sampl','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','http://www.kys-lab.com/sasaki/swf/Smoke_sampl' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="500" height="380" title="Smoke_sampl">
  <param name="movie" value="http://www.kys-lab.com/sasaki/swf/Smoke_sampl.swf" />
  <param name="quality" value="high" />
  <embed src="http://www.kys-lab.com/sasaki/swf/Smoke_sampl.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="500" height="380"></embed>
</object>
</noscript>
<p>誰もがやりたくなる（ボクはそうでした）、ロゴがキラッと光るような表現を「レンズフレア」というエフェクトを最後に入れました。</p>
<p><a href="http://www.cvalley.co.jp/ae_plugin/red_giant/knoll_light_factory2.html" title="After Effects プラグイン パーフェクトリスト/クリエイティブショップ シーバレー" target="_blank" >Knoll Light Factory</a>というプラグインがあると、もっといい感じのレンズフレアがつくれるみたいです。でも高いっすね。今のところ無理。</p>

<h3>レンズフレアの作成</h3>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_46/smoke-logo_01.jpg" alt="レンズフレアの設定" class="Slash" />
<ol>
<li>煙のように出現するロゴのレイヤーの上に、「平面」レイヤーを黒ベタ（ブラック）で作成。</li>
<li>【エフェクト＞描画＞レンズフレア】を適用し、レイヤーモードを「スクリーン」に変更。</li>
<li>「光源の位置」「フレアの明るさ」に、キーフレームで位置と明るさをそれぞれ設定。「光源の位置」は、十字ポインタをドラッグしてイメージ上の任意の場所をクリックできる。</li>
</ol>

<p>After Effectsは、キーフレーム入れるだけで、自動でトゥイーンになるのがいいですね。Flashみたいに1フレームに全ての動作をActionScriptを管理するのもいいけど、タイムライン上のものを直感的にいじるほうが、自分は向いてる気がします。</p>

<h3>自分用のメモ</h3>
<ul>
<li>「フラクタルノイズ」は、Photoshopの「雲模様」と同様、一から素材をつくるのに重宝する。</li>
<li>「ディスプレイスメントマップ」は、置き換えマップ。</li>
<li>「レンズフレア」は、明るい光がカメラレンズに差し込んだときの反射をシミュレート。プラグインを購入するともっと色んなバリエーションが作成できる。</li>
</ul>]]>
    </content>
</entry>

</feed>
