Top

usa*log 晴れ。ときどき、うさぎ王国

タグ:デザイン ( 49 ) タグの人気記事

ブログスキンをいじってみたよ。

しばらく替えてなかったので、ちょっとピンク色に♡

勝手に触っていいところと、変えられないところ、いろいろあって面倒ではありますが、勉強になりますね。
border-radius使えるのかな?と思って試したみたらイケました!

(エキサイト提供スキン 2列のロマンフラワー)というのを元にしています。

DIV#LEFT {
MARGIN-TOP : 25PX;
MARGIN-BOTTOM : 25PX;
PADDING : 15PX;
BACKGROUND : #FFFFFF; 
BORDER : 2PX #f780bb SOLID; ←好みで色とか太さとか
TEXT-ALIGN : LEFT;

-webkit-border-radius: 12px; ←足すのはここから
-moz-border-radius: 12px; ←この数値で角丸サイズが決まる
border-radius: 12px;
}

DIV.PROFILE {
WIDTH : 190PX;
BACKGROUND : #ffffff;
BORDER-top : 2PX #f780bb SOLID;
BORDER-LEFT : 2PX #f780bb SOLID;
BORDER-RIGHT : 2PX #f780bb SOLID;
BORDER-BOTTOM : 2PX #f780bb SOLID;
LINE-HEIGHT : 140%;
MARGIN-BOTTOM : 20PX;
PADDING-BOTTOM : 6PX;

-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}

DIV.MN {
WIDTH : 190PX;
BACKGROUND : #ffffff;
BORDER-TOP : 2PX #f780bb SOLID;
BORDER-LEFT : 2PX #f780bb SOLID;
BORDER-RIGHT : 2PX #f780bb SOLID;
BORDER-BOTTOM : 2PX #f780bb SOLID;
LINE-HEIGHT : 150%;
MARGIN : 20PX 0PX;
PADDING-BOTTOM : 30PX;

-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}

これだとプロフィールのてっぺんの画像が残ってしまうので消します。すると段違いになってしまうので、後に空の透過gif(png)を入れて強制的に処理しています。

DIV.PROFILE_HEAD {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/画像フォルダ/spacer.gif); ←空のgifを作ってアップロード
WIDTH : 192PX;
HEIGHT : 15PX; 
}

書き換えること自体よりも、どの行がなんなのか...探すのが一番面倒だったり(いやいや、wordpressに比べれば少ない行数w)。トップページをダウンロードして手元のエディタで開きつつ、ひとついじってはプレビューという...HTMLのhead部分に書き出されてる部分が自分用CSSなので、ダイレクトに編集するよりはずっと安全です。他のデータは絶対パスになってるから勝手に読み込みに行ってくれるので。

可愛いスキン探しちゃった方がぜったい速い(笑)これはもう職業的修行みたいなもんですね。

それとタイトルの頭につく飾り(?)がいつの間にか画像データを消してしまったらしく、無地になっていたのを復活させました。

h2.POST_TTL {
FONT-SIZE : small; 
margin : 0;
       BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/任意の画像をアップロード);
BACKGROUND-REPEAT : NO-REPEAT;
PADDING : 0PX 0PX 0PX 20PX;   ←画像サイズによって変動
}

やっぱ、こういうのどこかにまとめておきたいな。


それと、次はスマホ用スキンのカスタマイズも望んじゃいます。種類まだまだ少ないし、レイアウトはいじれなくていいから、カラー、背景、ボタンくらいは作ってみたいですよね。
[PR]
by usa-log | 2013-02-04 01:36 | うさぎ王国 | Comments(0)

お気に入りフォント♡

a0026762_1856964.jpg

可愛いでしょ?
ちょっとカード作ったり、アイコンにも使えます。お気に入りを7〜8種類インストールしてます。全部で100種類くらい詰まってたかな。
FLOP DESIGNのフォントです。
a0026762_1921459.gif

無料ダウンロードもあるのですが、商用利用はできないし仕事でちょっとこれいいなって時に困ります。フォント作る手間ひまを考えたら高くないと思うし。文字ひとつ、アウトラインデータ作る時間と労力ってかなりのものです。

いつか自分でも作ってみたいなぁ。アルファベットだけでもそーとー時間かかりそうだけど。。
今、エディタはどうなってるんだろう?
[PR]
by usa-log | 2013-02-01 19:26 | デザインやなんかのこと | Comments(0)

そして古い本が役に立ったりする。

CSS3の書籍ならいくらでもあるのですが、CSS2時代の本が必要になったり。

