「WordPress」カテゴリーアーカイブ

Astronaut Blogのアクセス障害顛末

ともかく無事に復旧できました。

週末は、台風21号の関東直撃で大変でしたね。せっかく衆議院解散総選挙の期日前投票に行ったのに、22日は雨やらなにやらで出かける用事も中止になってしまい――でも大雨だから先に行っといてよかったかも、という微妙な感じに。週明け23日は台風上陸のため出社困難なら午前半休かもと覚悟していたら、電車は本数を減らしつつも動いており、仕方なく定時出社となりました。

世間が台風直撃で大わらわだった時、当サイトAstronaut Blogもアクセス障害が発生して大わらわでありました。気づいたのは23日の昼ごろ。www.astronaut.jpにアクセスしようとすると、HTTP 500エラーの画面が表示されてしまう。レンタルサーバ会社のページに障害情報はなし。FTPクライアントからのログインや、HTMLの固定ページへのアクセスは可能なので、ブログを管理しているWordpressまわりが怪しい。調べてみると、HTTP 500エラーが出るのは、ブログの機能をアップグレードした場合や設定ファイルを変更した場合とありますが、23日の当該時間は台風騒ぎでメンテや更新どころではなかった。すくなくとも、僕自身のオペレーションが悪さをした可能性は低い。

そこまで切り分けて夕方、レンタルサーバ会社にメールで問合せ。復旧を確認したのは翌24日の昼ごろです。こちらは一切、設定を変更していないので、レンタルサーバ側になんらかの問題があったのか? 原因調査中というのが現状ですが、ともかく無事に復旧できました。ヤレヤレ。

【WordPress】ブログのテーマを『Twenty Fourteen』に変更して追加CSSでカスタマイズ

追加CSSという機能でカスタマイズしてみました。

WordPressにて構築したブログのデザインをリニューアル。これまでのデザインも気に入ってましたが、10年以上おなじテーマを使うとさすがに古くさくなってきた。従来はPC用サイトがメインで、モバイル用には別デザインが適用されていたけれど、スマートフォンなどモバイルデバイスでのアクセスが増加してきたのでPC用と親和性をもたせたい。WordPress用にオフィシャルのテーマが公開されているいっぽう、個人で凝ったテーマも公開されている。ただ、個人公開のテーマはセキュリティ的な問題があるし、メンテナンスが継続する保障もない。あるていど信用できてアップデートも期待できるとなると、オフィシャルのテーマにせざるをえません。WordPressオフィシャルテーマとしてTwentyというシリーズがあるうち、『Twenty Fourteen』というテーマをカスタマイズすることにしました。

このままのデザインでも悪くはないですが、エントリーのタイトルフォントがでかすぎたり、サイドバーやエントリーの幅がせますぎたりと気になるところがある。テーマそのものを改造することもできるけど、それだとテーマがアップデートされると元にもどってしまうので、追加CSSという機能でカスタマイズしてみました。

追加CSSとは、テーマの標準設定を特定の部分だけ上書きできるもの。旧デザインの色遣いやレイアウトに近い感じで変更。『Twenty Fourteen』のスタイルシート(style.css)を調べて、変更したい箇所の設定を洗い出し、追加CSSに追記しました。新しいテーマはブラウザのウインドウサイズごとにレイアウトが最適化されるので、PCでもスマホでもいい感じで表示されるように。

ご参考までに、現時点での当サイトに適用されている『Twenty Fourteen』用追加CSSを公開。必要と思われる箇所のみなので、気になる場所があったら随時追加、変更するかもしれません。てか、こういう情報があまりなくて、トライ&エラーでの解析が面倒でしたよ。

Amazon

楽天市場

/**
 * Twenty Fourteen for Astronaut Custom ver1.2
 * -----------------------------------------------------------------------------
 */

/**
 * 1.0 Reset
 * -----------------------------------------------------------------------------
 * リンク色、選択色を変更
 */

a {
	color: #006699;
}

a:active,
a:hover {
	color: #FF5E06;
}

::selection {
	background: #099999;
}

/**
 * 2.0 Repeatable Patterns
 * -----------------------------------------------------------------------------
 * ボタンの色を変更
 */

/* Buttons */

button,
.button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: #006699;
}

button:hover,
button:focus,
.button:hover,
.button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
	background-color: #FF5E06;
}

button:active,
.button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	background-color: #099999;
}

/**
 * 3.0 Basic Structure
 * -----------------------------------------------------------------------------
 * メインコンテンツを中央寄せ
 */

.site {
	margin-left: auto;
	margin-right: auto;
}

/**
 * 4.0 Header
 * -----------------------------------------------------------------------------
 * ヘッダーの背景色変更、検索ボタンの色変更
 */

.site-header {
	background-color: #099999;
}

.site-title {
	font-size: 20px;
}


/* Search in the header */

.search-toggle {
	background-color: #006699;
}

.search-toggle:hover,
.search-toggle.active {
	background-color: #FF5E06;
}

.search-box {
	background-color: #006699;
}

