タグ別アーカイブ: デザイン

_r10_c18

CSSでかわいいリストマーク

かわいいリストマークのやり方です。
疑似要素で実装します。
例えば、ul, liのliにリストマークが出ますよね。
あんまりかわいくないので、かわいくしたいなあ〜という時に使えるテクニックです。
画像でも作れますが、リストが増えるたびに毎回画像を作らないといけないので、めんどくさい。それに若干だけど、画像なのでサイトが重くなる。

cssでかわいい疑似要素リストマークを作っちゃいましょう。

マナカデザインの備忘録http://manakaa.com/tips.html

興味のある方は見て下さい。そんなに難しくないので、やってみて下さい。
cssはFireBugで見て下さい。

manakadesign

府中でホームページ制作

自分のサイトができました。キャッチコピーやいろいろと手直ししたいですが、完璧にできるまでをまっていてもその時は来ない(上を見ている以上)なので、一応これで完成です。紙媒体と違い後から何度でも修正、変更できるのがweb siteのいい所。

manakadesign

http://manakaa.com/
http://blog.livedoor.jp/happygolucky1969/archives/52401162.html

css color change

テキストを選択したときの色をCSSで自分の好きな色に変える

この前の勉強会でジェイコさんに知ってる?って聞いたら知らないといってたので、意外とみんな知らないのかな?と思いメモしておきます。

テキストを選択したときの色をCSSで自分の好きな色に変えれる事を知ってますか?
僕がお仕事で制作したサイトhttp://juicyeyes.com/サイトのイメージに合わせた色にしました。
テキストを選択してみてください。

Q. そんな事をして何かいいことあるの?
A. 特にありません、多分。クライアントさんにも気づいてもらってない。(笑)!….ただの自己満足に近い。….でもいいじゃないか。

文字を選択してみて↓

柿くえば 鐘がなるなり 法隆寺
古池や蛙飛びこむ水の音
朝顔に つるべとられて もらい水

Picture 7

CSS3でロングシャドーデザインのアイコンを作る

8/23日の勉強会でのicomoonの続きです。
今回は自分で作った画像をicomoonを使ってアイコンフォントにしてみます。

目次

  1. イラストレーターでアイコンを作る
  2. アイコン画像をSVGファイル形式で書き出す
  3. icomoonに画像をupする
  4. サイトに実装してみる
  5. 更に!アイコンをCSS3で流行りのロングシャドーデザインに変えてみる

1.イラストレーターでアイコンを作る

形はなるべく単純に、隙間などは広めにとります。
また時々縮小してみてバランスを確認します。
私は300px×300pxでこんなのを作ってみました。
続きを読む

アンディ-ウォーホル-キャンベルスープi-1968

アメリカン・ポップ・アート展

デザイナー必見
http://www.tbs.co.jp/american-pop-art2013/

この仕事(webデザイナー)をする前は、絵を描いたりアートは好きでしたが、わざわざ美術館に足を運ぶことはしませんでした。2,3年前にタイポグラフィー展に行ったのをきっかけに、ちょくちょく行くようになりました。そんなの本やネットでも見れるじゃん!という意見もあると思いますが、本物をまじかで見ると作品のもつ力を感じとれますよ。音楽と同じだと思います。どんなに良いライブのDVDやCDがあったとしてもライブ会場での感動には足元にも及ばない。

料理家が美味しい物を作る為に常に食べ歩きをしていたり、音楽家がいい音楽を作る為に常に色んな音楽を聞くように、よいデザインをしたいのであれば、よいものを見る為に美術館に足を運ぶというのは大事なことだと思います。ただ、見に行ったからといってすぐによいデザインが出来るわけではありませんが、デザイナーとしてなにかプラスになると思います。

zzz2

トップページのアイキャッチ画像をカスタマイズします。2013-07-31

①初めてみた人にアピールできるような内容にします。例えば「会員募集中!」とか,
他にはクラブ内容が一目でわかる様なものです。
②現在画像がリンクになっていないので、リンクにします。

僕が担当することになりました。
front-page-php
style.css
この辺りをカスタマイズ。

—————————
という事で、ファイルを見てみましたが全く見当がつきませんでした。

favi

htmlファイルにfaviconの設定しよう

WPでは簡単にファビコンの設定ができます。以前、記事にも書きました。
WP Twenty Twelve 簡単にファビコンを設置出来るプラグイン”All in one Favicon”

WPではなく普通にhtmlで作成した場合は、上記の様に簡単ではありません。(とは言っても簡単です)

