2009.3にwp.VicunaのCSSファイル（スキン）のみがアップデートされた際既に、当サイトではアップデートを行っていて、一部wp.Vicuna Ext.の機能が動作しなくなっていたのですが、今回のwp.Vicuna Ext. Customでそれも改善されます（作者様に感謝）。

但し、残念なことにwp.Vicuna Ext.の拡張機能であったVicuna Adaptorプラグインの一部の機能などが動作しなくなってしまたので（プラグインの再インストールでもダメだった･･･）。PHPは全くと言っていいほど分からなかったので少し手間取ったりしましたが、２つのソースを比較して、それらへの対応も済ませました。

今回はそれらのまとめです。

ソーシャルブックマークリンク

ソーシャルブックマークへのリンク系を表示出来る様にするには、各ページの記事タイトル下のタグ一覧の次に、<?php the_tags('<li class="tags">', ' | ', '</li>'); endif; ?>を追加。

<div class="entry">
　<ul class="info">
　　<li class="date"><?php the_time(__('Y-m-d (D) G:i', 'vicuna')) ?></li>
　　<li class="category"><?php the_category(' | ') ?></li><?php if (function_exists('the_tags')) :
　　<?php do_action('entry_info'); ?>
　　<?php the_tags('<li class="tags">', ' | ', '</li>'); endif; ?>
　　<?php edit_post_link(__('Edit', 'vicuna'), '<li class="admin">', '</li>'); ?>
　</ul>

はてなブックマークコメント

はてなブックマークのコメントを表示させる場合は、comments.phpの110行目あたりにある

　　　</div><!-- end div#comment -->
<?php endif;
　　　if ($trackpingCount > 0 || 'open' == $post->ping_status) : ?>

を

　　　</div><!-- end div#comment -->
<?php endif; ?>
<?php do_action('comments_footer'); ?>
<?php if ($trackpingCount > 0 || 'open' == $post->ping_status) : ?>

とする。

Tag cloudのclass

デフォルト設定そのままでは無くウイジェットの表示項目を入れ替えている（ウイジェット設定を使っている）場合、Tag cloudにクラスなどが適応されなく、CSSでのフォントサイズ・色などの制御が出来なくなっていました。

これは、functions.phpに下記のコードをくわえることで機能する様になります。

/**
* Display a widget of tag clouds.
*/

function vicuna_widget_tag_cloud($args) {
　extract($args);
　$options = get_option('widget_tag_cloud');
　$title = empty($options['title']) ? __('Tag Cloud', 'vicuna') : $options['title'];
　echo $before_widget;
　echo $before_title . $title . $after_title;
　vicuna_tag_cloud();
　echo $after_widget;
}
wp_register_sidebar_widget('tag_cloud', __('Tag Cloud', 'vicuna'), 'vicuna_widget_tag_cloud');

同時に色々な部分を修正しているので、もしかしたら上手く動作しないかもしれません。そう言う場合はコメントください。

今後は雑記をはてなダイアリーに書いていく形に使用かと思います。

リニューアルしました！

分かる人には分かる、デザインですね。超有名テンプレートの「wp.Vicuna Ext.」を今回は使用しました。
さらにはてな系のHTMLの追加などは「Vicuna Adaptor」を使用しました。このWordPress用プラグインは、wp.Vicuna Ext.専用に出来ています。備考に「カスタマイズをする人には向かないかも」なんてことも書いてありますが、全然そんなことはありません。

CSSテーマは、「Warship」です。

テーマカスタマイズ

CSSはお好みでいじる物ですが、VicunaシリーズはWordPressのファイルアップロード機能で追加されるCSSには対応していません（画像の右寄せとか）。他にも色々とプラグインを追加することでCSSの”追加”が必要になってくることがあるので、オリジナルのCSSは別途ファイルを用意しました。

「style.php」の28行目あたりに下記のコードを追加。

@import url($lt; ?php echo $skin; ?>/6-user.css);

「6-user.css」というファイルを自分の場合は「wp-content/themes/wp.vivuna.ext/style-warship/」に作成。

しっかりは調べてませんが、多分デフォルトのテーマのこの辺を追加しておけば大丈夫

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left
	}
/* End Images */

/* Captions */
.aligncenter,
div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}
/* End captions */

それと、サイドバーのカテゴリー部分にDTタグの「CATEGORIES」というタイトルに加えて、カタカナで「カテゴリー」って表示されてるのが気に入らなかったので、修正。

sidebar.php の 35行目あたりにある

< ?php wp_list_categories('sort_column=name&optioncount=0&hierarchical=1&'); ?>

に、「title_li=」を足して、

< ?php wp_list_categories('sort_column=name&optioncount=0&hierarchical=1&title_li='); ?>

とすることで、カタカナのタイトル（WPが自動ではき出しているタイトル）を消すことが出来ます。

プラグイン

追加したプラグインはこんな感じ。

• AdSense Manager
  AdSense広告を管理する為のプラグイン。追加場所とかはテーマファイルをじっさいに自分でいじって追加する形になるけど、以降の修正が一括で出来たりと便利
• Ultimate Google Analytics
  Google AnalyticsのJavaScript埋め込み用。色々とパラメーター追加してくれたりするので便利。
• Auto External Link
  外部リンクにJavaScriptで自動的に「新しいウインドウで開くアイコン」をつけてくれる。XHTMLではtarget=”_blank”とかは使わない様な方向に進んでいるので、これで対応。
• Google XML Sitemaps
  サイトマップを作ってくれるプラグイン
• Lightview Plus
  画像の拡大表示をAjaxで行うためのプラグイン。手動でやるより楽ちん！

