WindowsにApacheを簡単にインストールする方法
Windowsでは、XAMPPや最近流行のVagrantで手軽にWeb開発環境を構築することができますが、ここではそういったものが何らかの理由により利用できないケースを想定し、Apacheを単体でインストールするという、シンプルな環境を構築する方法を紹介します。 また、本エントリーで紹介する方法であれば、PHPのバージョンを考慮した環境を構築することも可能です。 １．はじめに 今回紹介するWindows版Apacheは「Apache Lounge」というところで公開されています。 Apache Lounge 「Apache Lounge」は10年以上、最新のWindowsバイナリと一般的なサードパーティモジュール提供してきた権威あるサイトで、多くの商用ソフトウェアでこのサイトのバイナリやモジュールがパッケージされているようです。 ここで配布されているApacheはzip形式なので、ダウンロ
Firebugの起動が遅い場合の対処
Firefoxのアドオン、Firebugの起動が遅くなった場合の対処方法を紹介します。 ネットで調べてもまったくヒットしなかったのですが、Firebugの設定を色々を変えてみたところ解消しました。 １．問題点 たとえば「Yahoo!JAPAN」のページを開きます。 ページの任意の位置で右クリックして「Firebugで要素を調査」を選択。 通常であれば下のFirebugの画面がすぐに表示されるのですが、この画面に切り替わるまで20秒程度かかるようになりました。 Firebugの画面を閉じる場合も同じくらいの時間がかかります。 タブを常時数十枚開いているせいかもしれませんが、これでは遅すぎて実用に耐えられるレベルではありません。 ２．起動が遅い原因 Firebugで「コンソール」「HTML」「CSS」「スクリプト」「DOM」「ネット」など、複数の機能をうっかり有効にしてしまっていたのが原因のよ
Googleウェブマスターツールで「タイトルタグの重複」を減らす方法
Googleウェブマスターツールで「タイトルタグの重複」や「重複するメタデータ」の件数を減らす方法を紹介します。 １．問題点 当ブログで、Googleウェブマスターツールの「検索のデザイン」→「HTMLの改善」で「タイトルタグの重複」「重複するメタデータ」がそれぞれ常時200件ほど表示されています（2013年10月）。 「HTMLの改善」の詳細・改善前（クリックで拡大） 「タイトルタグの重複」とは、以下に示すtitle要素の「タイトルの内容」の部分が、複数のページで同じ内容になっていることをさします。 <title>タイトルの内容</title> また、「重複するメタデータ」とは、以下に示すtitle要素のcontent属性に記述する「ページの説明」が複数のページで同じ内容になっていることをさします。 <meta name="description" content="ページの説明" />
CSSでfloatを解除する方法のまとめ
CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。 １．floatにより親要素の高さが出なくなる（＝背景がなくなる）問題 親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。 例えば、次のCSSとHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi
レスポンシブWebデザイン制作にjQuery Masonryを利用するための5つのポイント
先日エントリーした「ブラウザの幅に応じてレイアウトをきれいに整列できる「jQuery Masonryプラグイン」」の続きで、レスポンシブWebデザイン制作にjQuery Masonryプラグインを利用するための重要なポイントについて詳しく解説します。 サンプル（リンクは２項） 手前味噌ですが、jQuery MasonryによるレスポンシブWebデザインの記事は他にも多く存在する中、実用レベルまで踏み込んでいるのはおそらくこのエントリーだけだと思います。 なお、jQuery Masonryプラグインの基本的な設定方法については割愛してますので、上記のエントリーを参照してください。 １．はじめに このエントリーでは「NHKスタジオパーク」のサイトを参考に、次の内容について解説します。 NHKスタジオパーク まず、カラムレイアウト全体をセンタリングさせるためのCSSの設定について紹介します。 ま
ブラウザの幅に応じてレイアウトをきれいに整列できる「jQuery Masonryプラグイン」
ブラウザの幅に応じてレイアウトをきれいに整列できる「jQuery Masonryプラグイン」の使い方を紹介します。 jQuery Masonry ブラウザの幅に応じてカラムレイアウトをある程度調節してくれるので、レスポンシブデザインウェブ制作にも使えそうです（これだけでは厳しいですが）。 このエントリーは「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」の便乗記事です。 2012/10/20追記 jQuery MasonryをレスポンシブWebデザイン制作で使うためのノウハウをまとめた「レスポンシブWebデザイン制作にjQuery Masonryを利用するための5つのポイント」も是非ご覧ください。 １．サンプル 配布サイトのトップページでも確認できますが、より簡単なサンプルを作ってみましたのでお試しください。 サンプル ２．jQuery Ma
Google推奨のブラウザレンダリングに関する4つのベストプラクティス
Googleが推奨する、ブラウザレンダリングに関する4つのベストプラクティスについて紹介します。 この記事は「Optimize browser rendering」を参考に書き起こしたものです。 Optimize browser rendering 元記事は2012年3月28日に更新されたものです。記事には5つの項目がありますが、残りの1つは情報がやや古いようなので割愛しました。 解釈が間違っている部分がありましたらどこかでつぶやいてください。 １．CSSセレクタを効率的に使用する 基本として、CSSのレンダリングは、記述されたセレクタについて、一番右端のセレクタ（キーセレクタ）から開始し、右から左方向に評価します。 で、多くの要素に一致するような非効率的なキーセレクタを避けることで、ページのレンダリングをスピードアップできるようです。 以下の子孫セレクタは非効率な例です。 キーセレクタが
JavaScript圧縮・難読化の定番ツール「/packer/」
JavaScript圧縮・難読化の定番ツール「/packer/」を紹介します。直感的で動作も軽量です。 /packer/ 「定番」と書いた理由は、はてなブックマークでブレイクこそしていないものの、コンスタントにブクマされているためです（2012年4月22日現在で310ブックマーク）。 使い方は、圧縮・難読化したいソースコードを上のテキストエリアにペーストして、「Pack」をクリックするだけです。 圧縮・難読化されました。 圧縮率は下のテキストエリアの右下に表示されます。 オプションは「Base62 encode（英数字のみのエンコード）」と「Shrink variables（変数名の圧縮）」の2つが用意されています。このオプションを利用しないと空白・改行を除去するだけの動作になるので、圧縮率を上げたい場合はオプションを利用しましょう。 jQuery1.7.2.js（262285バイト）で2
HTMLの整形やJavaScriptの難読化を解除する「jsbeautifier.org」
HTMLの整形やJavaScriptの難読化を解除する「jsbeautifier.org」を紹介します。 JavaScriptの難読化解除には「JsDecoder」を利用していましたが、いつのまにか「Not Found」になってしまってました。 JsDecoder ということで代わりのサイトを探したところ、「Online JavaScript beautifier」を見つけました。 Online JavaScript beautifier 使い方は簡単で、整形したいコードをはりつけて、ページ上にある「Beautify JavaScript or HTML」をクリックするだけです。サンプルコードが表示されているのでクリックすれば整形されることが分かります。 jQueryで試してみます。下は整形前のものです。 いい感じに整形されました。 次にHTMLで試してみます。下は整形前のものです。 こち
小粋空間: Highslide JS でサムネイル画像を拡大表示する
サムネイル画像をクールに拡大表示する Highslide JS を利用する方法を紹介します。内容は Movable Type をサンプルにしていますが、他のブログ等でも応用できると思います。 WordPress ではプラグイン WPJ-Highslide 0.2 が利用できるみたいです。 とりあえず下記のサンプル画像をクリックしてください。拡大表示された画像の上でクリックすると元に戻ります。 拡大ツールでは、当サイトでも紹介している Lightbox JS が有名ですが、この Highslide JS は下記の特徴があります。 拡大画像の下にキャプション（タイトル）の挿入が可能 ウィンドウサイズに収まるように拡大（右下のアイコンをクリックすると 100% 表示） 拡大画像のドラッグが可能 以下、カスタマイズ方法です。ここではダウンロード時のバージョン 2.2.74.0.6 で話を進めます。
「8.8.8.8,8.8.4.4」より速い「129.250.35.250」
iPhoneのDNSの設定変更が話題になっているようなので、レスポンスの速いDNSサーバがないか調べてみました。便乗記事です。 ネタフル - iPhoneのWiFi接続を高速化する魔法の数字「8.8.8.8,8.8.4.4」 測定ツールはWindows用の「DNS Nameserver Performance Benchmark」です。ツールの詳細は割愛しますが、測定するには下のスクリーンショットの「Nameservers」タグの右側にある「Run Benchmark」をクリックするだけです。 Bフレッツ接続のPCで測定しています。 １．ベンチマーク結果 まずはベンチマーク結果をご覧ください（クリックすればちょっと拡大します）。 測定している値は次の3種類です。それぞのれの意味については「私家版 ITプロフェッショナルの仕事術 - GRCのDNS BenchmarkでDNSをスピードアップ
WordPressのTwenty Elevenテーマ解説：メインインデックスのテンプレート (index.php)
WordPressの勉強も兼ねて、Twenty Elevenテーマの各テンプレートについて解説してみたいと思います。確認バージョンは3.2.1です。 メインインデックスのテンプレート (index.php) Twenty Elevenテーマの「メインインデックスのテンプレート (index.php)」で出力されるページは次のようになります。 テンプレートのソースコードは次のとおりです。 <?php /** * The main template file. * * This is the most generic template file in a WordPress theme * and one of the two required files for a theme (the other being style.css). * It is used to display a pa
Twitterの公式ツイートボタンを(X)HTML validにする方法
Twitterの公式ツイートボタンのページで作成したボタン（下）を、ブログなどに表示しているサイトが増えてきました。当サイトも表示しています。公式ツイートボタンの設置方法は「WordPress/Movable Typeに公式ツイートボタンを設置する」で詳しく紹介しています。 ところで、このボタンを表示するコードをページに貼り付けると、XHTML1.xやHTML4.01のページがvalidにならなくなる場合があります。 本エントリーでは、問題点の簡単な解説と、設置したTwitterの公式ツイートボタンを(X)HTML validにする方法を紹介します。 １．問題点 公式ツイートボタンのページでは、公式ツイートボタンを表示するために、次のようなコードを生成します。 このコードを埋め込んだ、DOCTYPEがXHTML1.0のページをThe W3C Markup Validation Servic
WP-DBManager プラグイン
WordPress のバックアップや復元を行なう WP-DBManager プラグインの使い方を紹介します。動作は WordPress 2.8.2 で確認しています。 １．プラグインのダウンロード lesterchan.net のサイトにアクセスします。 ページの少し下に、WP-DBManager があるので、 その右側にある「Download」をクリックして、プラグインアーカイブをダウンロードします（2009年7月現在のバージョンは2.50）。 ２．プラグインのアップロード・インストール アーカイブを展開し、wp-dbmanager フォルダを、wp-content/plugins ディレクトリにアップロードします。 そして、WordPress 管理画面の「プラグイン」より、「WP-DBManager」の「使用する」のリンクをクリックします。 設定後、次のように「Your backup
CSS で table に斜線を引く方法
CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。 サンプル（クリックすればサンプルページに移動します） Windows XP + IE6 / IE7 / Firefox3 / Safri3 / Google Chrome で確認しています。 ポイントは以下です。 th 要素に position: relative; 斜線を引く要素（ここでは span）に position: absolute; を設定。 斜線（border）を適用する要素の前に を設定。 がなかったり、要素の後方に があると、th のスタイルが隠れてしまう。 クロスブラウザにするため、font-size や line-height など、いくつかのプロパティを設定。 HTML <table summary="data"> <thead> <t
コメントとトラックバックを分けて表示する for WordPress（改）
WordPress のデフォルト状態は、投稿情報や個別記事でのコメントとトラックバック（およびピンバック）が別々に表示されない仕様になっています。 個別記事では次のようにトラックバックとコメントが混在して表示されます。 変更前 それを踏まえて、以前「コメントとトラックバックを分けて表示する for WordPress（その1）」をエントリーしました。 これにより、次のようにコメントとトラックバックを分けて表示できるようになります。 変更後 また、メインページ等の投稿情報もコメントとトラックバックを分割表示できます。 変更後 以前紹介したカスタマイズでは「トラックバックが表示されません」とのご質問を頂きましたので、本エントリーで改修した内容を改めて紹介致します。 １．プラグインのダウンロード 下記のサイトよりの「Download」にある Trackping Separator. をクリックし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
