WEBマーケティングブログ » ブログ更新・成功のヒント

自分のサイトのChrome拡張機能を作れる「ExtensionFactory」

sigeo — Wed, 02 Mar 2011 15:00:56 +0000

自分のサイトの情報を、ユーザーがいつも開くブラウザに表示できるのは、サイト運営者としては実に魅力があるものです。

それを実現するには、ブラウザの拡張機能を作成すれば良いのですが、ある程度知識や技術がなければ作成できませんし、そもそも機能に魅力がなければ使われることもありません。

今回は、そういったハードルを一気に低くしてくれるサービスをご紹介します。

カンタンに自サイトのブラウザ拡張機能を作れる「ExtensionFactory」

「ExtensionFactory」は、URLを指定するだけで、カンタンにGoogle Chromeなどのブラウザ拡張機能を作成するサービス。

ただ単に新着記事を表示するだけでなく、新着記事通知やお気に入りといった機能も持ち合わせているのも良いところです。

４つのブラウザの拡張機能を生成

↑Chrome, Safari, Firefoxそして Internet Explorerの拡張機能を同時に生成します。

ここでは4つのブラウザのうちGoogle Chrome 拡張機能についてご紹介します。

開いたブラウザ向けに自動的に変換

SliceFactory Extension Factory

↑拡張機能を作成すると、拡張機能をインストールするためのボタンが生成されます。このボタンは、ユーザーが開いたブラウザによって、最適なものに自動的に変更されるようになっています。

例えばGoogle Chromeでボタンが設置されたページ開くと、Chrome拡張機能をインストールするイメージボタンになり、Firefoxで開くと、Firefoxアドオンのインストールボタンになります。

↑ユーザーがインストールボタンを押すと、通常のChrome拡張同様に、インストールの手順が進められます。

アイコンに未読数を表示

↑新着記事が更新されると、アイコンに未読数を表示します。

サイトの新着記事をブラウザでチェックできる

↑直近の新着記事10件を吹き出しに表示します。これを作成する手間を省いてくれるのは素晴らしい。

お気に入り追加・管理機能

↑新着記事でスターボタンを押すと、Bookmarkタブにお気に入りとして保存することができます。

拡張機能の作成方法

↑まずextensionfactory.comのページで、作成したいサイトのURLを貼り付け、「Create your extension」ボタンを押します。

↑すると、拡張機能を試用できる「Test the extension」と、インストールボタンのタグが発行されます。

↑ここで「Customize your install button」を押すと、ボタンのデザインを選択することができます。

あとは、インストールボタンを表示させたい場所へタグを貼りつければ完了です。

興味のある方はextensionfactory.comへどうぞ。

少し敷居が高くて、取っ付きづらいことでも、ここまでカンタンにしてくれるとトライしやすくなりますね。

Via:delicious

星型の評価ボタンをサイトへ手軽に導入できる「SetRating」

sigeo — Mon, 04 Oct 2010 15:56:50 +0000

WordPressなどで、スターレイティング（星型）の評価ボタンを設置するには、一般的にプラグインやAjaxを使う必要があります。

ただ、設置するのは意外とカンタンなものの、動作が安定しなかったり、設定が複雑だったりするものですよね。

そこで今回は、スターレイティングなどの評価ボタンを、タグを貼り付けるだけで導入できてしまうサービスをご紹介します。

スターレイティングをタグの貼り付けだけで導入できる「SetRating」

「SetRating」は、サービスサイト上で発行されているタグを貼り付けるだけで、サイトに評価機能を導入できてしまうサービス。

ユーザー登録も不要で、ページごとの評価履歴を残すことも可能になっています。（※ただし管理画面はありません。）

スターレイティングを設置

↑定番の星の数で評価するスターレイティング。

↑星の数を決めてクリックすると、その記事の評価履歴を見ることができます。

Good or Bad ボタンを設置

↑二択で評価できるGood or Badボタン。こちらも評価履歴をチェック可能です。

設置方法

↑評価機能の設置はかなりカンタン。サービスサイトを開くと、いきなりタグが発行されているので、それを表示させたい場所へ貼り付けるだけです。

すべての記事で表示させたいなら、テンプレートに貼り付けておけば、自動的にページごとの評価を表示させることができます。