2005年の発行ですが基本のレイアウトが丁寧に解説されていて、これを見ながら作っていました。今でも引っ張りだして参照しています。さすがにAmazonでももうマーケットプレイスにしか出てないようですが。。
a0026762_9591094.jpg


レイアウトは極力基本的なものにしておけば、大崩れを防げるし、作ってる本人がわけわかんなくなったりしないです(笑)
お家の形は平凡だけど丈夫だし、カラーコーディネートにこだわって、お庭やインテリアも工夫すればおしゃれになるよ、って感じでしょうか。変化は背景や画像の方でつけるようにしています。
[PR]
by usa-log | 2013-02-01 10:42 | デザインやなんかのこと | Comments(0)

IEはどこまで対応すべきなのか?と今夜も考える。

IE6のことはもう忘れることにしました。

9は何の問題もなし。8はなんとかなるでしょう。7でも案外だいじょぶです。いろんなPCブラウザに対応して、その上同じページがスマホでも見えるようにしてるんです。多少のことはしょーがないでしょ。基本、メニューが見えてボタンが押せればいい、というのが最低ラインをクリアだよ!な〜んて思ったのですが、見えるように作れば意外なくらい崩れないものみたいです。まぁ、さほど難しいことや凝った技を使ってないってことですが(笑)

せっかく作るならなるべく多くの人に見てもらいたいし、できれば心地よく見てほしいと思って作っています。わかりやすいとか便利で気が利いてるとか...できれば。

スマホは最新ブラウザなので美しいです。実際以上にキレイに見えてしまって、嬉しくなります。
a0026762_1253425.jpg


css3のプロパティで好んで使ってるのがborder-radius(角丸)と(RGBa)透過。背景を透過させたりするとほんのりベールがかかったような効果があって気に入ってます。IE7,8では対応してないのですが、背景が透けて見えないだけで問題はないので使っています。透過しない場合でもちゃんと文字が読めて、見た目が悪くない程度になるならいいってことにしています。

そして忘れちゃならないのがjQuery。まだまだほんの初心者ですが、こんな初心者にもそれなりの見た目のものが作れちゃうのがスゴいところ。
この画像の切り替わっていくのは簡単だけどいい感じです。
Black Flag様のサイトにお世話になりました。こんな技がどんどん作られているなんてほんとに感動だぁー!
ありがとうございます!

せっかくステキな技があるのに使わないのはもったいないじゃありませんか。開発者の皆様に申し訳ないじゃありませんか。できれば世界はきれいな方がいい。楽しいほうがいいに決まってる。Webだってね。

ってことで、IE7,8でも致命的不具合が出ない程度に、cssもjQueryもますます使っていきたいと思うのです。


※コピペを貼付けておけば便利かと思うのですが、このブログはscriptは一切受け付けてくれなかったんですよね。。そっちも考えないといけないのか。
[PR]
by usa-log | 2013-02-01 01:44 | デザインやなんかのこと | Comments(0)

IEはどこまで対応すべきなのか?と悩んで夜更かしした日。

できたら撲滅してほしいIE6ですが(笑)
強制的にアップグレードした、ってわりには「困っている」デザイナーさん、コーダーさんのブログなどよく見かけます。私もその一人です。

特にメディアクエリです。せっかくスマホ対応しようと苦労して書いたcssを読んでくれないので、とんでもないレイアウトになってしまい、昨夜も遅くまでいじいじと直していました。結局別のcssを読ませるしかないのですが、これもまた思った通りにならない。

結局8以前のものだけ別cssに。検証サイトで確認した限り、9には特に問題もなかったので。こちらでIEのいろんなバージョンが疑似体験(?)できます。
そう、疑似体験なのです。
MacとiPhoneしかないので、Windowsは友人知人にお願いしています。でも、第三者の目で見てもらうと、おおっ、気が付かなかったよ!ということがよくあります。感謝です。でもさすがにIE6とか7の知り合いはいないかも(笑)

Macはいろんなブラウザを同時に立ち上げられるので、いつもFirefoxとSafariで確認しています。それとiPhone4s。
でも昨夜は古いバージョンを見ていたので、ものは試しとMac版IEの最新バージョンで検証。この最新というのが、10年ほど前にアップグレードを終了したとんでもない最新版IE5.5(笑)
a0026762_18584852.jpg

なつかしいでしょう?ブラウザのカラーがiMacの色に変えられるアレです。
ボンダイブルーがデフォルトだったような?

