iGoogleの替わりをどうする?

iGoogleのサービス終了の11月1日が迫ってきました。いやはやまったく、月日のたつのは早いものです。
代わりのサービスをどうするかまったく考えていませんでした。

世間では

  • Netvibes
  • MyYahoo!(日本版)
  • My Yahoo!(米国版)
  • その他勢力・・・

みたいな感じです。
実際に見てみると、評判のいいNetvibesは確かにiGoogleの代替になりえるパワーを持っています。が、自分的にはWindows環境で見る画面があまりきれいじゃない・・・。iGoogleだとシンプルすぎて気にならないんですが、Netvibesはリッチな画面である分、そういうところが気になります。
米国版My Yahoo!は意外にもとてもよかったです。日本語のフィードもOKでした。日本語版My Yahoo!がこんな感じになれば、最有力候補ですが・・・。
日本版My Yahoo!でもiGoogle終了を見越して、乗り換えの案内をしています。

iGoogleからYahooへ

iGoogleからYahooへ


GoogleReaderやiGoogleの設定ファイルを非常に簡単に取り込んで、移行できます。ただ、日本語版と英語版では、現状で、ずいぶん差があります。そして、Yahooは右側の広告が、致し方ないとはいえ気になります・・・スペースも取り過ぎです。

で、どれも決定打がなく・・・iGoogle良かったなとか、早くも懐古しながら、実はMSNなんかをポータルで使ったりしています。カスタマイズ性は論外ですが、他のMSNのサービスと合わせていくと案外使い勝手がよかったりします。今回のことも含めて、あまりGoogleのサービスばかりに依存するのもよくないのかなとの反省もあります。

固定ページで遊んでみた

固定ページの使い道がはっきり決まっていなくて、表示するのやめようかと考えていました。
静的なページとしてサイトの紹介や著者紹介に使っている人もいるようですが、自分にはちょっとピンとこないというか・・・。
phpが動かせたらとかも考えプラグインを入れたりましたが、セキュアじゃなくなりそうな気もしたし、案外、実験してみたところ思ったことができそうにありませんでした。(自分の技術力のせいですけど、あわせて動かしているjQueryがうまくいかなかった・・・。Google先生に伺うと、解決策もありましたが、めんどくさくてやめました。)
とりあえず別で運営している気象観測サイトをiframeで表示してみました。別サイトで動いているので、phpもjQueryもフラッシュも、もちろんまったく問題ありません。
まあ、固定ページの使い方の方針が決まったわけじゃないですが、このあたりをヒントに何かできないか考えてみます。

jquery-iframe-auto-height」というプラグインは、高さを自動調整してくれるようですので、これも試してみたいところです。

実験に利用したフラッシュ。別サイトで運営されている気象観測装置の現況の値を表示しています。

ヘッダ画像を変えてみた

午後、少し暇だったので利用しているテーマ「Twenty eleven」のヘッダ画像を変えてみました。テーマ付属のデフォルト画像のままでしたら、やり方の練習をかねてやってみました。
適当なヘッダ画像を1000px × 288pxになるように作成すればいいようです。

ヘッダ画像1

ヘッダ画像1

ヘッダ画像2

ヘッダ画像2

ヘッダ画像3

ヘッダ画像3

ヘッダ画像4

ヘッダ画像4

ヘッダ画像5

ヘッダ画像5

実際はこの倍くらいヘッダ画像を設定しちゃいましたが、要領は分かりました。グラフィックソフトで、アップロード前に規定の大きさに変更していましたが、Wordpress上で、トリミングもできることが分かりました。
いや、ほんとにWordpressの進化に驚いています。

フランシスコはいずこへ

恐れいていた台風は、思いの外影響は少なく、休日の非常待機業務は免れたものの、会社行事で土曜日は予定外の出勤となった…。代休もらえるほどホワイトな企業ではないし、午後はとりあえず帰っていいらしいので帰ることに。
何だか、早朝からの出勤だったので、寝ることにします。

ログイン画面のフォントをメイリオ化するプラグイン

ログイン画面(標準フォント)

ログイン画面(標準フォント)

昨日、管理バーをメイリオ化するプラグインを実験的に作ってみました。
ログイン画面に関しても、フォントがイマイチなので、メイリオ化してみることにします。