興味のある方はSetRatingへどうぞ。

「評価の管理まではしなくても良いけれど、とにかく手軽に評価機能を付けたい。」というサイト運営者にとっては、とても便利なものになりそうですね。

Via：delicious

ショートカットキーを紹介するときに便利なコマンド図解作成ツール「key command generator」

sigeo — Thu, 23 Sep 2010 16:08:15 +0000

ブログやサイトでショートカットキーを紹介するときに、テキストで書くのも良いけれど、一番わかりやすいのはキーボードの図解を入れることですよね。

とはいえ、その都度図解するのはなかなか手間がかかるものです。

今回は、そんなショートカットキーの図解をカンタンに生成してくれるサービスをご紹介します。

ショートカットキーのコマンド図解作成ツール

「key command generator」は、ショートカットキーのコマンドの図解を、CSSとHTMLタグで生成するサービス。

たとえば “Ctrl + Shift + a” を紹介したい時には、”Ctrl”と”Shift”にチェックを入れ、数字とアルファベットを入力する欄に ”a” と入力すれば、図解用のタグが発行されるようになっています。

コマンド図解のサンプル

ctrl

⇧ shift

↑このようなコマンドの図解をカンタンに生成することができます。（Macの⌘ Command にも対応）

今回生成されたコード

↑生成されるコードもなかなか美しいもの。こういったものがサクっと作れてしまうのはとても便利ですね。

ツールの使い方

↑まずkey command generatorのページで、コマンドを設定します。

↑そして「Generate」ボタンを押すと、図解のプレビューと図解を表示させるタグが生成されるので、表示させたい場所へ貼り付ければOKです。

（CSSを読み込むの中に貼り付けると良いかも。）

興味のある方はkey command generatorへどうぞ。

こういったものを定期的に使うのであれば、本当は自分で作るべきなんでしょうけれど、今回のようなツールでサクッとできてしまうと非常に嬉しいものです。

Via:delicious

リンク切れをその場でポップアップ通知するjQueryプラグイン「Catch404」

sigeo — Wed, 21 Jul 2010 16:00:55 +0000

「サイトで紹介していたリンク先のページが、いつのまにやら404エラーになってしまっていた。」

そういったことはよくあることですよね。このようなリンク切れは、管理が大変な上に、訪問者にとっても迷惑この上ないものです。（すみませんm(_”_)m）

今回ご紹介するのは、そういったリンク切れのページへ遷移する前に、サイト内で404エラーを通知してくれるjQueryプラグインです。

404エラー（リンク切れ）を事前に教えてくれるjQueryプラグイン

「Catch404」は、リンク切れしてしまったリンクをクリックすると、その場で吹出しをポップアップさせて教えてくれるjQuery プラグイン。

サイト訪問者にとって迷惑な、リンク切れページへの遷移を自サイト内でとどめてくれる、ユーザビリティ向上ツールです。

飛び先ページのリンク切れをポップアップで通知

↑リンク先のページが404エラーでも、エラー画面に遷移する前に教えてくれます。

サンプルを試してみたい方はこちらへどうぞ。

ポップアップのメッセージは、下記のようなソース部分を編集することで、自由に変えることができます。

試してみたい方は、Catch404のページからソースをダウンロードしてご利用ください。（※jQueryをすでにお使いの場合、バージョンによっては動作しませんのでご了承ください。）

WordPressのプラグインにも、リンク切れを通知してくれるものはあるのですが、なにせサーバー負荷がハンパないのです。

以前に使っていたときは、それがサーバーエラーの原因のひとつになってしまいました。

そういったことからも、jQueryで、サーバーに負荷をかけることなく、ユーザビリティを上げられるのは嬉しいですね。

画像編集機能が充実した高機能画面キャプチャーソフト「Screenpresso」

sigeo — Wed, 23 Dec 2009 15:08:45 +0000

画像を使ったマニュアル作成や、解説を行う際、もっとカンタンに画像を編集できたら良いのに、というニーズは多いと思います。

今回は、そんなことを実現してくれる、ブロガーにも超便利なお手軽画面キャプチャーソフトをご紹介します。

2011年6月19日：最新の情報に更新しました。

