以前から、このブログのデザインをいい加減変更したいと考えていたのだが、なかなか着手できていない。

とはいえ、一気に全部変更すると大変だし、途中で挫折する可能性もあるので、少しずつデザイン変更をしていくことにした。

ということで、今日はタイトル周りと、ボックスのレイアウトを少し変更。少しすっきりしてみやすくなったかな？（気のせい？）

まぁ、ゆっくりと少しずつデザインを変更していきますかね～。

いろいろとデザインをいじっていると、他にも気になるところがちらほらと。

で、一番気になっていたところは、ページの一番下に表示されているページナビの書式。

というのも、このページナビで表示される書式が、どこかのスタイルシートを参照しているはずなのですが、自分で設定した記憶がない。

デフォルトでもそんなにこのページのイメージとそんなに違わないので、そのまま利用してきただけでした。

ということで調べてみると、PageNaviのプラグインディレクトリの下にある、pagenavi-css.cssというファイルがこのページナビの書式を設定しているスタイルシートだと云うことが判明。つまり、ページナビの書式を変更するためにはこのファイルを編集すれば良いということになる。

しかし、ここで問題が発生。もし、これを編集すると、今後のバージョンアップでこのファイルが上書きされ、せっかく設定した内容が消されてしまう可能性がある。もしそうだとすると、編集する意味がない・・・。

まさか、そんな不便な作りはしていないだろうということで、さらに調査してみると、どうやらこのpagenavi-css.cssというファイルを、自分のテンプレートフォルダにコピーすると、PageNaviのプラグインディレクトリにあるファイルではなくテンプレートフォルダにコピーされたファイルの設定が優先されると云うことが判明。

ということで、pagenavi-css.cssをテンプレートフォルダにコピーして編集することにしました。

せっかくなので、単にスタイルシートの設定を変えるだけでなく、コメントも追加してみました。

/*	リンクの書式設定　*/
.wp-pagenavi a, .wp-pagenavi a:link {
	padding: 2px 4px 2px 4px;
	margin: 2px;
	text-decoration: none;
	border: 1px solid #FFFFFF;
	color: #0066cc;
	background-color: #FFFFFF;
}

/*	訪問済リンクの書式設定　*/
.wp-pagenavi a:visited {
	padding: 2px 4px 2px 4px;
	margin: 2px;
	text-decoration: none;
	border: 1px solid #FFFFFF;
	color: #0066cc;
	background-color: #FFFFFF;
}

/*	リンクのホバー書式設定　*/
.wp-pagenavi a:hover {
	border: 1px solid #1e1e1e;
	color: #1e1e1e;
	background-color: #FF8800;
}

/*	リンクのアクティブ書式設定　*/
.wp-pagenavi a:active {
	padding: 2px 4px 2px 4px;
	margin: 2px;
	text-decoration: none;
	border: 1px solid #0066cc;
	color: #0066cc;
	background-color: #FFFFFF;
}

/*	タイトルの書式　*/
.wp-pagenavi span.pages {
	padding: 2px 4px 2px 4px;
	margin: 2px 2px 2px 2px;
	color: #1e1e1e;
	background-color: #FFFFFF;
}

/*	表示中ページの書式　*/
.wp-pagenavi span.current {
	padding: 2px 4px 2px 4px;
	margin: 2px;
	font-weight: bold;
	color: #FF8800;
	background-color: #FFFFFF;
}

/*	延長部分の書式　*/
.wp-pagenavi span.extend {
	padding: 2px 4px 2px 4px;
	margin: 2px;
	color: #1e1e1e;
	background-color: #FFFFFF;
}

このブログのデザインをまた少しいじりました。

大きな変更点としては、エントリを日付ごとに区切りを入れるようにした点。

エントリごとに日付を表示させるためにはthe_time関数を使っていますが、今回使う関数はthe_date関数。

the_time関数は、同じ日に複数の記事があっても関係なく日付が表示されるが、the_date関数は、『同じ日に複数の記事がある場合は、最初の記事とともに一度だけ出力される』ものである。

つまり、この関数を使えば、日付ごとに区切りを入れることができるようになるわけです。

そこで、挿入したコードは次の通り。

<!-- the_date関数 -->

<?php the_date('jS M, Y', '<div class="entryDate">', '</div>'); ?>

<!-- ここまで -->

この関数の引数は3つあり、一つ目が日付フォーマットで、二つ目が日付の直前に出力するコードやテキスト、三つ目が日付の直後に出力するコードやテキストとなります。

今回は、イギリス表記の日付フォーマット（エントリの投稿日時と同じ）で、日付の表示をスタイルシート設定するentryDateというボックスを設定しました。

あとは、ちょこちょことデザインを変更してみました。

このデザイン、一から作って結構長い間使ってきてますが、初期の頃に比べてかなり改善されてきた感じ。

長い時間をかけて、ちょっとずつ洗練（？）されてきてます。