/**
 * 5.0 Navigation
 * -----------------------------------------------------------------------------
 * メニュートグルの色変更
 */

.menu-toggle {
	background-color: #099999;
}

/**
 * 6.0 Content
 * -----------------------------------------------------------------------------
 */

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
	max-width: 750px;
}

/**
 * 6.1 Post Thumbnail
 * -----------------------------------------------------------------------------
 * サムネイル画像の背景を無地に
 */

.post-thumbnail {
	background: #FFFFFF;
}

a.post-thumbnail:hover {
	background-color: #FFFFFF;
}

/**
 * 6.2 Entry Header
 * -----------------------------------------------------------------------------
 * エントリーの文字サイズ、色、幅を調整
 */

.entry-title {
	font-size: 22px;
	font-weight: 600;
	color: #006699;
	text-transform: none;
}

.entry-title a {
	color: #006699;
}

.entry-title a:hover {
	color: #FF5E06;
}

/**
 * 6.3 Entry Meta
 * -----------------------------------------------------------------------------
 * エントリーリンクの色変更
 */

.entry-meta a:hover {
	color: #FF5E06;
}

.entry-meta .tag-links a:hover {
	background-color: #FF5E06;
}

.entry-meta .tag-links a:hover:before {
	border-right-color: #FF5E06;
}

/**
 * 7.1 Widgets
 * -----------------------------------------------------------------------------
 * ウィジェットの色を変更
 */

.widget a:hover {
	color: #FF5E06;
}

.widget_calendar tbody a {
	background-color: #006699;
	color: #fff;
	display: block;
}

.widget_calendar tbody a:hover {
	background-color: #FF5E06;
}

/**
 * 8.0 Footer
 * -----------------------------------------------------------------------------
 * フッターの背景色変更
 */

.site-footer {
	background-color: #099999;
}

.slider-direction-nav a:hover {
	background-color: #FF5E06;
}

/**
 * 11.0 Media Queries
 * -----------------------------------------------------------------------------
 * 背景色を変更し、サイドバーの幅を260px、ウィジェットの幅を200pxに変更
 */

#secondary {
background-color: #099999;
}

.primary-navigation li:hover > a,
.primary-navigation li.focus > a {
	background-color: #FF5E06;
}

@media screen and (min-width: 1008px) {
	.search-box-wrapper {
		padding-left: 260px;
	}
	.site-content {
		margin-left: 260px;
	}
	.site:before {
		background-color: #099999;
		width: 260px;
	}
	#secondary {
	width: 200px;
	}
}

@media screen and (min-width: 1080px) {
	#secondary {
	width: 200px;
	}
}

WPtouchでメニューと検索が表示されない

無料バージョンでも、かなり素敵な感じに。

スマートフォンで当サイトを閲覧されている方は、全アクセスの何パーセントぐらいなのだろうか。それはわかりませんが、WordPressで作成したブログを、スマホ用に最適化するWPtouch 4.0.4というプラグインをカスタマイズし、パソコン用のサイトとデザインを合わせてみた。

610611

WPtouchプラグイン自体は、かなり前のバージョンから導入していたのですが、デザインは標準のまま。上部左右のメニューや検索機能が正常に表示できず、無料版ならこんなものかと思っていた。しかし、デザインをいじっているうちにメニューと検索を正常に表示させることに成功。

方法はWPtouchプラグイン用のデータが保存されている「~/wordpress/wp-content/wptouch-data」以下のパーミッションを、フォルダは755、ファイルは644に変更すること。特に重要なのが「~/wordpress/wp-content/wptouch-data/cache」以下のファイルで、ここのパーミッションを644に変更したらメニューと検索機能が有効化されました。無料バージョンでも、かなり素敵な感じに。

有料版のWPtouch PROというのもありますが、いちばん安いので88ドルもするので躊躇してる。ウチのサイトの規模なら、無償版で大丈夫かな。

検索上位を最速で実現させるWordPress SE...

検索上位を最速で実現させるWordPress SE…
価格:2,484円(税込、送料込)

『BlueStacks』のKindleアプリがだいぶ使えるように

これなら有償でもいいかも。

Windows 8.1のタブレットPCを使用中。これ1台でブログの更新からお絵かきやドラクエX、確定申告や小説書きまでできてしまう。はっきりいって、デスクトップPCがなくてもコレ1台持ってれば、仕事もホビーも完結できちゃうスペック。満足度は高いですが、それでもガッカリした点は、電子書籍が読みづらいこと。特にAmazonのKindleが日本むけのアプリを用意していないため、買った電子書籍は結局、Androidタブレットを持ち歩かないと読みづらい。タブレットPCはかなり重いので、すこしでも荷物を軽くするため、Androidタブレットは持ち歩きたくないのだが。

そんな問題の解決策として、WindowsでAndroidを動かせる『BlueStacks』というアプリがある。仮想的にAndroidが起動するのでKindleアプリも動かせて便利……と行きたいのですが、はじめて『BlueStacks』を使ったころは、Androidのバージョンが古く、動きももっさりで、ちょっと実用に耐えないレベル。その時はあきらめてAndroidタブレットにもどってしまったんだけど先日、あらためて『BlueStacks』を入れてみたら、アップグレードされており、レスポンスがだいぶよくなってました。これなら実用レベルかも。しばらく、Androidタブレットなして行けるか試してみます。

