CSSファイルやJavaScriptファイルを読み込むときの末尾にあるクエリー文字列は何のためにあるか
あちこちのウェブサイトのHTMLソースを見ると、CSSファイルやJSファイルを読み込むlink要素やscript要素のファイル名の末尾に「?xxx=123」のような、いわゆるクエリーがついているのを頻繁にみかけます。 例えばWordPressでjqueryを読み込んだときなど、 <script src="http://user-domian/wp-includes/js/jquery/jquery.js?ver=1.6.1"></script> と、jQueryのバージョン番号を示すクエリー文字列がついています。CSSファイルやJavaScriptファイルはCGIではないので、このクエリーを解釈して使っている訳ではありません。 知っている人は「な～んだ」って感じだと思いますが、この「?ver=1.6.1」の役割について紹介します。 １．キャッシュを制御する ページ読み込みと同時に読み込まれ
Google Maps API v3を使ってウェブサイトやブログに地図を表示する
Google Maps API v3を使ってウェブサイトやブログに地図を表示する方法を紹介します。 本エントリーではGoogleマップの基本的な表示するために必要な、下記の手順について説明します。 APIキーの取得 Googleマップの表示 中心地点の設定 縮尺の設定 １．APIキーの取得 Google APIコンソールのページを開いて、Google アカウントでログインし、表示された画面の左メニューにある「APIs & auth」をクリック。 APIの一覧が表示されるので、「Google Maps JavaScript API v3」の右側にある「OFF」をクリック。 サービス利用規約に同意する場合はチェックボックスをチェックして「Accept」をクリック。 （クリックで拡大） 「Google Maps JavaScript API v3」のSTATUSが「ON」になったことを確認。 「
Googleウェブマスターツールで「タイトルタグの重複」を減らす方法
Googleウェブマスターツールで「タイトルタグの重複」や「重複するメタデータ」の件数を減らす方法を紹介します。 １．問題点 当ブログで、Googleウェブマスターツールの「検索のデザイン」→「HTMLの改善」で「タイトルタグの重複」「重複するメタデータ」がそれぞれ常時200件ほど表示されています（2013年10月）。 「HTMLの改善」の詳細・改善前（クリックで拡大） 「タイトルタグの重複」とは、以下に示すtitle要素の「タイトルの内容」の部分が、複数のページで同じ内容になっていることをさします。 <title>タイトルの内容</title> また、「重複するメタデータ」とは、以下に示すtitle要素のcontent属性に記述する「ページの説明」が複数のページで同じ内容になっていることをさします。 <meta name="description" content="ページの説明" />
iPhoneで小さい「っ」を簡単に入力する方法
iPhoneで小さい「っ」を簡単に入力する方法を紹介します。厳密には、「っ」は「促音（そくおん）」と言います。 本エントリーはビギナー向けの内容です。 １．問題点 iPhoneの日本語かな入力で小さい「っ」を入力するには、「た」のキーを6回タップするか、フリック入力で「つ」を選択したあと、「小」のキーをタップする必要があります。 フリック入力の場合、「つ」を選択 「小」のキーをタップ 「っ」が表示される が、いずれの方法もやや面倒な感じがします。 ２．「っ」を簡単に入力する 「っ」を簡単に入力するには、「た」のキーをタップしたあと、その左にある左向き矢印のキーをタップするだけです。 「た」のキーをタップして左向き矢印のキーをタップ これで「っ」が表示される タップするキーが隣に並んでいるので、この方法であれば１項の方法より素早く入力することができるかもしれません。 なお、「iPhoneで同
Movable Typeの概要フィールドでリッチテキストが使える「ExcerptRichTextプラグイン」バージョンアップ
Movable Typeの概要フィールドでリッチテキストが使える「ExcerptRichTextプラグイン」をバージョンアップしました。 １．ExcerptRichTextプラグインとは ExcerptRichTextプラグインは前述のとおり、Movable Typeの概要フィールドでリッチテキストなどの各種フォーマットを使えるようにするためのものです。 ２．変更内容 このプラグインはMT5.1までしか対応していませんでしたが、今回のバージョンアップでMT5.2に対応するように修正致しました。 MT5.2の記事編集画面（プラグイン適用前） MT5.2の記事編集画面（プラグイン適用後） このプラグインを適用すれば、MT5.2で採用されたリッチテキストのTinyMCEが概要フィールドでも使えます。 また「Movable Type5.2のTinyMCEを5.1のボタンに戻す方法」のカスタマイズを
YouTube動画にテキストを表示させる方法
ご存知の方も多いと思いますが、YouTube動画にテキストを表示させる方法を紹介します。 練習で作った動画として、Movable Typeプラグインのデモ動画をおいておきますのでよければご覧ください。タイトルやふきだしなどが表示されます。 １．アノテーション YouTubeでは自分のアップロードした動画に、タイトルやコメント、ふきだしなどのテキストや動画へのリンクを表示させることができます。 この機能は「アノテーション（annotation：あるデータに関連する情報（メタデータ）を注釈として付与すること）」と呼ばれるものです。 アノテーションでは次の5種類のオブジェクトを設定できます。 吹き出し メモ タイトル YouTube MUSIC WEEK ラベル ２．アノテーションの設定（吹き出し） ここではアノテーションを設定する簡単な例として、吹き出しを追加してみます。 まず、動画の管理画面
Movable Typeで「カテゴリ＋年別」の記事一覧を表示する方法
Movable Typeで「カテゴリ＋年別」の記事一覧を表示する方法を紹介します。 １．完成例 このエントリーでは、次のように第1階層にカテゴリ名、第2階層に年、そして第3階層に記事タイトル一覧を表示します。 完成例 ２．テンプレート 「カテゴリ＋年別」の記事一覧を表示するには、次のテンプレートを利用します。 <mt:TopLevelCategories> <ul> <li><$mt:CategoryLabel$> <mt:Entries> <$mt:EntryDate format="%Y" setvar="year"$> <mt:SetVarBlock name="title"><li><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li></mt:SetVarBlock> <$mt:var name="list{$year
Movable Typeで未公開の記事をプレビューできる「PreviewDraftEntriesプラグイン」
Movable Typeで未公開の記事をプレビューできる「PreviewDraftEntriesプラグイン」を公開します。 １．機能 Movable Typeのデフォルト機能では、未公開のブログ記事やウェブページについて、記事編集画面でプレビューを行うことはできますが、テンプレート編集画面で未公開の記事をプレビューすることができません。 「PreviewDraftEntriesプラグイン」を利用すれば、テンプレート編集画面で未公開記事のプレビューを行うことができるようになります。 このプラグインでは以下の2点を考慮しています。 テンプレートに対し、新たにプレビュー用のテンプレートタグなどを設定する必要はありません。 公開記事と混在させてプレビューしたい場合や、プレビューをしたくない未公開の記事を含めたくないケースを考慮し、プレビューする記事IDをテンプレート編集画面で直接指定します。 例え
Movable TypeのMTEntriesタグで特定の複数ブログ記事を出力する方法
Movable TypeのMTEntriesタグを使って特定の複数ブログ記事を出力する方法を紹介します。 １．基本 MTEntriesタグは複数のブログ記事を出力するためのテンプレートタグです。 次のように記述すれば最新の10件のブログ記事タイトルを出力します。 <mt:Entries limit="10"> <$mt:EntryTitle$> </mt:Entries> MTEntiresタグには、特定のブログ記事IDを出力するために、idモディファイアが用意されています。 例えば、ブログ記事ID「100」の情報を出力するには、次のように記述します。 <mt:Entries id="100"> <$mt:EntryTitle$> </mt:Entries> ただし、この方法では1つの記事しか出力することができません。 ２．特定の複数ブログ記事を出力する 公式ドキュメントには解説されていま
Photoshopで暗い写真を明るくする方法
ご存知の方も多いと思いますが、Photoshopで暗い写真を明るくする方法を紹介します。 変更前 変更後 Photoshop CS6を使っていますが、過去のバージョンも同じ操作で実現できます。 また、説明ではWindowsを用いています。Macの場合は適宜読み替えてください。 １．明るくする 明るくしたい写真を開きます。 （クリックで拡大） 「レイヤー」の「背景」を右クリックして「レイヤーの複製」をクリック。 表示されたダイアログは何も変更せず「OK」をクリック。 これでレイヤーに「背景のコピー」ができました。 「背景のコピー」が選択された状態で「スクリーン」を選択。 これで画像が明るくなりました。 ２．さらに明るくする １項の手順を繰り返してレイヤーの複製を作成し、「スクリーン」を選択してけばいくらでも明るくできます。 下のスクリーンショットは１項からさらに2回繰り返したものです。 レイ
Movable Typeのテンプレート一覧でテンプレートの並び替えができる「DraggableListTemplateプラグイン」
Movable Typeのテンプレート一覧で自由に並び替えができる「DraggableListTemplateプラグイン」を公開します。 １．機能 Movable Typeのテンプレート一覧画面・ウィジェット一覧画面のテンプレートやウィジェットについて、ドラッグ＆ドロップで自由に並び替えることができます。 並び替える前の状態 ドラッグ＆ドロップ 並び替えた後の状態 並び替え以外の主な機能等は下記のとおりです。 並び替えた状態はブログID別にcookieに保存するので、次回読み込み時も状態を保持します 並び替え後にテンプレートが追加された場合、リロード時にテンプレート一覧の一番下に表示します テンプレートの削除にも対応しています 異なる種別のテンプレート一覧にドロップすることはできません システムテンプレートは対象外です ２．価格 3300円/1インストールMT（税込み）。お試しはご自由にど
三点リーダが真ん中に表示されない理由
三点リーダ「…」が「…」という風に真ん中に表示されない問題について調べてみました。 １．三点リーダとは 説明するまでもありませんが、点を3つ横に並べた形をした記号のことで、語尾を省略したり、言葉の余韻を残すときに使う「…」です。 ２．問題点 たとえばブログを書いているときに、記事編集画面のテキストエリアでは「…」と表示されているのに、公開したページでは「…」となることがあります。 ３．原因 三点リーダが真ん中に表示されないのはCSSの「font-family」の設定によるものです。 「font-family」の値には多くのフォントを並べているケースが多いと思いますが、その一番最初に記述しているフォントに依存します。 たとえば、このブログのfont-familyは以下のようになっています。 font-family: Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro
Movable Typeの復元で「Request-URI Too Large」になるときの対処
Movable Typeの復元で「Request-URI Too Large」が表示される場合の対処方法を紹介します。 １．Movable Typeでサイズの大きいバックアップを復元 まず基本情報として、Movable Typeの復元はシステム管理画面の「ツール」→「復元」から行います。 サイズの大きなバックアップを復元するには、「参照」をクリックしてバックアップファイルを指定するのではなく、importディレクトリにバックアップファイルをすべてアップロードした状態で「復元」をクリックします（ファイルを指定する必要はありません）。 ２．問題点 １項の方法で復元を実施したところ、（おそらく）最後のサイトパス・サイトURLを設定する画面が表示されるべきところで「Request-URI Too Large」「The requested URL's length exceeds the capac
WordPressの「wp_get_archives」のMT版タグ「MTGetArchives」
WordPressの「wp_get_archives」のMT版タグ「MTGetArchives」を作ってみました。 MTGetArchivesタグは、WordPressの「wp_get_archives」とほぼ同等の機能があります。 １．開発の経緯 WordPressの「wp_get_archives」タグは、月別アーカイブ一覧や記事一覧などのHTMLマークアップを返却するようになっています。 例えば次のように記述すれば、12ヶ月分のリストを出力します。 <ul> <?php wp_get_archives('type=monthly&limit=12'); ?> </ul> これと同じリストをMTのテンプレートタグで出力しようとすると次のようなテンプレートを用意する必要があります。 <ul> <mt:ArchiveList type="Monthly" lastn="12"> <li><
jQueryで既存サイトの画像を「なんちゃって遅延ロード」する方法
jQueryを使って、既存サイトの画像を遅延ロードっぽく見せる方法、いわゆる「なんちゃって遅延ロード」について紹介します。 昨日エントリーした「画像を遅延ロードする定番jQueryプラグイン「Lazy Load」」ですが、投稿済み記事の画像に対して設定をひとつひとつ変更するのは現実的に厳しいと思われます。 とはいっても、他のサイトでページをスクロールすると画像がふわっと浮かび上がるアクションには憧れます。 ということで、既存サイトの画像を遅延ロードっぽく表示させる方法を考えてみました。 １．「なんちゃって遅延ロード」と称する理由 「なんちゃって遅延ロード」と称する理由は、ページをスクロールしたときの表示は遅延ロードされたようにみえますが、最初から遅延ロードの設定をしていないimg要素はページロード時に画像が先に読み込まれてしまうためです。 下のスクリーンショットは、遅延ロードの設定有無によ
画像を遅延ロードする定番jQueryプラグイン「Lazy Load」
画像を遅延ロードする定番jQueryプラグイン「Lazy Load」を紹介します。 １．概要 jQueryプラグイン「Lazy Load」を使って画像を遅延ロードさせることで、ページロード時のHTTPリクエストを減らすことができます。 以前、「Lazy Load」を使っても新しいブラウザではHTTPリクエスト回数が減らない問題があったようですが、2012年11月現在は改善されています。 参考：HTML5時代のjquery.lazyloadは画像のdata-original属性を使う 改善後の仕組みは、img要素のsrc属性にダミーの画像ファイルを指定しておき、ページロード後にスクロールによってimg要素が表示領域に入った段階でdata-original属性に指定した画像を読み込みます。 <img src="grey.gif" data-original="foo.jpg" width="6
「ノンプログラマーのためのjQuery生成ツール」作りました
ノンプログラマーのためのjQuery生成ツールを作ってみました。よければご活用ください。 ノンプログラマーのためのjQuery生成ツール サンプル表示つき このツールは「7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座」にインスパイアされて作った、初心者向けのお勉強ツールです。 コールバックなど複雑な設定はできませんが、基本的な設定とメソッドチェーンまでできるようにしています。 追記：イベントとAPIをプルダウンメニューで選択できるようにしました。過不足あればご指摘ください。 追記：イベントとAPIのプルダウンメニューでツールチップを表示できるようにしました。ざっくりした内容ですが、これでイベントやAPIの使い方が分かるようになります。 ツールチップを表示 やっつけで作ったので中のコードはかなりひどいです。あしからず。 １．使い方 本エン
YouTubeを効果的に見せるための12の隠しパラメータ
YouTubeの動画をブログに貼り付けるときに次のようなiframeタグを利用するのはご存知かと思います。 <iframe width="470" height="269" src="http://www.youtube.com/embed/YDxYmhze5Do" frameborder="0" allowfullscreen> </iframe> このiframeタグに隠しパラメータ（隠されている訳ではありませんが）をつけることで見栄えや動作を変更することができます。 以下の動画はパラメータを付与してみたものです。テーマおよびプログレスバーの色の変更して、セピアカラーの動画にマッチしたデザインにしています。再生後の関連動画の非表示や再生開始位置の変更なども行っています。 ということで以下、隠しパラメータの紹介です。すべてのパラメータは、次の設定例のように、src属性に設定したURLの末
Movable Type 5.1x/5.2xで記事一覧画面の表示件数を自由に変更できる「LimitPerPageChangerプラグイン」
Movable Type 5.1x/5.2xで、記事一覧画面の表示件数を自由に変更できる「LimitPerPageChangerプラグイン」を公開します。 このプラグインは、以前5.0x用に公開した「Movable Typeの管理画面で任意の表示件数を指定できる「LimitPerPageChangerプラグイン」の5.1x以降の対応版です。 １．基本 デフォルトのMovable Typeの記事一覧画面では、1ページあたりの表示件数をプルダウンメニューで変更することができます。 ただし変更できるのは、 25件 50件 100件 200件 の4種類で、それ以外の件数を指定することができません。 ２．機能 LimitPerPageChangerプラグインを適用すれば、1ページあたりの表示件数を自由に設定できるようになります。 使い方は、値を設定し、テキストフィールドからフォーカスを外すと値が適用
Googleの「良質なサイト」を分析してみた
2012年9月7日、Googleウェブマスター向け公式ブログで「良質なサイトを作るためのアドバイス」が投稿されていました。 良質なサイトを作るためのアドバイス 記事の中では、いわゆる「Pandaアップデート」で検索結果の掲載順位の見直しを行ったことに加え、掲載順位を改善するための「良質なサイト」の指標が挙げられています。 「良質なサイト」の指標 内容は抽象的なものが多く、具体的にどのような改善を行えばいいかは各人の判断に委ねられていますが、その中からいくつかピックアップして、個人的な見解をあげておきたいと思います。 認識誤りがありましたらどこかでつぶやいてください。 １．サイト内に同一または類似のトピックについて、キーワードがわずかに異なるだけの類似の記事や完全に重複する記事が存在しないか 重複した記事が同一サイト内にあるのはNGと思いますが、テンプレートや記事のコピーを使い、類似した記事
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