イラレ等で作成したイラストを自動でファビコン用のファイルに生成してくれる無料のサービスがあります。僕はいつも、こちらにお世話になっております。
http://ao-system.net/favicon/index.php

是非チャレンジしてみて下さい!

php

TOPページのデザインを変更しました

front-page.phpを編集し「パソコン倶楽部りんご」TOPページのaside部分を最新の投稿5件に変更して、カテゴリー、タグ、投稿者を表示するようにし、コメントも最新の5件を表示させました。これに伴い、Front-page用のウィジェットエリアに入れていた、投稿とコメントのウィジェットは削除しました。
また、「おすすめ」というタグを作成しておいたので、りんごユーザーの人は、自分がお勧めしたい投稿に「おすすめ」タグをつけて下さい。数が揃ったら、上記のaside内などに表示してみます。

Mr. eyechatch

アイキャッチがある単独ページではヘッダー画像を表示しない

WordPressで複数ヘッダー画像をcssスライドショーで動かすで設定したヘッダー画像ですが、投稿にアイキャッチを入れることにした為、アイキャッチがある場合は邪魔になってきました。
そこでheader.phpを編集し、アイキャッチがある単独ページの場合はヘッダー画像を表示しないようにしてみました。

study

2013-3-8勉強会

今日は、新メンバーのKIKOさんが参加されました。
お菓子が今回も更に充実!! KIKOさんからもたくさんいただきました!
KIKOさんは元漫画家さんという事で、イラスト作品も拝見させていただきました。さすがプロ!!

議題は以下の通り

  • KIKOさんのマッサージ治療院のチラシデザインについて
  • キャラメルメープルポップコーンのパッケージでマークアップとCSSの筋トレ
  • サイトのTOPページをWwordPressにしたい
  • WwordPressのユーザー一覧ページを作る

です。 続きを読む

3/8勉強会 治療院チラシ

新メンバーのKIKOです。

今日の勉強会では、私が友人に頼まれたチラシについてアドバイスをいただきましたので、まとめを書きます。

・まずターゲット 誰に読んでほしいのか?を明確にすること。

・どんなシーンで使うのか?-ポスティングなのか、店の中に貼るのかなども考える。

・アイキャッチで注目をひく。まずは目にとまらせる。

ー基本面積の2/3使い、キャッチコピーがかぶってもいい。

-魅力的な顔のアップが強い。または文字だけで魅せる。

・ジャンプ率ー見出しは強力なメッセージになる。大きい方がアイキャッチ効果がある。読みやすい。本文は小さい文字でいい。

・箱組ー左右、上下のラインを揃える。これは意識しないと揃えられない。

・フォントの種類は多くても3種類。少ない方がいい。

・色の種類もあまり使わない。カラーポリシーがないのはだめ。

・ホワイトスペースを考える。はじまで文字を入れない。何かに注目させるために余白を作る。

・ドロップシャドウは使わない。

自分のチラシの悪かった点

・アイキャッチが弱い。

・ジャンプ率が低い。

・本文の文字はもっと小さくていい。→本文の文字も大きくしなくてはと思い(小さくするのが怖くて) 結果、すべてが同じ大きさになりアイキャッチがなくなってしまった。

・箱組ができていない。縦横のラインが揃ってなくてジグザグだった。

・ターゲットが曖昧だった。

・治療院の前の看板にさしておくチラシなので、治療院の名前は小さくてもいいとのこと。(院名を大きくすることばかり考えてました)

→チラシの目的、役割を整理すること!!

以上です。今日のアドバイスをふまえて、作り直してみます!!

タカハシ先生、今日のメンバーの皆さん、本当にありがとうございました!初参加の私に、皆さんフレンドリーに接してくれて、とても楽しかったです。正直、学校よりもためになる、内容の濃いすばらしい勉強会でした。また参加させてください!!

スクロールバーカスタマイズ

パソコンのデフォルトのスクロールバーってダサいですよね。変な青いやつ。
コンテンツ内にoverflow-y:scroll;などとしてスクロールバーを表示させた時
あの青いのが出てくるとデザインが台無しです~。

jQでいいのがないか探してみたら
http://kachibito.net/web-design/tiny-scrollbar.html
が良さそうなんですが、使い方がいまいちわかりません。
本サイトのダウンロードボタン押しても????だし。
http://baijs.nl/tinyscrollbar/

今度の新年会の授業でお願いしまーす。 続きを読む