CSSスプライトを生成する「grunt-spritesmith」
CSSスプライトを生成する「grunt-spritesmith」 grunt-spritesmithはCSSスプライトを生成するGruntモジュールです。 Gruntの基本的な使い方は「Gruntで始めるWeb制作の自動化 - to-R」を参照に。 grunt-spritesmithのインストールは以下のコマンドです。 npm install grunt-spritesmith --save-dev Gruntfile.jsの内容は以下のようにします。srcで個別の画像を置くディレクトリを、destCSSで関連するCSSを書き出すファイル名(SassやLess、StylusでもOK)を、destImgで結合したスプライト画像のファイル名を指定します。 module.exports = function(grunt) { //グラントタスクの設定 grunt.initConfig({ spr
スマホサイト案件の見積もりについて
スマホサイト案件の見積もりについて 「Android案件の見積り」や「スマホ案件の見積もりについて」を受けて、アプリではなくHTML+CSSでつくるスマホサイト制作の見積もりではまりやすいポイントをまとめています。 HTML+CSS構築ではPCの0.７倍くらいの単価 スマホサイトはPCより小さいのでHTML+CSSの構築コストも安くみます。ただ、CSS3で作ったほうが良いところで画象の切り出しより手間がかかることもあります。ならすとページ単価はPCの0.７倍くらいの感じじゃないでしょうか？ 検証コストは増大 対応端末が多く検証コストはPCと比較して増大します。iPhone3G、iPhone3GS、iPhone4、iPhone4Sの中から2端末ぐらい(iOS4.x系とiOS5系)。Android2.2、Android2.3から売れてる端末で2端末ぐらい検証するのがよいでしょう。(場合によって
MTでopモディファイアを利用して複雑なレイアウトを行う
MTでopモディファイアを利用して複雑なレイアウトを行う MTのテンプレートでopモディファイアを利用して複雑なレイアウトを行う方法です。 例えば、エントリーの一覧画面で、商品画像掲載のページ構成CSSのようなエントリー3個づつをブロックレベル要素で包んで出力することなどが可能です。 基本的な使い方 まずは簡単なサンプルでopモディファイアの利用方法を説明します。 エントリーの変わりに数字を出力するテンプレートタグは以下のようになります。 <MTsetVar name="no" value="0"> <MTEntries> <MTSetVar name="no" value="1" op="+"> <mtgetvar name="no"> </MTEntries> 12345といった感じにエントリーの数だけ、数字をひたすら出力する記述です。 1行目でnoという変数に0を代入し、 <MTse
jQueryでアコーディオンを設定する際の注意
jQueryでアコーディオンを設定する際の注意 ネタ元：jQuery.js トピックのしつもんの89 アコーディオンを設定する際に動作がカクカクすることがあります。 サンプル この対応方法はアニメーションを設定したい要素にCSSなどでheightを与えてあげれば大丈夫です。 高さが可変でCSSでheightを設定できない場合は以下のようなコードを追加します。 $("dl dd").each(function(){ $(this).css("height",$(this).height()+"px"); }); サンプル アニメーションを設定する場合はheightを指定、これ重要です。 リキッドレイアウトの場合 リキッドレイアウトの場合heightを固定してしまうとウィンドウサイズを小さくした場合、ウィンドウが拡張されませんね。 その場合は以下のclickイベントの最初で高さを指定しておき
WEB製作者の為のSEOチートシート[to-R]SEOmozで配布されているSEOチートシートが素敵ですので日本語にしてみました
WEB製作者の為のSEOチートシート SEOmozで配布されているSEOチートシートが素敵ですので日本語にしてみました。 重要なHTML要素 title要素にキーワードを含みましょう。 h1,h2,h3要素にキーワードを含みましょう。 b要素、strong要素でキーワードを包みましょう。 img要素のalt属性、ファイル名にキーワードを含みましょう。 a要素のtitle属性、アンカーテキストにはキーワードを含ませましょう。 a要素のnofollowを上手に使いましょう。 インデクシングに関する限界 ページのファイルサイズは150KB以下にしましょう。 ページ内のリンクは100個以内にしましょう。 title要素は70文字(半角)以内にしましょう。 meta要素のdescriptionは155文字（半角）以内にしましょう。 URLの含まれるパラメーターは2個以内にしましょう。 ディレクトリの
Movable Typeのタグ入力を簡単にするtagSupportプラグイン
Movable Typeのタグ入力を簡単にするtagSupportプラグイン MTのタグ入力をサポートするtagSupportプラグインを作成しました。 タグ入力欄の下に、今まで利用したタグの一覧が表示されますので、今まで利用したことがあるタグはクリックで入力が可能です。 tagSupportプラグインをダウンロード ダウンロードしたtagSupport.zipを解凍し、tagSupport.plをmtディレクトリ内のpluginsにアップしてください。 ライセンスはGPLで配布しますので、自由にご利用ください。 MT4.1とFirefox2/IE7で動作検証は行っております。 不具合等ありましたらご連絡ください。 関連エントリー MTの編集画面にカラーピッカーを付けるcolorEditorプラグイン MTのテンプレート開発で再構築を不要にするfastDevelopmentプラグイン Mo
アルファ画像を扱うalphafilter.jsライブラリ[to-R]
アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a
Movable Typeの再構築 高速化いろいろ
Movable Typeの再構築 高速化いろいろ Movable Typeの再構築を高速化する方法をいくつかご紹介します。 インデックステンプレートの再構築オプションをはずす インデックステンプレートを表示した際に、すべてのテンプレートに緑のチェックが入っていませんか？ これは再構築オプションといって、ブログの投稿や編集、インデックスの再構築を行ったときにそのファイルを再生成するというオプションです。 メインページやアーカイブインデックス、RSSといった類は仕方ないのですがスタイルシートやjsファイルなどの一度生成したら更新しなくていいものは再構築オプションを外してしまいましょう。 はずし方は、テンプレート名をクリックしてテンプレートを編集する際に、下にある『再構築オプション』のチェックを外してください。 不要なMTタグの除去 テンプレート内にはブログの設定を反映させるタグがいくつかありま
Movable TypeでSEO対策-Feed編-
Movable TypeでSEO対策-Feed編- Movable TypeでSEOを行う際にRSSやAtomなどのフィードを最適化する方法です。 表示件数を変更する デフォルトですと最新15件の情報しか出力されません。 これではさすがに少ないのでもう少し増やしましょう 参考：MovableTypeでFeedの配信数を変更する あまり、増やしすぎてもFeedの情報量が多くなりすぎます。 私の場合はFeedBunerのフィードの最大サイズの関係もあり、 部分配信の場合は200件、全文配信の場合は50件 という目安で配信しています。 アーカイブテンプレートでRSSを配信する。 カテゴリーごとにFeedを配信するのも効果的です。 トップメニューのデザインからテンプレートを選択。 左にあるクイックフィルタよりアーカイブテンプレートを選択。 アーカイブテンプレートを作成からブログ記事リストを選びます
テキストスタイルをジェネレートできる CSS Type Set[to-R]
テキストスタイルをジェネレートできる CSS Type Set CSS Type Setはテキストのスタイルをジェネレートできるサイトです。 デザインなどをしているとき、テキストに違和感を感じることがありますが、そういう時に使えそうです。 line-heightやletter-spacing、word-spacingも一緒にシュミレートできるので、色と文字間隔の関係やフォントと行間の関係なども簡単に確認できるので非常に便利です。 ただ残念なことに日本語フォントに対応してないようですので、日本語フォントに対応させる為のブックマークレットを作っておきました。 CSS Type Setに日本語を追加 上のリンクを右クリックでお気に入りに追加(IE)/このリンクをブックマーク(Firefox)でお気に入りに登録して、CSS Type Setでそのお気に入りを実行することで利用できます。 気に入った
![テキストスタイルをジェネレートできる CSS Type Set[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/73d23b415d523c6c2684f2de451727e98b5b4e8d/height=288;version=1;width=512/http%3A%2F%2Fblog.webcreativepark.net%2Fimg%2F20080215_01.jpg)
クリエイティブコモンズとは
クリエイティブコモンズとは このblogの著作権の意思表示をクリエイティブコモンズライセンスに準じた形で主張するよう変更しました。 クリエイティブコモンズとは著作権の意思表示を示すプロジェクトで、クリエイターに既存する著作権を拡張するライセンスを主張が可能なのです。 つまり通常のデジタルコンテンツやデジタルクリエイティブ作品などの制作物の著作権は、クリエイターに既存します。 著作物は著作権所有者しか、再利用や改変ができません。 その為、コンテンツや作品を普及する為に、この著作権が邪魔になってきます。 ただ著作権自体を拒否するのはクリエイターにとって、わが子を他人にあげるようなものです。 そこで、考案されたのがクリエイティブコモンズライセンスで、これを利用して、クリエイターは著作物の著作権を保持したまま再利用や改変を許可することが可能になります。(ただし法的強制力は発生しません。) また、ク
【Adobe Spry TIPS】 目次
【Adobe Spry TIPS】 目次 Adobeからリリースされているデザイナー向けAjaxフレームワーク『Adobe Spry framework for Ajax』。 短期集中エントリーとして『Adobe Spry TIPS』をお送りします。 Adobe Spry framework for Ajaxとは? Ajaxとは? Spryを準備する ＲＳＳを取得して表示する。 RSSの表示する件数を変更してページングをつける。 XMLとXPath 別ドメインの内容を読み取る CSVを取得表示 CSVをボタンで切り替える HTMLを取得表示する onloadイベントを追加する アコーディオン コラプシブルパネル ファイルを読み込み表示するHTMLパネル メニューバー タブパネル ツールチップ よくある質問っぽいののSpryを使ったサンプル more.... スポンサードリンク to-Rにつ
【Adobe Spry TIPS】XMLとXPath
【Adobe Spry TIPS】XMLとXPath 【Adobe Spry TIPS】ＲＳＳを取得して表示する。の補足 XMLとXPathについては一番なじみが深いと思われるXHTMLを元に解説していきます。 XHTMLはもともとSGMLベースで策定されたHTMLを、XMLベースに策定しなおしたものであり、XMLとはXHTMLのように複数の要素を入れ子にして情報を表現する為のマークアップ言語です。 XPathはXMLの特定の要素までの道筋を記述する方法です。 サンプルに、当blogの最新の状態を保存したXHTMLを用意しました。 (xml宣言の追加や、サーバーの設定のため拡張子をxmlに変更した物) このサンプルを元に最新のエントリー一覧を抽出するXPathを書いてみます。 まず、一番外側の要素（html要素）を記述します。 /html 次にその内側の要素。エントリー一覧はbody要素内
MovableType3.34から4.01へのアップデート
MovableType3.34から4.01へのアップデート MovableTypeも4.01と若干安定したと思いますのでアップデートを行いました。 当初、別のディレクトリで新規にMovableTypeを構築して既存のMovableTypeよりデータを移行、その後ドメインを新規のディレクトリに向けるという作業を行おうと思ったのですが(この方法が一番安全にサイトを停止せずにアップデートできる為)、MobaleTypeの3.3はurlとtagのエクスポートができないようです。 urlはタイムスタンプより生成しているので問題ないのですが、tagを手動で再設定は非常にめんどくさいので、既存のMovableTypeを直接アップデートしました。 ディレクトリのバックアップ FTPでMovableTypeをインストールしているディレクトリにアクセスして、すべてをダウンロードします。 DBのバックアップ M
SEO対策ツールまとめ[to-R]
SEO対策ツールまとめ よく使うSEO対策ツールのまとめ。 他にもいっぱいあると思うけど個人的に愛用しているもののみピックアップ。 キーワードアドバイスツールプラス Yahoo!JAPANでキーワードが何回検索されたか調べるツール(2007年4月時点のデータ) キーワード出現頻度解析 そのページにおけるキーワードの比率を計算できるツール。 検索エンジンランキングチェッカー 検索エンジンでの順位をチェックできるツール。 何がすごいかって言うと検索結果が記録されていきます。 Google, YST キーワードチェックツール GoogleとYSTの辞書にキーワードがどのように登録されているかチェックするツール。 XML Sitemap Generator Google sitemapを自動で作ってくれるツール Statsaholic 今までのAlexaの順位遷移を比較できるツール robots.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
