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
さくらVPS（その1：コントロールパネル・サーバ起動・ログイン）
さくらVPS（1GB）に加入しました。 さくらVPS ということでかなり後発な記事ですが、これから何回かにわたってさくらVPSに関する操作や設定についてエントリーする予定です。 ゴールはApache+StarmanでMovable Type5.2をPSGIで動作させるところまでを予定しています。PSGIは動作確認済みでなかなか快適です。 「さくらVPSを使ってみたいけどサーバの使い方や設定方法が分からない」という方向けの内容です。 第1回目はさくらVPSのコントロールパネルおよび、サーバ起動とサーバへのログイン方法についてまとめました。 ちなみに、仮想化技術にはVMware ESXiやXenといったものがありますが、さくらVPSはLinuxカーネルに標準搭載されている「KVM」を採用し、完全仮想化を実現しています。 １．コントロールパネル 契約後の送信メールに記載されている「VPSコントロ
WordPressにFacebookのソーシャルプラグインを簡単に設置できるFacebook公式プラグイン「Facebook」
WordPressにFacebookのソーシャルプラグインを簡単に設置できるFacebook公式プラグイン「Facebook」を紹介します。 最近ベータ版がリリースされた「Recommendations Bar」もさくっと表示できました（下のスクリーンショットは空記事のブログで試したものなので何も表示されてなくて正常です）。 １．機能 このプラグインを利用すれば、WoprdPressにソーシャルプラグインを簡単に表示できるようになります。 具体的には次のものが設定できるようです（バージョンは1.0.2）。 Social Publisher（タイムラインやFacebookページへの投稿） Like Button Subscribe Button Send Button Comments Recommendations Bar 以下、設定方法です。 ２．インストール WordPress管理画面
WordPress カスタムメニューの使い方（その1：基本）
WordPressのカスタムメニューの使い方について解説します。 カスタムメニュー機能で作ったメニュー 今回はTwentyElevenテーマを使った、管理画面でのカスタムメニューの作成方法について解説します。functions.phpの設定が必要なカスタマイズなどについては別エントリーで紹介したいと思います。 WordPressのバージョンは3.3.1を使っています。 １．カスタムメニューとは カスタムメニューとは文字通り、独自のメニューをカスタマイズする機能です。 カスタムメニューを利用すれば、固定ページ・カテゴリー・投稿・タグのリンクやカスタムリンク（管理画面上で作ったリンク）などを表示させることができます。またそれぞれのリンクを1つのメニューに混在表示させることも可能です。メニューの順序や階層表示も自由にカスタマイズ可能です。 ２．メニューの作成 まず、ページに表示するカスタムメニュ
WordPressのサイドメニューを折りたたむ「wp_list_folderプラグイン」バージョンアップ
WordPressのサイドメニューを折りたたむ「wp_list_folderプラグイン」をバージョンアップしました。 １．プラグインの機能 WordPressのサイドメニューで折りたたみができるようにします。 プラグイン適用前（Twenty Tenテーマ） プラグイン適用後の折りたたんだ状態 ２．プラグインの変更点 ページを移動したときに、メニューの折りたたみ状態を保持できない不具合を解消しました。以下解説です。 このプラグインはjQueryの「Listfolderプラグイン」を利用しているのですが、ページを移動したときに折りたたみ状態を保持するために、各メニュータイトルに次のようなid属性の設定が必要です（その値をクッキーに保持します）。 <dt class="sidetitle" id="hoge">Recent Entries</dt> <dd> <ul> <li><a href="
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
WordPressのTwenty Elevenテーマ解説：ヘッダー (header.php)：その1
WordPressの勉強も兼ねて、Twenty Elevenテーマの各テンプレートについて解説しています。確認バージョンは3.2.1です。 ヘッダー (header.php)：その1 今回はヘッダーです。このエントリーでヘッダーテンプレートのすべてを紹介する予定でしたが、コードの深いところまでトレースしていくと予想以上に長くなってしまい、あきらめて数回に分けることにしました。 説明の中では、apply_filters()の役割や、_e()と__()の違い、bloginfo()とget_bloginfo()の違いなどについても触れています。 Twenty Elevenテーマの「ヘッダー (header.php)」は、スクリーンショットの赤枠で示す、WordPressのすべてのページのヘッダー部分（DOCTYPE～<div id="main">まで）に対応しています。 テンプレートのソースコー
Facebookがテストユーザー作成・編集画面をリリース
Facebookがテストユーザーの作成・編集画面をリリースしました。 これまでのテストユーザーに関する操作はAPIのみの公開でした。そのため、簡単に作成が行える「Facebookテストユーザー作成ツール」を公開しましたが、今後はFacebookの画面からテストユーザーの作成・編集が行えます。 テストユーザーはFacebookアプリを作り、アプリ管理画面から作成・編集するようになっています。Facebookアプリ作成方法については、「FacebookページにMovable TypeやWordPressの最近のブログ記事を表示する」の２項・３項や「Facebookページプロフェッショナルガイド」の96～102ページを参考にしてください。Facebookアプリを登録するのはそれほど難しい作業ではありません。テストユーザーだけを使ってみたい場合は、空のアプリ（＝登録のみ）で大丈夫だと思います。 テ
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
