poyosi.com View RSS

001 Prime Strategy Translate Accelerator

WordPressを日本語で表示させる場合に英語から日本語に翻訳しているためにファイルのう読み込みに時間がかかってしまいます。
その翻訳に必要なデータをキャッシュ、または停止することで高速化を図るというものです。
多言語に対応していない独自テーマを使う場合はこの機能を停止させることで、翻訳ファイルの読み込みコストをほぼ0にできるとのことです。
管理画面などの表示も高速化可能なため、これは是非入れておきたいですね。

Head Cleaner

HTTPレスポンスや各種データを圧縮して無駄なリクエスト数を減らしたり、クライアントサイド（ブラウザ側）のキャッシュを利用して高速化を図るというもの。
色々なプラグインを導入していたり、CSSを複数に分けて設置している場合でもひとつに圧縮して、表示してくれます。
不要なメタタグの削除ができたり、OGPを自動で導入してくれたりと何かと便利です。

WP Hyper Response

設定不要！導入するだけで効果があるプラグインです。（サーバーの設定によるところもあるらしい）
全て読み込む前にブラウザに送信するので体感レスポンスが向上を図ることができます。
大量のPVがあるブログでこのプラグインを導入するとサーバの負荷が増えてしまうらしいですが、小規模サイトなら有効とのことです。

WP Super Cache

WordPressの高速化には欠かせないキャッシュプラグインです。
WordPressは記事を動的に生成しているためどうしてもサーバーによっては表示が遅くなってしまいがちですが、このプラグインを導入することにより静的表示をすることができます。
類似プラグインとしてW3 Total Cacheというものもあります。こちらも同様にキャッシュを作成し高速表示をするものですが、こちらはCDNなどの設定やその他細かいカスタマイズが行えるようです。
比較的簡単なものはWP Super Cacheで行えますので、poyosicomではこちらを使用しています。

Custom CSS and JavaScript

特定の記事やページのheadにCSSやJavaScriptを書きたい時に使います。
if文を使って直接テーマに書き込んだり、普段共通で使ってるCSSに直接書き込んでもいいのですが、ファイルを分けたい時もあります。
カスタムフィールドを利用して外部のCSSを呼び込んだり、ページ内に書くことができるのでちょっとしたコードを書く時に便利です。

oEmbed Tweet

記事を書いていると、Twitterでこの人がこんな事を言っていました！というTwitterでのツイートを表示したい時があります。
そんなときは、ツイートのURLをペタっと貼るだけで自動的に整形してくれるこのプラグインが便利です。

PS Disable Auto Formatting

WordPressの投稿画面で「ビジュアルモード」と「HTMLモード」を切り替えたりすると勝手にPタグが挿入されたり空けていたスペースや改行が勝手に削除されてしまいます。
この自動整形機能が便利な人もいると思いますが、自分でHTML書けるよ！って人には邪魔な機能だったりもします。これは、そんな自動整形を無効にしてくれるプラグインです。

WP-Syntax

技術系ブログを書いていると記事内で様々なソースコードをサンプルとして見せたい時があります。
このプラグインを導入することでCSS、JavaScriptやPHPのソースコードをハイライトして表示してくれます。

Popular Posts

お手軽に人気の記事を表示してくれる便利なプラグインです。
過去のログから人気がある記事をピックアップしてくれるので、初めてブログを訪れた人などにも有効ですね。

Similar Posts

お手軽に関連記事を表示してくれる便利なプラグインです。
自動的に表示されているページと関連の深い記事をピックアップしてくれますので、更に読んでもらえる可能性が広がります。

Akismet

デフォルトでインストールされているプラグインですが、コメントスパム対策としては最強のツールではないでしょうか。
設定が少し面倒ですが、コメントを使っている方は是非とも導入した方がよいですね。

Broken Link Checker

多くの記事を書いていてしっかりリンクされているか不安だったり、ブログを引越ししたときなどのリンクチェックに最適です。
こちらは常時使用してなくても良いと思いますが、リンク切れによるエラーを回避するために入れておくと良いと思います。

Plugin Memorandum

プラグインにメモを残すプラグイン。
多くのプラグインをインストールしていると、何のためのプラグインだったか忘れてしまうこともあります。
そんなときは、このプラグインを使用することで解決すると思います。