先人方が既にfuncitions.phpをカスタムする形で実現しているようですが、

  1. ログイン画面のCSSはデフォルトのままとする
  2. プラグインと専用CSSで変更する

という方針で行くことにします。Wordpressそのもののアップグレード時に、基のデザインに戻すための余分な作業を発生させないためです。

ログイン画面のマークアップは次のようなソースでした。

<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Chameleon Cyber &rsaquo; ログイン</title>
	<link rel='stylesheet' id='wp-admin-css'  href='http://hogehoge/wp-admin/css/wp-admin.min.css?ver=3.6.1' type='text/css' media='all' />
<link rel='stylesheet' id='buttons-css'  href='http://hogehoge/wp-includes/css/buttons.min.css?ver=3.6.1' type='text/css' media='all' />
<link rel='stylesheet' id='colors-fresh-css'  href='http://hogehoge/wp-admin/css/colors-fresh.min.css?ver=3.6.1' type='text/css' media='all' />
<meta name='robots' content='noindex,nofollow' />
	</head>
	<body class="login login-action-login wp-core-ui">
	<div id="login">
		<h1><a href="http://ja.wordpress.org/" title="Powered by WordPress">Chameleon Cyber</a></h1>

<form name="loginform" id="loginform" action="http://hogehoge/wp-login.php" method="post">
	<p>
		<label for="user_login">ユーザー名<br />
		<input type="text" name="log" id="user_login" class="input" value="" size="20" /></label>
	</p>
	<p>
		<label for="user_pass">パスワード<br />
		<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" /></label>
	</p>
	<p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever"  /> ログイン状態を保存する</label></p>
	<p class="submit">
		<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="ログイン" />
		<input type="hidden" name="redirect_to" value="http://hogehoge/wp-admin/" />
		<input type="hidden" name="testcookie" value="1" />
	</p>
</form>

<p id="nav">
		<a href="http://hogehoge/wp-login.php?action=lostpassword" title="パスワード紛失取り扱い">パスワードをお忘れですか ?</a>
</p>

<script type="text/javascript">
function wp_attempt_focus(){
setTimeout( function(){ try{
d = document.getElementById('user_login');
d.focus();
d.select();
} catch(e){}
}, 200);
}

wp_attempt_focus();
if(typeof wpOnload=='function')wpOnload();
</script>

	<p id="backtoblog"><a href="http://hogehoge/" title="迷子になってしまいましたか ?">&larr; Chameleon Cyber へ戻る</a></p>

	</div>

		<div class="clear"></div>
	</body>
	</html>

GoogleChromeのデベロッパーツールで、適用されているCSSと要素を探ります。結果として、

.login p

に対して、メイリオを指定をしてやればよさそうだと分かりました。

作成したプラグインのコード(wp_custom_login_css.php)

<?php
/*
Plugin Name: WP Custom Login CSS
Plugin URI: http://chameleoncyber.org/download/
Description: This plug-in to change the CSS of the login screen.
Version: 1.00
Author: chameleon
Author URI: http://chameleoncyber.org/
*/

