テーマカスタマイズの記録

WordPress

cameraLadyのリニューアルの話．まだFirefox以外のブラウザで表示を確認していない．というか，崩れることは分かっているのだけど，見切り発車で新テーマに乗り換えた．作業メモ．

使用テーマ

72 Class - A Theme For Wordpress | AlanWho.com

最近の WordPress Theme 10/8 at orioaで紹介されているのを見て，ちょうどワンカラムのテーマを探していたときだったので，使ってみることにした．

記事のタイトル

海外の人が作成したテーマを使うと，日本語を表示したときによろしくないことがよくあるね．斜体とか日本語だとキツいしね．CSSを修正．

.post .title h2 {
//	font: normal 300% Georgia, "Times New Roman", Times, serif;
	font: normal 300% helvetica,verdana,arial,sans-serif;
}

ページ最上部のナビゲーションリンク

ページ最上部にあるけれど，マークアップ的にはフッター．もともとは左上にブログのトップへのリンクがあったが，もっと目立つブログタイトルがトップへのリンクになっているから不要だと判断した．代わりにaboutページやarchiveページへのリンクを並べた．これにあわせてCSSを修正．

#top p {
	text-align: left;
//	width: 30%;
	float: left;
	margin: 0;
	padding: .5em;
	font-size: 110%;
	font-weight: bold;
}

この変更がなくても，このwidthはおかしいと思う．widthの設定は最初から要らないっぽい．

引用

blockquoteのCSSが書かれていなかったので追加．

blockquote {
	padding: 0 1.5em;
	background-color: #ddd;
}

エントリ中の画像

枠をつけてみることにした．

div.entry p img {
	border-top: solid 10px #999;
	border-left: solid 10px #999;
	border-bottom: solid 10px #ccc;
	border-right: solid 10px #ccc;
}

プログラムのソースコードを貼ったりするpre

WordPressで上手いことソースを貼る方法がなかなか見付からない．この点ははてなダイアリーが1番好き．

pre {
	padding: 15px;
	color: #ccc;
	background-color: #333;
	width: 720px;
	overflow-x: auto;
}

ページのタイトル

WordPress界隈ではよく言われているやつ．「ブログ名 >> エントリ名」から「エントリ名 - ブログ名」に変更．

なるべく静的HTMLを使うように変更

ページの表示を早くするために検討すべきWordPressの13のタグの話を参考にしながら，ブログのタイトル「cameraLady」や他のいくつかはデータベースを参照しなくてもいいようにHTMLに直接書いた．配布用テーマを作るでもない限り，こうしておいた方がよさそうだね．特にレンタルサーバはデータベースとのコネクションで待たされることが多いので，この方法は有効でしょう．

ブログ名を変えるときにはすべての変更箇所を手直ししなきゃいけないから注意．

はてなスターを設置

エントリのタイトルの隣じゃなくて，投稿日時とかカテゴリとかが表示されるpostdataの中にコンテナを入れることにした．

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
	Hatena.Star.SiteConfig = {
		entryNodes: {
			'div.post': {
				uri: 'h2 a',
				title: 'h2',
				container: 'div.postdata'
			}
		}
	};
</script>