Gridlover [ad#ad-2] Gridloverでは下記の3点を調整し、見出しやパラグラフなどの縦のリズムを設計します。 フォントのサイズ(body font-size) 行間(body line-height) スケール(scale) Gridloverを起動するには、サイトの「Launch Gridlover」をクリックします。
CSS3アニメーションとjQueryのいいとこ取りをした、ページにアニメーション機能を取り入れるjQueryのプラグインを紹介します。 cssAnimate jQueryのアニメーションの特徴 短いコードで簡単に記述することができますが、動作が遅い(特にモバイル機器で)。 CSS3のアニメーションの特徴 動作が高速で、柔軟に記述できますが、コードの量が多くなります。 cssAnimateの特徴 jQueryとCSS3の利点を組み合わせ、短いコードで高速に動作するアニメーションを利用できます。 jQueryのアニメーションの構文を全てサポート。 CSS3アニメーションの利用。 ブラウザの互換性。 CSS3非対応ブラウザにはjQueryでアニメーションを提供。 コールバック関数。 jQueryのfadeIn, fadeOutなどの使用。 全てのプロパティがアニメーション可。 jQueryでサポ
CSS3で何ができるの? という時にみておきたいサイト集 ベーシックなものから実践的なテクニックまで、サンプルやコードなど実装例が掲載されているサイトをご紹介。
Photoshop初心者でも簡単に作成できる、ウェブページの背景に利用する継ぎ目のないシームレスな画像を作成するチュートリアルをDesign Shackから紹介します。 Create Seamless Web Background Textures in Minutes 写真の「ぼけ」のようなエフェクトをオリジナルで描き、その画像を元に継ぎ目のないシームレスな画像にします。 下記は、各ポイントを意訳したものです。 Step 1: 新規作成 Photoshopを起動して[ファイル]-[新規]を選択し、ファイルを新規作成します。 設定は、幅:800px、高さ:800px、解像度:72pixel/inch、カラーモード:RGBカラーにします。 新規作成の設定画面 次に、カンバスを「#80ac4b」で塗ります。 [Ctrl]+[A]でカンバスのすべてを選択し、カラーピッカーに「#80ac4b」を指
SEOの強化のため、タイトル(title)の表示の変更をします。 WordPress の「title タグ」を変更するには、テーマファイルの「header.php」を編集します。 ※テーマによっては、それぞれ「index.php」や「single.php」に配置されていることもあります。 初期状態の「title タグ」の記述例です。 テーマ:Default <title><?php bloginfo('name'); ?><?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title> テーマ:Classic <title><?php bloginfo('name'); ?><?php wp_title(); ?></title> 上記の記述の場合、以下のように表示されます。 テーマ:D
WordPress の「パーマリンク設定」を変更して、SEO対策の強化を図ります。 ※パーマリンクとは、各記事ページに対して設けられた個別のURLのこと。 WordPressのSEO対策の変更内容 固定URLに対して、拡張子「.html」を与える。 URLに有益なキーワードを配置する。 WordPressのSEO対策の変更方法 WordPress の管理画面を開きます。 [オプション] - [パーマリンク設定] の画面を開きます。 [一般的なオプション] - [独自表記を以下の入力欄に記述] のラジオボタンをチェックします。 「カスタム構造」の入力欄に下記を記述します。 /articles/%category%/%postname%.html ※「articles」は、任意の文字列で構いません。ここでは、「記事」を表す英語を使用しました。 上記の変更が完了したら、「パーマリンク構造を変更」
1. RSS FeedをFeedBurnerで配信 WordPressのRSS FeedsをFeedBurnerにリダイレクトさせます。 ※FeedBurnerの利用には、登録が必要です。 ルートの「.htaccess」に下記を記述します。 <textarea name="code" class="html" cols="60" rows="5"> <ifModule mod_rewrite.c> RewriteEngine on RewriteCond %{HTTP_USER_AGENT} !FeedBurner [NC] RewriteCond %{HTTP_USER_AGENT} !FeedValidator [NC] RewriteRule ^feed/?([_0-9a-z-]+)?/?$ http:///feeds.feedburner.jp/example [R=302,NC,
specky boyのエントリーから、ブラウザのスタイルの初期化やレイアウトのテンプレートなど、スタイルシート設計のベースとなるCSSのフレームワークを紹介します。
960pxのグリッドシステムをサイトデザインに使用する際に役立つ、サンプルや実装例、テンプレート、フレームワーク、グリッドの設計ツール・確認ツールなどを紹介します。
ベースにBlueprint, Tripoli、グリッドに960.gs、印刷用にhartija、エレメントにelementsと複数のスタイルシートのフレームワークのいいとこ取りをし結合させたフレームワーク「BlueTrip」を紹介します。 BlueTrip CSS Framework demo BlueTripの主な特長は下記の通りです。 24カラムのグリッドに対応 実用的なタイポグラフィのスタイル クリーンなフォームのスタイル 印刷用のスタイルシート 空のスターターキット セクシーなデザインのボタン ステータスメッセージのスタイル デモでは、各要素のサンプルとグリッドを確認することができます。 <textarea name="code" class="html" cols="60" rows="5"> <link rel="stylesheet" href="../css/screen.c
IETesterは、IE5.5, IE6, IE7, IE8beta1の確認が同時にできるアプリケーションです。 IETester [ad#ad-2] IETesterを利用するには、上記IETesterのページの「Download IETester」から「install-ietester-v0.2.exe」ダウンロードし、IETesterをインストールします。 IEのバージョンの切り替えは、「New Tab」から切り替えることができます。 簡単に使用しただけですが、IE5.5, IE6, IE7, IE8beta1のレンダリングの違いを確認できました。 バージョン0.2の動作条件は、Windows XP or Vista + IE7以上となっています。XP + IE6の場合、IE7, IE8のモードが動作しません。 Windows XP + IE7, IE8beta1の環境で使用したとこ
基本から実用的なものまで、スタイルシートのスニペットを集めたサイトをAll Web Designre Sourcesから紹介します。
planetOzhのエントリーから、WordPressの管理画面のナビゲーションをドロップダウンにするプラグイン「Admin Drop Down Menu」を紹介します。 WordPress Plugin : Admin Drop Down Menu Admin Drop Down Menu 2.1の対応環境は、WordPress 2.5+となっており、日本語環境の当サイト(WordPress 2.5.1)でも文字化けすること無く使用できました。 プラグインのセッティングは簡単で、ダウンロードした「ozh-admin-drop-down-menu.zip」を解凍し、フォルダごと「/wp-content/plugins/」にアップロードします。 あとは、管理画面のプラグインから「Ozh' Admin Drop Down Menu」を「有効化」すると、管理画面のナビゲーションがドロップダウンに
定番ものやコンテンツ・ナビゲーションの生成、ページ・タグの管理、バックアップ・管理の強化などWordpressの便利なプラグインの紹介です。
グラデーションを使用したアローでデザインされた、シンプルでクールなパンくずのスタイルシートをVeerle's blogから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="crumbs"> <li><a href="#">Home</a></li> <li><a href="#">Main section</a></li> <li><a href="#">Sub section</a></li> <li><a href="#">Sub sub section</a></li> <li>The page you are on right now</li> </ul> </textarea>
WordPressの各エントリーに編集ボタンを付けたり、シングルクォートの自動置換を無効化するなど、使いやすくするための15のスニペットをForTheLoseから紹介します。 15 Useful WordPress Tricks to Make Your Theme Even Better 古いエントリーのコメント入力をクローズ 古いエントリーにはスパムコメントがつくので、コメント入力をクローズにします。 function.phpに下記を記述します(例:1ヵ月以上前)。 <textarea name="code" class="html" cols="60" rows="5"> <?php function close_comments( $posts ) { if ( !is_single() ) { return $posts; } if ( time() - strtotime( $
noupeにエントリーされている3カラムレイアウトのサンプルサイトの紹介です。 9 Timeless 3 Column Layout Techniques 紹介されているのは、3つのカラムが「固定:2、可変:1」「固定:3」「可変:3」「レイアウト サンプル集」となっています。 固定:2、可変:1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く