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

リニューアルしました！

分かる人には分かる、デザインですね。超有名テンプレートの「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上でサイズの変更や色を変えてしまったら意味がなくなるので、結構修正が面倒になりますので気をつけてください。