画像編集可能な画面キャプチャーソフト「Screenpresso」

「Screenpresso」は、キャプチャした画像を編集することも出来る画面キャプチャーソフト。

Twitterへ画像を共有するサービス、Twitpicへダイレクトにアップロードする機能や、マニュアル作成などで利用頻度の高い編集機能も備えていて、画像で手順解説をするブロガーにとっても、かなり便利な環境を創りだしてくれます。

「Screenpresso」の主な機能

画像編集機能
- 画像リサイズ機能
- ボーダーや角丸加工機能
- 画像の切り抜き
- リフレクション効果の追加
- クリックするだけで手順番号を追加
- 囲みマーカーの追加
- 矢印マーカーの追加
- ボカシの追加
キャプチャー履歴の表示
TwitpicやEvernote、FTP、 Flickrなどへキャプチャ画像をダイレクトにアップロード
キャプチャー時に、サイズをリアルタイム表示
ドラッグアンドドロップでファイルを移動
ページのスクロールキャプチャー機能

また、有料版では動画のキャプチャも可能です。

こんな画像もカンタンに作れます

↑リサイズ、切り抜きはもちろん、角丸やリフレクション効果もキャプチャーソフトで編集できてしまいます。

マニュアル作成に必須の編集機能を実装

↑選択範囲以外に色をつけてフォーカスしたり、ボカシを入れたり１、２、３と順番を振ったりと至れり尽くせりな機能をサクサク使えます。

なにより、いちいちPhotoshopを開かずとも編集できてしまうのが、手間もかからず嬉しいですね。画像に日本語のテキストを追加することもできます。

画像のサイズをキャプチャー時に表示

↑必要なのに、キャプチャーソフトになかなか付いていないのがこの機能。マウスドラッグで範囲指定しながらサイズを確認することができます。

TwitpicやEvernoteなどへダイレクトにアップロード

↑「PrintScreen」ボタン長押しで表示されるキャプチャ履歴から、ダイレクトにTwitpicへアップロード。

↑TwitterやEvernoteだけでなく、FlickrやFacebook、Gmail、FTPなどにもカンタンにアップロードすることができます。

ドラッグアンドドロップでファイルを移動

↑キャプチャした画像を、Screenpressoからドラッグアンドドロップで移動できるのも超絶便利。メールやPhotoshopなどでキャプチャ画像を開きたい時、とても効率的です。

ページのスクロールキャプチャ

↑ページのスクロールキャプチャも可能、手順は1. Ctrl+Shit+PrintScreen を押し、2. キャプチャする幅の指定をして、3. スクロールしながら左クリック、4. そして最後に右クリックすれば画像が生成されます。

「Screenpresso」のショートカットキー

PrintScreen：指定領域のキャプチャー
Shift+PrintScreen：最後にキャプチャしたサイズでキャプチャー
Ctrl+Alt+Shift+PrintScreen：デスクトップ全体をキャプチャー
Shit+PrintScreen（長押し）：ページのスクロールキャプチャ

興味がある方はScreenpressoへどうぞ。

画像編集機能が本当に便利で、マニュアル作成の作業も大幅に効率化してくれるこの画面キャプチャソフト。２００９年から使っていますが、今でもプライベート、仕事の両方で活躍していて、周りの人間もみんなこのキャプチャソフトを使ってもらっています。今後の成長にも期待大。

Via：delicious

WordPress の記事編集画面で使えるショートカットキー

sigeo — Tue, 03 Nov 2009 15:10:58 +0000

存在するのは知っているのに、必ず忘れてしまうのが、WordPress の記事編集画面で使えるショートカットキー。

今度こそはという意気込みで、備忘録化してみましたｗ

HTML編集モードで使えるもの

HTML編集モード、つまりビジュアルリッチエディターではない、HTMLタグを使って入力する投稿画面で利用できるショートカットキーです。

便利は便利なのだけど、もう少しキーを減らしてほしいところですね。それから、「公開」のショートカットキーには気をつけていただきたいです。（何度かハマリました＾＾；）