大きい画像はこちら
せっかくなので見ておいてください(笑)ちなみにIE6でも文字はカクカクしてますが、どうにか見えています。
新しいブラウザ(FIrefoxとSafali)で見てもほとんど変わらないです。border-radiusのCSSはまだないけど...まあ、角が四角いだけで何の差し障りもありません。
捨てないでおいてよかった...mac版IE5.5やるじゃないですか!
[PR]
by usa-log | 2013-01-31 19:43 | デザインやなんかのこと | Comments(0)

巳年の年賀状って悩むよね?

年賀状も無事投函。来年もうさぎですよ、もちろん(笑)
a0026762_18334067.jpg

写真のうさぎは1cmほどの型抜き。せめてカラーをヘビっぽくしてみました。
メインのうさぎはまだ内緒。ちなみにヘビさんは1cmくらいになってます。ごめん、巳年さん。

辰、巳、ってデザイナーにとってはけっこう試練の年だと思う。
卯や戌、子や未なら文句なく可愛くできる。丑や寅なら柄だけで表現できるし。巳を柄で忠実に表現なんかしたら間違いなくキモいって言われるだろうなぁw

そういえばパン屋さんに「巳年パン」「辰年パン」っていうのが売ってました。白い生地をねじって結んで頭のあたりだけグリーン(抹茶かな?)になってたけど、ビミョ〜だった。。パン屋さんも「職人泣かせの干支だぜ」って思ったんじゃないかな。。

うさぎ、ネコ、クマ、コアラ、リス、アザラシ、ラッコ...なんてラインナップの干支だったらいいのにって思ったけどそれじゃシルバニアファミリーかw

チベットスナギツネ、コモドオオトカゲ、クロサイ、オオサンショウウオ、オタリア、スターゲイザー(魚)...なんて干支じゃなかったことに感謝しなくては、ね。(興味のある方はぐぐってみてください。すごいからw)

2013年のうさぎ王国カレンダー、1月です。
a0026762_18543087.jpg

Beads*usa-shop
勝手ながら12/29~1/4まで発送作業はお休みをいただきます。 12/28までに入金いただいた商品は必ず年内に発送いたします。休業中にご注文いただいた方には春の新作ミニカードをプレゼント。
[PR]
by usa-log | 2012-12-28 18:58 | うさぎ王国 | Comments(2)

家電量販店の謎。(商品分類編)

先日、プリンタローラーのクリーニングシートの話を書きました。こちら
おかげさまで快調です。心配したのが、400円くらいで直っちゃうんですもの。エレコムさんありがとう。

その日は隣の駅の家電量販店に急いで行ったのでした。プリンタ売り場はインクでお世話になってるから、迷いませんw インクもワンパック購入して、と。用紙売り場がなぜか遠い。

ずらーっっとすごい品揃え。さて、クリーニングシートはどこかな?と探します。

な  い  。

写真のプロ用の紙まで並んでるのだけど、ない。うーん、普通のA4の紙みたいなパッケージだったと思うんだけど?近くを通りかかったお店の人に訊いてみました。
「クリーニングシートはプリンタの周辺なんとかなので...こちらの売り場ですね」

  遠  い  。
5メートルとか10メートルって距離じゃないのは確かwプリンタ本体のコーナーを越えてエスカレーターの向こう。そして辿り着いたのはさっきのインクがあった場所でした。

周辺なんとかってなんだろう?紙は消耗品でこっちは違うのかな。いや、インクだってどんどん消耗していくし...。そもそもなんで紙とインクとセットで売ってないのかな?

これとこれが仲間に見えるのは私だけなんでしょうか。

a0026762_19132834.jpga0026762_19312517.jpg



こういうお店の商品分類、および陳列は文系ノロの頭にはまった理解できない。。。ワンダーランドw
[PR]
by usa-log | 2012-12-16 19:38 | ウサギの呪...ノロい | Comments(0)

twitterのウィジェット(旧タイプ)のh3

サイトにちっちゃい窓でtweetを埋め込むアレの話です。

まず最初にお断りしておきますが、すでにもっと新しいウィジェット「埋め込みタイムライン」が提供されています。
twitter→アカウント→プロフィールを編集→ウィジェットで簡単にタグが作成されます。
が。なんで使わないのかと言うとカラーの自由度が少なくてさびしい。。(白と黒しかないw)


先日、お客様のサイトに埋め込みを頼まれて、旧タイプをサイドバーに設置していました。背景色などを変更できるので、サイトに自然に溶け込む感じにできます。

