タグ: Vicuna

ver.1.58

WordPress 2.6 のテーマに wp.Vicuna Ext. ver.1.58 を使用するときに、僕が Vicuna に対して行った変更をまとめておきます。

ページにもタグを表示させる

page.php の 27 行目に以下の 1 行を割り込ませました。

[source language="php"]
				', ' | ', '

'); endif; [/source]

WordPress 2.6 で追加された、画像のキャプションへの対応

以下のセクションを 2-singleUtilities.css へ追加しました。

[source language="css"]
/*---------------
WordPress 2.6
-----------------*/

/* Caption
======= */

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

.alignright,
div.alignright {
float: right;
clear: right;
margin: 10px 28px 0px 1em;
}

.alignleft,
div.alignleft {
float: left;
clear: left;
margin: 10px 1em 0px 28px;
}

div.wp-caption {
border: 1px solid #ddd;
background-color: #f3f3f3;
padding: 4px 0px 4px 4px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

p.wp-caption-text {
text-align: center !important;
font-size: 11px;
line-height: 17px;
padding: 4px 4px 0px;
margin: 0px;
}

/* h3 属性と caption との間の margin が大きくなり過ぎてしまう問題を回避 */
h3 {
margin-bottom: 0px !important;
}

div.gallery {
width: 600px;
}

dl.gallery-item {
margin: 0px;
border-left: 0px !important;
width: 200px !important;
}

[/source]

SyntaxHighlighter のために、<pre> のスタイルを削除する


下の表のとおりにセレクタをコメントアウトします。


コメントアウト箇所一覧



コメントアウト（行数）



開始
終了


1-element.css
154
160


/module/mod_subSkin/1-subSkin.css
570
584





その他の微調整text-align プロパティの値を justify に変更


以下のセクションを 2-singleUtilities.css へ追加しました。

[source language="css"]
/*---------------
 Shinsuke.com
-----------------*/

/* テキスト両端揃え */
div.textBody p {
	text-align: justify;
}

/* Fuzzy Recent Updates で出力される日付のフォントのサイズ */
div.tile_body .date {
	font-size: 85%;
}

/* rootpage.php で追加される目次関連 */
div.pagelist {
	font-size: 85%;
	margin: 0px 30px 0px 1em;
	border: 1px solid #ddd;
	background-color: #f3f3f3;
	padding: 4px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	width: 310;
	float: right;
}

div.pagelist h4 {
	font-size: 118%;
	text-align: center;
	margin: 0.4em 0px 0px 0px;
}

div.pagelist ul {
	margin: 0px;
	list-style-position: outside;
}

div.pagelist li {
	margin: 0.4em 0.4em 0.4em 18px;
}

/* 見出しに clear 属性を付加 */
h2,
h3,
h4 {
	clear: both;
}

/*  が縦に隣接してしまった時に使用するスペーサー */
div.spacer {
	margin-top: 1em !important;
}

/*  が h3 に隣接してしまった時に使用するボトムスペーサー */
div.spacebottom {
	margin-bottom: 1em !important;
}

/* Page Menu (2008-11-28)
   ~~~~~~~~~~~~~~~~~~~~~~

ウィジェットに表示しているページのメニュー用のプロパティ */

span.pagemenu {
	font-weight: bold;
	font-size: 150%;
}

.pagemenu a {
	text-decoration: none;
}

.pagemenu img {
	margin: 4px 8px 4px 4px;
	border: none !important;
	vertical-align: middle;
}
[/source]

コメントアウト箇所一覧
	コメントアウト（行数）
	開始	終了
1-element.css	154	160
/module/mod_subSkin/1-subSkin.css	570	584

タグ 2.6, Ext., Vicuna, WordPress, テーマ

WordPress

wp.Vicuna Ext. への変更点

Shinsuke.com では WordPress のテーマに wp.Vicuna Ext. を使用しています。これは wu さん作の CMS ツール用のテーマ「Vicuna」の WordPress 版「wp.Vicuna」を、ma38su さんがカスタマイズ性を向上させるために拡張したものです。

このセクションでは、私の使用した各バージョンと、その時私が行った変更作業についてまとめました。同じような問題に遭遇した方の助けになれば幸いです。

ver.1.58: 2008-07-13 発表。WordPress 2.6 へのアップグレード後に導入。
ver.1.55: 2008-05-14 発表。WordPress 2.2.3ME から 2.51 へのアップグレード時に導入。WordPress 2.6 リリース後しばらくの間も使用。

タグ 2.5, 2.6, Ext., Vicuna, WordPress, テーマ

WordPress

このブログのテーマには、wu さん原作・ma38su さん拡張による「wp.Vicuna Ext.」を使用しています。デザイン自体がすっきりしていて好みであることはもちろんなのですが、原作の wu さんは web デザインに関する著述をされるほど XHTML 等の書法に精通されており、他のテーマにありがちなトラブル（文字のサイズを変えるとはみ出す、ブラウザごとにデザインが異なる等々）がうまく治められています。また、wu さんは wakoku 時代の僕のあこがれでもあります。何の話かわかりませんね（笑）。

list-style-position プロパティの値を outside に

ほぼリリース状態のまま使っていますが、不満な点があったので直しました。それはサイドバーのリスト表示に使用されている div#utilities ul 属性の list-style-position プロパティが inside になっていたところ。この状態だと下のスクリーンショットのように、マーカーがリスト内に埋まってしまいます。

これを outside に直しました。3-context.css ファイルの 349 行目に目的の記述がありました。

list-style-position: inside;

この行を、

list-style-position: outside;

に直します。すると、以下のようになります。

マーカーがリストの左側に移動して、見やすくなりました。ところが、勢いあまって第一階層のマーカーが本文の下にもぐりこんでしまっています。ですので li 属性の margin を大きくしてやります。同じく 3-context.css ファイル中の 353 行目にある、

margin: 0.4em 0 0.4em 5px;

の 5px を 18px に変更して、

margin: 0.4em 0 0.4em 18px;

とすると、リストのインデントはそのままに、マーカーの位置が元に戻ります。

text-align プロパティの値を justify に変更

僕は神経質な人間で（分かっているなら治せ）、テキストの両端がそろっていないと気に入らないのです。そこで、メインの記事中の p 属性の text-align プロパティの値を justify に変更しました。やはり 3-context.css の中の 68 行目の空白に、以下の一行を挿入しました。

div#content p { text-align: justify; }

これで、本文の両端がそろうようになります。2 枚のスクリーンショットを見比べてください。右が justify に設定したもの、左が何もしていないものです。

header.php から description を削除

All in One SEO Pack の Meta タグと内容がかぶってしまい、肝心なページ別の description が表示されないので、21～23 行目にあった

を削除しました。

ビジュアルエディタで Vicuna のタグが反映されるようにする

Vicuna に対する変更とはちょっと違いますが、TinyMCE Advanced のスタイルシート（/wp-content/plugins/tinymce-advanced/css/tadv-mce.css）に

.img_L {

margin-right: 1em!important;

margin-top: 1em!important;

float: left;

}

.img_R {

margin-left: 1em!important;

margin-top: 1em!important;

float: right;

}

を追加しました。これでビジュアルエディタで上記のクラスが反映されるようになります。

div.thumb クラスの追加

Wikipedia のように、画像のサムネイルの周囲をブロックで囲み、その中に写真の説明を加えたいと思い、div.thumb クラスを追加しました。どの CSS に追加するべきか少々悩みましたが、最終的には

style-smartCanvas/module/mod_subSkin/1-subSkin.css

の末尾に追加することにしました。追加したスタイルは以下の通りです。

[source language=css]
/* 2008-07-03 by Kudo Shinsuke (http://www.shinsuke.com) */
/* ===================================================== */

div#main div.thumb {
/*	display: table;*/
	font-size: 85%;
	padding: 8px;
	margin-top: 8px;
	margin-bottom: 8px;
	border: 1px solid #e5e5e5;
	background-color: #f5f5f5;
}