項目	ショートカットキー
太字	Alt+SHIFT+b
イタリック	Alt+SHIFT+i
del (strikethrough)	Alt+SHIFT+d
ins (日付/時間挿入)	Alt+SHIFT+s
リンク	Alt+SHIFT+a
画像URL挿入	ALT-SHIFT-m
引用	Alt+SHIFT+q
コード	Alt+SHIFT+c
続きを読む	Alt+SHIFT+t
リストタグ	Alt+SHIFT+u
リストタグ	Alt+SHIFT+o
リストアイテム	Alt+SHIFT+l
改行タグ	SHIFT+Enter
ひとつ戻る	CTRL+z
ひとつ進む	CTRL+y
公開	Alt+SHIFT+p

ビジュアルリッチエディターモードで使えるもの

こちらにあるものが、HTML編集モードでも使えると、尚使いやすくなるのですけど。ショートカットキーをカスタマイズできるプラグインなど、そういったものがなかなかないものですね～。

項目	ショートカットキー
アドバンスドエディター（ボタンを増やす）	Alt+SHIFT+v
HTML編集モードに切り替え	Alt+SHIFT+e
左寄せ align=”left”	Alt+SHIFT+l
中央 align=”center”	Alt+SHIFT+c
右寄せ align=”right”	Alt+SHIFT+r
H1	CTRL+1
H2	CTRL+2
H3	CTRL+3
H4	CTRL+4
H5	CTRL+5
H6	CTRL+6
段落	CTRL+7
Divで囲む	CTRL+8
Addressで囲む	CTRL+9
改行タグ	Shift+Enter

何気なく、カスタムボタン（Add Quicktag など）で満足してしまいそうだけれども、ショートカットキーもあったほうが、より効率よく作業することができますよね。

プラグインで割り当てられるものが出てくるとうれしいところです。（Add Quicktag にショートカットキーを割り当てできるような。）

Via:JaypeeOnline, SourceEMMEALCUBO

WordPress のコメント欄をGoogle Friend Connect化するプラグイン「wp-gfc」

sigeo — Sun, 25 Oct 2009 09:56:40 +0000

設置が簡単になった、Google Friend Connect ですが、WordPressならば、さらにカンタンな設置が行えます。

今回はそんなGoogle Friend Connectの設置をさらにカンタンにするWordPressプラグインをご紹介します。

WordPress のコメント欄をGoogle Friend Connect化するプラグイン

「wp-gfc」は、WordPressブログへGoogle Friend Connect をカンタンに導入できるようにするプラグイン。

コメント欄をGoogle Friend Connect のコメントパーツに置き換えられるだけでなく、ソーシャルバーやメンバーガジェットの設置もカンタンにしてくれます。

コメント欄のサンプル

↑Googleアカウントでログインしてコメントすることができます。設定によってはログインなしでもコメント可能、YouTube動画を掲載することもできます。

コメント設置ページ→ Twitter クライアント 2009年10月の人気ランキング

メンバーガジェットの設置もカンタンに

↑通常であれば、複雑なコードを埋め込まなければなりませんが、ウィジェット管理画面で幅を指定するだけで設置することが可能になります。欲を言えば、タイトルをつけられると良いですね。

「wp-gfc」プラグインの設定方法

プラグインの設置
まず、Downloads – wp-gfcのページで最新版のZipファイルをダウンロード。
ダウンロードしたファイルを解凍してできた googlefriendconnect フォルダを、 /wp-content/plugins のフォルダにアップロードします。
管理画面でプラグインを有効化して設置完了。
プラグインの設定
プラグインの一覧から、「設定」リンクをクリックして設定画面を開きます
Google Friend Connectのページを開いて、サイト IDをコピーしておきます。
管理画面のGoogle FriendConnect ID:欄にコピーしたサイト IDを貼り付けます
次にコメント欄に表示する文言などを設定します。
そしてリンクや背景色などをカラーパレットを使って設定して完了です。最後に「Save configuration」を押して保存すれば完了。

ここでソーシャルバーを表示させる設定もできるようになっています。

プラグインの取得はDownloads – wp-gfc – Project Hosting on Google Codeへどうぞ。

だんだんと設置するユーザーが拡大しているようにも感じますが、今後どのように発展していくのかは非常に気になりますよね。そんな話をするだけでも酒の肴になりそうですｗ

Via：Social Web Blog

