【jQuery】JSで共通ナビの現在地をアクティブにする
グローバルナビを共通ファイル化するとき、PHPやCMSで管理して 現在地判定もそこで設定することが多いのですが、 今回は現在地の判定をJavaScriptで実装してほしいという要望があり、調べてみました。 カテゴリ1...
View Article【JavaScript】HTMLで音楽ファイルを再生する【audio.js】
HTML上で音楽を再生できるページを作りたいという要望があったので調べてみました。 HTML5のaudio要素を使いたかったのですが、対応していない旧IE対策や、 対応ブラウザでもデフォルトの見た目の差が大きく、デザイン...
View Article【Google Feed API】フィードを読み込む（お手軽版）
Google Feed APIを使うことで、他のブログのフィードを表示させることができます。 PHPが使えない状況でも、JSだけで実装できるところが便利です。 現在は、APIキーの取得は必要無いようです。 今後も使い回し...
View Articleいいねボタンが表示されないときに試してみること
Facebook公式のタグでいいねボタンを設置して、display:none;で非表示にしておき、アコーディオンなどであとから表示させようとした場合に、うまくボタンが読み込まれないケースがあります。 ページ読み込み時に非...
View Article【レスポンシブ（リキッド）HTMLメール】outlookで幅を固定する対処法
HTMLメールを作成する際、レスポンシブやリキッド対応を求められることが多くなりました。 リキッドレイアウトのHTMLメールでは、外側の要素にmax-widthで最大幅の指定をして、中の要素は固定せずにパーセント指定でコ...
View Article【MT】MT5からMT6へのバージョンアップ手順まとめ【Movable Type】
2015年9月にMT5系のサポートが終了しました。 Movable Type 5からMovable Type 6へのバージョンアップを何度か対応しましたので、手順についてまとめます。 アップグレードする際の注意として、現...
View ArticleMovable Typeの動作検証環境をローカルに用意する【Vagrant】【VirtualBox】
Movable Typeのテンプレートのテストや、仕様通りに動作するか事前の検証がしやすいように、VagrantとVirtualBoxを使って、ローカルPCでMovable Typeが動作するようにしました。 今回の検証...
View ArticleCSSだけで画像トリミングできたよ
サイズや比率がバラバラの画像を、CSSで同じサイズにトリミング（はみ出た部分をカットして表示）する方法を紹介します。 運用案件やCMSなど、更新の度にサイズ・比率がバラバラの画像がアップロードされてしまい、レイアウトが崩...
View ArticleCSS3でテキストを長体・平体にする方法と注意点
テキストを長体にしたいとき、画像ではなくCSS3を使う方法があります。 テキスト要素に対してtransformのscaleの値を調整すると、文字の一つ一つを細くしたり平たくしたりできます。この方法はWebフォントに対して...
View ArticleMovable Typeで同期（転送）を使った運用をスムーズにするディレクトリ構成【MT】
Movable Typeのセキリュティ対策のために、インストールするサーバーと、本番公開用のサーバーを分けて運用することがあります。 その際、Movable Typeでパブリッシュ（出力）したファイルを公開環境のサーバー...
View Article