その時の「へ?」ってなった話。
うちのサイトで再現してみます。(タグの話になっちゃうからつまんないかも...自分用に覚え書きです)

a0026762_11531858.jpg
むむっ?名前の背後のヘンな模様はなにっ!
しかもミョ〜な間があいている。
不審に思ってソースを開いてみると、
a0026762_11542077.jpg

名前の前後が h3 タグで囲まれています。

a0026762_1155537.jpg
サイト内ではすでに h3 タグを使用中。cssは後から指定したもの優先なので、 head 内で指定した背景画像まで、ウィジェットのcssが引っ張ってきちゃったもよう。

h3 {
font-size: 110%;
color: #7E4049;
font-weight: normal;
line-height: 260%;
padding-left: 100px;
background-image: url(usagi_icons/berry/berry.gif);
background-repeat: no-repeat;
background-position: 0px;
clear: both;
}

文字指定、背景画像指定、さらに写真の回り込みまで解除してるせいで間が空いてしまいます。文字はウィジェットの指定になっているようです。

リンクしているcssをいじってしまうと、他のhtmlファイルまで変更しなくてはなりません。仕方ないのでトップページのみ、 h3 にclass usagi を指定することにします。

h3 {
font-size: 110%;
color: #7E4049;
background-image: none;
line-height: 260%;
padding-left: 100px;
font-weight: normal;
clear: none;
}
一度、背景画像をナシにして回り込み解除もナシ。

.usagi {
background-image: url(usagi_icons/berry/berry.gif);
background-repeat: no-repeat;
background-position: 0px;
clear: both;
}
あらためて、classで指定し直し。

これで
a0026762_12185253.jpg

きれいになりました!


早く「埋め込みタイムライン」のカスタマイズができるようになるといいですね。


ということを書いていたら、タグに使う< >を使用するとそのままタグとして認識されてしまい、h3という文字を表示したいのに、以後の文章がブログが指定しているh3の太字で表示されてしまってわけわかんないことに。。。(^^;
[PR]
by usa-log | 2012-11-15 12:25 | デザインやなんかのこと | Comments(0)

ティーバッグのユニバーサルデザインについて考えた。

先日、ホテルのビュッフェでランチする機会がありました。
ああいうとこって、飲み物類はコーヒーはサーバーに入れて保温プレートに載って、お茶はティーバッグがずらっと並んで、ポットが置いてあるのですね。

紅茶にしようと、カップを手に取ってティーバッグの前まで来たら、年配の女性に「普通の紅茶はどれでしょう?」と訊かれました。
a0026762_1827048.jpg
赤っぽいパッケージがシナモンアップルティー、紫色のパッケージがダージリン、グリーンは緑茶。
文字も小さいしトワイニングのダージリンが紫色って知らないとちょっとわかりにくいかも。そもそもダージリンって書いてあっても「紅茶」とは表記してないしw

人間は
赤い文字でと書いてある場合赤、と認識し
青い文字でと書いてある場合青、と文字よりも色優先で認識する...とどこかで読んだと思うのです。

トワイニング社は色で種類を表示してますよね。オレンジ色ならオレンジペコ、これはわかりやすい(笑)
でもそれを単独で持ってくると迷ってしまう。紫色から紅茶はイメージしにくいです。
a0026762_1864867.jpg
黄色に赤、あのお約束のブランドの方がわかりやすいに違いない。

ひとこと「紅茶」って書いてあれば済む問題なのだけど、業務用紅茶のパッケージを急遽変更もできないかと思われます。いっそ手書きのポップ(?)で「アップルシナモンティー 〜りんごの風味とシナモンが効いた季節のおすすめ〜」なんて説明してしまった方が親切だし選ぶ方も楽しい。

こういう仕事してるからデザインの利便性はやっぱり気になります。
小難しい本読んでわかった気になるよりも、街へでて体験することだなぁって。ビュッフェのドリンクコーナーで思いっきり学んだのでした。


しかし...です。
「限定ロールケーキ、1時半からパティシエが目の前でお作りします」というご案内を係の人が席まで来て教えてくれたのにもかかわらず。。。
気がついたらそこかしこの席にゴージャスなロールケーキのお皿が置かれている、今すれ違った女性はロールケーキのお皿を持っていたよね?
なのに。
どうして「終了いたしました」になる?・゜・(。´ノω・`)。ウウゥゥ
[PR]
by usa-log | 2012-11-01 17:53 | デザインやなんかのこと | Comments(0)