WordPressレッスンブック 2.8対応―ステップバイステップ形式でマスターできる: 価格：￥ 2,940; 平均評価：; 納期：在庫あり。; Amazon で詳細を見る by 2012年のビジネス手帳を選ぶ

Firefox と完全にさよならするつもりが、、、ブログ執筆効率化ハックまとめ

sigeo — Tue, 13 Oct 2009 15:04:50 +0000

私が Firefox から Chrome に乗り換えた７つの理由*二十歳街道まっしぐら

このエントリを見ていて、あれ？なぜまだFirefoxも平行して使ってるんだ？と疑問を感じ、あらゆる手を尽くしてGoogle Chrome で同じ環境を作りだそうとトライしてみました。

しかし、、、ちょっと状況が変わってしまいました。

編集とブラウジングの役割が逆転した

実は私、普段からブラウジングをFirefox、ブログの編集や管理のためのページを閲覧するのにGoogle Chrome を使っておりました。

その理由は、Firefoxであれば、アドオンを駆使して他のサイトの評価などを見ながらブラウジングが出来ること。

そして、Google Chromeであれば、自動保存によって、万一の時にも下書きが残る上に軽いからです。

けれども、昨日いろいろと環境を整えていたら、その役割が逆転してしまいましたｗ

その理由は。

Firefox高速化の効果が思った以上だった

相変わらず、一気に大量のページを表示したり、なにかポップアップさせたりするとガチで固まってしまうのですが、ブログ管理系のサイトを開くくらいなら、高速化によってかなり使い心地が良くなりました。

ここで言うブログ管理系のサイトとは、WPの管理画面、アクセス解析、Twitter ウェブクライアント、そして自分専用のエントリ管理用ページです。

そして、今まで我慢していたGoogle Chromeで起こる一度変換を確定したら再変換ができない、それから、最近（Dev版だけだと思いますが）記事のプレビュー画面に embed で埋め込んだコンテンツが表示されない現象。これらの点もFirefoxであれば解決できるので、役割が逆になってしまったわけです。

今回のFirefox高速化はこちらの内容を実践しました。
→ Firefox高速化テクニック8

このテクニックにあるページレンダリング高速化によって、普段自分用に使っているAjax使いまくりのページが一瞬で開くようになりました。ちなみに体感ですがChromeで開いたときの1/10以下の速さです。つまり一瞬。WordPressの下書き保存もかなり速く感じられます。

このブログ管理用Firefoxには、アドオンは必要最低限のみをインストール。

インストールしたアドオンは以下の４つだけです。

ここまでやれば軽いのも当たり前なのかもしれませんがｗ

Google Chrome はこうやった（エクステンション編）

話せば長いので、ここでは軽くお話しますが、とりあえず、Firefoxと同じような環境を作るためにグリモンとエクステンション、ブックマークレットを駆使してなんとか同等のリサーチ機能を実装。

以下の環境を実現するには、Google ChromeのDevバージョンのインストール、および、Google Chromeのショートカットアイコンを右クリックしてプロパティを開き、

～～～chrome.exe" --enable-user-scripts --enable-plugins

というように、chrome.exe” のうしろに追記する必要があります。

マウスジェスチャー「ChromeGuestures」

↑マウスジェスチャーを自由に設定可能。割り当てられる動作もかなり豊富です。

「ChromeGuestures」は、Chrome Extentionsの ChromeGuestures.crx をダウンロードしてインストール。

はてなブックマークとDelicious 件数取得「SBM Counter2 for Chrome 4」

↑開いたページのはてなブックマーク数、Delicious登録数を表示させるだけでなく、Delicious、Bingなどにもブクマ数を表示してくれる優れもの。これはFirefoxを超えましたね。

「SBM Counter2 for Chrome 4」は、先取り！ Google Chrome Extensionsのページを開き、下の方の「SBM Counter2 for Chrome 4」項にある「インストール」をクリックしてください。

あらゆるページをAutoPagerizeする「AutoPatchWork」

↑GoogleやYahooだけでなく、DelisiousやTwitter、楽天など、ありとあらゆるページをAutoPagerize。逆にAutoPagerizeしたくないサイトを指定します。