div#main div.right {
	margin-left: 30px;
	margin-right: 30px;
	float: right;
	clear: right;
}

div#main div.left {
	margin-left: 30px;
	margin-right: 30px;
	float: left;
	clear: left;
}

div#main div.w300 {
	width: 306px;
}

	div.thumb span.num {
		margin-right: 1em;
		font-weight: bold;
	}

	div.thumb img{
		margin-bottom: 8px
	}
[/source]

net2ftp のバグ？1-subSkin.css の不具合？

僕は XREA の net2ftp を使って css ファイルを編集していますが、今回の編集を行ったところ、css ファイルの冒頭にある

@charset "utf-8";

が

?@charset "utf-8";

に書き変わってしまいました。おかげでレイアウトが崩れてしまったのですが、当初はなにが起こったのかすらさっぱり見当がつかず四苦八苦しました。原因は net2ftp のログオン画面にある「FTP mode」が「Binary」になっていたためのようです。このログオン画面は XREA の管理画面からは表示されません。各 XREA サーバーの http://www.sXXX.xrea.com/ftp/index.php にあるようですので、探してみてください。

<pre> タグ

SyntaxHighlighter Plus を使用するため、CSS から <pre> のスタイルを削除しました。すべての文書から <pre> タグを外すと、SyntaxHighlighter の使用をやめた時にやっかいです。それに <pre> タグを外すと、WordPress がソースコードを書き直してしまうため、実際のところはずすにはずせません。

変更箇所は以下の通りです。

1-element.css

97 行目: pre, をコメントアウト
154～160 行目: pre の規則集合をコメントアウト

1-subSkin.css

571～583 行目: pre の規則集合をコメントアウト

WordPress 2.6 の caption への対応

以下を 1-subSkin.css に追加。

[source language=css]
/* WordPress 2.6 Captions for vicuna smart-canvas */

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

.alignright,
div.alignright {
	float: right;
	margin: 0px 28px 0px 1em;
	}

.alignleft,
div.alignleft {
	float: left;
	margin: 0px 1em 0px 28px;
	}

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

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

/* End captions */
[/source]

タグ 2.5, 2.6, Ext., Vicuna, WordPress, テーマ

配下ページの目次