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
ページを移動（離脱）するときにjQueryで警告を出す方法
Facebookなどでフォーム入力中にページを移動（離脱）しようとすると警告が表示されます。 この仕組みをjQueryで実装する方法を紹介します。jQueryは投稿時点の最新バージョン1.9.1を利用しています。 １．ページを移動するときに警告を出す ページを移動するときに警告を出すには、onイベントにbeforeunloadイベントを設定します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $(window).on('beforeunload', function() { return '投稿が完了していません。このまま移動しますか？'; }); }); </script> <form method="post" acti
CSS拡張メタ言語「LESS」の使い方
CSSを効率的に書くための拡張メタ言語「LESS」の使い方を紹介します。 LESS １．「LESS」でできること 簡単な例として、次のように変数「@xxx」を使って値を定義することができます。 @radius: 10px; @bg-color: #fff; @padding: 10px; .foo { background: @bg-color; padding: @padding; border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } .bar { background: @bg-color; padding: @padding; border-radius: @radius; -webkit-border-radius: @radius; -moz-border-ra
jQueryで遅延ロードを汎用的に実現する「ScrollTrigger」プラグイン
jQueryで遅延ロード（遅延読み込み）を汎用的に実現する「ScrollTrigger」プラグインを紹介します。スクロールで要素が表示されたときに任意の関数を実行できます。 当ブログでも、記事ページ本文下にあるソーシャルブックマークボタンとFacebookのLikeBoxの表示にこの仕組みを使っています。 １．目的 Facebookの「いいね！」ボタンなど、最近ソーシャル系のパーツをブログなどに表示している方が少なくないと思います。 ですが、パーツの表示にはJavaScriptを使っているものがほとんどで、そのまま設置するとページのロード時間が遅くなるケースが多く、結果的にページ表示時間に影響することになります。 本プラグインは、そういったソーシャル系のJavaScriptのロードを遅延させることができ、初回のロード時間を短縮したいときに効果があります。 ２．機能 ページをスクロールして、
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
jQueryによるフォームデータ取得方法のまとめ
jQueryによるフォームデータ取得方法のまとめです。 フォームデータの取得で分かりにくいのは、セレクトボックス・ラジオボタン・チェックボックスの3種類ではないかと思われます。本エントリーではこの3種類にターゲットを絞り、動作サンプルを用いて解説します。「$」は「jQuery」で記述しています。 2012.06.19追記：テキストフィールド・テキストエリアの取得方法も追加しました。 2014.05.11追記：チェックボックスの取得方法をattr()からprop()に変更しました。 ネットで検索したところ、まとまった記事がなかったので自作しました。なお、本エントリーに掲載している方法以外にも色々なやり方があると思いますので、一例として参照して頂ければ幸いです。 １．セレクトボックスの値を変更したときに取得 セレクトボックスの値を変更したときに取得するには、changeイベントとval()を組
Github を Windows で利用する（Git GUI編）
Github を Windows で利用する方法を紹介します。このエントリーではGit GUIというツールを利用して、 リモートリポジトリの作成 ローカルリポジトリの作成 ローカルリポジトリのコミットとリモートリポジトリへのプッシュ ファイル更新時のコミットとリモートリポジトリへのプッシュ 等について紹介します。「githubの使い方が分からない」というビギナー（私も含め）のためのエントリーです。GUIのオプション設定など詳細な設定は割愛していますので予めご了承ください。 なお、以降の操作を行う前にgithubのアカウント取得は完了させておいてください。 １．ダウンロード githubのサイトにある「Help」をクリック。 右側のメニューから「Intermediate」の中にある「Install Git HTML help」をクリック。 Windowsの説明にある「Msysgit」をクリッ
Sitemaps 0.90 用テンプレート（MT4対応）
「Sitemaps 0.90 用テンプレート（Google・Yahoo!・MSN サポート予定）」で公開していた Sitemaps 0.90 用テンプレートについて、ご要望を頂きましたので Movable Type 4 対応に修正しました。 Sitemaps 0.90 に対応した情報を公開することで、Google、Yahoo、Microsoft の各検索エンジンにサイト情報を適切に通知できるようになります（検索エンジンのインデックスにウェブページのすべてを含むことを保証するものではありません。クロールを補完するための仕組みです）。 １．テンプレートの変更点 変更点は下記の通りです。 ウェブページに対応 全ての種類のアーカイブテンプレートに対応 ブログ記事アーカイブの全件出力にMTSetVarBlockタグを使用 アーカイブインデックス用のMTLinkタグのtemplate属性名を修正 以下
小粋空間: CSS の after 擬似要素で回り込みを解除する
float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します（通常の解除方法も併せて掲載しています）。 １．「回り込み」とは 例えば、画像の左（または右）にテキストを表示することを「（テキストの）回り込み」と呼びます。 マークアップ <p> <img src="hogehoge.jpg" alt="image" style="float:left" /> 回り込みテキスト～（略）～回り込みテキスト </p> 表示 回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト （X）HTMLでこのような表示を行う場合、先に出現する要素（ここでは img 要素）に対して float プロパティを与えます。float プロパティは、指定された要素を左または右に寄せて配置する際に使用しま
パッチをあてる（その1：適用方法）
以前、カスタマイズを色々紹介する中で「パッチをあてる」という作業の具体的な方法について、認識不足のため誤った説明をしておりましたので、その適用方法についてお詫びを兼ねて改めて紹介したいと思います。ここでは Windows での作業について説明します。 １．パッチとは 「パッチ」はプログラムの一部を修正することです。「パッチワーク」を思い出して頂ければ分かりやすいと思います。「パッチファイル」はプログラムを修正するための差分が記述されたファイルです。 「パッチをあてる」というのは実際にプログラムを修正する行為を指します。 ２．patch コマンドの準備 パッチの適用にあたっては patch コマンドを使用します。Linux ではデフォルトで用意されているようですが、Windows では用意されていません。 ということで、まず patch コマンドを入手します。 patch コマンドは Cyg
エントリー投稿時のフォームボタンをグレーアウトするプラグイン for Movable Type 3.3x
Movable Type 3.3x のエントリー投稿時に、「保存」や「確認」等のフォームボタンをグレーアウトするプラグインを紹介します。 このプラグインを利用すれば、スクリーンショットのようにエントリー投稿画面の「保存」ボタンをクリックした時、フォームボタンがグレーアウトされるので、二重投稿などを防止することができます。 また、プレビュー画面でも同様の動作を行うことができます。 以前、コメント投稿時のユーザビリティを向上させる「コメント投稿時にフォームボタンをグレーアウトする for Movable Type」の管理画面版です。 MT4 リリース後ですが、MT3 ユーザの方よりご要望がありましたので、作ってみました。 １．プラグインのダウンロード 下記のリンクより、プラグインアーカイブをダウンロードしてください。 DisableFormButton.zip 変更履歴 2007.09.27
小粋空間: WordPress テーマ（テンプレート） XHTML 1.0 Strict
当サイトで配布中の WordPress テーマ（テンプレート）をバージョンアップしました。新しいテンプレートは下記のリンクよりダウンロードしてご利用ください。 WordPress テーマ（テンプレート）・3カラム版 注：本テンプレートはデフォルト状態で「最近のコメント」「最近のトラックバック」を表示するようにしています。これらのリストを表示するためには「Commented entry list」プラグインが有効になっている必要があります。 主な変更点は下記の通りです。 １．XHTML 1.0 Strict これまで配布していたテンプレートのXHTML 1.0 文書型は「XHTML 1.0 Transitional」でしたが、今回「XHTML 1.0 Strict」に変更しました。 XHTML 1.0 Strict では XHTML のお作法が XHTML 1.0 Transitional
小粋空間: ナビゲーションバー・リストタイプ（その1：基本スタイル）
最近すっかりオーソドックスになった、順序なしリスト（ul/li）を用いたグローバルナビゲーションを紹介します。 2年ほど前に書いた「ナビゲーションバー・シンプルタイプ」というエントリーは、アンカーテキストを並べた形式でしたが、グローバルナビゲーションの作り方についてコメントを頂きましたので、新たに作成してみました。 巷では、画像を用いたものやプルダウンメニューつきのグローバルナビゲーションをよく見かけるのですが、ここではテキストのみによるシンプルなグローバルナビゲーションを紹介します。 １項のサンプルコードは Movable Type のMTタグを埋め込んでいますが、MTタグを書き換えれば汎用的に使うことが出来ます。 動作は Windows XP + IE6/IE7/Firefox2/Opera9/Safari3 で確認しています。 １．テンプレートの設定 ヘッダの下にグローバルナビゲーシ
poEDIT の使い方
WordPress の日本語部分を変更する場合には、クロスプラットフォームな gettext カタログ（po ファイル）の編集ができる poEDIT が便利です。 以下、Windows での poEDIT の利用方法を紹介します。 １．ダウンロード poEDIT のページの「Download」をクリック。 Windows の場合は、ページ下にある poedit-1.x.x-setup.exe（エントリー作成時は 1.3.6） のリンクをクリック。 ２．インストール ダウンロードした exe ファイルをダブルクリックしてインストールを開始します。 「Next」をクリック。 「I accept the agreement」を選択して「Next」をクリック。 インストール先フォルダを指定（デフォルトは C:¥Program Files¥poEdit）して「Next」をクリック。 デフォルトのまま
feed meter「ランキング Top 300」で一番多く使われているブログは何か？
以前より利用している feed meter でずっと2つ星の状態が続いていましたが、最近採点方式が変わったのか、突然3つ星を頂きました。が、順位はかなり下がり、いつ2つ星に戻るか分からないので、今のうちに記念エントリーしておきます。 その指標となる「ランキング Top 300」も、ファビコンやサイトへのリンクが追加され、華やかな印象になりました。 で、ふと「最近 WordPress が流行っているけど、この中で一番良く使われているブログは何だろう？」と思い立って、昨日のランキングを元に調べてみました。 まずはブログツール・ブログサービスの総合トップ10です。ココログと TypePad の集計に誤りがありましたので修正しました（Typead 3サイトをココログとして+3カウント）。 総合トップ10 順位名称利用数 1Movable Type71 2はてなダイアリー53 3livedoorブロ
ブログのパフォーマンス改善：その後（YSTとの戦い：その5）
先日エントリーした「サーバ移転延期とパフォーマンス改善内容について」の、現在のアクセスに関する状況報告です。 実施した改善策は下記の通りです。詳細は上記の記事を参照ください。 PHP ファイルで条件付き GET ができるように変更 PHP ファイルを最小限にして、最近のエントリー／コメント／トラックバック等のダイナミックなモジュールは PHP を用いたモジュール化から Ajax に変更 ヘッダやバナー類のスタティックなモジュールも PHP モジュール化を行っていたので、これらは MTInclude に置き換え １．エラーについて 通常のページ閲覧で 503 エラーは発生しなくなりました。ただしコメント投稿では数回発生することを確認しています。 ２．Google Analytics による訪問者とページビュー数 「エラーが減る = アクセスが増える」ということで、現在のページビューの状況です
小粋空間: Movable Type を始める前に設定しておきたい 10 の項目
Movable Type を初めてご利用になる方のために、「これだけは最初に設定しておきたい」という 10 項目を挙げてみました。１項から８項は設定の流れを考えて順序づけをしました。最後の2項目の優先度は低いですが、「そういう機能もあります」という意味で掲載しています。 「全てが必須」という意味ではありません。不要と思われる項目はスキップしてください。 2008.10.01 「Movable Type 4 を始める前に設定しておきたい 10 の項目」を公開しました。 １．管理画面を「詳細モード」に切り替える Movable Type の管理画面は「基本モード」と「詳細モード」の2種類があり、デフォルトは「基本モード」になっています。この状態では基本設定とプラグインの一覧しか表示されないため、コメント・トラックバックの受信設定や後に述べるアーカイブページのパス等や拡張子が変更できません。 と
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