/*  Copyright 2013 chameleon (email : postmaster@chameleoncyber.org)

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; either version 2 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/

//This plug-in to change the CSS of the login screen.
//ログイン画面のフォントをメイリオ化する。
function login_css() {
    echo "\n" . '<link rel="stylesheet" type="text/css" href="' . plugin_dir_url(__FILE__) . 'login.css' . '" />' . "\n";
}
add_action('login_head', 'login_css');
?>

メイリオ化するCSS(login.css)

.login p{
    font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}

メイリオ化したログイン画面

メイリオ化したログイン画面


作成したプラグインとCSSをアップロードして有効化したところ、ログイン画面もメイリオ化でました。

プラグインを作ってみた

WordPressには「管理バー」と呼ばれるツールバー状のものがあります。実は管理画面のフォントが汚かったので、メイリオで表示したいと思っていました。最初は、CSSを編集しようと考えましたが、プラグインで解決できることが分かりました。インストールしたプラグインは、WordPress の管理画面にスタイルシートを追加するプラグイン「WP Custom Admin CSS」です。

管理画面(メイリオ)

管理画面(メイリオ)

このプラグインの効果で管理画面の各種フォントを始め、管理バー(AdminBar)のフォントも「メイリオ」に変更されています。

その気になればプラグインに同梱されているCSSを編集すれば、好きなスタイルを適用できるわけですね。

ところが、管理画面を抜けてサイトを表示した状態では、管理バーのフォントは「メイリオ」ではなくなっています。

管理バー(通常フォント)

管理バー(通常フォント)

先ほどのプラグインは「管理画面のフォントを変更」してくれますが、管理画面から抜けてしまえば、その効力は左図のようになくなっています。
しかし、何とも中途半端で残念な結果ですので、何とかここもメイリオにしたいところです。 ということで、最初はCSSを編集してみました。ツールで探っていくと、管理バーのCSSは../wp-includes/css/admin-bar.cssであると分かりました。そのCSSのfont指定は「sans-serif」になっていましたから、「Meiryo」を付け加えました。自分はウィンドウズ環境で管理バーを表示させるので、表示されるフォントとして指定するのはメイリオだけで十分です。管理バーは、自分以外見ないものですから、他の閲覧者の環境は考慮しなくていいはずです・・・たぶん。そうでなければ、他の環境も考慮したフォント指定にしないと…これは後から調査することにしよう・・・。まあ、実験なので、メイリオだけで行くことに…。
結果、うまくいきませんでした。
どうやら更に、admin-bar.min.cssのfont指定を変更しなければならないようです。admin-bar.cssはオリジナルのままで、admin-bar.min.cssのフォント指定を変更しただけで、管理画面以外での管理バーのフォントがCSSで指定したものに変わりましたから、admin-bar.css→admin-bar.min.cssの順に読み込まれていくのでしょう。 さて、これで手を入れるべきCSSも分かり、結果も上々でしたので終了としたいところですが、「こんなコアファイルを変更したら、Wordpressをアップデートするたびに、忘れずに変更しないといけないんじゃないか…orz」と思い至ったわけです。これは意外にめんどくさそう。管理画面のフォントを変更するプラグインのように、インストールしておけば、いつも効力を発揮してくれるようにしたいものです。

じゃ、プラグインってどうやって作るんだろうと言うことで、いくつかのプラグインのコードを見てみました。どうやら共通要素があるようで、

<?php
/*
Plugin Name:(プラグイン名)
Plugin URI:(プラグイン配布URL)
Description:(プラグイン説明)
Version:(バージョン)
Author:(作者名)
Author URI:(作者サイトURL)
*/
// 以下プラグインの実働コード
// ・・・・・・
?>

というテンプレがあることが分かりました。さらに、WordPress のプラグインを作るのに大いに参考になりそうな「プラグインの作成 – WordPress Codex 日本語版」というサイトも見つかりました。

はい、だいたい理解できました。
CSS読み込ませるくらいなら簡単にできそうです。 サンプルコードも参考にしながら、次のようなコードを作成しました。とりあえずCSSそのものをプラグインのコードで吐き出しています。

<?php
/*
Plugin Name: WP AdminBar Custum CSS
Plugin URI: www.chameleoncyber.org/download/
Description: This plug-in adds the CSS to your Admin Bar.
Version: 1.0.0
Author: chameleon
Author URI: www.chameleoncyber.org
*/

function wp_custom_adminbar_css() {
 echo "
 <style type='text/css'>
 #wpadminbar *{
 font: normal 13px/28px Meiryo;
 }

 #wpadminbar {
 font: normal 13px/28px Meiryo;
 }

 #wpadminbar #adminbarsearch .adminbar-input{
 font: normal 13px/24px Meiryo;
 }
 </style>
 ";
}
add_action('admin_head', 'wp_custom_adminbar_css');
add_action('wp_head', 'wp_custom_adminbar_css');
?>
管理バー(通常フォント)

管理バー(通常フォント)

作成したファイルをpluginsディレクトリにアップロードして、管理画面に表示された自作のプラグインを有効化します。 管理画面を抜けて、ホームページを表示し、管理バーを見ると、フォント変更が反映していました。念のために、自作プラグインを無効化して、フォントの変更の効果が、プラグインの動作に連動するか確認してみました。OKのようです。この程度の単純なものなら思ったより簡単に、プラグインを作成できることがわかりました。 これで直接、WordpressのCSSを編集しなくても、プラグインで管理バーのフォントを変更できます。 ただし、現状ではプラグインのコードでオーバーライドするCSSを記述しているので、これをカスタマイズしやすいように別のCSSファイルとして分けることにします。