プラグインのインストールがブラウザーから出来る様になったので、すごく便利ですね！
でも、プラグイン検索のシステムがダメダメで、検索結果からほしいプラグインを探すのが大変でした・・・ｗ
プラグインの名前で検索してるのに1ページ目に出てこない事が多々・・・。

Ajax系の対応

Lightview Plus と、Auto External Link は両方とも prototype.js を使うんです。
しかも、Lightview Plus が自動で prototype.js を読み込む用にヘッダーにタグを追加してくれるのですが、そのバージョンが古いのと、上手く Auto External Link に働きかけてくれないので、

lightview-plus.phpの480行目あたりにある add_header() を下記のように書き換えました。

	function add_header() {
		$path = get_option('siteurl')."/wp-content/plugins/lightview-plus";

		$script = "n<!-- Lightview Plus Plugin -->n";

		$script .= "<link rel="stylesheet" type="text/css" href="$path/css/lightview.css" media="screen" />n";
		$script .= "<script type='text/javascript' src='$path/js/lightview.js'></script>n";
		//$script .= "<link rel="stylesheet" type="text/css" href="$path/style.css" media="screen" />n";
		$script .= "<!-- Lightview Plus Plugin -->n";

		echo $script;
	}

これによって、prototype.js と、scriptaculous.jsが読み込まれなくなります。

読み込まれないだけでは困るので、追加して テーマファイルの header.php の最後の行にある < ?php wp_head(); ?> の手前に下記の2行を追加しました。

	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js'></script>
	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js?load=effects'></script>

主な改造はこれぐらいかな。あとはCSSファイルをちょこちょこいじったぐらいですね。
WordPressのテーマファイルのいじり方の基本は今回で学べたので、あとはPHPを勉強しないとな。

ちかいうちにFlikerのライブラリーをギャラリーページとして公開出来る様な仕組みとか作ろうと思います。

実は、当サイトはとあるテンプレートをそのまま使ったサイトです。
その、テンプレートの話と、ちょっとだけロゴの制作に関してお話をしたいと思います。

テンプレート : wp.vicuna

wp.vicunaは、vicuna CMSというサイトで配布されているテンプレートで、何種類かのBlogに対応したテンプレートを配布しています。

当サイトはその中のWordPress用のwp.vicunaというテンプレートを使って運用しています。
ぶっちゃけ、あまり面白くないデザインです。その理由はカスタマイズする為のデザインだからです。

テンプレートのソースコードはXHTML1.0 StrictのDTDに準拠して書かれており、無駄なく表示も軽い作りになっています。また、XHTMLとCSSの両方でカスタマイズを考えた構成になっていますので、構造の変更・デフォルトスキンから自分の好みに合わせて簡単にレイアウトやスタイルを編集することができます。
SEOを考慮したリンク構造と柔軟なスキンにより、個人サイトからビジネスサイトまで幅広くお使いいただけるテンプレートです。

Quote vicuna CMS

ちなみに、このテンプレートの大本を設計して下さったのは、3ping.orgさんです。
3ping.orgさんは、前にWebデザイナーを目指していた頃良く読んでいたサイトで、管理者の執筆した「実践 Web Standards Design」という本も持っています。

0から、SEOを考慮したサイトで、XHTML1.0 StrictのDTDに準拠した形でデザインするというのはとても手間がかかり、大変です。近いうちにそういった形でのデザインを仕事でやらないといけない時がくるので、その練習も含めてこのテンプレートを使いました。
まあ、実は前々からすごく使ってみたかった。というのも理由何ですけどｗ

ちょっとだけこだわったロゴ

冒頭にも書いたように、シンプルだしなんのひねりも無いデザインのロゴを今回は作りました。

何が違うかというとフォントのアンチエイリアスが単純にPhotoshop等で作った場合とはちょっと違うということです。フォントのアンチエイリアスはMacはMacOSX 10.0から、WindowsはXPからClearTypeを使うことで対応するようになった、文字を滑らかに見せる機能のことです。

Photoshopの場合はもちろんドットの見えるキレイでは無い文字で作品を作るわけには行きませんから、元々対応しています。ただ、MacOSXを使っている方は特にPhotoshopで書いた文字がなんか変だと感じたことはありませんか？
それはアンチエイリアスの方式がPhotoshopと普段みているOSで少し違う為です。

何がどう違うかというと、右の図を見て頂くと分かるかと思いますが、Photoshopの場合は境界線が白と黒のグラデーションなのに対して、MacOSXの場合は薄い赤や緑などを使ったグラデーションになっている所です。
どうして、白黒の文字なのにいろんな色が混ざっているかというと、ディスプレイが赤・青・緑の点の集合で出来ている為です。

実はこれも3ping.orgを見てしりました。なので詳しくは、3ping.orgの「ロゴとか作るときに使える地味なテクニック」をご覧下さい。

MacOSXでこのタイプのグラデーションを使ったアンチエイリアスを使っているということは、どういうことかと言うと、簡単にこのグラデーションタイプを実装出来るということです。

Photoshpや手書きである程度のレイアウトを決めた上で、テキストエディット等のソフトで必要な文字を入力し、デザインに合わせてサイズ・色等を設定します。その後スクリーンショット(コマンド+シフト+4)を撮って、画像化した物をPhotoshopでレイアウトすればいいのです。
ただ、この場合Photoshop上でサイズの変更や色を変えてしまったら意味がなくなるので、結構修正が面倒になりますので気をつけてください。

今週いっぱいはWordPressの改造に関する記事になりそうです。