はてなダイアリーでGoogle Web Fontsを試す - tikeda's blog
Google Web Fonts!! はてなダイアリーは、今のところ多くのWeb Fontサービスが使えないのですが、Google Web Fontsは、無理やり使う事ができました。このブログでも一部使ってみています。 使い方 Google Web Fontsから使いたいフォントを選択 ページ中の「Use this font」を選択 ページ内のCSSファイルのパスをコピー はてなダイアリーの管理ページ→「デザイン」→「詳細デザイン」→「スタイルシート」欄で以下のようにCSSを@importで指定 @import "http://fonts.googleapis.com/css?family=Lobster"; 上の@import指定をした、下の行あたりに、フォントを変えたい部分にfont-familyを指定 @import "http://fonts.googleapis.com/css?
HTML構造 - tikeda's blog
※このHTML構造は結構古いので、私のエントリーではなくてスタッフであるid:kyabanaさんのエントリーの方を見てください！ 現時点でのHTML構造の概要メモ。CSSいじる用にどうぞ。 <body class=""> <div id="globalheader-container"></div> <div id="container"> <div id="container-inner"> <header id="blog-title"> <div id="blog-title-inner"> <h1 id="title">ブログタイトル</h1> <h2 id="blog-description">ブログ説明</h2> </div> </header> </div> <div id="content"> <div id="wrapper"> <div id="main"> <div
角丸ライブラリ - tikeda::Diary:
最近角丸を作る機会が多かったので、今後の為に色々整理してたんですが、公開しておきます。使えそうだったらいじって使ってください。中身の文書を書き換えれば上下左右と可変するように柔軟になっています。また、一部PSDも同封してます。 0501curve.zip 中身はこんな感じ。 ベーシックなタイプ 01：小さ目な角丸 02：大き目な角丸 03：斜線の角丸（背景画像をループ） 04：ストライプの角丸（背景画像をループ） 05：木模様の角丸（背景画像をループ） 06：リボンのついた角丸（背景画像を固定） 4つ角をの内側を透過GIFにしてるので、大枠の背景を変えれば発想次第で色々と使えると思います。HTMLとCSSは大体こんなんです。divが多いのがちょっと嫌な感じですが。はてな内ではspanでやってたりもします。 HTML <div class="curve-01"> <div class="cu
汎用CSS - tikeda's blog
先日、ダイアリーをリニューアルしたのですが、今回これまでとは違って、はてなの汎用スタイルシートを作り、それを導入して作っています。簡単に説明すると、これまでは、サービス毎に1つCSSを作っていましたが、今後、はてな内でサービスのデザインに統一感を持たせる意味などで、全サービスのベースに、同じCSSを導入してデザインを作っていこうという感じです。 構成 ソースを見ていただければ分かりますが、汎用CSSはglobal.cssというCSSから、syntax.css、support.css、common.cssという3つのCSSをimportして構成されており役割は以下の感じです。 common.css タグの基本スタイルの定義と、ページ内の各要素をパーツ化して、それを部品毎にclassにしているデザインの枠組みになるCSSです。例えばtableであれば「一覧用（.table-list）」「管理画
効率よく育てやすくデザインする - tikeda's blog
デザイナーが1人だと効率のよいデザインワークってのが肝で最近意識してる事です。 CSS 言わずとしれてますが、後でページ追加したり、機能追加する時など上の項目をコピーして書き換えただけで、デザイナーじゃなくても項目追加を簡単にできます。 テキスト要素はなるべく画像にしない 特にタイトルとか画像にすると、後でページ追加したり項目を増やすのにデザイナーの作業が入るので。なるべく避けてます。 シンボルイメージはグローバルなイメージで サービスシンボルは一番の特徴を捉えるだけのシンプルに（ダイアリーだと「日記を書く」、人力だと「質問と回答」）。細かい特徴を含ませると後で追加された特徴や削除された機能がある度に手を加えないといけないので。 シンボル作りはillustratorで粘る 特にサービスのシンボルや利用頻度の高いアイコンはどんな使い方をどんなサイズで利用されるかが分からないので、photoh
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
