おじさんの備忘録-番外編- » Customize

WordPress 2.8.x ビジュアルエディタのフォント変更

kecha — Sat, 17 Oct 2009 00:47:25 +0000

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

wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css
74行目から
[css num=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;
}[/css]
変更後
[css num=74]body.mceContentBody {
font: 13px/19px “Meiryo”, Arial, Helvetica, sans-serif;
padding: 0.6em;
margin: 0;
}

pre {
font: 12px/18px “Meiryo”, Arial, Helvetica, sans-serif;
}[/css]

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

mod_deflateによるコンテンツのGzip圧縮

kecha — Tue, 17 Mar 2009 14:04:33 +0000

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

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

[text gutter=false]

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

[/text]
上記ファイルを有効化するために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倍ほど速くなった。

WordPress 2.7.1にアップデート

kecha — Wed, 11 Mar 2009 09:45:12 +0000

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

ただビジュアルエディタ使用時のフォントだけは我慢できなかったのでメイリオに変更した。
/wp-includes/js/tinymce/wordpress.css 54行目
変更前
[css num=53]body.mceContentBody {
font: 13px/19px Georgia, “Times New Roman”, “Bitstream Charter”, Times, serif;
padding: 0.6em;
margin: 0;
}[/css]
変更後
[css num=53]body.mceContentBody {
font: 13px/19px “Meiryo”, Arial, Helvetica, sans-serif;
padding: 0.6em;
margin: 0;
}[/css]
結果

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

サイトテーマ変更

kecha — Mon, 13 Oct 2008 15:44:07 +0000

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

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

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

Layout Changer と Fontsize Switcherを導入

kecha — Tue, 18 Dec 2007 23:19:05 +0000

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

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

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

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

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

index.php 404.php archive.php category.php page.php search.php single.php
上記７つのテンプレートの

直下に下記コードを挿入
[php]

[/php]
アドレス部分は適宜変更する必要がある。私に場合テンプレートディレクトリ直下に配置したので上記のようにしている。

cssも配布元さんのcssを覗いて拝借しました。 :asease: 表示位置のズレは要調整。
[css]
div#header ul#fontSizeSwitcher {
float: left;
margin: 12px 0 0;
padding: 0;
list-style: none;
}

div#header ul#fontSizeSwitcher li {
margin: 0 0 0 10px;
padding: 0.2em 3px;
float: left;
width: 1em;
background: #000 url(images/fontsize.gif) left top no-repeat;
color: white;
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
cursor: pointer;
}

div#header ul#fontSizeSwitcher li:hover,
div#header ul#fontSizeSwitcher li:focus,
div#header ul#fontSizeSwitcher li.current {
color: #ff0033;
background: #fff url(images/fontsize_hover.gif) left top no-repeat;
}

div#header div.functions {
float: right;
padding-right:200px;
margin-top: -103px;
}
[/css]
これで導入は完了したものの他所のサイトでもサイズ切り替えはよく見かけるが、私の場合見づらいからと言って変更する事ってないんですよね。 :tenntenn:

WordPressが英語表記に変身

kecha — Sat, 15 Dec 2007 04:50:48 +0000

あるレンタルサーバでWordPressをインストールすべくサイトにアクセスすると表記が英語になっている。
原因はPHPのバグらしいのですが下記修正を施すことで対応。

wordpress/wp-includes/gettext.php １１７-１２０行目（Wordpress２．３．１）
＜修正前＞
[php num=117] if ($magic == ($MAGIC1 & 0xFFFFFFFF) || $magic == ($MAGIC3 & 0xFFFFFFFF)) { // to make sure it works for 64-bit platforms
$this->BYTEORDER = 0;
} elseif ($magic == ($MAGIC2 & 0xFFFFFFFF)) {
$this->BYTEORDER = 1;[/php]
＜修正後＞
[php num=117] if ($magic == ($MAGIC1) || $magic == ($MAGIC3)) { // to make sure it works for 64-bit platforms
$this->BYTEORDER = 0;
} elseif ($magic == ($MAGIC2)) {
$this->BYTEORDER = 1;[/php]

参考記事 » インストール途中から英語に変わってしまいます

これを見つけるまで何度も設定も見直しインストールを繰り返したことは言うまでもない。 :namida2:

外部リンク先のみ画像を挿入

kecha — Fri, 09 Nov 2007 01:50:05 +0000

記事の中にあるサイト外に出るリンクのみにイメージをつけるというもの。

[css gutter=false]a[href^="http:"]:after,
a[href^="https:"]:after {
content: url(images/icon/link_out.gif);
margin: 0 2px;
}

a[href^="http://example.com"]:after {
content:”";
margin: 0;
}[/css]

上記コードをcssに追加するだけ。
afterをbeforeに置き換えればイメージを前に挿入できる。
もちろん挿入するイメージのパスや自サイトのアドレスは要調整。

今回のイメージは海外の下記サイトから頂きました。
Mini-Images für den Webmaster, kostenlose downloads GIF JPG Webdesign
上記アドレスから入ってSite-Nav Symboleページですが、これ以外にもシンプルですっきりしたものが多いです。

ビジュアルエディタのフォントを変更

kecha — Wed, 10 Oct 2007 03:59:59 +0000

WordPressに標準で装備されているビジュアルエディタTinyMceの記事投稿画面のフォントはデフォルトの状態ではTimes New Romanになっている為、日本語を打ち込んだ際は少々違和感がある。

wp-includes/js/tinymce/plugins/wordpress.cssの28行目にフォントを設定する箇所があるのでお好みに変更すれば問題は解決。
[css num=26]
body {
background: #fff;
font: 1em/1.3em Georgia, “Times New Roman“, Times, serif;
padding: .5em;
}[/css]

修正後

[css num=26]
body {
background: #fff;
font: 1em/1.3em Georgia, “MS UI Gothic“, Times, serif;
padding: .5em;
}[/css]

参考記事 >> ビジュアルエディタのフォントの大きさ