カテゴリー別アーカイブ: 仕事

【なんてこった】FlickrとWordPressの連携機能が3/25で終わるらしい

詳細:[Official Thread] Welcome back HTML Embeds! Goodbye to some sharing options.

Flickrのこの機能、かなり便利に使わせてもらってたのですが、まさかの打ち切り。
まいったぞー。
代替機能探さないと…。

25日過ぎたら、きっとエロい人たちが代わりになるような機能をまとめてくれると思うので、それに期待してひとまず放置。

IE11のデベロッパーモードでブラウザモードを変える方法

まさかこんなところで引っかかるとは。
以下手順。

  1. F12を押してデベロッパーモードにする
  2. 左ペインの一番下(もしくはctrl+8)を押してエミュレーションの設定を開く
  3. ユーザーエージェント文字列からブラウザを選ぶ
  4. ユーザーエージェント文字列の中にブラウザが表示されていない場合、「カスタム」を選択しユーザーエージェント文字列を手入力する

自分の場合、なぜか最初はユーザーエージェント文字列の中にブラウザ一覧が表示されていなかったので、わざわざカスタムで手入力した。
でも別のタイミングで見たらばっちり表示されてて、あの苦労は何だったんだ状態。

もしブラウザ一覧が表示されていなかったら、IE Testerでテストするほうが楽だと思うよ。

プラグインを使わず、テーマも変更せず、WordPressでコメントを受け付けない設定にする方法(過去記事も)

  1. ダッシュボードから設定>ディスカッション を開く
  2. 投稿のデフォルト設定の「新しい投稿へのコメントを許可する」を外す
  3. 他のコメント設定の「X日以上前の投稿のコメントフォームを自動的に閉じる」のチェックをオン
  4. 「X日以上前の投稿のコメントフォームを自動的に閉じる」のXを1に設定
  5. 変更を保存

備忘録的に。
WordPress全体に適用される、コメント設定って無いんだね。

CloudFlare使ってるWordPressサイトをいじるときに気をつけること

備忘録。

CloudFlare使ってるとき、WordPress(Webサイトも?)いじる場合は要下記設定。
プラグインにW3 Total Cache入れてる前提で。

  1. WordPressの管理画面から、Performance > グローバル設定 へ。
  2. 下の方にある「Network Performance & Security powerd by CloudFlare」を見つける
  3. Development mode をオンに
  4. Purge cacheをポチッとな

これやんないと、うまい具合に変更がサイトに反映されなくてパニクるので注意をば。
W3 Total Cacheを入れていない場合、CloudFlareのWebサイトからログインして、設定画面で上記と同じ場所をゴニョゴニョすればおk。

ロリポップの大量乗っ取りに学ぶ、WordPressのセキュリティ設定

この前、ロリポップがクラッカーから大規模攻撃受けましたね。
自分のサイトもお客さんのサイトも、たくさんのサイトがロリポに置いてあったので、正直冷や汗モンでしたw
自分には幸運にも直接的に影響ありませんでしたが、念のための確認作業やらで時間取られました。

ロリポが行った対策は色々あるのですが、今後WordPressで構築する際にためになりそうな箇所をメモっておきます。

  • wp-config.phpのパーミッションを400に
  • install.phpのパーミッションを000に
  • .htaccessのパーミッションを604に

いやーしかし、CGIのフルパスとデータベースパスワード変更された時にはどうしたもんかと思いましたぜ…
事態は沈静化してきていますが、うーん、セキュリティは気をつけても気をつけても足りないなあ。

要素をプルプルプルプル動かせるjRumbleが楽しい

まずは何も言わず、デモサイトを見てみるんだ。

http://jackrugile.com/jrumble/

な!!楽しいだろう!!

あまりにプルプルプルプル動くから楽しくって、開発しながら笑ってしまうのよ、このプラグイン。

使い方

まずはjQueryを読み込むのと、プラグインを読み込む。
こんなかんじね

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jrumble.1.3.js"></script>

プルプルプルプルさせたい要素に対してスクリプトを書くよ

$('#要素id').jrumble();
$('#要素id').hover(function(){
    $(this).trigger('startRumble');
}, function(){
    $(this).trigger('stopRumble');
});

これで動くはず。
上記サンプルはマウスオーバー時の処理なのだけれど、クリック時やずっと動きっぱなしな処理も出来るよ。
詳しくは公式サイトにゴー。

ライセンス

MIT Licenseです。やったあ。

使い所

なにせ目立つので、強調したいリンクや、ドッキリ的な仕掛けに使えそうだね。
うーん、楽しい。

いろんな言語への対応について考える

昨日新しく適用させてみた、Twenty Thirteen
一日ちょい使ってみて、やっぱりどーも慣れないので、前のテーマ(Twenty Twelve)に戻しました。

デザイン的には結構好きだったんですが、英語圏用に調整されているテーマって、日本語で見やすくするには修正が必要なんだよね…。
結構直さなきゃいけないところあります。
たとえば…

  • 文字の行間とか
  • フォントサイズとか
  • 日本語フォントと英語フォントの大きさが違うからその考慮とか
  • 英語フォントだと表示OKだけど、日本語フォントだとおかしくなる箇所とか
  • Webフォントとか…
    英語圏のひとたちは使えるWebフォントが大量にあって羨ましいなあ。

