（娘５歳８ヶ月）娘の好物と年長さん１学期のお弁当記録 娘をただ微笑ましく見つめていただけなのに……（夫） こっこの最近の好物は「にんじんしりしり」と納豆を混ぜて食べること。 我が家のしりしり＆納豆好きといえばまず夫ですが、夫は卵入りのしりしりが好きで、こっこはにんじんとツナのしりしりが好き。わたしはどっち…
はてなブログ | 無料ブログを作成しよう
（娘５歳８ヶ月）娘の好物と年長さん１学期のお弁当記録 娘をただ微笑ましく見つめていただけなのに……（夫） こっこの最近の好物は「にんじんしりしり」と納豆を混ぜて食べること。 我が家のしりしり＆納豆好きといえばまず夫ですが、夫は卵入りのしりしりが好きで、こっこはにんじんとツナのしりしりが好き。わたしはどっち…
はてなダイアリーのデザインテーマ「hatena2」におけるフッタ部分の見栄えを変更したい - 人力検索はてな
ダイアリーのフッタにsection、calendar各モジュールを設置しているのですが、見栄えが優れません。 http://d.hatena.ne.jp/thyself2005/20070807/p2 一見問題ないように思えますが、例えば上記のような短い記事の場合、サイドバーとフッタ部分が交差してしまい、非常に見づらいカタチとなってしまいます。 そこで、このseciton＆calendar各モジュールの幅を記事枠内に収めるためには、スタイルシートにどのような指定をすればよいのでしょうか？ 参考までに、希望の（こうなりたい）イメージ図を添付します。 また現在使用しているデザインテーマは「hatena2-black」で、div.dayやdiv.main等の、いわゆる記事周りについては何も指定しておりません。 （参考：http://d.hatena.ne.jp/themesample?haten
CSSのレイアウト作成に役立つ便利なリソースいろいろ
最近のページやサイト作成に欠かすことのできない「CSS（カスケーディング・スタイル・シート）」ですが、そのレイアウト作成を行う際に便利なリソース22種類です。ゼロから作るよりは楽に製作できるはず。 詳細は以下の通り。 40種類のCSSレイアウトがそろっています。 Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! CSSのフレームワーク blueprintcss - Google Code 16種類の異なるCSSベースのレイアウト intensivstation :: CSS Templates :: Templates 12種類のCSSによるレイアウト Dynamic Drive CSS Layouts- CSS Frames CSSのレイアウトを作成する
クロスブラウザでちゃんと動作するCSSボタン集サイト「CSS Buttons」:phpspot開発日誌
CSS Buttons is the Plug and Play Solution for Web Designers and Developers - CSS Buttons.net CSS Buttons will allow designers to quickly implement consistently looking, cross-browser, buttons regardless of the element used. クロスブラウザでちゃんと動作するCSSボタン集サイト「CSS Buttons」。 CSS Buttons を使えば、Win,Mac,Linux上の色々なブラウザでちゃんと動作するボタンが実装できるようです。 ブラウザのボタンに関するレンダリングの差異を吸収するCSSが含まれています。 a, button, input タグによるボタン実装が考えられて
テキストを自由な位置で折り返せる「CSS Text Wrapper」:phpspot開発日誌
CSS Text Wrapper The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle.テキストを自由な位置で折り返せる「CSS Text Wrapper」。 テキストを円形等、好きな形の範囲内に収める仕組みが考案されたようです。 次のように、円形の中にテキストを並べる等、まさに自由自在です。 昔はこういった形でのテキストは空白を挟んだりして実現は難しいと思っていましたが、実現できるんですね。 デザイン系のサイトなんかで活用できそうな仕組みです。 こんな仕組みがあるとは知らない人に見せたらアッと驚くこと間違いないでしょう。 ちょっとしたサプライズを与えたい場合に使えますね。
各はてなモジュールにクラス名を追加しました（開発者向け） - はてなダイアリー日記
本日、それぞれのはてなモジュールに対して、クラス名の指定を追加いたしました。こちらの変更により、CSSでのデザイン変更などが行っていただきやすくなりました。 これまでの hatena-module に加え、新たに hatena-module-モジュール名 というクラス名が追加されています。 たとえば、profileモジュールの場合は以下のようにクラス付けされています。 <hatena name="profile"> ↓ <div class="hatena-module hatena-module-profile">...</div> 来週火曜日（11月27日）まで開催中の公開デザイン祭2007秋に参加される方など、テーマを自作される方はぜひご活用いただければと思います。 その他、クラス名を付与したモジュールは以下の通りです。 クラス名を追加したモジュール一覧 モジュール名 クラス名 am
d2.hatena.ne.jpで新しいコメント構造の実験を開始しました - はてなダイアリー日記
本日、はてなダイアリーのテスト環境 d2.hatena.ne.jp にて、コメント欄の新しい構造実験を開始しました。 http://d2.hatena.ne.jp/ 詳しい変更内容は以下の通りです。 [コメントを書く] のかぎかっこ（[]）を削除しました コメント本文に付くかぎかっこ（『』）を削除しました これまでは「ユーザー名＞コメント本文＞書き込み日時」でしたが、「ユーザー名＞書き込み日時＞コメント本文」に変更しました ユーザーアイコンのリンクをその人のダイアリーへのリンクに変更しました（span.canchorは廃止） 個別コメントのpermalinkは書き込み日時にリンクしています 書き込み日時・コメント本文をそれぞれ別のspanで囲み、classを設定しました base.cssにいくつかのスタイルを追加しました ユーザー名・書き込み日時の後が改行されて本文が始まるような指定にしま
はてな記法で画像を日記本文に貼り付けた際の a タグにクラス名を追加しました（開発者向け） - はてなダイアリー日記
本日、はてな記法を用いて表示される画像の a タグに対し、クラス名の指定を追加しました。 fotolife記法で展開した a タグへのクラス追加と同様に、a タグと img タグに同一のクラス名を与え CSS でのデザイン変更を行っていただきやすくなりました。 実際に展開されるHTMLのサンプルやクラス名を追加した記法の一覧は以下をご覧ください。 HTMLサンプル <a class="http-image" href="http://www.hatena.ne.jp/hogehoge.jpg"><img class="http-image" src="http://www.hatena.ne.jp/hogehoge.jpg"></a> クラス名を追加した記法一覧 記法 class名 備考 http記法での画像ファイル表示(:image) http-image 旧指定 hatena-http
Travellers Tales : ウェブサイトを iPhone/iPod touch 対応にする最も簡単な方法
ウェブサイトを iPhone/iPod touch 対応にする最も簡単な方法 viewport を設定して iPhone/iPod touch に対応しよう ぼちぼち iPod touch が届き始めましたね。 Safari on iPhone/iPod touch のために用意された meta 要素の viewport 属性1を使って、あなたのサイトをなんちゃって iPhone/iPod touch 対応にする方法を説明してみたいと思います。 方法は簡単です。 <meta name="viewport" content="width=1024" /> head 要素に上記のようなタグを入れるだけです。ただ、ここで width に指定する横幅を自分のサイトに合わせて最適化する必要があります。 ちなみに、上記の width=1024 となっている viewport の設定は Apple のホ
自分のダイアリーに設置したGoogle AdSenseの色をスタイルシートと一緒に指定できるようになりました - はてなダイアリー日記
本日、アフリエイト設定から自分のダイアリーに設置したGoogle AdSenseの、テキストや背景などの色を詳細デザインのスタイルシート欄に一緒に指定できるようになりました。 これまでは色を変えるためにはGoogle AdSenseのサイトで色を指定して広告レイアウト用コードを取得する必要があり、公開デザイン作成時などに色を指定することができませんでした。 Google AdSense の広告レイアウト用コードを指定している場合はそちらが優先されますが、指定されていない場合は詳細デザイン設定のスタイルシート欄に以下のように指定すると色を変更できます。 /* テキストの色 */ .google_color_text { color:#000000; } /* リンクの色 */ .google_color_link { color:#0000FF; } /* ドメイン名部分のテキストの色 */
mixiを自分なりにリニューアルしてみた。｜ウープスデザインブログ
デザイナーをしています。おもしろいコト大好き。イベントに参加したりカンタンなwebサービスを作ったりもときどき。twitterだけがとりえです。twitter id ; woopsdez Category Archives Monthly Archives January 2008（14） December 2007（22） November 2007（33） October 2007（21） September 2007（18） August 2007（24） July 2007（19） June 2007（40） May 2007（30） April 2007（97） March 2007（20） February 2007（11） January 2007（18） December 2006（26） November 2006（35） October 2006（50） Septemb
リニューアル後のmixiを2カラム/750px幅化するユーザースタイルシートを書いてみた : akiyan.com
リニューアル後のmixiを2カラム/750px幅化するユーザースタイルシートを書いてみた 2007-10-01 別に2カラム原理主義者というわけではないのですが、カラム変更オプションが無くなったのでついカッとなって書いてみました。 目次 1 適用前、適用後2 解説3 ユーザースタイルシート4 更新履歴5 非表示の基準 適用前、適用後 適用前 適用後 解説 Firefox向けで、ユーザースタイルシートの適用は「Stylish」拡張をインストールすると便利です。 2カラムにするだけではなく、個人的にほとんど使わない機能へのナビゲーションまで削除しちゃってるので、ちょっと注意が必要です。リニューアル後のmixiのHTMLはid名とclass名が変態的なまでにきっちり設定されているのでCSSがわかる方はソース眺めつつ調整してください。ユーザースタイルシートの内容は以下の通り 調整 全体の横幅 75
無料で使える2カラムのWebサイトテンプレート80選『80+ Free 2-Column We...
Web 無料で使える2カラムのWebサイトテンプレート80選『80+ Free 2-Column Website Templates』 Webサイトを簡単に作りたい。 そんなあなたにおすすめなのが、『80+ Free 2-Column Website Templates』。無料で使える2カラムのWebサイトテンプレート80選だ。 以下にいくつかご紹介。 » Blooming 角丸と花の画像のヘッダが特徴のテンプレート » Hyperglass 角丸とヘッダのグラデのかかった円のデザインがWeb2.0デザインっぽく印象づけている » Stylized かっこよくシンプルなテンプレート。ブログにぴったり » Stickybud ヘッダの背景画像がとてもかっこいいテンプレート » Travel Portal カラフルな自然にインスパイアされたテンプレート » Affection ビクトリア調のデ
画像に鏡面効果を与えるreflection.js[to-R]
画像に鏡面効果を与えるreflection.js reulection.jsは画像に鏡面効果を与えるjsライブラリになります。 このライブラリを使用すれば、画像を加工することなく画像の下に鏡に反射したようなエフェクトが追加されます。 設置方法 ダウンロードしたreulection.jsをhead要素などで読み込みます。 <script tyle="text/javascript" src="./reflection.js"><script> エフェクトを追加したい画像のclass名にreflectを設置します。 <img src="[画像]" alt="" class="reflect" /> これだけで鏡面効果が与えられます。 サンプル 初期段階で画像が作るのが困難な場合や、背景が設定されている場合はこのライブラリを使えば効率的に作業ができるでしょう。 rheight20～80のクラス名
![画像に鏡面効果を与えるreflection.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a01a0c31d440f29a491fdd71f76aedb1d5a3f40b/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
現在はてなダイアリーで「Hatena2-black」をデザインテーマに使用しています。…
ウェブデザイン・ギャラリーサイトまとめ - DesignWalker
Easy Study HTML
ブログに使えるカレンダーデザインまとめ - DesignWalker
TableとCSSいろいろ - DesignWalker
サイトでグラフを使いたい時に使えるまとめ - DesignWalker