Wordpress

| 技術 | ,

[WordPress] Amimoto(t1.micro)からAmimoto(t2.micro)へ、そしてCDNも変更

ようやく重い腰を上げて移行した。

このサイトはAWS上でAMIMOTOというチューニングされたWordpress環境を利用させてもらっています。すっかり自分でするのが面倒になって頼りっぱなしです。

だいぶ前にAWSのインスタンスの種類にt2系のサーバが増えました。従来のt1.microからt2.microになることでCPU等がバーストできるようになったりとか変更が加わっています。

CloudWatch Management Console

この図の「CPUクレジット」の分バーストが出来る用になります。面白いですね。

まぁ細かいことは置いておけばこっちの方が安いし性能もいいよということで移行しました。
手順的には上記のリンク通りにすれば問題なかったです。

ハマった所

  • DBのPrefixが変更しておりImportした後に新しいサイトにアクセスするとInstall画面が表示されてしまった→wp-config.phpのPrefixを手動で修正
  • CDNとしてCloudflareを利用しているのだがすっかり操作を忘れてAWSのDNSサービス（Route53）の設定を弄っても反映されず暫く悩む

というくらいですかね。以前のサーバは一応「Stop」にして置いてあります。

| 技術 |

[WordPress] Markdownが利用できるようになった

こんにちは、普段からMarkdownでなるべく書くようにしている @tokida です。

さて、以前からBlogの更新には Markdown 形式で書くようにしてきていました。これを実際にするためにはプラグインが必要でした。利用していたのは「Markdown on Save Improbed 」です（いままでありがとう！）

Jetpack Roguer WordPress

今日からは、Jackpack の中にその機能が追加されました。「Markdown」という項目があるので「有効」にしましょう。問題なく利用できます！

ますます便利になりました。

ちなみに MarsEdit などで Markdown でプレビューしたいときには

Preview of WordPress Markdownが利用できるようになった

プレビュー画面の下のところにFilterを選択できるのでここでMarkdownを選んでおきましょう。

| 技術 | ,

[WordPress] 読み込みを少し改善 (for CDN)

さすがにまったく重くても放置していたのですがこのサイトの読み込み速度の向上のために CDN (CloudFlare)とキャッシュ用のプラグイン(QuickCache)を導入して見ました。

もう少しチューニング

サイトへのアクセス速度をチェックします。

でチェックをしてみると、どうも他のサイトへのリンク（外部からの参照）が重いということがわかります（これらはキャッシュされませんからね）。

Roguer

この画像は常に表示されているのですが、iPhoneアプリの紹介用のジェネレーターで作成したので他のサイトの画像が使われています。

変更：　出来るものは画像をローカルにダウンロードしてきて利用する

ということで改善されるか暫く見てみたいと思います。

その他

画像とかを外部のサイト、以前の画像の多くはFlickrに入れていました。そうなるとこれらはキャッシュされないのですよね。

AWSを利用している場合には、CloudFrontというCDNサービスがあります。このサービスはストレージサービスのS3に画像をおいてCloudFront（CDN）から配信させるという技が使えます。さらに WordPress のプラグインで画像を（自動で）S3におく（アクセスされた画像を順次置いていく）というものがあるので非常に便利に使うことが出来るものです。

こういったものも利用していきたいですね。

| 雑談 | ,

Sakura VPS から AWS へ完全に引っ越し完了

長い間利用してきた、Sakura Internet のVPSを「解約」しました。
ServerMan　から　Sakura Internet に移動した時にはそのパフォーマンスのアップで大変恩恵を受けました。なによりも安かった。そして今でも安いと思っています。

契約サービス一覧 表示

というわけでありがとうございました。
次回は1年後に戻ってくる予定？です。

現在この、「Roguer.info」のWordpressのサーバは　Amazon Web Service の上で動いています。そう、今なら1年間色々無料。。。別の用途とでS3をQnapのバックアップストレージとかに使ったりと色々お世話になっている。

Sakuraのプランは980円月額だったので実際には1年後には2000円にはなってしまうAWSは高いのですがそれに見合うサイトになっているかまた出戻るかその時に考えたいと思います。

そんなAWSは今のところ

  • WordPressの料金 (Amimoto)

Billing Management Console

  • EC2の料金

Billing Management Console

いずれも0円ですね。1年セーブ出来るだけでも貧乏ブロガーには大分お得です。

個人的にはちょっと DigitalOcean というサービスが気になっていてこっちでWordpressしようかなとも思っていたりしますが(^^;

| プログラミング | ,

CSS3で画像にドロップシャドウをつける、画像を丸くする

ブログで使用しているスタイルシートを少し修正。

最近iPhone系の画像がフラットデザインになったこともあり結構シンプルになってしまってスクリーンショットのメリハリが付かない感があったので枠を入れることにしました。

画像にドロップシャドウをつける


#content img {
border: 1px solid #000000;
box-shadow: #000000 0 0 10px -2px;
height: auto;
margin-bottom: 12px;
max-width: 100%;
}

box-shadowに該当します。これだけでも結構見栄えが良くなりますがキャプチャ系のソフトで影がつくものがあるのでその辺りは随時調整を、、

Roguer

こんな感じになります。boderタグで枠線もつけているので強調された形になりますね、。

今風な丸い感じのアイコン

元々は、下のような感じでリンクを右側に出していまいた。

Roguer 2


.wp-post-image {
border: 1px solid #CCCCCC;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
float: left;
margin-bottom: 10px;
margin-left: -80px;
padding: 1px;
height: 64px;
width: 64px;
}

このradiusというスタイルで簡単に丸くなります。

Roguer 3

上部へスクロール