「AutoPatchWork」は、Chrome Extentionsの AutoPatchWork.crx をダウンロードしてインストール。

Chromeでキーコンフィグを実現する「ChromeKeyconfig」

↑Firefoxのキーコンフィグに相当するもの。Firefoxよりも初期導入がカンタンです。一部デフォルトの設定はGoogle リーダーのショートカットキーと干渉するので変更をオススメします。

「ChromeKeyconfig」は、Chrome Extentionsの ChromeKeyconfig.crx をダウンロードしてインストール。

Google Chrome はこうやった（グリースモンキー編）

Google Chromeでグリースモンキーを使うには、

Vista： C:\\Users\\ユーザー名\\AppData\Local\Google\\Chrome\\User Data\\Default\\User Scripts

XP： C:\\Documents and Settings\\ユーザー名\\Local Settings\\Application Data\\Google\\Chrome\\User Data\\Default\\User Scripts

のように「Default」フォルダの中に「User Scripts」というフォルダをつくり、そこへグリースモンキーのファイル（※Firefoxでフォルダに入っているものも、フォルダから出してファイルのみを「User Scripts」フォルダへ入れます。）を入れます。

Google リーダー内で元記事のページを開く「Google Reader – Expanded」

↑おなじみのGoogle リーダーで元記事をプレビューできるグリモン。

「Google Reader – Expanded」は、Google Reader – Expanded per Feed for Greasemonkeyのページで「Install」ボタンを右クリックし、前述した「User Scripts」フォルダに保存すればOKです。

YouTube動画の埋め込みタグを最適化する「YouTube better embed」

↑YouTubeの埋め込みタグをXHTML valid にしてくれるグリモン。

「Get Picasaweb Image URL」は、YouTube better embed for Greasemonkeyからインストール。

それ以外の画像系グリースモンキーは、度重なるバージョンアップの中でいつの間にか使えなくなっていたものもありましたが、ここは画像を切り捨てて、スピード勝負でご紹介しました。

ただ、スピード系でも、たったひとつだけ再現できなかったのが、Google リーダーのエントリタイトルにはてブ数を表示するグリモン grb.user.js が動かなかったこと。これはかなり手痛い。。。
（Google Readerにはてなブックマーク件数とブックマークアイコンを表示(改良版)）

これさえ解決することが出来れば、完全にブラウジングをGoogle Chromeへ移すことが出来そう。

なんだかこのまま行くと、Google Chrome がダントツに良くなる予感がしますけど、Firefox も次期バージョンで大きく変えて来るでしょうね。その競争にもかなり期待したいところです。

今回のまとめ

Firefox 高速化は同じページを開くなら最強
Google Chrome はDev版でカスタマイズすれば最強リサーチ用ブラウザに

今回の効率化は、激重Vistaにとってもかなりヘルシーだったようで、いつものようにいくつも重いアプリを開いていても結構快調に動いてくれています。やっぱり時間のロスがないって素晴らしいですね。

WP-CSSとWP-JSで手軽にWordPress ブログを軽量化してみた

sigeo — Wed, 23 Sep 2009 15:12:29 +0000

自分で作成したCSSならまだしも、ｊQueryプラグインなど、他人が作ったファイルを手動で軽量化するのは至難の業。

ファイルを圧縮するツールも多くありますが、結局使えなくなってしまうのも良くあることです。

そんなCSSやJSファイルの軽量化をカンタンに行うことが出来るWordpressのプラグインを試してみました。

CSS、JSファイルを手軽に軽量化できるWordpress プラグイン

WP CSSとWP JSは、WordPress ブログで読み込んでいるCSSとJSファイルを、gzipで圧縮し、ホワイトスペースを排除してくれるWordpress プラグイン。

CSS、JSファイルをそれぞれ読み込んでいるタグを若干変更するだけでブログの軽量化を行えてしまうお手軽ツールです。

例えばテーマファイルの中に入っているCSSやJSファイルならば、

のようにファイル名さえ指定しておけば勝手に見つけて軽量化してくれます。

@import を使ってCSSを複数読み込んでいるようなケースでは、90%以上も圧縮できることもあるそうです。

このブログで使用したらどうなったか