WordPress Database Backup

投稿した記事などのデータベース情報を自動／手動でバックアップできます。
1日1回、または週に1回バックアップを取り指定のメールアドレスに送っておくといったことができます。
類似データベースバックアッププラグインとしてWP-DBManagerというものもありますが、こちらはデータベースの操作も行うことができます。
poyosicomではシンプルにバックアップのみを行いたいのでWordPress Database Backupを使用しております。

利用規約に同意して使用開始

GoogleアカウントでログインするとPC間と同期できる

プッシュ通知機能もついてます（何に使うんだろう？）

初心者にも優しい使い方の説明もある

アクセスしてみるとこんな感じ

Google Chromeのユーザーエージェント（iOS 5.1）

Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_1_1 like Mac OS X; ja-jp) 
AppleWebKit/534.46.0 (KHTML, like Gecko) CriOS/19.0.1084.60 Mobile/9B206 
Safari/7534.48.3

Safariのユーザーエージェント（iOS 5.1）

Mozilla/5.0 (iPhone; CPU iPhone OS 5_1_1 like Mac OS X) 
AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B206 
Safari/7534.48.3

Google Chromeの表示領域（iOS 5.1）

88px(44px)の部分はスクロールしても固定となっています。

GAP

コカ・コーラ

ルイ・ヴィトン

エステティックTBC

G-SHOCK

HTML

	
もじ文字
	
もじ文字

CSS

ul {
	width: 150px; /* 幅は任意 */
}

ul li {
	background: url( "background.png" ) no-repeat left; /* 背景画像を指定します */
	padding-left: 60px; /* 背景画像の幅（+間隔をあけたいサイズ）を指定します */
	margin-bottom: 20px; /* 次の
までの間隔を指定します */
	list-style: none; /* リスト先頭に付く「・」などを非表示にします */
}

JavaScript

$(function(){
	$('ul li').listvalign({
		mode: 'css', // modeを「css」と指定します
		bgImgHeight: 40 // 背景画像の高さを指定します
	});
});

Sample

HTML

	
もじ文字
	
もじ文字

CSS

ul {
	width: 150px; /* 幅は任意 */
}

ul li {
	margin-bottom: 20px; /* 次の
までの間隔を指定します */
	overflow: hidden;
	zoom: 1; /* IE対策用おなじみ魔法の言葉です */
	list-style: none; /* リスト先頭に付く「・」などを非表示にします */
}
	
ul li img {
	margin-right: 10px; /* 画像と文字の間隔を指定します */
	float: left;
}

ul li span {
	float: left;
	display: block;
	width: 60px; /* 横幅は任意です */
}

JavaScript

$(function(){
	$('ul li').listvalign({
		mode: 'tag' // modeを「tag」と指定します
	});
	// $('ul li').listvalign(); //空でもOK
});

Sample

HTML

	
もじ文字

CSS

ul {
	width: 150px; /* 幅は任意 */
}

ul li {
	background: url( "background.png" ) no-repeat; /* 背景画像を指定します */
	display: table-cell; /* table-cellを指定することによりvertical-alignが有効になります */
	vertical-align: middle; /* 縦中心のmiddleを選択します */
	height: 40px; /* 背景画像と同じ高さを入れます */
	padding-left: 60px; /* 背景画像の幅（+間隔をあけたいサイズ）を指定します */
	margin-bottom: 20px; /* 次の
までの間隔を指定します */
	list-style: none; /* リスト先頭に付く「・」などを非表示にします */
}

Sample

連続するとこうなるSample（table-cellなので当然tableぽくなる）

こうなってくると面倒だ！という人はプラグインでリストを簡単に導入してみましょう。

そもそもPNGを使わないほうがよいと言われた理由

PNGを使わない方がよいと言われた理由として主に以下の点が挙げられます。

主に上記理由でPNGを避ける傾向にありましたが、現状ではほぼ100％のブラウザで表示することが可能です。
また、透過PNGがネックになっていたInternet Explorer6も最近ではシェアがどんどん少なくなってきていますし、現在ではInternet Explorer7以降を対象としたWebサイトも増えてきているので状況次第では使用しても問題ないと考えます。

意外とPNGで書きだすのはマイナーと思われている部分もあるようなので、それぞれGIFとPNGの特徴を見て使い所を見極めましょう。