そういえば最近良く見るのが、右から左に読む言語に対応しているフレームワークやテーマ。
日本語と英語の違いでだってこんなにやることあるのに、右から左に読む言語とかだともう何をどうしていいのかまったく頭が回りませぬ。
デザイン正反対にすればいいってわけでも無さそうだし…うむむ。
その言語を全く知らないゆえに、対応が難しそうだ。

Web屋、勉強することありすぎワロタ…
いやワロエナイ…

Twenty Thirteenがキタ━(゚∀゚)━!

WordPressを3.6にしたら、Twenty Thirteenがやってきていましたよ!
早速当ブログにテーマ適用してみたのですが…

なんていうか…
うん…

日本語フォントってアレだよね?

Winの明朝体って、ディスプレイで表示するとなんでこんなアレになるんだろう…

しばらく機能を色々使ってみて、しっくりこなかったら前のテーマに戻そうと思います。
なんかなあ、最近のWEBのトレンドと日本語フォントが合ってない気がするのよね…。
もやもやする…

WordPressの鯖移転は、とても簡単だった。

ここ半月の間に、サーバー移転やらMTOS→WPへの移管やらがたくさんありました。
ちなみに、このブログも鯖移転したてホヤホヤです。
今なら自信を持って鯖移転もWP化もできまっせ!
というわけで、今後のために備忘録。

  1. まずは移転元サーバーのファイル群を全てバックアップ。
  2. MYSQLの管理画面から、データベースの当該テーブルをまるごとエクスポート。
    どのデータベース使ってるかなんかはwp-config.phpに書いてあるよ!
    テーブルは接頭辞でわかるお!
  3. wp-config.phpを開いて、移転先サーバーのMYSQL接続情報に書き換える。
  4. 移転先サーバーにファイル群を全てアップロード。
  5. 移転先サーバーのMYSQL管理画面から、データをインポート。
  6. ドメインのDNSネームサーバーを移転先サーバーに変更。
  7. DNSが移転先サーバーに切り替わるまでしばし待つ…。
    切り替わったかどうかは、自分はコマンドプロンプトのnslookup使って調べてるよ。
  8. DNSが切り替わったら、いつもどおりWPの管理画面へログイン。
    これで通常通り動いていればおk!

こっから先はプラグインの設定なので、ひとによっては要らないよ。

  1. WP-DBManagerとWP Backup(by BTE)使ってる場合、設定の変更が必要だよ。
    WPの管理画面におおきくエラーが出るので分かるはず。
  2. それぞれの管理画面に行って、移転先サーバーに合うようにパスの設定を合わせるだけでおk。

以上!
DNSの切替に時間かかるから、この間もやもやするけど、拍子抜けするくらい簡単です。
ある程度知識がある方向けにだいぶ端折っているので、初心者のかたはエロい人がまとめてくれたもっと詳しいまとめを見てやるのがいいよ。

アイコンフォントを使ってみたら、1分で導入できて驚いた

自分のWEBサイトリニューアルをしています。
せっかくなので、新しい技術を沢山取り入れたいと思っています。

その中のひとつが、アイコンフォント。
画像じゃないという点で、色々メリットデメリットはあるみたいです。
とはいえ、画像の切り出しやCSSスプライトを気にしなくて良くなるのは、WEB屋さんにとって大きな利点。
何はともあれ試してみましょう!

今回アイコンフォントに使用したサービスは、こちら。
Font Awesome

どんなことができるの?

Font Awesomeのトップページで書いている、メリットをざざっと訳すとこんな感じ。

  • 361個もアイコンあるよ
  • CSSでアイコンサイズ、色、シャドウなどやり放題!
  • ベクターだから、どんなサイズにも対応するよ
  • 商用無料!
  • IE7もサポートしてるよ
  • Retinaディスプレイにも対応だぜ
  • Bootstrapも完全対応!
  • チートシートもあるし、インストール型のフォントもあるよ!
  • スクリーンリーダーにも対応しちゃってるんだから!

これだけ読むと…ものすごいですね。
使わない意味がわからないってかんじです。

ライセンスはというと…

フォントライセンス : SIL OFL 1.1
コードライセンス : MIT License

なにこれすごい。

使い方

使い方は超簡単。
管理人はBootstrapを使っていないので、必要なコードはたった一行だけ。
(Bootstrap使ってる人でもたった二行だよ!)

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

これをヘッダに入れましょう。

で、アイコンフォントを使用したいところに、下記コードを入れてあげます。

<i class="icon-camera-retro"></i>

はい、完成!

↑実際にアイコンフォントで表示してますよ!

マジ簡単すぎです。
こんな簡単でいいのだろうか。

アイコンはどんなのがあるの?

めちゃくちゃいっぱいあります。
こちらにリストが。

オプション

アイコンフォント、いろいろなオプションがあります。
詳しくはこちらにサンプルコード&デモがありますのでどうぞ
Now Loadingのぐるぐるまわるやつとか、もはやフォントとは思えないですね…

結論

1分で導入できるので、とりあえず使ってみるべし。

簡単でクオリティ高いアイコンフォントがサラリと使える俺マジカッケー!と、感動出来ます。
一度使ってみると病みつきになってしまうかも。

Font Awesome、FontにAwesomeだぜ!!
お後がよろしいようで…