ここまで来ると、新しいデザインに作り替えるのが面倒になってきてるのも事実（笑）

たいした話では無いのですが、このブログテンプレート、ブログ内の検索フォームをつけていませんでした。

意図的にやったわけではなく、ただ抜けていただけです。気づいてはいたのですが、面倒くさくて今まで放置してきていました。

で、ちょっとブログデザインを変更しようかと思っていたので、まずは検索フォームの追加から行うことにしました。なので、備忘録も兼ねて方法を書いておきます。

WordPressでの検索フォームの追加で一番簡単な方法は、ウィジェットの追加でサイドバー等にウィジェットとして追加してしまうことです。

しかしながら、これはあくまでもウィジェットがおける範囲にしか置くことができません。つまりヘッダー内や、ウィジェットを置く場所と指定していない場所への設置ができないと云うことになります。

もし、ウィジェットとして設置するところ以外に設置したいと云うことになると、その関数を追加する必要があります。その関数は次のget_search_formという関数であり、これを自分の検索フォームを設置したい場所に記入します。

	<!--	検索開始	-->
	<?php get_search_form(); ?>
	<!--	検索終了	-->

この関数を設置することで、ブログ上に検索フォームが設置されたと思います。しかし、このままではデフォルトで用意された検索フォームが表示されるだけで、入力フォームやラベルについてカスタマイズできません。

そこで、もうちょっとこの関数のことについて調べてみると、この関数はフォームを表示する際に、searchform.phpというファイルを見に行き、無い場合はデフォルトの検索フォームを表示する、という仕様らしい。

ならば、ということで、searchform.phpを設置することにしました。

<form method="get" id="search" action="<?php bloginfo('url'); ?>/">
<label for="s">Search:&nbsp;</label>
<input type="text" value="<?php the_search_query(); ?>" name="s" size="35" style="width: 245px;height: 17px;"/>
<input type="submit" id="searchsubmit" value="Search" />
</form>

まず、１行目はformの定義。ここはそんなにいじることはないです。

2行目は入力フォームの前につくラベルの設定。labelタグの間の文字列が、入力フォームの前に表示されるようになります。ここでは、”Search:”というラベルが表示されるように設定されています。

3行目は、入力フォームの設定。この中にstyleで設定された幅と高さがありますが、これはFirefoxとIEでフォームのsizeを同じにしていても実際に表示される幅が異なるため、直にフォームの幅と高さをピクセルで大きさを設定するためのスタイルシートです。

あとは、このフォームのidをsearchとしたので、必要に応じてスタイルシートで設定をすれば、カスタマイズ完了です。

念のため、スタイルシートで設定した内容についてもつけておきます。

#search {
 color: #eeeeee;
 height: 50px;
 line-height: 50px;
 margin: 0px 0px 10px 0px;
 padding: 0px 5px 0px 0px;
 text-align: right;
 border-top: 1px solid #000000;
 border-left: 1px solid #000000;
 border-right: 1px solid #cccccc;
 border-bottom: 1px solid #cccccc;
 background: url(images/search.gif) no-repeat left top;
 background-color: #555555;
}

さて、次は何をしようかな♪

今度は、フォトログを作ってみた。最近お気に入りの写真集、ダカフェ日記を見ていたら、そんなフォトログが作りたくなったからです。

何となくいい感じにできたかなと、結構自己満足。この「はる日記」も更新していきますので、併せてよろしくお願いします！！

はる日記（http://haru.09darts.com/）

WordPressでテンプレートを作るときに、ファイルの文字コードをUTF-8にしなくてはいけないということで、日本語を使っていないファイルについても、UTF-8に変換したら、レイアウトが崩れた。

これは、大変だということでいろいろ試行錯誤をするものの、いっこうに戻る気配がない。

インターネットで調べてみたり、ドキュメントタイプの見直し等をして闘うこと数時間、どうやらBOM(Byte Order Mark)というのが悪さしているっぽいということがわかってきた。

そこで、ファイルをUTF-8Nに変更してみると、レイアウトが戻ったのである。

しかし、これしきのことで数時間・・・つらいのぉ・・・

これから先は表示されるのか？

WordPressインストールしたての状態では、タグ管理機能が弱い。

というのも、新規に投稿作成をする際のタグ入力欄では、いままで設定したタグは表示されず、自分で確認して間違えないように入力する必要がある。

これで間違えると、同じようなタグが新規に登録されてしまい、後で修正が必要になる。

まぁ、毎回確認して確実に同じタグを入力すれば良いのだが、面倒くさい。

新規作成画面で、選択して設定できればそれにこしたことはないのだが・・・ということで、見つけたのがAdvanced Tag Entry(http://wp.tekapo.com/2007/11/11/advanced-tag-entry/)というプラグイン。

早速インストールして使ってみる。

タグをプルダウンで選択して、追加、削除できるし、新規に追加するのも簡単。

なかなか便利である。この機能が標準でついていれば良いのだが・・・と思うのは私だけだろうか？