Customize Archive

WordPress2.8.4にアップデートしたらビジュアルエディタ使用時のフォントが明朝体に戻っていたので再度メイリオに変更した。
ただ2.7.ｘシリーズからはファイル構成がかなり変わっていたので、下記ファイルを探すだけで時間を費やしてしまった。

wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css
74行目から

body.mceContentBody {
	font: 13px/19px Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
	padding: 0.6em;
	margin: 0;
}

pre {
	font: 12px/18px Consolas, Monaco, "Courier New", Courier, monospace;
}

変更後

body.mceContentBody {
	font: 13px/19px "Meiryo", Arial, Helvetica, sans-serif;
	padding: 0.6em;
	margin: 0;
}

pre {
	font: 12px/18px "Meiryo", Arial, Helvetica, sans-serif;
}

変更したもののビジュアルエディタを使用していないので意味はなし。

mod_deflateを有効にするためにdeflate.confを作成

[root@server ~]# vi /etc/httpd/conf.d/deflate.conf

<Location />
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rdf+xml

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
Header append Vary User-Agent env=!dont-vary
</Location>

上記ファイルを有効化するためにhttpdを再起動又は再読込み

[root@server ~]# /etc/rc.d/init.d/httpd restart

mod_deflateの効果については下記のサイトを見た方がわかりやすい。
YSlow対策でmod_deflateを利用してHTTPレスポンスをgzip圧縮 – blog.katsuma.tv
圧縮出来ているかどうか及び効果は下記サイトやYSlowで確認できる。
Port80 Software »» Compression Check

当サイトの結果は77.0%の圧縮に成功し転送速度も数値上では4倍ほど速くなった。

テスト環境では2.7リリース後すぐにインストールして遊んでいたものの、2.7.xx目玉である管理画面に違和感を覚えこのサイトに導入するのを見合わせていた。
最近ようやくその画面にも慣れてきたためアップデートしてみた。管理画面自体かなりカスタマイズ出来るみたいだが不要な物を２つほど非表示にしただけで殆どデフォルトでの使用。

ただビジュアルエディタ使用時のフォントだけは我慢できなかったのでメイリオに変更した。
/wp-includes/js/tinymce/wordpress.css 54行目
変更前

body.mceContentBody {
	font: 13px/19px Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
	padding: 0.6em;
	margin: 0;
}

変更後

body.mceContentBody {
	font: 13px/19px "Meiryo", Arial, Helvetica, sans-serif;
	padding: 0.6em;
	margin: 0;
}

結果

期待通りの表示にはなったもののバージョンアップ等でアップデートすれば、その都度書き直さなくてはいけないので根本的な解決にはなっていない。

あまり更新もしていないので意味はないかもしれませんが雰囲気だけでも変えてみました。
と言っても配布されているデフォルトのままなのでこれからのんびりとカスタマイズしていく予定です。

でもセンスがないのでこのままの方がいいかも・・・。

WordPress 対応テーマwp.Vicuna
拡張版 wp.Vicuna Ext

特にLayout Changerが面白そうだったのでFontsize Switcherと併せて導入してみた。
右上にあるLayoutSettingボタンをクリックすると実際に変更できます。

フォントサイズの変更も以前他のCMSで導入した際には文字サイズを変更したスタイルシートをそれぞれ用意してJavaScriptで切り替えるというものだったが、今回はそんな面倒な事をしなくてもサイズ指定さえすればOKだったので手間もかからなかった。

詳しい導入方法は開発元にあります。
Fontsize Switcher » フォントサイズを切り替えるJS:改2
Layout Changer » Layout Changer レイアウト変更スクリプト

Layout Changer はWordPressやMovableTypeで非常に人気のあるテンプレートvicuna専用です。

以下はcss等の個人的なメモ

Continue reading