現状、『BlueStacks』はベータ版で無償だけど、いずれ有償版に移行するとのこと。だいぶ完成度が上がってきたので、これなら費用をかけて使う価値がありそう。てか、現行バージョンだと無料なかわりに、やたらとゲームアプリへ誘導しようとするから、有償でプレーンなAndroidとして使えるバージョンを早く出してほしいです。

スマホ閲覧用に『WPtouch』をアップグレード

とりあえず無料版で十分かな。

ブログツールWordPressのプラグインで、スマホ用に表示してくれる『WPtouch』をアップグレード。以前のバージョンでは、一部のAndroidで正しく表示されない問題がありましたが、今回は正常に表示されます。有償バージョンだとデザインを変更できますが、無料バージョンでとりあえず見栄えの問題はクリア。

僕のスマホだと検索やメニューボタンが動いてませんが、記事は問題なく読めるので実用上の問題はないかと。これでいいかな。

WordPressの『WPtouch』プラグインが上手く表示されない問題を対処

そのうち直ると思ってたんだけど……。

当ブログは、フリーのWordPressというツールを使っています。WordPressには、さまざまな機能をプラグインで追加でき、モバイル表示は『WPtouch』で対応。iPhoneやAndroidスマホからだと、専用のモバイルページが表示されてるはず。スマホから閲覧されてる方、このブログ、ちゃんと見えてますか?

実は、先日までAndroid4.1の標準ブラウザから閲覧すると、文字だけでデザインが消えた状態で見えてました。スタイルシートという見栄えを指定するファイルが読み込まれてないっぽい。調べてみたら、他の方も同様の状況になっていたみたい。数ヶ月前から気づいてたけど、そのうち直るだろうと放置してたら、最新版にアップデートしても修正される気配なし。修正用の追加プラグインを作成された方がいたので、それを使用させてもらいました。自前のAndoroid4.1スマホから、正常にモバイルサイトが表示されることを確認。

フリーツールなので多くは望めないから、問題は自力でなんとかするしかないですな。

ブログにソーシャルボタンを設置

共有してもらえる記事を書かないと。

ブログの記事を外部のサイトと連携できる、ソーシャルボタンを設置。フェイスブックやツイッター、LINEなどに、記事のURLを投稿できるようにしてみた。WordPressの「WP Social Bookmarking Light」というプラグインを使用したら、けっこう簡単に設置できました。ミクシィと連携するためにチェックキーを登録するのが、少々面倒でしたが、あとは問題なし。肝心なのは、ソーシャルメディアに連携できることより、連携してもらえる記事を書くこと。記事を充実させないとな。

ブログをiPhone/iPod touch対応にしてみた

当サイトの約4割は、Windows以外からのアクセスです。

WordPressで構築したブログに、iPhone/iPod touch表示用のプラグイン『WPtouch iPhone Theme』を導入。以前から、ケータイ表示用のプラグイン『Ktai Style』を入れてたけど、iPhone/iPod touchには対応させてなかった。プラグインをいろいろ試したけど、『WPtouch iPhone Theme』がいいみたい。

IMG_0049[2] IMG_0050[1]

左が、『WPtouch iPhone Theme』プラグインを導入して、「Safari」ブラウザで表示させたもの。右が、「Opera Mini for iPhone」ブラウザで表示させたもの。「Opera Mini」では、『Ktai Style』プラグインで最適化されますので、お好みでどうぞ。どちらも、PC版で表示させることもできますよ。

『WordPress 2.8 ベイカー』にアップグレードしてもいいんじゃない

WordPressでサイトをブログ化してから、記事の執筆に専念できるようになりました。

むかしは月末に月ごとのログページを手作業で作成してたけど、そんなわずらわしさからサクリと解放。サイト管理の簡素化とともに、記事ごとに個別ページが自動生成されるため、検索エンジンからヒットしやすくなったのも利点です。

そんなWordPressの最新版『WordPress 2.8 ベイカー』の日本語版がリリース。アップグレード好きとしては──日本語版がリリースされてから──速攻で入れてみた。トラブルがなければ、作業はオートであっという間。バックアップ作業のほうが時間がかかるぐらいです。

WS000161 WS000162

ダッシュボードの表示カラム数が変更できるので2カラムから3カラムにしてみた。あと、ウィジェット管理画面のレイアウトが変わった。そのほか、790個以上のバグを修正し、180以上の新しい機能・変更・更新・改善があるそうですよ。

こちらの環境では、アップグレード作業もアップグレード後の動作も問題ないようです。

■2009年6月15日追記

WordPress 2.8の自動アップデートにバグが発見されたそうです。サーバ上のフォルダが削除される場合があるので、手動でのアップグレードを推奨とのこと。自動でやっちゃったよ!