最終的に作成したものが、以下のコードです。

プラグイン「WP AdminBar Custum CSS」(wp_custom_adminbar_css.php)

<?php
/*
Plugin Name: WP AdminBar Custum CSS
Plugin URI: www.chameleoncyber.org/download/
Description: This plug-in adds the CSS to your Admin Bar.
Version: 1.0.0
Author: chameleon
Author URI: www.chameleoncyber.org
*/

/* Copyright 2013 chameleon (email : postmaster@chameleoncyber.org)

This program is free software; you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation; either version 2 of the License, or
 (at your option) any later version.

This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 GNU General Public License for more details.

You should have received a copy of the GNU General Public License
 along with this program; if not, write to the Free Software
 Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/

//This plug-inn adds a custom CSS to Admin Bar
function wp_custom_adminbar_css() {
 echo "\n" . '	<link href="' . plugin_dir_url(__FILE__) . 'wp_custom_adminbar_css.css' . '" rel="stylesheet" type="text/css" />' . "\n";
}
add_action('admin_head', 'wp_custom_adminbar_css');
add_action('wp_head', 'wp_custom_adminbar_css');
?>

カスタマイズ用のCSS-「wp_custom_adminbar_css.css」

/* Sample CSS(管理バーのフォントをメイリオ化)
-----------------------------------------------------*/

#wpadminbar *{
	font: normal 13px/28px Meiryo,"メイリオ",sans-serif;
}

#wpadminbar {
	font: normal 13px/28px Meiryo,"メイリオ",sans-serif;
}

#wpadminbar #adminbarsearch .adminbar-input{
	font: normal 13px/24px Meiryo,"メイリオ",sans-serif;
}

次は、ログイン画面のフォントもメイリオ化するプラグインを作ることにします。

さくら散る

CoreServerからさくらサーバーへ移行したばかりですが、さらにXSERVERへ移行しました。月額では、倍くらい金額が違いますが、さくらの方で若干トラブルが発生したのと、その解決に時間が使えそうになかったこと、そしてXSERVERの速さに魅力を感じたからです。さくらサーバーも利用者が多いので、ちゃんと調べれば解決策はネット上にたくさんあるとは思ったんですが・・・XSERVERの快適さには勝てませんでした。

XSERVER LOGO

XSERVER

XSERVERはドメインごとにドメインの名前のついたディレクトリを作ってくれるという、ちょっと癖のあるところもありましたが、至って快適です。お試し期間終了を待たず、本契約をしました。ドメインを1個サービスしてくれるキャンペーン中でしたので、併せて取得しました。

いずれのレンタルサーバーもですが、Wordpressはじめ様々なプログラムを自動でインストールしてくれるサービスがあったりと、最近は便利だなぁと感じることしきりです。

さくらサーバーへの移設

COREサーバーから、さくらサーバーへWordpressサイトを移動してみました。COREサーバーのレンタル期限が後一月を切っていたことと、PHPのバージョンが微妙に低く、プラグインの「BackWPUp」が動かなかったためです。

しばらくブログから…というかWordpressそのものから離れている間に、とても使いやすいプラグインが充実していました。

バックアップも定期的に取ってくれるし、バックアップファイルをDropboxへと置いてもくれる。 どうしてもこれ、作動させたかった訳です。

さくらサーバーはほぼCOREサーバーと同じ料金で、PHPのバージョンは5.4系も選択可能だったので、最有力候補としました。若干レスポンスが悪いかなと言う気がしますが、月額料金から言えばコストパフォーマンスはかなり高いと言えます。

最後まで、Xサーバーと迷っていましたが、倍の料金で、性能差はそこまでないような気がしましたから、とりあえずさくらのお試し期間を使い切ってみます。もっと、トラフィックの多いサイトを運営していれば、より高性能なサーバーを検討する必要もあるでしょうが、現状ではOKでしょう。

書いた記事も、Wordpressの純正機能の「ツール」から「エクスポート」と「インポート」で、簡単に移行できました。この作業で必要となるプラグインも、見事に誘導してインストールしてくれる至れり尽くせりの作りに感動です。