tande lab.

Archive
Tag "CSS"

Firefox OS を触ってみよう!に夫婦で参加してきました。

開発途中の Firefox OS を触れて、しかも中身をいじれる。
OS を自分でデザインできるっていう経験はあまりないですし、もしかしたら OS のデザインとして一部採用されるかも!楽しみ!ってことで、参加してきました。

004 さわってみよう Firefox OS | designers-hack(デザイナーズハック)

My image

@tommmmy さんが詳細なイベントレポートを起こしてくださっています。
そちらで楽しげな雰囲気が伝わるかと思います。

デザイナーズハック 004 「さわってみよう Firefox OS」 が終わりました | designers-hack(デザイナーズハック)

Read More

背景色がダイナミックに変更になる箇所で、
その背景色によって表示するテキストの色を変更する Tips です。

以下のサイトの、gday さんの回答が参考になりました。

RGB値を引数にとった関数にしてみました。
return で 白(#FFF) または 黒(#000) を返します。

// 背景色によってテキスト色を白/黒どちらにするか判別する
// 参考式: Y=0.3R+0.6G+0.1B で Y>127なら黒、それ以外なら白
var checkTxtColor = function(cR,cG,cB){

	// 最高値は255なので、約半分の数値127を堺目にして白/黒の判別する
	var cY = 0.3*cR + 0.6*cG + 0.1*cB;
	
	if(cY > 127){
		return "#000"; // 黒に設定
	}
	return "#FFF"; // 白に設定
}

RGB値自体の取得は、
前記事 – [JavaScript] 色表記の変換が簡単なライブラリ rgbcolor.js
で紹介したライブラリを利用すると簡単です。

Read More

色表記の変換が簡単になる JavaScript ライブラリの紹介です。

RGB color parser in JavaScript / Stoyan’s phpied.com
上記サイトで紹介されている rgbcolor.js を使うと

  • RGB表記 rgb(255,0,0)
  • 16進数表記 #FF0000
  • RGB各色を10進数で取得

が簡単にできます。

こちらでデモが見れます。
RGBColor test

Read More

今まで、人気記事の表示には WordPress Popular Posts という
WordPress プラグインを使って表示するようにしていたのですが、
はてブのブログパーツに切り換えてみました。

こんな風に。
https://lh4.googleusercontent.com/-KKKC-m94mmo/T_6YN1N-pPI/AAAAAAABGAY/IlbPh-5C9pU/s800/120712-0004.png

はてなブックマークブログパーツ のページで
"ブログのサイドバーに人気記事を表示" を選んで設定できます。

Read More

毎月Adobeにお布施する覚悟ができたので、Adobe Creatibe Cloud に登録してみました。
さて、せっかく登録したのだから、今まで使ったことないアプリやサービスも使いこなさないと損!!

ということで、第一弾めは Adobe Typekit を触ってみました。

My image

Read More

Twitter Bootstrap をWordpressで気軽に導入できるプラグインがあったー。
WordPressのショートコードを使って設定できるみたい。便利そう。

WordPress Twitter Bootstrap CSS Plugin Home | Worpit: Rapid WordPress Admin

My image

色々調べたらとても丁寧に紹介されている記事も見つけました。
最新Twitter Bootstrapを一発で導入しちゃうWordPressプラグイン – はじめよう

ショートコード例と実際に表示されるボタン画像も載せられていてとても分かりやすいです。

Read More

WordPressのカスタマイズするときに、
phpのコアファイルとか、適用中のテーマやプラグインのCSSを直接いじってしまってたんですけど、そうするとアップデートしたときに元通りになっちゃった!
あわわーってなってしまうこと数回…orz。

で、色々調べるとWordPressにはそれを回避できる「子テーマ」っていうすばらしい仕組みが用意されているんですね。コアファイルやテーマ自体は全くいじらず、変更したい箇所だけ別ファイルで準備できるというものです。

以下、使い方の説明です。

Read More

前記事
[CSS] リンク<a>のスタイルを変更する
[CSS] 水平線<hr>のスタイルを変更する
に引き続き、よく使うリスト表示のスタイル設定方法を自分のチートシート代わりにメモしておくことにします。

Read More

リンクテキストの色などスタイルをCSSで変更する方法です。
これも 前記事の<hr> に引き続き、毎回ぐぐって調べていたのでメモしておくことにしました。

Read More

水平線を点線にしたり、独自の画像にしたりする方法です。
毎回ぐぐって調べていたので、メモしておくことにしました。

HTMLで <hr> と書くとでてくる線です。
普通に <hr> とだけ書くとブラウザデフォルトのスタイルで表示されますが、例えば以下のような点線にしたい場合、

点線の例

Read More