ちなみに私は１つのCSSファイルで8.14Kbから7.5Kbまで圧縮、JSファイルでは、15.6Kb が4.75Kb まで軽減できたものがありました。

メインのCSSは、元々手作業で圧縮していたので圧縮のメリットがなかったうえに、一部デザインが崩れてしまったので、そのままにしています。

インクルード用のJS　1.23Kb　→　0.73Kb
SBMボタン表示用JS　6.6Kb　⇒　5.85Kb
トップページTwitter表示JS　4.87Kb　⇒　3.08Kb

ファイルサイズビフォーアフター

↑元々何も処置していなかったので、当然のように全てのファイルが軽量化に成功しています。数値的にはそこまで劇的な変化がないようにも見えますが、体感してみると大きな違いが出てきます。

ページの読み込み時間はどうなったか

Webwaitを使って使用前、使用後を計測してみたところ、使用前は平均11秒だったトップページの読み込み時間が、3.82秒まで改善。双方共にキャッシュされている状態でのテストだったので、JSファイルの圧縮が大きな要因ではないかと思います。

読み込み時間のビフォーアフター

※CSSの記述によってはYUIコンプレッサーと同様に、デザインが崩れてしまうことがあるのでご注意を。

WP-CSSとWP-JSの利用方法

まず、WP CSSとWP JSのページから、それぞれプラグインをダウンロードして解凍
次に、/wp-content/plugins/ のディレクトリへアップロード
/wp-js/ と /wp-css/ のフォルダのパーミッションを 777 に変更
管理画面のプラグインページで「WP CSS」と「WP JS」を有効化
最後に次項のようにCSSとJSファイルを読み込むタグを設定すれば完了です。

CSSの場合

複数のCSSを読み込んでいる場合は、以下のようにカンマ区切りでCSSへのパスを指定することもできます。

Javascriptの場合

それぞれテーマフォルダの中に読み込むファイルを入れた時の指定方法です。ほかの場所でもパスを指定することで読み込めるようですが、うまく読み込めないことがあるので、該当のCSSやJSが読み込む画像やファイルごと、テーマフォルダへ移動させてしまったほうが楽に設定できます。

今回試してみた結果としては、苦労が少ない割にはかなり改善することが出来たという印象があります。

これだけ手軽にブログを軽量か出来てしまうと、今までの苦労は一体何だったんだろうと思ってしまいますがｗ jQuery などを利用している人は、必ずやっておいたほうが良さそうです。

ブログ更新を今より楽にするための30のヒント

sigeo — Sun, 09 Aug 2009 15:08:27 +0000

このブログを書きはじめ、ほぼ毎日更新してはや3年と3ヶ月が経ちました。その中で飽きてしまいそうなので方向性を変えてみたり、サーバーで苦労してみたりといろいろな経験をしてきました。

たいしたお金になるわけでもないのに、何故継続的に更新することが出来ているのか。周囲の疑問であり、自分の疑問でもありますｗ

そんなわけで、自分の振り返りも兼ねて参考になりそうなTipsがあったのでご紹介します。

ブログの更新を有意義なものにする30のTips

原文の超訳ですが、個人的にズレを感じたものは私の考えに置き換えています。

1. 記事のアイデアだしは紙とペンで: PCに向かっていても限界がある。企画書なんかを作っていても同じですよね。
2. 毎週アイデアだしの時間を必ず作る: 「この日のこの時間帯は考える時間」と徹底することで継続力を持たせられます。
3. アイデアを集約する仕組みを作る: EvernoteやGmailなどを活用してとにかく「すぐ」に「楽」に蓄積する仕組みづくりが大切。ここは究極を追求すべき所。
4. おもしろい体験をするように心がける: これ、とても大事なことです。最初はブログを書くことが目的であっても、大きく人生を変える可能性を秘めています。AMNなどが主催するブロガーイベントに参加してみるのもひとつの手段。AMN関連イベント情報
5. 書き物専用の部屋を使う: 自分にとって最も集中できる場所を作る
6. 書き物をすることに時間制限を設ける: これをやらないと、ダラダラしてしまうだけで、結局何も創り上げることができません。フリーの時に痛感させられたものですｗ
7. 下書きの在庫をたくさん持つ: 私も常時下書きを100個程度持っていますｗ本当に困ったときに助かっています。どんなことでもとにかく下書きにしておくと後から役立ちます。
8. 熱意を持ちなさい: これはつまり、ブログを書く意義を持つというもの。それが社会貢献であれ、自己の成長であれ、あるのとないのとでは大きな差があります。
9. よりニッチな角度で書く: 他にない記事なのでおもしろい。同じ事について書いていても、角度が違うだけでまったく違うおもしろさがあります。ニッチな事を書こうとすると大変かもしれませんが、ニッチな角度で書くのはそうでもなかったりします。
10. 腹落ちするまでは書いてはならない: 自分が納得しておらず、考えがまとまっていないのに書いていても収拾がつかなくなるだけ。
11. 記事の構造を明瞭なものにする: 初心者が簡単にプロっぽく記事の内容を仕上げるテクニックなんかが参考になります。
12. 読者にどんな情報が欲しい書きいてみよう: アンケートで直接聞くのも良いだろうし、読者がどんな層なのか把握するだけでも、何を提供すべきかが見えてきます。
13. 読むことや学ぶことを止めてはならない: 常にこの意識がなければ、そもそもブログを書くことなんて出来ない。
14. モチベーションを常に高く保とう: 自分のモチベーションを上げようと考えるよりも、読者のモチベーションを上げようと考えたほうが、より高く保つことができます。
15. 文字数のことは忘れよう: ちょっとしたことを膨らませる。つまり、箇条書きを文章にするようなイメージ。
16. ブレストすることが、自分にとってどれだけ有意義な時間であるかを認識する: ブログを書くことで、仕事のやり方が良くなる事だって十分にありえます。
17. 「今」を書き続けることは楽しいことではない、今すぐ止めよう: 過去を振り返って書いてみるのもおもしろい。普遍的なことなんて沢山あるのですから。
18. 頭をクリアにしよう: おいしいものを食べたり、ドリンクを飲んだりするのも効果的。イライラしているときに麻雀を打っても勝てるわけがありません。あれ？
19. 全てのアイデアを文字に落とそう: たとえそれが、どんなにくだらないものであっても。ノート術と同じです。
20. 読者に調査を助けるように頼む: ここはひとつ正直に。
21. 自分が言っていることを信じること: 自分の言っていることに自信がないと、まるで説得力を持ちません。
22. 時事的なものと、そうでないもの双方を持つ: お題として取り上げる際の考え方として。
23. 考えすぎないこと: 考えれば考えるほど、行動に移せなくなるのは人間の性。
24. リストで考えよう: なんだってそうですが、リストから考えを導き出すのは大事なこと。
25. 常にコンテンツを作ることを意識しよう: どんなときでも「あ、これはエントリになる。」とひらめくことにも繋がる。ブログが生活の一部になるとはこの事。
26. Adwordsキーワードツールで、あなたのニッチな考えを検索かけてみよう: 何かトレンドが見えてくる可能性がある。後々この行動が有利に働くことも！？
27. 同業ブログが何を言っているのかモニタリングする: これは一番インスピレーションが沸きやすい。そして勉強にもなる。
28. あなたのワークフローに変化を加えよう: 同じルーティンを繰り返しているだけでは成長が見込めなくなる。そこに変化のエッセンスを加えてあげることで、自分の生活にも変化が起こる。
29. 何も感じなかったら記事を削除しよう: ここはドライに切り捨てよう。無駄に時間をかけたほうが削除率高いようにも感じますｗ
30. 言いたい事をひとつになるまで切り捨てよう: 記事を書きたいと思った時に、言いたいことがたくさんあったら、それをひとつに絞るようにしましょう。沢山詰め込むと、自分もなんだかもやっとするし、読み手も何も理解できないまま終わります。

続けられなければ意味を成さないブログではありますが、そうカンタンに更新を続けることはできませんよね。

一体続けられない原因は何なのか。本気で更新を続けたいのならば、ひとつひとつに問題を分解し、つぶしていくことが大切。その中でも、継続して更新することの意味を自分の中に定義づける事が重要だと私は感じています。

Via：37 Ways to Make Blogging Easier

WEBマーケティング ブログ » ブログ 更新・成功のヒント